From fdff957aaf65cacc7343abc0b5b95edcb1130cee Mon Sep 17 00:00:00 2001 From: bireworld Date: Fri, 20 Nov 2020 17:46:52 +0000 Subject: [PATCH 1/3] student profile added --- src/component/StudentProfile.js | 43 +++++++++++++++++++++++++++++++++ src/main.jsx | 4 ++- 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/component/StudentProfile.js diff --git a/src/component/StudentProfile.js b/src/component/StudentProfile.js new file mode 100644 index 0000000..dc4455b --- /dev/null +++ b/src/component/StudentProfile.js @@ -0,0 +1,43 @@ +import React, { useState, useEffect } from "react"; + +const StudentProfile=({profile})=>{ + + const [newProfile, setNewProfile] = useState({ + "student_id": 1, + "name": "student 1", + "assignment": [ 3,8,9,7,7,8,5,7,9,7,0,8,6,5,8,6 ], + "attendance": ["Late", "Yes", "No", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes"], + "email": "Student1@gmail.com" + }); + +// useEffect(() => { +// fetch(`url/${profile}`) +// .then(res => res.json()) +// .then(data => { +// setNewProfile(data); +// console.log(data); +// }); +// }, [profile]); +// console.log(newProfile.assignment.reduce((acc,curr) => acc+curr,0)/newProfile.assignment.reduce((acc,curr) => {if(curr>0) { return acc++}; console.log(acc);},0)) +// console.log(newProfile.assignment.reduce((acc,curr) =>{if(curr>0) { return acc++}}) +// console.log(newProfile.assignment.reduce((acc,curr) => acc+curr,0)) +//const reducer = (acc,curr)=>acc + curr; + + if (newProfile) { + return ( +
+ Student Profile{" "} + {" "} +
+ ); + +} + return null; + }; +export default StudentProfile; \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index e5781bf..6c99daa 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,12 +1,14 @@ import React from 'react' import Data from './Data.json' import './main.css' +import StudentProfile from './component/StudentProfile' function main(){ return(
-
+ {/*
*/} +
From 077183653e73082cedaa6902634fa11cb9b7b31b Mon Sep 17 00:00:00 2001 From: bireworld Date: Mon, 23 Nov 2020 20:42:40 +0000 Subject: [PATCH 2/3] viewprofile added --- package-lock.json | 625 ++++++++++++++++++++++++++++++++ package.json | 1 + src/component/StudentProfile.js | 162 +++++++-- src/component/ViewProfile.js | 155 ++++++++ src/component/profiledata.json | 30 ++ src/component/viewprofile.css | 39 ++ src/index.css | 3 + src/main.jsx | 6 + 8 files changed, 995 insertions(+), 26 deletions(-) create mode 100644 src/component/ViewProfile.js create mode 100644 src/component/profiledata.json create mode 100644 src/component/viewprofile.css diff --git a/package-lock.json b/package-lock.json index b5a9ca1..10bb1f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,49 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@ant-design/colors": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-5.0.0.tgz", + "integrity": "sha512-Pe1rYorgVC1v4f+InDXvIlQH715pO1g7BsOhy/ehX/U6ebPKqojmkYJKU3lF+84Zmvyar7ngZ28hesAa1nWjLg==", + "requires": { + "@ctrl/tinycolor": "^3.1.6" + } + }, + "@ant-design/css-animation": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.3.tgz", + "integrity": "sha512-LrX0OGZtW+W6iLnTAqnTaoIsRelYeuLZWsrmBJFUXDALQphPsN8cE5DCsmoSlL0QYb94BQxINiuS70Ar/8BNgA==" + }, + "@ant-design/icons": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.3.0.tgz", + "integrity": "sha512-UoIbw4oz/L/msbkgqs2nls2KP7XNKScOxVR54wRrWwnXOzJaGNwwSdYjHQz+5ETf8C53YPpzMOnRX99LFCdeIQ==", + "requires": { + "@ant-design/colors": "^5.0.0", + "@ant-design/icons-svg": "^4.0.0", + "@babel/runtime": "^7.11.2", + "classnames": "^2.2.6", + "insert-css": "^2.0.0", + "rc-util": "^5.0.1" + } + }, + "@ant-design/icons-svg": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz", + "integrity": "sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==" + }, + "@ant-design/react-slick": { + "version": "0.27.14", + "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-0.27.14.tgz", + "integrity": "sha512-s6JVexqFmU5rs5Pm828ojtm5rCp8jDXyrc5OxEtCE2z58SIyQlkpnU9BJh98LEeBZyj02WFkGN8CWpSaD+G4PA==", + "requires": { + "@babel/runtime": "^7.10.4", + "classnames": "^2.2.5", + "json2mq": "^0.2.0", + "lodash": "^4.17.15", + "resize-observer-polyfill": "^1.5.0" + } + }, "@babel/code-frame": { "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", @@ -1168,6 +1211,11 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@ctrl/tinycolor": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.1.7.tgz", + "integrity": "sha512-/0C6fjXbCwu22k8mMsKRSAo9zgu61d2p75Or9IuIC0Vu5CWN88t2QHK93LhNnxnqHWf5SFwFU28w9cKfTmnfvg==" + }, "@eslint/eslintrc": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz", @@ -2701,6 +2749,14 @@ "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==" }, + "add-dom-event-listener": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz", + "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==", + "requires": { + "object-assign": "4.x" + } + }, "address": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz", @@ -2788,6 +2844,58 @@ "color-convert": "^1.9.0" } }, + "antd": { + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/antd/-/antd-4.8.4.tgz", + "integrity": "sha512-7GlxN/WxJ3cE32echN+6cNgLkwtgU5/4UB1YSzhtENWH1cO8PHIJ+t1/Ba3tfa/BwWUHvA7ku/sKACwptqtw1g==", + "requires": { + "@ant-design/colors": "^5.0.0", + "@ant-design/css-animation": "^1.7.2", + "@ant-design/icons": "^4.3.0", + "@ant-design/react-slick": "~0.27.0", + "@babel/runtime": "^7.11.2", + "array-tree-filter": "^2.1.0", + "classnames": "^2.2.6", + "copy-to-clipboard": "^3.2.0", + "lodash": "^4.17.20", + "moment": "^2.25.3", + "omit.js": "^2.0.2", + "raf": "^3.4.1", + "rc-animate": "~3.1.0", + "rc-cascader": "~1.4.0", + "rc-checkbox": "~2.3.0", + "rc-collapse": "~2.0.0", + "rc-dialog": "~8.4.0", + "rc-drawer": "~4.1.0", + "rc-dropdown": "~3.2.0", + "rc-field-form": "~1.15.0", + "rc-image": "~4.0.0", + "rc-input-number": "~6.1.0", + "rc-mentions": "~1.5.0", + "rc-menu": "~8.10.0", + "rc-motion": "^2.2.0", + "rc-notification": "~4.5.2", + "rc-pagination": "~3.1.0", + "rc-picker": "~2.3.0", + "rc-progress": "~3.1.0", + "rc-rate": "~2.9.0", + "rc-resize-observer": "^0.2.3", + "rc-select": "~11.4.0", + "rc-slider": "~9.6.1", + "rc-steps": "~4.1.0", + "rc-switch": "~3.2.0", + "rc-table": "~7.11.0", + "rc-tabs": "~11.7.0", + "rc-textarea": "~0.3.0", + "rc-tooltip": "~5.0.0", + "rc-tree": "~3.11.0", + "rc-tree-select": "~4.1.1", + "rc-upload": "~3.3.1", + "rc-util": "^5.1.0", + "scroll-into-view-if-needed": "^2.2.25", + "warning": "^4.0.3" + } + }, "anymatch": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", @@ -2854,6 +2962,11 @@ "is-string": "^1.0.5" } }, + "array-tree-filter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz", + "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==" + }, "array-union": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", @@ -3030,6 +3143,11 @@ "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" }, + "async-validator": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.1.tgz", + "integrity": "sha512-DDmKA7sdSAJtTVeNZHrnr2yojfFaoeW8MfQN8CeuXg8DDQHTqKk9Fdv38dSvnesHoO8MUwMI2HphOeSyIF+wmQ==" + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -3955,6 +4073,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -4168,6 +4291,11 @@ } } }, + "compute-scroll-into-view": { + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz", + "integrity": "sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ==" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -4282,6 +4410,14 @@ "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=" }, + "copy-to-clipboard": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", + "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "requires": { + "toggle-selection": "^1.0.6" + } + }, "core-js": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.7.0.tgz", @@ -4746,6 +4882,16 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz", + "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==" + }, + "dayjs": { + "version": "1.9.6", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.9.6.tgz", + "integrity": "sha512-HngNLtPEBWRo8EFVmHFmSXAjtCX8rGNqeXQI0Gh7wCTSqwaKgPIDqu9m07wABVopNwzvOeCb+2711vQhDlcIXw==" + }, "debug": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz", @@ -5022,6 +5168,11 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz", "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==" }, + "dom-align": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz", + "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA==" + }, "dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -7023,6 +7174,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -7561,6 +7720,11 @@ } } }, + "insert-css": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", + "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ=" + }, "internal-ip": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz", @@ -9528,6 +9692,14 @@ "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=" }, + "json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=", + "requires": { + "string-convert": "^0.2.0" + } + }, "json3": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz", @@ -9994,6 +10166,15 @@ } } }, + "mini-store": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-3.0.6.tgz", + "integrity": "sha512-YzffKHbYsMQGUWQRKdsearR79QsMzzJcDDmZKlJBqt5JNkqpyJHYlK6gP61O36X+sLf76sO9G6mhKBe83gIZIQ==", + "requires": { + "hoist-non-react-statics": "^3.3.2", + "shallowequal": "^1.0.2" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -10102,6 +10283,11 @@ "minimist": "^1.2.5" } }, + "moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -10526,6 +10712,11 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "omit.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-2.0.2.tgz", + "integrity": "sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==" + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -12239,6 +12430,399 @@ } } }, + "rc-align": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.9.tgz", + "integrity": "sha512-myAM2R4qoB6LqBul0leaqY8gFaiECDJ3MtQDmzDo9xM9NRT/04TvWOYd2YHU9zvGzqk9QXF6S9/MifzSKDZeMw==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "2.x", + "dom-align": "^1.7.0", + "rc-util": "^5.3.0", + "resize-observer-polyfill": "^1.5.1" + } + }, + "rc-animate": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.1.1.tgz", + "integrity": "sha512-8wg2Zg3EETy0k/9kYuis30NJNQg1D6/WSQwnCiz6SvyxQXNet/rVraRz3bPngwY6rcU2nlRvoShiYOorXyF7Sg==", + "requires": { + "@ant-design/css-animation": "^1.7.2", + "classnames": "^2.2.6", + "raf": "^3.4.0", + "rc-util": "^4.15.3" + }, + "dependencies": { + "rc-util": { + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.21.1.tgz", + "integrity": "sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==", + "requires": { + "add-dom-event-listener": "^1.1.0", + "prop-types": "^15.5.10", + "react-is": "^16.12.0", + "react-lifecycles-compat": "^3.0.4", + "shallowequal": "^1.1.0" + } + } + } + }, + "rc-cascader": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-1.4.0.tgz", + "integrity": "sha512-6kgQljDQEKjVAVRkZtvvoi+2qv4u42M6oLuvt4ZDBa16r3X9ZN8TAq3atVyC840ivbGKlHT50OcdVx/iwiHc1w==", + "requires": { + "array-tree-filter": "^2.1.0", + "rc-trigger": "^5.0.4", + "rc-util": "^5.0.1", + "warning": "^4.0.1" + } + }, + "rc-checkbox": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.3.1.tgz", + "integrity": "sha512-i290/iTqmZ0WtI2UPIryqT9rW6O99+an4KeZIyZDH3r+Jbb6YdddaWNdzq7g5m9zaNhJvgjf//wJtC4fvve2Tg==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.1" + } + }, + "rc-collapse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-2.0.1.tgz", + "integrity": "sha512-sRNqwQovzQoptTh7dCwj3kfxrdor2oNXrGSBz+QJxSFS7N3Ujgf8X/KlN2ElCkwBKf7nNv36t9dwH0HEku4wJg==", + "requires": { + "@ant-design/css-animation": "^1.7.2", + "classnames": "2.x", + "rc-animate": "3.x", + "rc-util": "^5.2.1", + "shallowequal": "^1.1.0" + } + }, + "rc-dialog": { + "version": "8.4.3", + "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.4.3.tgz", + "integrity": "sha512-LHsWXb+2Cy4vEOeJcPvk9M0WSr80Gi438ov5rXt3E6XB4j+53Z+vMFRr+TagnVuOVQRCLmmzT4qutfm2U1OK6w==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.6", + "rc-motion": "^2.3.0", + "rc-util": "^5.0.1" + } + }, + "rc-drawer": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-4.1.0.tgz", + "integrity": "sha512-kjeQFngPjdzAFahNIV0EvEBoIKMOnvUsAxpkSPELoD/1DuR4nLafom5ryma+TIxGwkFJ92W6yjsMi1U9aiOTeQ==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.6", + "rc-util": "^5.0.1" + } + }, + "rc-dropdown": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.2.0.tgz", + "integrity": "sha512-j1HSw+/QqlhxyTEF6BArVZnTmezw2LnSmRk6I9W7BCqNCKaRwleRmMMs1PHbuaG8dKHVqP6e21RQ7vPBLVnnNw==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.6", + "rc-trigger": "^5.0.4" + } + }, + "rc-field-form": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.15.1.tgz", + "integrity": "sha512-V3Kfryynig7JJichGq/L8yFHpBzmWybWBtI2KjLPCX5S7nibIQPa0J8JNiHmN5kS73apjhKx1do6L7E0EILJ6Q==", + "requires": { + "@babel/runtime": "^7.8.4", + "async-validator": "^3.0.3", + "rc-util": "^5.0.0" + } + }, + "rc-image": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-4.0.1.tgz", + "integrity": "sha512-1GxjwgtONtJjlvd7sM9VSLTAlDQhkqHI0wl72YSDpdm24w5zmDsTYLgTNh/vToFa9qAml10Gaidy03qpkTAQ+A==", + "requires": { + "@ant-design/icons": "^4.2.2", + "@babel/runtime": "^7.11.2", + "classnames": "^2.2.6", + "rc-dialog": "~8.4.0", + "rc-util": "^5.0.6" + } + }, + "rc-input-number": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-6.1.1.tgz", + "integrity": "sha512-9t2xf1G0YEism7FAXAvF1huBk7ZNABPBf6NL+3/aDL123WiT/vhhod4cldiDWTM1Yb2EDKR//ZIa546ScdsUaA==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.5", + "rc-util": "^5.0.1" + } + }, + "rc-mentions": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.5.2.tgz", + "integrity": "sha512-GqV0tOtHY3pLpOsFCxJ2i6Ad8AVfxFmz0NlD/8rb8IG8pMpthJKcdfnXlNZRx3Fa9O4YEgJpdSY1WEbmlx2DWQ==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.6", + "rc-menu": "^8.0.1", + "rc-textarea": "^0.3.0", + "rc-trigger": "^5.0.4", + "rc-util": "^5.0.1" + } + }, + "rc-menu": { + "version": "8.10.0", + "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-8.10.0.tgz", + "integrity": "sha512-mafcLoKtVlH9HDW52NmwenQ9vjvgxtR46NfYAexJEIUTZ9Ze2veZUkEKjhOJlzrUHEYtCoNslpqyy4iVN08Glw==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "2.x", + "mini-store": "^3.0.1", + "omit.js": "^2.0.0", + "rc-motion": "^2.0.1", + "rc-trigger": "^5.1.2", + "rc-util": "^5.0.1", + "resize-observer-polyfill": "^1.5.0", + "shallowequal": "^1.1.0" + } + }, + "rc-motion": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.1.tgz", + "integrity": "sha512-TWLvymfMu8SngPx5MDH8dQ0D2RYbluNTfam4hY/dNNx9RQ3WtGuZ/GXHi2ymLMzH+UNd6EEFYkOuR5JTTtm8Xg==", + "requires": { + "@babel/runtime": "^7.11.1", + "classnames": "^2.2.1", + "rc-util": "^5.2.1" + } + }, + "rc-notification": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.5.4.tgz", + "integrity": "sha512-VsN0ouF4uglE5g3C9oDsXLNYX0Sz++ZNUFYCswkxhpImYJ9u6nJOpyA71uOYDVCu6bAF54Y5Hi/b+EcnMzkepg==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "2.x", + "rc-motion": "^2.2.0", + "rc-util": "^5.0.1" + } + }, + "rc-pagination": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.1.2.tgz", + "integrity": "sha512-KbJvkTvRiD51vTIAi0oTARPUHNb0iV6njbDBe8yLkc3PWYDJaszASfuss6YJ98EIxEeGzuEk6xsUAEKWRJgz2g==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.1" + } + }, + "rc-picker": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-2.3.4.tgz", + "integrity": "sha512-UdeqTzR9E5KHOGMjWfsMpE3VU+3VR3J5/wMrwuIRmL8orv9Tm+Gew3NPfs7djcuTrfnu+hL+lwCWp7VftZcSng==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.1", + "date-fns": "^2.15.0", + "dayjs": "^1.8.30", + "moment": "^2.24.0", + "rc-trigger": "^5.0.4", + "rc-util": "^5.4.0", + "shallowequal": "^1.1.0" + } + }, + "rc-progress": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.1.1.tgz", + "integrity": "sha512-1ns3pW7ll9bHfdXtlVLF+vngdvlxiCDtiqwXnZFEdurst11JTiPxVdeqnCNbhWx5hP4kCKkAPqG1N0FVfTSUGA==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.6" + } + }, + "rc-rate": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.9.1.tgz", + "integrity": "sha512-MmIU7FT8W4LYRRHJD1sgG366qKtSaKb67D0/vVvJYR0lrCuRrCiVQ5qhfT5ghVO4wuVIORGpZs7ZKaYu+KMUzA==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.5", + "rc-util": "^5.0.1" + } + }, + "rc-resize-observer": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-0.2.6.tgz", + "integrity": "sha512-YX6nYnd6fk7zbuvT6oSDMKiZjyngjHoy+fz+vL3Tez38d/G5iGdaDJa2yE7345G6sc4Mm1IGRUIwclvltddhmA==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.1", + "rc-util": "^5.0.0", + "resize-observer-polyfill": "^1.5.1" + } + }, + "rc-select": { + "version": "11.4.2", + "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-11.4.2.tgz", + "integrity": "sha512-DQHYwMcvAajnnlahKkYIW47AVTXgxpGj9CWbe+juXgvxawQRFUdd8T8L2Q05aOkMy02UTG0Qrs7EZfHmn5QHbA==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "2.x", + "rc-motion": "^2.0.1", + "rc-trigger": "^5.0.4", + "rc-util": "^5.0.1", + "rc-virtual-list": "^3.2.0", + "warning": "^4.0.3" + } + }, + "rc-slider": { + "version": "9.6.3", + "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.6.3.tgz", + "integrity": "sha512-qLEDQ6FKPDmzWgF7WQ8otf41z53YKSgiSeoec50H1IMz7xLwwXX9+luDYI08br3x8i6u8jIZtggN5RD1ftKnhw==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.5", + "rc-tooltip": "^5.0.1", + "rc-util": "^5.0.0", + "shallowequal": "^1.1.0" + } + }, + "rc-steps": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-4.1.3.tgz", + "integrity": "sha512-GXrMfWQOhN3sVze3JnzNboHpQdNHcdFubOETUHyDpa/U3HEKBZC3xJ8XK4paBgF4OJ3bdUVLC+uBPc6dCxvDYA==", + "requires": { + "@babel/runtime": "^7.10.2", + "classnames": "^2.2.3", + "rc-util": "^5.0.1" + } + }, + "rc-switch": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-3.2.2.tgz", + "integrity": "sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.1", + "rc-util": "^5.0.1" + } + }, + "rc-table": { + "version": "7.11.2", + "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.11.2.tgz", + "integrity": "sha512-srOWkqgDQU6OA+gpc4MsaZXFw6TRC9NizbytvFCAg+Ra06cOVnD+MVYimAnjM9GeTPHgU+yc17xr/VkUYCRbYQ==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.5", + "rc-resize-observer": "^0.2.0", + "rc-util": "^5.4.0", + "shallowequal": "^1.1.0" + } + }, + "rc-tabs": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.7.1.tgz", + "integrity": "sha512-ZLQ5ou70j32GKcOKRZvd5JQZOJhcDy62dr9kqiWDvt6g5v8LkpxIGAc0dWtCWOEWkO/QezwuNqWufMborkfrnQ==", + "requires": { + "@babel/runtime": "^7.11.2", + "classnames": "2.x", + "raf": "^3.4.1", + "rc-dropdown": "^3.1.3", + "rc-menu": "^8.6.1", + "rc-resize-observer": "^0.2.1", + "rc-util": "^5.5.0" + } + }, + "rc-textarea": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-0.3.1.tgz", + "integrity": "sha512-bO5Ol5uD6A++aWI6BJ0Pa/8OZcGeacP9LxIGkUqkCwPyOG3kaLOsWb8ya4xCfrsC2P4vDTsHsJmmmG5wuXGFRg==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.1", + "omit.js": "^2.0.0", + "rc-resize-observer": "^0.2.3" + } + }, + "rc-tooltip": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-5.0.1.tgz", + "integrity": "sha512-3AnxhUS0j74xAV3khrKw8o6rg+Ima3nw09DJBezMPnX3ImQUAnayWsPSlN1mEnihjA43rcFkGM1emiKE+CXyMQ==", + "requires": { + "@babel/runtime": "^7.11.2", + "rc-trigger": "^5.0.0" + } + }, + "rc-tree": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-3.11.0.tgz", + "integrity": "sha512-3RxA6fckbzX7WOk7g4gvO6AOad0znc8QW2nsv1IXSiljQaIMiyx1AK0zhzIEtABgWKbIs9QkhnBvIAHS4Rn9LA==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "2.x", + "rc-motion": "^2.0.1", + "rc-util": "^5.0.0", + "rc-virtual-list": "^3.0.1" + } + }, + "rc-tree-select": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-4.1.3.tgz", + "integrity": "sha512-vk/T1vHNvuBZyoq8CvOF6iaiyVe6Y8QmQflTYFgabVsTJ1d/obkO9tAXOvJELZgKJ9ljduDVaAZAgcq0Yap+mg==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "2.x", + "rc-select": "^11.1.1", + "rc-tree": "^3.8.0", + "rc-util": "^5.0.5" + } + }, + "rc-trigger": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.1.2.tgz", + "integrity": "sha512-A6UdDy95masAEIaNmazPtqHW1EOFDWi2C2bJGDpr9OYpmObDpWKdxyNijVbFb6l1viTkAU9d3FyStgNPddgFzw==", + "requires": { + "@babel/runtime": "^7.11.2", + "classnames": "^2.2.6", + "rc-align": "^4.0.0", + "rc-motion": "^2.0.0", + "rc-util": "^5.5.0" + } + }, + "rc-upload": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-3.3.1.tgz", + "integrity": "sha512-KWkJbVM9BwU8qi/2jZwmZpAcdRzDkuyfn/yAOLu+nm47dyd6//MtxzQD3XZDFkC6jQ6D5FmlKn6DhmOfV3v43w==", + "requires": { + "@babel/runtime": "^7.10.1", + "classnames": "^2.2.5", + "rc-util": "^5.2.0" + } + }, + "rc-util": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.5.0.tgz", + "integrity": "sha512-YJB+zZGvCll/bhxXRVLAekr7lOvTgqMlRIhgINoINfUek7wQvi5sft46NOi3yYUYhocpuW4k8+5okW46sBsZAQ==", + "requires": { + "react-is": "^16.12.0", + "shallowequal": "^1.1.0" + } + }, + "rc-virtual-list": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.2.2.tgz", + "integrity": "sha512-OepvZDQGUbQQBFk5m2Ds32rfO/tSj9gZkLbzwaIw/hwGgvatDmW+j97YQvFkUQp/XDgdSGcfFfj/6XTKpz0J4g==", + "requires": { + "classnames": "^2.2.6", + "rc-resize-observer": "^0.2.3", + "rc-util": "^5.0.7" + } + }, "react": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz", @@ -12366,6 +12950,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -12797,6 +13386,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", @@ -13299,6 +13893,14 @@ "ajv-keywords": "^3.5.2" } }, + "scroll-into-view-if-needed": { + "version": "2.2.26", + "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.26.tgz", + "integrity": "sha512-SQ6AOKfABaSchokAmmaxVnL9IArxEnLEX9j4wAZw+x4iUTb40q7irtHG3z4GtAWz5veVZcCnubXDBRyLVQaohw==", + "requires": { + "compute-scroll-into-view": "^1.0.16" + } + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -13481,6 +14083,11 @@ "kind-of": "^6.0.2" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -14021,6 +14628,11 @@ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" }, + "string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=" + }, "string-length": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz", @@ -14622,6 +15234,11 @@ "is-number": "^7.0.0" } }, + "toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", @@ -15069,6 +15686,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", diff --git a/package.json b/package.json index a5dc1ff..58e985e 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.0", "@testing-library/user-event": "^12.2.2", + "antd": "^4.8.4", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.0", diff --git a/src/component/StudentProfile.js b/src/component/StudentProfile.js index dc4455b..dd79263 100644 --- a/src/component/StudentProfile.js +++ b/src/component/StudentProfile.js @@ -1,14 +1,18 @@ -import React, { useState, useEffect } from "react"; - -const StudentProfile=({profile})=>{ +//import React, { useState, useEffect } from "react"; +import React from 'react' +//import ReactDOM from 'react-dom'; +import {Table,Progress,message, Button } from 'antd' +//import profiledata from "./profiledata" +import ViewProfile from './ViewProfile' +const StudentProfile=()=>{ - const [newProfile, setNewProfile] = useState({ - "student_id": 1, - "name": "student 1", - "assignment": [ 3,8,9,7,7,8,5,7,9,7,0,8,6,5,8,6 ], - "attendance": ["Late", "Yes", "No", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes"], - "email": "Student1@gmail.com" - }); + // const [newProfile, setNewProfile] = useState({ + // "student_id": 1, + // "name": "student 1", + // "assignment": [ 3,8,9,7,7,8,5,7,9,7,0,8,6,5,8,6 ], + // "attendance": ["Late", "Yes", "No", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes"], + // "email": "Student1@gmail.com" + // }); // useEffect(() => { // fetch(`url/${profile}`) @@ -22,22 +26,128 @@ const StudentProfile=({profile})=>{ // console.log(newProfile.assignment.reduce((acc,curr) =>{if(curr>0) { return acc++}}) // console.log(newProfile.assignment.reduce((acc,curr) => acc+curr,0)) //const reducer = (acc,curr)=>acc + curr; +//const studentprofile = () => { + const data = [ + { + "student_id": 2, + "name": "Berhane", + "assignment": [8], + "attendance": [90], + "assignments_missing": [0], + "class_late": [14.81], + "email": "mail2berhane@gmail.com" +} + // { + // "student_id": 2, + // "name": "Student 2", + // "assignment": [8], + // "attendance": [99], + // "email": "Student2@gmail.com" + // }, + // { + // "student_id": 3, + // "name": "Student 3", + // "assignment": [7], + // "attendance": [89], + // "email": "Student3@gmail.com" + // }, + // { + // "student_id": 4, + // "name": "student 4", + // "assignment": [10], + // "attendance": [99], + // "email": "Student4@gmail.com" + // } +] + + const columns = [ + { + title: "Student_id", + dataIndex: "student_id", + key: "student_id", + // render: (text) => {text}, + }, + { + title: "Name", + dataIndex: "name", + key: "name", + }, + // { + // title: "assignment", + // dataIndex: "assignment", + // key: "assignment", + // }, + { + title: "Attendance", + key: "attendance", + dataIndex: "attendance", + render: (attendance) => ( + <> + {attendance.map((element) => { + return ( + + + + ); + })} + + ), + }, + { + title: "Assignment", + dataIndex: "assignment", + key: "assignment", - if (newProfile) { - return ( -
- Student Profile{" "} -
    -
  • Id {newProfile.student_id}

    • -
  • Name {newProfile.name}

    • -
  • Assignment {newProfile.assignment.reduce((acc,curr) => acc+curr,0)/newProfile.assignment.reduce((acc,curr) =>acc+!!curr,0)}

    • -
  • Attendance {newProfile.attendance.reduce((acc,curr) => acc+(curr!=='No'?1:0),0)/newProfile.attendance.length*100}%

    • -
  • Email {newProfile.email}

    • -
{" "} -
- ); + render: (assignment) => ( + <> + {assignment.map((element) => { + + + return ( + + + + ); + })} + + ), + }, + { + title: "email", + dataIndex: "email", + key: "email", + }, + + ]; + return ; -} - return null; - }; + + + }; + + +// if (newProfile) { +// return ( +//
+// Student Profile{" "} +//
    +//
  • Id {newProfile.student_id}

    • +//
  • Name {newProfile.name}

    • +//
  • Assignment {newProfile.assignment.reduce((acc,curr) => acc+curr,0)/newProfile.assignment.reduce((acc,curr) =>acc+!!curr,0)}

    • +//
  • Attendance {newProfile.attendance.reduce((acc,curr) => acc+(curr!=='No'?1:0),0)/newProfile.attendance.length*100}%

    • +//
  • Email {newProfile.email}

    • +//
{" "} +//
+// ); + +// } +// return null; + //}; export default StudentProfile; \ No newline at end of file diff --git a/src/component/ViewProfile.js b/src/component/ViewProfile.js new file mode 100644 index 0000000..933dea8 --- /dev/null +++ b/src/component/ViewProfile.js @@ -0,0 +1,155 @@ +import React from 'react'; +//import ReactDOM from 'react-dom'; +import 'antd/dist/antd.css'; +import './viewprofile.css'; +import { Drawer, List, Avatar, Divider, Col, Row } from 'antd'; + +const DescriptionItem = ({ title, content }) => ( +
+

