Merge branch 'seanprashad:main' into master

Author: lamccloskey

package-lock.json

@@ -15,7 +15,7 @@
     "prop-types": "^15.8.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-ga": "^2.7.0",
+    "react-ga4": "^2.1.0",
     "react-icons": "^3.11.0",
     "react-markdown": "^4.3.1",
     "react-minimal-pie-chart": "^8.4.0",

package.json

@@ -13,3 +13,13 @@
     padding: 0;
   }
 }
+
+body.dark-mode .acknowledgements {
+  background-color: #161a1d;
+  color: #ffffff;
+
+  .card {
+    background-color: #1d2125;
+    color: #ffffff;
+  }
+}

src/components/Acknowledgements/styles.scss

@@ -5,12 +5,11 @@ import './styles.scss';
 import Navigation from './Navigation';
 import Tabs from './Tabs';
 
-import { initGA, PageView } from './Shared/Tracking';
+import { initGA } from './Shared/Tracking';
 
 class App extends React.Component {
   componentDidMount() {
-    initGA('G-GKMJ4KP806', { debug: false });
-    PageView();
+    initGA('G-J7FBQPGZTW');
   }
 
   render() {

src/components/App.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import Toggle from 'react-toggle';
+
+const DarkMode = () => {
+  const [darkMode, setDarkMode] = useState(() => {
+    const savedMode = localStorage.getItem('darkMode');
+    return savedMode ? JSON.parse(savedMode) : false;
+  });
+
+  const toggleDarkMode = () => {
+    setDarkMode(prevMode => {
+      const newMode = !prevMode;
+      localStorage.setItem('darkMode', newMode);
+      return newMode;
+    });
+  };
+  useEffect(() => {
+    document.body.className = darkMode ? 'dark-mode' : 'light-mode';
+  }, [darkMode]);
+
+  return (
+    <Toggle
+      id="darkMode-toggle"
+      checked={darkMode}
+      onChange={toggleDarkMode}
+      icons={{ checked: '🌙', unchecked: '☀️' }}
+    />
+  );
+};
+
+export default DarkMode;

src/components/Dark-Mode/index.js

@@ -11,10 +11,11 @@ import { FaGithub } from 'react-icons/fa';
 import { Event } from '../Shared/Tracking';
 
 import './styles.scss';
+import DarkMode from '../Dark-Mode';
 
 const Navigation = () => {
   return (
-    <Navbar color="light" light>
+    <Navbar className="navbar sticky">
       <Container>
         <NavbarBrand
           onClick={() =>
@@ -34,6 +35,7 @@ const Navigation = () => {
             </NavLink>
           </NavItem>
         </Nav>
+        <DarkMode />
       </Container>
     </Navbar>
   );

src/components/Navigation/index.js

@@ -1,3 +1,31 @@
+.navbar.sticky {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+body.light-mode .navbar {
+  background-color: #f7f8f9;
+  color: #000000;
+}
+body.light-mode .navbar a {
+  color: #212529;
+}
+
+body.dark-mode .navbar {
+  background-color: #1d2125;
+  color: #ffffff;
+}
+body.dark-mode .navbar a {
+  color: #ffffff;
+}
+body.dark-mode .navbar-nav svg {
+  color: #ffffff;
+}
+body.dark-mode .navbar-nav svg:hover {
+  color: #ffc952;
+}
+
 .navbar-brand {
   font-weight: 600;
   letter-spacing: 1px;
@@ -29,5 +57,6 @@
 
   svg {
     font-size: 2em;
+    margin: 0px 10px;
   }
 }

src/components/Navigation/styles.scss

@@ -1,11 +1,12 @@
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 const initGA = (trackingID, options) => {
-  ReactGA.initialize(trackingID, { ...options });
-};
-
-const PageView = () => {
-  ReactGA.pageview(window.___location.pathname + window.___location.search);
+  ReactGA.initialize([
+    {
+      trackingId: trackingID,
+      gaOptions: { ...options },
+    },
+  ]);
 };
 
 const Event = (category, action, label) => {
@@ -16,4 +17,4 @@ const Event = (category, action, label) => {
   });
 };
 
-export { initGA, PageView, Event };
+export { initGA, Event };

src/components/Shared/Tracking/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 (
@@ -154,7 +176,7 @@ const Table = () => {
                     labelPosition={0}
                     labelStyle={{
                       // Needed for Dark Reader to work
-                      fill: 'black',
+                      fill: '#A54800',
                     }}
                     startAngle={-90}
                     lineWidth={12}
@@ -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

@@ -1,3 +1,54 @@
+body.light-mode .table {
+  background-color: #ffffff;
+  color: #000000;
+}
+body.light-mode .table thead > tr th {
+  background-color: #ffffff;
+}
+body.light-mode .pattern-count {
+  background-color: #ffffff;
+  color: #000000;
+}
+body.light-mode .table tr:nth-child(odd) {
+  background-color: #f1f2f4;
+}
+body.light-mode .table tr:nth-child(even) {
+  background-color: #ffffff;
+}
+body.light-mode .table tbody tr:hover {
+  background-color: #dcdfe4;
+  color: #000000;
+}
+
+body.dark-mode .table {
+  background-color: #161a1d;
+  color: #ffffff;
+}
+body.dark-mode .table thead > tr th {
+  background-color: #161a1d;
+}
+body.dark-mode .pattern-count {
+  background-color: #161a1d;
+  color: #ffffff;
+}
+body.dark-mode .table tr:nth-child(odd) {
+  background-color: #22272b;
+}
+body.dark-mode .table tr:nth-child(even) {
+  background-color: #161a1d;
+}
+body.dark-mode .table tbody tr:hover {
+  background-color: #101214;
+  color: #ffffff;
+}
+body.dark-mode .modal-content {
+  background-color: #1d2125;
+  color: #ffffff;
+  .close {
+    color: #ffffff;
+  }
+}
+
 .table {
   .row {
     justify-content: center;
@@ -11,7 +62,8 @@
     > tr th {
       background: white;
       position: sticky;
-      top: 0;
+      top: 50px;
+      text-wrap: nowrap;
     }
   }
 
@@ -67,4 +119,7 @@
     margin-bottom: 10px;
     font-size: 0.7rem;
   }
+  .lastSolvedOn {
+    text-wrap: nowrap;
+  }
 }