refactor module progress into user settings'
This commit is contained in:
parent
8aca3854a8
commit
05e6297e7d
4 changed files with 61 additions and 21 deletions
|
@ -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)}
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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}
|
||||
|
|
Reference in a new issue