From 16e4c0c8b184eefdd8014dcb000aff7b7b1a2da9 Mon Sep 17 00:00:00 2001
From: cbenu4cse18036 <cb.en.u4cse18036@cb.students.amrita.edu>
Date: Sat, 1 May 2021 11:21:29 +0530
Subject: [PATCH] viewAssg

---
 digital-course-file/package-lock.json         | 826 ++++++++++++++++++
 digital-course-file/package.json              |   1 +
 digital-course-file/src/Routes.js             |   5 +
 .../src/hooks/useAssignment.js                | 131 +++
 digital-course-file/src/user/Assign_button.js |  27 +
 digital-course-file/src/user/Assignments.js   |  97 ++
 digital-course-file/src/user/Hero.js          |   6 +-
 7 files changed, 1092 insertions(+), 1 deletion(-)
 create mode 100644 digital-course-file/src/hooks/useAssignment.js
 create mode 100644 digital-course-file/src/user/Assign_button.js
 create mode 100644 digital-course-file/src/user/Assignments.js

diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json
index bf34ece..3151b09 100644
--- a/digital-course-file/package-lock.json
+++ b/digital-course-file/package-lock.json
@@ -15,6 +15,7 @@
         "@testing-library/user-event": "^12.7.1",
         "axios": "^0.21.1",
         "bootstrap": "^4.6.0",
+        "cdbreact": "^1.1.0",
         "firebase": "^8.2.9",
         "firebaseui": "^4.7.3",
         "js-file-download": "^0.4.12",
@@ -1169,6 +1170,29 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz",
@@ -1539,6 +1563,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+      "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-svg-core": {
       "version": "1.2.34",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
@@ -2529,6 +2562,108 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@styled-system/background": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz",
+      "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/border": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz",
+      "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/color": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz",
+      "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz",
+      "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==",
+      "dependencies": {
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/@styled-system/css": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz",
+      "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A=="
+    },
+    "node_modules/@styled-system/flexbox": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz",
+      "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/grid": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz",
+      "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/layout": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz",
+      "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/position": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz",
+      "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/shadow": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz",
+      "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/space": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz",
+      "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/typography": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz",
+      "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "node_modules/@styled-system/variant": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz",
+      "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==",
+      "dependencies": {
+        "@styled-system/core": "^5.1.2",
+        "@styled-system/css": "^5.1.5"
+      }
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz",
@@ -4198,6 +4333,25 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz",
       "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw=="
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "node_modules/babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -4634,6 +4788,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
       "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
     },
+    "node_modules/bootstrap-css-only": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-css-only/-/bootstrap-css-only-4.4.1.tgz",
+      "integrity": "sha512-iBgNli7RnedBFwn6sMTQoAZ8WgIwmX4kF1rckfj+pgro5q/Q0DbLtcpfH60XoFnCXzbEJU/khC/B2EQap89mCg=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4934,6 +5093,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4974,6 +5138,39 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
+    "node_modules/cdbreact": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/cdbreact/-/cdbreact-1.1.0.tgz",
+      "integrity": "sha512-WB1UTSk+G9uiFVA3TQzYiwt3hhWjpAaAFOzvYchaxMl72vUuvk0vwEW0CkmVz8rOOwy9psM1rLW/P006hfb2aQ==",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.14.0",
+        "@popperjs/core": "^2.4.0",
+        "bootstrap-css-only": "^4.4.1",
+        "chart.js": "^2.9.3",
+        "classnames": "^2.2.6",
+        "focus-trap-react": "^7.0.1",
+        "popper.js": "^1.16.1",
+        "react-bootstrap-range-slider": "^1.2.1",
+        "react-chartjs-2": "^2.10.0",
+        "react-popper": "^2.2.3",
+        "react-router-dom": "^5.2.0",
+        "react-scroll": "^1.8.1",
+        "react-spring": "^8.0.27",
+        "react-tooltip": "^4.2.9",
+        "react-transition-group": "^4.4.1",
+        "styled-components": "^5.1.1",
+        "styled-system": "^5.1.5",
+        "use-deep-compare-effect": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.13.0",
+        "reacy-dom": "^16.13.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4995,6 +5192,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "dependencies": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "node_modules/chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "dependencies": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "node_modules/chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "dependencies": {
+        "color-name": "^1.0.0"
+      }
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -5668,6 +5891,14 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5779,6 +6010,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6368,6 +6609,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -8353,6 +8602,28 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/focus-trap": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-5.1.0.tgz",
+      "integrity": "sha512-CkB/nrO55069QAUjWFBpX6oc+9V90Qhgpe6fBWApzruMq5gnlh90Oo7iSSDK7pKiV5ugG6OY2AXM5mxcmL3lwQ==",
+      "dependencies": {
+        "tabbable": "^4.0.0",
+        "xtend": "^4.0.1"
+      }
+    },
+    "node_modules/focus-trap-react": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-7.0.1.tgz",
+      "integrity": "sha512-12TxHtVntj/sCsT3bwB3pPK+3rACMFLO7LBfk4nKrw1HERRmO/oc0+woD9vZKffxo5zkxkz9amc9rou9reVnpA==",
+      "dependencies": {
+        "focus-trap": "^5.1.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
@@ -12397,6 +12668,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -12861,6 +13137,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -13948,6 +14232,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -15649,6 +15943,34 @@
         "warning": "^4.0.3"
       }
     },
