From ea793dae093acf6c8aaea7fd0ef932d2a7d510c3 Mon Sep 17 00:00:00 2001 From: Nathan Wang Date: Sun, 19 Jul 2020 13:07:21 -0700 Subject: [PATCH] get dashboard to a functional state --- ...tionProgress.tsx => DashboardProgress.tsx} | 35 ++-- src/pages/dashboard.tsx | 195 ++++++++++++------ src/pages/index.tsx | 4 +- 3 files changed, 155 insertions(+), 79 deletions(-) rename src/components/Dashboard/{SectionProgress.tsx => DashboardProgress.tsx} (71%) diff --git a/src/components/Dashboard/SectionProgress.tsx b/src/components/Dashboard/DashboardProgress.tsx similarity index 71% rename from src/components/Dashboard/SectionProgress.tsx rename to src/components/Dashboard/DashboardProgress.tsx index c741c57..05cf6e4 100644 --- a/src/components/Dashboard/SectionProgress.tsx +++ b/src/components/Dashboard/DashboardProgress.tsx @@ -1,25 +1,25 @@ import * as React from 'react'; -const ProgressBar = ({ title }) => { +const ProgressBar = ({ text, green, yellow, blue }) => { return (
-
+
- 107 total modules + {text}
@@ -39,36 +39,47 @@ const FancyNumber = ({ number, text, textColor, bgColor }) => (
); -export default function SectionProgress() { +export default function DashboardProgress({ + completed, + inProgress, + skipped, + notStarted, + total, +}) { return (
- +
); } diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 3d7f35a..f91685a 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -3,7 +3,7 @@ import { graphql, Link, PageProps } from 'gatsby'; import Layout from '../components/layout'; import SEO from '../components/seo'; import { useState } from 'react'; -import SectionProgress from '../components/Dashboard/SectionProgress'; +import DashboardProgress from '../components/Dashboard/DashboardProgress'; import SectionProgressBar from '../components/Dashboard/SectionProgressBar'; import UserDataContext from '../context/UserDataContext'; import WelcomeBackBanner from '../components/Dashboard/WelcomeBackBanner'; @@ -15,6 +15,30 @@ import { import DashboardNav from '../components/Dashboard/DashboardNav'; import ActiveItems, { ActiveItem } from '../components/Dashboard/ActiveItems'; +const getProgressInfo = ( + keys: string[], + data: { [key: string]: string }, + completedValues: string[], + inProgressValues: string[], + skippedValues: string[], + notStartedValues: string[] +) => { + let res = { + completed: 0, + inProgress: 0, + skipped: 0, + notStarted: 0, + }; + for (let key of keys) { + if (!(key in data)) res.notStarted++; + else if (completedValues.includes(data[key])) res.completed++; + else if (inProgressValues.includes(data[key])) res.inProgress++; + else if (skippedValues.includes(data[key])) res.skipped++; + else if (notStartedValues.includes(data[key])) res.notStarted++; + } + return res; +}; + export default function DashboardPage(props: PageProps) { const { modules } = props.data as any; const moduleIDToName = modules.edges.reduce((acc, cur) => { @@ -28,6 +52,7 @@ export default function DashboardPage(props: PageProps) { url: `${moduleIDToURLMap[cur.node.frontmatter.id]}/#problem-${ problem.uniqueID }`, + starred: problem.starred, }; }); return acc; @@ -68,6 +93,36 @@ export default function DashboardPage(props: PageProps) { })); }, [userProgressOnProblems]); + let allModulesProgressInfo = getProgressInfo( + Object.keys(moduleIDToName), + userProgressOnModules, + ['Complete'], + ['Reading', 'Practicing'], + ['Skipped'], + ['Not Started'] + ); + + const allProblemIDs = Object.keys(problemIDMap); + // const allStarredProblemIDs = allProblemIDs.filter( + // x => problemIDMap[x].starred + // ); + const allProblemsProgressInfo = getProgressInfo( + allProblemIDs, + userProgressOnProblems, + ['Solved'], + ['Solving'], + ['Skipped'], + ['Not Attempted'] + ); + // const allStarredProblemsProgressInfo = getProgressInfo( + // allStarredProblemIDs, + // userProgressOnProblems, + // ['Solved'], + // ['Solving'], + // ['Skipped'], + // ['Not Attempted'] + // ); + return ( @@ -96,37 +151,37 @@ export default function DashboardPage(props: PageProps) {
)}
-
-
-

- Announcements -

-
-
-
-
-
-
-

- -

-

- Looking for Contributors! -

-

- Welcome to the USACO Guide! We're still in pre-release mode, - so things may be a bit rough around the edges. Learn more - about what this means, and how you can help contribute! -

-
- - Continue Reading - -
-
-
-
-
+ {/*
*/} + {/*
*/} + {/*

*/} + {/* Announcements*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* */} + {/*

*/} + {/*

*/} + {/* Looking for Contributors!*/} + {/*

*/} + {/*

*/} + {/* Welcome to the USACO Guide! We're still in pre-release mode,*/} + {/* so things may be a bit rough around the edges. Learn more*/} + {/* about what this means, and how you can help contribute!*/} + {/*

*/} + {/*
*/} + {/* */} + {/* Continue Reading*/} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/}

@@ -136,39 +191,48 @@ export default function DashboardPage(props: PageProps) {

-
+

All Modules

- -
-
-
-
-
-

- All Starred Problems -

-
- +
+ {/*
*/} + {/*
*/} + {/*

*/} + {/* All Starred Problems*/} + {/*

*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} +
+

All Problems

- +
-
-
{/*
*/} {/*
*/} {/*

*/} @@ -187,24 +251,24 @@ export default function DashboardPage(props: PageProps) { {/* alt="Cow"*/} {/* />*/} {/*

*/} -
-
-

- Section Breakdown -

-
-

Below is your progress on modules for each section.

-
-
- - - - - - -
-
-
+ {/*
*/} + {/*
*/} + {/*

*/} + {/* Section Breakdown*/} + {/*

*/} + {/*
*/} + {/*

Below is your progress on modules for each section.

*/} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/}
@@ -227,6 +291,7 @@ export const pageQuery = graphql` uniqueID source name + starred } } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c69fd48..556573e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -195,7 +195,7 @@ export default function IndexPage(props: PageProps) {
View Guide @@ -486,7 +486,7 @@ export default function IndexPage(props: PageProps) {
View Guide