Last Solved On Column Added to Table (#320)

Author: LordChakshu

package-lock.json

@@ -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]);
                     }}
                   />
                 </span>
@@ -451,6 +481,19 @@ const Table = () => {
             },
             Filter: SelectColumnFilter,
           },
+          {
+            Header: 'Last Solved On',
+            accessor: 'LastSolvedOn',
+            disableSortBy: true,
+            Cell: cellInfo => {
+              return (
+                <div className="lastSolvedOn">
+                  {checkedAt[cellInfo.row.original.id]}
+                </div>
+              );
+            },
+            disableFilters: true,
+          },
         ],
       },
     ],

src/components/Table/index.js

@@ -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;
+  }
 }