+    "node_modules/react-bootstrap-range-slider": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-range-slider/-/react-bootstrap-range-slider-1.2.2.tgz",
+      "integrity": "sha512-GGQr3NxzeXNOWLbSWU+zNVw+ntTMCVdZN8smBNwR3+JoPNCvZ2LJeYMoX+rcHtV6OZjSHvFvZ2D0rzZ+4/cutQ==",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0",
+        "react-bootstrap": "^1.0.0",
+        "react-dom": "^16.8.0"
+      }
+    },
+    "node_modules/react-chartjs-2": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.1.tgz",
+      "integrity": "sha512-G7cNq/n2Bkh/v4vcI+GKx7Q1xwZexKYhOSj2HmrFXlvNeaURWXun6KlOUpEQwi1cv9Tgs4H3kGywDWMrX2kxfA==",
+      "dependencies": {
+        "lodash": "^4.17.19",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "chart.js": "^2.3",
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-contexify": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-contexify/-/react-contexify-5.0.0.tgz",
@@ -15788,6 +16110,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "node_modules/react-github-login-button": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-github-login-button/-/react-github-login-button-1.0.1.tgz",
@@ -15847,6 +16174,19 @@
         "warning": "^4.0.3"
       }
     },
+    "node_modules/react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -15986,6 +16326,32 @@
         "fsevents": "^2.1.3"
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.2.tgz",
+      "integrity": "sha512-f2ZEG5fsPbPTySI9ekcFpETCcNlqbmwbQj9hhzYK8tkgv+PA8APatSt66o/q0KSkDZxyT98ONTtXp9x0lyowEw==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0"
+      }
+    },
+    "node_modules/react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
     "node_modules/react-tooltip": {
       "version": "4.2.17",
       "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.17.tgz",
@@ -17315,6 +17681,11 @@
         "sha.js": "bin.js"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -18204,6 +18575,55 @@
         "node": ">= 8.9.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.3.tgz",
+      "integrity": "sha512-BlR+KrLW3NL1yhvEB+9Nu9Dt51CuOnHoxd+Hj+rYPdtyR8X11uIW9rvhpy3Dk4dXXBsiW1u5U78f00Lf/afGoA==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-system": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz",
+      "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==",
+      "dependencies": {
+        "@styled-system/background": "^5.1.2",
+        "@styled-system/border": "^5.1.5",
+        "@styled-system/color": "^5.1.2",
+        "@styled-system/core": "^5.1.2",
+        "@styled-system/flexbox": "^5.1.2",
+        "@styled-system/grid": "^5.1.2",
+        "@styled-system/layout": "^5.1.2",
+        "@styled-system/position": "^5.1.2",
+        "@styled-system/shadow": "^5.1.2",
+        "@styled-system/space": "^5.1.2",
+        "@styled-system/typography": "^5.1.2",
+        "@styled-system/variant": "^5.1.5",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -18322,6 +18742,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tabbable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
+      "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
+    },
     "node_modules/table": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
@@ -19167,6 +19592,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-deep-compare-effect": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.6.1.tgz",
+      "integrity": "sha512-VB3b+7tFI81dHm8buGyrpxi8yBhzYZdyMX9iBJra7SMFMZ4ci4FJ1vFc1nvChiB1iLv4GfjqaYfvbNEpTT1rFQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/react": "^17.0.0",
+        "dequal": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13"
+      }
+    },
+    "node_modules/use-deep-compare-effect/node_modules/@babel/runtime": {
+      "version": "7.13.17",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
+      "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -22226,6 +22676,29 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz",
@@ -22606,6 +23079,11 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
       "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+      "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w=="
+    },
     "@fortawesome/fontawesome-svg-core": {
       "version": "1.2.34",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
@@ -23419,6 +23897,108 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@styled-system/background": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz",
+      "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/border": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz",
+      "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/color": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz",
+      "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz",
+      "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==",
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
+    "@styled-system/css": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz",
+      "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A=="
+    },
+    "@styled-system/flexbox": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz",
+      "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/grid": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz",
+      "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/layout": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz",
+      "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/position": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz",
+      "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/shadow": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz",
+      "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/space": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz",
+      "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/typography": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz",
+      "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==",
+      "requires": {
+        "@styled-system/core": "^5.1.2"
+      }
+    },
+    "@styled-system/variant": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz",
+      "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==",
+      "requires": {
+        "@styled-system/core": "^5.1.2",
+        "@styled-system/css": "^5.1.5"
+      }
+    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz",
@@ -24838,6 +25418,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz",
       "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -25248,6 +25844,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
       "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
     },