{title}:

+ {content} +
+); + +class ViewProfile extends React.Component { + state = { visible: false }; + + showDrawer = () => { + this.setState({ + visible: true, + }); + }; + + onClose = () => { + this.setState({ + visible: false, + }); + }; + + render() { + return ( + <> + ( + + View Profile + , + ]} + > + + } + title={{item.name}} + description="CodeYourFuture WM class-1" + /> + + )} + /> + +

+ Student Profile +

+

Personal

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Company

+ + + + + + + + + + + + + {/* + Lin} /> + */} + + + + + + + +

Contacts

+ + + + + + + + + + + + https://github.com/bireworld + + } + /> + + + + + ); + } +} + +export default ViewProfile; \ No newline at end of file diff --git a/src/component/profiledata.json b/src/component/profiledata.json new file mode 100644 index 0000000..1df5795 --- /dev/null +++ b/src/component/profiledata.json @@ -0,0 +1,30 @@ +[ + { + "student_id": 1, + "name": "student 1", + "assignment": 5, + "attendance": 98, + "email": "Student1@gmail.com" + }, + { + "student_id": 2, + "name": "Student 2", + "assignment": 8, + "attendance": 99, + "email": "Student2@gmail.com" + }, + { + "student_id": 3, + "name": "Student 3", + "assignment": 7, + "attendance": 89, + "email": "Student3@gmail.com" + }, + { + "student_id": 4, + "name": "student 4", + "assignment": 10, + "attendance": 100, + "email": "Student4@gmail.com" + } +] \ No newline at end of file diff --git a/src/component/viewprofile.css b/src/component/viewprofile.css new file mode 100644 index 0000000..90a500d --- /dev/null +++ b/src/component/viewprofile.css @@ -0,0 +1,39 @@ + +.site-description-item-profile-wrapper { + margin-bottom: 7px; + color: rgba(0, 0, 0, 0.65); + font-size: 14px; + line-height: 1.5715; +} + +[data-theme='compact'] .site-description-item-profile-wrapper { + font-size: 12px; + line-height: 1.66667; +} + +.ant-drawer-body p.site-description-item-profile-p { + display: block; + margin-bottom: 16px; + color: rgba(0, 0, 0, 0.85); + font-size: 16px; + line-height: 1.5715; +} + +[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p { + font-size: 14px; + line-height: 1.66667; +} + +.site-description-item-profile-p-label { + display: inline-block; + margin-right: 8px; + color: rgba(0, 0, 0, 0.85); +} + +[data-theme="dark"] .site-description-item-profile-p { + color: rgba(255, 255, 255, 0.85); +} + +[data-theme="dark"] .site-description-item-profile-wrapper { + color: rgba(255, 255, 255, 0.65); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..6f7e2b3 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,6 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } +.site-layout-background { + background: #fff; +} diff --git a/src/main.jsx b/src/main.jsx index 6c99daa..9488d39 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,6 +2,9 @@ import React from 'react' import Data from './Data.json' import './main.css' import StudentProfile from './component/StudentProfile' +import "antd/dist/antd.css"; +import "./index.css"; +import ViewProfile from './component/ViewProfile'; function main(){ return(
@@ -9,6 +12,9 @@ function main(){
{/*
*/} + + +
From 30c32de321edb6334bcec93ed2ba0f96151fef63 Mon Sep 17 00:00:00 2001 From: bireworld Date: Tue, 24 Nov 2020 18:57:58 +0000 Subject: [PATCH 3/3] fetch data implemeted --- src/component/StudentProfile.js | 72 +++++++++++---------------------- 1 file changed, 23 insertions(+), 49 deletions(-) diff --git a/src/component/StudentProfile.js b/src/component/StudentProfile.js index dd79263..107e713 100644 --- a/src/component/StudentProfile.js +++ b/src/component/StudentProfile.js @@ -1,19 +1,21 @@ -//import React, { useState, useEffect } from "react"; -import React from 'react' -//import ReactDOM from 'react-dom'; -import {Table,Progress,message, Button } from 'antd' +import React, { useState, useEffect } from "react"; +import {Table,Progress,Input } from 'antd' //import profiledata from "./profiledata" import ViewProfile from './ViewProfile' -const StudentProfile=()=>{ - - // const [newProfile, setNewProfile] = useState({ - // "student_id": 1, - // "name": "student 1", - // "assignment": [ 3,8,9,7,7,8,5,7,9,7,0,8,6,5,8,6 ], - // "attendance": ["Late", "Yes", "No", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes", "Yes"], - // "email": "Student1@gmail.com" - // }); +const StudentProfile=({id})=>{ + const [studentProfile, setStudentProfile ] = useState(null) +id=2; + useEffect(() => { + console.log("Fetching data from heroku"); + fetch( + `https://ontrack-team3.herokuapp.com/profile/student/${id}` + ) + .then((res) => res.json()) + .then((data) => { + setStudentProfile([data]); + }); + }, []); // useEffect(() => { // fetch(`url/${profile}`) // .then(res => res.json()) @@ -26,39 +28,8 @@ const StudentProfile=()=>{ // console.log(newProfile.assignment.reduce((acc,curr) =>{if(curr>0) { return acc++}}) // console.log(newProfile.assignment.reduce((acc,curr) => acc+curr,0)) //const reducer = (acc,curr)=>acc + curr; -//const studentprofile = () => { - const data = [ - { - "student_id": 2, - "name": "Berhane", - "assignment": [8], - "attendance": [90], - "assignments_missing": [0], - "class_late": [14.81], - "email": "mail2berhane@gmail.com" -} - // { - // "student_id": 2, - // "name": "Student 2", - // "assignment": [8], - // "attendance": [99], - // "email": "Student2@gmail.com" - // }, - // { - // "student_id": 3, - // "name": "Student 3", - // "assignment": [7], - // "attendance": [89], - // "email": "Student3@gmail.com" - // }, - // { - // "student_id": 4, - // "name": "student 4", - // "assignment": [10], - // "attendance": [99], - // "email": "Student4@gmail.com" - // } -] + + const columns = [ { @@ -112,7 +83,7 @@ const StudentProfile=()=>{ '0%': '#108ee9', '50%': 'amber', '100%': '#87d068', - }} percent={element * 10} width={80} /> + }} percent={(element*10).toFixed(2)} width={80} /> ); })} @@ -126,11 +97,14 @@ const StudentProfile=()=>{ }, ]; - return
; + return
; +}; + +//return