diff --git a/package-lock.json b/package-lock.json index ef6ff286..9be9f7c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9161,7 +9161,8 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz", "integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==", "os": [ - "darwin" + "darwin", + "win32" ], "engines": { "node": "^8.16.0 || ^10.6.0 || >=11.0.0" @@ -15234,9 +15235,15 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -16064,6 +16071,11 @@ "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, + "node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==" + }, "node_modules/picomatch": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", @@ -16209,16 +16221,19 @@ } }, "node_modules/postcss": { - "version": "7.0.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", - "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dependencies": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" }, "engines": { "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" } }, "node_modules/postcss-attribute-case-insensitive": { @@ -17280,14 +17295,33 @@ "node": ">=10.0" } }, + "node_modules/postcss-safe-parser/node_modules/picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" + }, "node_modules/postcss-safe-parser/node_modules/postcss": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.4.tgz", - "integrity": "sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==", + "version": "8.4.41", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz", + "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "dependencies": { - "colorette": "^1.2.1", - "nanoid": "^3.1.20", - "source-map": "^0.6.1" + "nanoid": "^3.3.7", + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -17375,17 +17409,6 @@ "node": ">=6.14.4" } }, - "node_modules/postcss/node_modules/supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -19874,9 +19897,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -35591,9 +35614,9 @@ "optional": true }, "nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==" + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" }, "nanomatch": { "version": "1.2.13", @@ -36273,6 +36296,11 @@ "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==" + }, "picomatch": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", @@ -36388,23 +36416,12 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "postcss": { - "version": "7.0.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", - "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - }, - "dependencies": { - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "requires": { - "has-flag": "^3.0.0" - } - } + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "postcss-attribute-case-insensitive": { @@ -37290,14 +37307,19 @@ "postcss": "^8.1.0" }, "dependencies": { + "picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" + }, "postcss": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.4.tgz", - "integrity": "sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==", + "version": "8.4.41", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz", + "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==", "requires": { - "colorette": "^1.2.1", - "nanoid": "^3.1.20", - "source-map": "^0.6.1" + "nanoid": "^3.3.7", + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" } } } @@ -39457,9 +39479,9 @@ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" }, "source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==" }, "source-map-resolve": { "version": "0.5.3", diff --git a/src/components/Table/index.js b/src/components/Table/index.js index 537e5c8d..68b42123 100644 --- a/src/components/Table/index.js +++ b/src/components/Table/index.js @@ -45,6 +45,10 @@ const Table = () => { JSON.parse(localStorage.getItem('checked')) || new Array(questions.length).fill(false); + let checkedAtList = + JSON.parse(localStorage.getItem('checkedAt')) || + new Array(questions.length).fill(''); + /* If the user has previously visited the website, then an array in LocalStorage would exist of a certain length which corresponds to which questions they have/have not completed. In the event that we add new questions @@ -62,6 +66,17 @@ const Table = () => { window.localStorage.setItem('checked', JSON.stringify(checkedList)); } + if (checkedAtList.length !== questions.length) { + const resizedCheckedAtList = new Array(questions.length).fill(''); + + for (let i = 0; i < checkedAtList.length; i += 1) { + resizedCheckedAtList[i] = checkedAtList[i]; + } + + checkedAtList = resizedCheckedAtList; + window.localStorage.setItem('checkedAt', JSON.stringify(checkedAtList)); + } + const filteredByCheckbox = () => { const checkbox = localStorage.getItem('checkbox') || ''; return questions.filter(question => { @@ -91,6 +106,7 @@ const Table = () => { totalDifficultyCount[questions[i].difficulty] += 1; } + const [checkedAt, setCheckedAt] = useState(checkedAtList); const [data, setData] = useState(filteredByCheckbox()); const [difficultyCount, setDifficultyCount] = useState(difficultyMap); const [checked, setChecked] = useState(checkedList); @@ -102,6 +118,10 @@ const Table = () => { window.localStorage.setItem('checked', JSON.stringify(checked)); }, [checked]); + useEffect(() => { + window.localStorage.setItem('checkedAt', JSON.stringify(checkedAt)); + }, [checkedAt]); + useEffect(() => { window.localStorage.setItem('showPatterns', JSON.stringify(showPatterns)); }, [showPatterns]); @@ -134,6 +154,8 @@ const Table = () => { const [resetModal, setResetModal] = React.useState(false); const toggleResetModal = () => { setResetModal(!resetModal); + const clearedCheckedAt = checkedAt.map(() => null); + setCheckedAt(clearedCheckedAt); }; return ( @@ -200,6 +222,13 @@ const Table = () => { checked[cellInfo.row.original.id] = !checked[ cellInfo.row.original.id ]; + const currentTime = new Date().toISOString().slice(0, 10); + // const updatedCheckedAt = [...checkedAt]; + checkedAt[cellInfo.row.original.id] = checked[ + cellInfo.row.original.id + ] + ? currentTime + : null; const question = questions.find( q => q.id === cellInfo.row.original.id, ); @@ -218,6 +247,7 @@ const Table = () => { setDifficultyCount(difficultyCount); setChecked([...checked]); setData(filteredByCheckbox()); + setCheckedAt([...checkedAt]); }} /> @@ -451,6 +481,19 @@ const Table = () => { }, Filter: SelectColumnFilter, }, + { + Header: 'Last Solved On', + accessor: 'LastSolvedOn', + disableSortBy: true, + Cell: cellInfo => { + return ( +
+ {checkedAt[cellInfo.row.original.id]} +
+ ); + }, + disableFilters: true, + }, ], }, ], diff --git a/src/components/Table/styles.scss b/src/components/Table/styles.scss index 4d2123eb..990d7d22 100644 --- a/src/components/Table/styles.scss +++ b/src/components/Table/styles.scss @@ -12,6 +12,7 @@ background: white; position: sticky; top: 0; + text-wrap: nowrap; } } @@ -67,4 +68,7 @@ margin-bottom: 10px; font-size: 0.7rem; } + .lastSolvedOn { + text-wrap: nowrap; + } }