+    "bootstrap-css-only": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-css-only/-/bootstrap-css-only-4.4.1.tgz",
+      "integrity": "sha512-iBgNli7RnedBFwn6sMTQoAZ8WgIwmX4kF1rckfj+pgro5q/Q0DbLtcpfH60XoFnCXzbEJU/khC/B2EQap89mCg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -25512,6 +26113,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -25546,6 +26152,31 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
+    "cdbreact": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/cdbreact/-/cdbreact-1.1.0.tgz",
+      "integrity": "sha512-WB1UTSk+G9uiFVA3TQzYiwt3hhWjpAaAFOzvYchaxMl72vUuvk0vwEW0CkmVz8rOOwy9psM1rLW/P006hfb2aQ==",
+      "requires": {
+        "@fortawesome/fontawesome-free": "^5.14.0",
+        "@popperjs/core": "^2.4.0",
+        "bootstrap-css-only": "^4.4.1",
+        "chart.js": "^2.9.3",
+        "classnames": "^2.2.6",
+        "focus-trap-react": "^7.0.1",
+        "popper.js": "^1.16.1",
+        "react-bootstrap-range-slider": "^1.2.1",
+        "react-chartjs-2": "^2.10.0",
+        "react-popper": "^2.2.3",
+        "react-router-dom": "^5.2.0",
+        "react-scroll": "^1.8.1",
+        "react-spring": "^8.0.27",
+        "react-tooltip": "^4.2.9",
+        "react-transition-group": "^4.4.1",
+        "styled-components": "^5.1.1",
+        "styled-system": "^5.1.5",
+        "use-deep-compare-effect": "^1.4.0"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -25561,6 +26192,32 @@
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
+    "chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -26146,6 +26803,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -26229,6 +26891,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -26686,6 +27358,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -28374,6 +29051,23 @@
         }
       }
     },
+    "focus-trap": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-5.1.0.tgz",
+      "integrity": "sha512-CkB/nrO55069QAUjWFBpX6oc+9V90Qhgpe6fBWApzruMq5gnlh90Oo7iSSDK7pKiV5ugG6OY2AXM5mxcmL3lwQ==",
+      "requires": {
+        "tabbable": "^4.0.0",
+        "xtend": "^4.0.1"
+      }
+    },
+    "focus-trap-react": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-7.0.1.tgz",
+      "integrity": "sha512-12TxHtVntj/sCsT3bwB3pPK+3rACMFLO7LBfk4nKrw1HERRmO/oc0+woD9vZKffxo5zkxkz9amc9rou9reVnpA==",
+      "requires": {
+        "focus-trap": "^5.1.0"
+      }
+    },
     "follow-redirects": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
@@ -31615,6 +32309,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -31988,6 +32687,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",
@@ -32870,6 +33574,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -34317,6 +35026,24 @@
         "warning": "^4.0.3"
       }
     },
+    "react-bootstrap-range-slider": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-range-slider/-/react-bootstrap-range-slider-1.2.2.tgz",
+      "integrity": "sha512-GGQr3NxzeXNOWLbSWU+zNVw+ntTMCVdZN8smBNwR3+JoPNCvZ2LJeYMoX+rcHtV6OZjSHvFvZ2D0rzZ+4/cutQ==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "react-chartjs-2": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.1.tgz",
+      "integrity": "sha512-G7cNq/n2Bkh/v4vcI+GKx7Q1xwZexKYhOSj2HmrFXlvNeaURWXun6KlOUpEQwi1cv9Tgs4H3kGywDWMrX2kxfA==",
+      "requires": {
+        "lodash": "^4.17.19",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-contexify": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-contexify/-/react-contexify-5.0.0.tgz",
@@ -34434,6 +35161,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-github-login-button": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-github-login-button/-/react-github-login-button-1.0.1.tgz",
@@ -34493,6 +35225,15 @@
         "warning": "^4.0.3"
       }
     },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -34623,6 +35364,24 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-scroll": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.2.tgz",
