+
@@ -34,6 +35,7 @@ const Navigation = () => {
+
);
diff --git a/src/components/Navigation/styles.scss b/src/components/Navigation/styles.scss
index dce9bfad..b8749e2c 100644
--- a/src/components/Navigation/styles.scss
+++ b/src/components/Navigation/styles.scss
@@ -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;
}
}
diff --git a/src/components/Shared/Tracking/index.js b/src/components/Shared/Tracking/index.js
index 9d0f0f13..8ca524ec 100644
--- a/src/components/Shared/Tracking/index.js
+++ b/src/components/Shared/Tracking/index.js
@@ -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 };
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index bace2b84..39125efa 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 (
@@ -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]);
}}
/>
@@ -226,11 +256,16 @@ const Table = () => {
Filter: SelectCheckedColumnFilter,
},
{
- Header: () => {
+ /* eslint-disable react/prop-types */
+ Header: ({ filteredRows }) => {
+ const disableRandomQuestionButton = filteredRows.length === 0;
+
const randomQuestion = () => {
- const random = Math.floor(Math.random() * questions.length);
- const questionId = questions[random].id;
- const questionSlug = questions[questionId].slug;
+ const random = Math.floor(Math.random() * filteredRows.length);
+ const randomFilteredRow = filteredRows[random];
+ const questionSlug = randomFilteredRow.original.slug;
+ /* eslint-enable react/prop-types */
+
window.open(
`https://leetcode.com/problems/${questionSlug}/`,
'_blank',
@@ -264,6 +299,7 @@ const Table = () => {
>
Questions{' '}