refactor module progress into user settings'

src/components/ModuleLayout/MarkCompleteButton.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Transition from '../Transition';
-
-const options = ['Not Started', 'Reading', 'Practicing', 'Complete', 'Skipped'];
+import { ModuleProgressOptions } from '../../context/UserSettingsContext';
 
 const MarkCompleteButton = ({
   state,
@@ -80,7 +79,7 @@ const MarkCompleteButton = ({
               aria-orientation="vertical"
               aria-labelledby="options-menu"
             >
-              {options.map(option => (
+              {ModuleProgressOptions.map(option => (
                 <button
                   key={option}
                   onClick={() => handleSelect(option)}

src/components/ModuleLayout/ModuleLayout.tsx

@@ -244,18 +244,13 @@ export default function ModuleLayout({
   module: ModuleInfo;
   children: React.ReactNode;
 }) {
+  const { userProgress, setModuleProgress } = useContext(UserSettingsContext);
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
   const [isContactUsActive, setIsContactUsActive] = useState(false);
   const [isConfettiActive, setIsConfettiActive] = useState(false);
-  const [moduleProgress, setModuleProgress] = useState('Not Started');
-
-  React.useEffect(() => {
-    let progress = window.localStorage.getItem(`progress--${module.id}`);
-    if (progress !== null) {
-      console.log(progress);
-      setModuleProgress(progress);
-    }
-  }, []);
+  console.log(userProgress);
+  const moduleProgress =
+    (userProgress && userProgress[module.id]) || 'Not Started';
 
   const data = useStaticQuery(graphql`
     query {
@@ -280,8 +275,7 @@ export default function ModuleLayout({
 
   const handleCompletionChange = progress => {
     if (moduleProgress === progress) return;
-    setModuleProgress(progress);
-    window.localStorage.setItem(`progress--${module.id}`, progress);
+    setModuleProgress(module.id, progress);
     if (
       moduleProgress !== 'Complete' &&
       (progress === 'Practicing' || progress === 'Complete')

src/components/ModuleLayout/SidebarNav/SidebarNav.tsx

@@ -33,7 +33,11 @@ export const SidebarNav = () => {
           isActive={group.children.findIndex(x => x.id === module.id) !== -1}
         >
           {group.children.map(link => (
-            <ItemLink link={link} isActive={link.id === module.id} />
+            <ItemLink
+              key={link.id}
+              link={link}
+              isActive={link.id === module.id}
+            />
           ))}
         </Accordion>
       ))}

src/context/UserSettingsContext.tsx

@@ -1,17 +1,42 @@
-import { createContext, useRef, useState } from 'react';
+import { createContext, useState } from 'react';
 import * as React from 'react';
 
-const UserSettingsContext = createContext({
+export type ModuleProgress =
+  | 'Not Started'
+  | 'Reading'
+  | 'Practicing'
+  | 'Complete'
+  | 'Skipped';
+export const ModuleProgressOptions: ModuleProgress[] = [
+  'Not Started',
+  'Reading',
+  'Practicing',
+  'Complete',
+  'Skipped',
+];
+export type UserProgress = { [key: string]: ModuleProgress };
+export type UserLang = 'showAll' | 'cpp' | 'java' | 'py';
+
+const UserSettingsContext = createContext<{
+  primaryLang: UserLang;
+  setPrimaryLang: (lang: string) => void;
+  userProgress: UserProgress;
+  setModuleProgress: (moduleID: string, progress: ModuleProgress) => void;
+}>({
   primaryLang: 'showAll',
   setPrimaryLang: null,
+  userProgress: null,
+  setModuleProgress: null,
 });
 
 export const UserSettingsProvider = ({ children }) => {
-  const key = 'guide:userSettings:primaryLang';
+  const langKey = 'guide:userSettings:primaryLang';
+  const progressKey = 'guide:userSettings:progress';
   const [primaryLang, setPrimaryLang] = useState('showAll');
+  const [userProgress, setUserProgress] = useState({});
 
   React.useEffect(() => {
-    const stickyValue = window.localStorage.getItem(key);
+    let stickyValue = window.localStorage.getItem(langKey);
     let v = null;
     try {
       v = JSON.parse(stickyValue);
@@ -20,16 +45,34 @@ export const UserSettingsProvider = ({ children }) => {
     }
     if (v === 'cpp' || v === 'java' || v === 'py') setPrimaryLang(v);
     else setPrimaryLang('cpp');
+
+    stickyValue = window.localStorage.getItem(progressKey);
+    v = {};
+    try {
+      v = JSON.parse(stickyValue);
+    } catch (e) {
+      console.error("Couldn't parse user progress", e);
+    }
+    setUserProgress(v);
   }, []);
 
   return (
     <UserSettingsContext.Provider
       value={{
-        primaryLang,
+        primaryLang: primaryLang as UserLang,
         setPrimaryLang: lang => {
-          window.localStorage.setItem(key, JSON.stringify(lang));
+          window.localStorage.setItem(langKey, JSON.stringify(lang));
           setPrimaryLang(lang);
         },
+        userProgress,
+        setModuleProgress: (moduleID: string, progress: ModuleProgress) => {
+          userProgress[moduleID] = progress;
+          window.localStorage.setItem(
+            progressKey,
+            JSON.stringify(userProgress)
+          );
+          setUserProgress(userProgress);
+        },
       }}
     >
       {children}