+      "integrity": "sha512-f2ZEG5fsPbPTySI9ekcFpETCcNlqbmwbQj9hhzYK8tkgv+PA8APatSt66o/q0KSkDZxyT98ONTtXp9x0lyowEw==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-tooltip": {
       "version": "4.2.17",
       "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.17.tgz",
@@ -35721,6 +36480,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "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": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -36487,6 +37251,43 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "styled-components": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.3.tgz",
+      "integrity": "sha512-BlR+KrLW3NL1yhvEB+9Nu9Dt51CuOnHoxd+Hj+rYPdtyR8X11uIW9rvhpy3Dk4dXXBsiW1u5U78f00Lf/afGoA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
+    "styled-system": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz",
+      "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==",
+      "requires": {
+        "@styled-system/background": "^5.1.2",
+        "@styled-system/border": "^5.1.5",
+        "@styled-system/color": "^5.1.2",
+        "@styled-system/core": "^5.1.2",
+        "@styled-system/flexbox": "^5.1.2",
+        "@styled-system/grid": "^5.1.2",
+        "@styled-system/layout": "^5.1.2",
+        "@styled-system/position": "^5.1.2",
+        "@styled-system/shadow": "^5.1.2",
+        "@styled-system/space": "^5.1.2",
+        "@styled-system/typography": "^5.1.2",
+        "@styled-system/variant": "^5.1.5",
+        "object-assign": "^4.1.1"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -36587,6 +37388,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tabbable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
+      "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
+    },
     "table": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
@@ -37281,6 +38087,26 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-deep-compare-effect": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.6.1.tgz",
+      "integrity": "sha512-VB3b+7tFI81dHm8buGyrpxi8yBhzYZdyMX9iBJra7SMFMZ4ci4FJ1vFc1nvChiB1iLv4GfjqaYfvbNEpTT1rFQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/react": "^17.0.0",
+        "dequal": "^2.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.13.17",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
+          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
diff --git a/digital-course-file/package.json b/digital-course-file/package.json
index d53611b..d337841 100644
--- a/digital-course-file/package.json
+++ b/digital-course-file/package.json
@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^12.7.1",
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
+    "cdbreact": "^1.1.0",
     "firebase": "^8.2.9",
     "firebaseui": "^4.7.3",
     "js-file-download": "^0.4.12",
diff --git a/digital-course-file/src/Routes.js b/digital-course-file/src/Routes.js
index 6310d6e..df12a79 100644
--- a/digital-course-file/src/Routes.js
+++ b/digital-course-file/src/Routes.js
@@ -14,6 +14,8 @@ import ForgotPassword from './user/ForgotPassword'
 import { LinkContainer } from 'react-router-bootstrap'
 import UserProfile from './userprofie'
 import CreateAssignment from './user/createassignment'
+import Assign_button from './user/Assign_button'
+import Assignments from './user/Assignments'
 
 const Routes = () => {
   const [user, setUser] = useState('')
@@ -42,6 +44,7 @@ const Routes = () => {
           </Navbar.Brand>
           {user && (<UserProfile></UserProfile>)}
           {user && (<CreateAssignment></CreateAssignment>)}
+          {user && (<Assign_button></Assign_button>)}
           {user && (
             <Link to='/signin'>
               <button
@@ -54,9 +57,11 @@ const Routes = () => {
           )}
         </nav>
       </section>
+
       <Switch>
         {/*Folders*/}
         <Route path='/folder/:folderId' exact component={Hero} />
+        <Route path='/assignment' component={Assignments} />
         <Route path='/' exact component={Signin} />
         <Route path='/signin' exact component={Signin} />
         <Route path='/copyright' component={copyright} />
diff --git a/digital-course-file/src/hooks/useAssignment.js b/digital-course-file/src/hooks/useAssignment.js
new file mode 100644
index 0000000..6ea1b94
--- /dev/null
+++ b/digital-course-file/src/hooks/useAssignment.js
@@ -0,0 +1,131 @@
+import { useState,useReducer, useEffect } from "react";
+import { database } from '../fire.js'
+import firebase from 'firebase'
+import Loader from "react-loader-spinner";
+
+export const ROOT_FOLDER = {name: 'Assignments', id : null};
+
+export function useAssignment( folderId = null, folder= null) {
+
+
+    const ACTIONS = {
+        SELECT_FOLDER : 'select-folder',
+        UPDATE_FOLDER : 'update-folder',
+        SET_CHILD_FOLDERS : 'set_child_folders',
+        SET_CHILD_FILES: "set-child-files",
+    }
+
+    function reducer( state, { type,payload } ){
+        
+        switch(type){
+            case ACTIONS.SELECT_FOLDER:
+                return{
+                    folderId : payload.folderId,
+                    folder : payload.folder,
+                    childFiles : [],
+                    childFolders : [],
+                };
+
+            case ACTIONS.UPDATE_FOLDER:
+                return{
+                    ...state,
+                    folder : payload.folder,
+                };
+
+             case ACTIONS.SET_CHILD_FOLDERS:
+                return{
+                    ...state,
+                    childFolders : payload.childFolders,
+                }; 
+            // case ACTIONS.SET_CHILD_FILES:
+            //     return {
+            //         ...state,
+            //         childFiles: payload.childFiles,
+            //     };    
+
+            default:
+                return state;
+
+        }
+
+    }
+    const[state,dispatch] = useReducer( reducer,{
+        folderId,
+        folder,
+        childFolders : [],
+        childFiles : []
+        } 
+    );
+
+    useEffect( () => {
+        dispatch({ type : ACTIONS.SELECT_FOLDER, payload : { folderId,folder }})
+    } ,[folderId,folder])
+
+
+    useEffect( ()=> {
+        if(folderId==null){
+            return dispatch({
+                type:  ACTIONS.UPDATE_FOLDER,
+                payload: {folder : ROOT_FOLDER},              
+            })
+        }
+        database.a_folders.doc(folderId).get()
+        .then(doc => {
+            dispatch({
+                type: ACTIONS.UPDATE_FOLDER,
+                payload : {folder: database.formatDoc(doc)}
+            })
+        })
+        .catch( ()=> {
+            dispatch({
+                type: ACTIONS.UPDATE_FOLDER,
+                payload : {folder: ROOT_FOLDER}
+            })
+        }) 
+
+        return state;
+    },[folderId])
+
+    
+    useEffect( () => {
+        if (!firebase.auth().currentUser) {
+        return <><div className='centered'><Loader
+        type="Puff"
+        color="#00BFFF"
+        height={100}
+        width={100}
+        timeout={3000} //3 secs
+      /></div></>
+    }
+
+    return database.a_folders
+            .where("userId","==", firebase.auth().currentUser.uid)
+            .orderBy("createdAt")
+            .onSnapshot(snapshot => {
+                dispatch({
+                    type: ACTIONS.SET_CHILD_FOLDERS,
+                    payload : { childFolders : snapshot.docs.map(database.formatDoc) }
+                })
+            console.log(snapshot.docs.map(database.formatDoc))
+            })
+    },[folderId])
+    // useEffect(() => {
+    //     if(firebase.auth().currentUser)
+    //     {
+    //             return (
+    //       database.a_files
+    //         .where("folderId", "==", folderId)
+    //         .where("userId", "==", firebase.auth().currentUser.uid)
+    //         .onSnapshot(snapshot => {
+    //           dispatch({
+    //             type: ACTIONS.SET_CHILD_FILES,
+    //             payload: { childFiles: snapshot.docs.map(database.formatDoc) },
+    //           })
+    //         })
+    //     )
+    //     }
+        
+    //   }, [folderId])
+
+    return state;
+}
diff --git a/digital-course-file/src/user/Assign_button.js b/digital-course-file/src/user/Assign_button.js
new file mode 100644
index 0000000..5473458
--- /dev/null
+++ b/digital-course-file/src/user/Assign_button.js
@@ -0,0 +1,27 @@
+import React, { useState, Component } from 'react'
+import { faFileExport } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Link } from "react-router-dom";
+import { Button,Modal,Form } from "react-bootstrap";
+
+
+const divstyle = {
+    width: '86px',
+    padding: '8px',
+    background: '#3a2b58'
+};
+
+const Assign_button = () => {
+    return(
+        <Button
+            as={Link}
+            to={'/assignment'} 
+            style = {divstyle}
+        >
+            <FontAwesomeIcon icon={faFileExport} />
+        </Button>
+  );
+
+}
+
+export default Assign_button;
\ No newline at end of file
diff --git a/digital-course-file/src/user/Assignments.js b/digital-course-file/src/user/Assignments.js
new file mode 100644
index 0000000..408de5e
--- /dev/null
+++ b/digital-course-file/src/user/Assignments.js
@@ -0,0 +1,97 @@
+import React, { useState, Component } from 'react'
+import AddFolder from './AddFolder'
+import AddFile from './AddFile'
+import { Container, Navbar, Nav } from 'react-bootstrap'
+import { useAssignment } from '.././hooks/useAssignment'
+import Folder from './Folder'
+import FolderNav from './FolderNav'
+import Deffolders from './Deffolders'
+import Sharelink from './Sharelink'
+import Deletefolder from './Deletefolder'
+import { useParams, useLocation } from 'react-router-dom'
+import File from './File'
+import 'firebase/storage'
+import Loader from 'react-loader-spinner'
+import Dropzone from './Dropzone'
+import ParticlesBg from 'particles-bg'
+import Sidebar from './Sidebar'
+
+const Assignments = ({ handleLogout }) => {
+  const { folderId } = useParams()
+//   const { state = {} } = useLocation()
+
+//   const { folder, childFolders, childFiles } = useAssignment(
+//     folderId,
+//     state.folder
+//   )
+
+  const { folder, childFolders } = useAssignment(folderId)
+
+  if (!folder) {
+    return (
+      <>
+        <div className='centered'>
+          <Loader
+            type='Puff'
+            color='#00BFFF'
+            height={100}
+            width={100}
+            timeout={3000} //3 secs
+          />
+        </div>
+      </>
+    )
+  }
+  if (folder.id !== 'copyright') {
+    return (
+      <>
+        {/* <Sidebar/> */}
+        <Container fluid >
+          <ParticlesBg type='cobweb' bg={true} />
+          {/* <main  className='col-md-9 col-xl-8 py-md-3 pl-md-5'> */}
+          {childFolders.length > 0 && (
+            <div className='d-flex flex-wrap'>
+              {childFolders.map((childFolder) => (
+                <div
+                  key={childFolder.id}
+                  style={{ maxWidth: '250px' }}
+                  className='p-2'
+                >
+                  <Folder folder={childFolder}></Folder>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* {childFolders.length > 0 && childFiles.length > 0 && <hr />}
+          {childFiles.length > 0 && (
+            <div className='d-flex flex-wrap'>
+              {childFiles.map((childFile) => (
+                <div
+                  key={childFile.id}
+                  style={{ maxWidth: '250px' }}
+                  className='p-2'
+                >
+                  <File file={childFile} />
+                  <div id='root'></div>
+                </div>
+              ))}
+            </div>
+          )} */}
+          {/* </main> */}
+        </Container>
+        <Navbar fixed='bottom' variant='light' bg='light'>
+          <Container className='ml-sm-2'>
+            <Nav.Link eventKey={2} href='copyright'>
+              &copy; Digital Course File Group 2
+            </Nav.Link>
+          </Container>
+        </Navbar>
+      </>
+    )
+  } else {
+    return null
+  }
+}
+
+export default Assignments;
diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js
index 06984a9..02229f9 100644
--- a/digital-course-file/src/user/Hero.js
+++ b/digital-course-file/src/user/Hero.js
@@ -14,6 +14,7 @@ import 'firebase/storage'
 import Loader from 'react-loader-spinner'
 import Dropzone from './Dropzone'
 import ParticlesBg from 'particles-bg'
+import Sidebar from './Sidebar'
 
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
@@ -43,8 +44,10 @@ const Hero = ({ handleLogout }) => {
   if (folder.id !== 'copyright') {
     return (
       <>
-        <Container fluid>
+        {/* <Sidebar/> */}
+        <Container fluid >
           <ParticlesBg type='cobweb' bg={true} />
+          {/* <main  className='col-md-9 col-xl-8 py-md-3 pl-md-5'> */}
           <div className='d-flex align-items-center'>
             <FolderNav currentFolder={folder} />
             <AddFolder currentFolder={folder} />
@@ -87,6 +90,7 @@ const Hero = ({ handleLogout }) => {
               ))}
             </div>
           )}
+          {/* </main> */}
         </Container>
         <Navbar fixed='bottom' variant='light' bg='light'>
           <Container className='ml-sm-2'>
-- 
GitLab