From 850e8e1be733a75a687befa1885776cecfb9887b Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Thu, 29 Aug 2024 13:36:01 +0600 Subject: [PATCH] wip: project status --- src/components/Activity/ActivityPage.tsx | 1 - src/components/Activity/ProjectProgress.tsx | 7 +- src/components/Authenticator/authenticator.ts | 1 + src/components/Dashboard/DashboardPage.tsx | 46 ++++--- src/components/Dashboard/LoadingProgress.tsx | 14 +++ .../Dashboard/PersonalDashboard.tsx | 114 +++++++++++++----- 6 files changed, 136 insertions(+), 47 deletions(-) create mode 100644 src/components/Dashboard/LoadingProgress.tsx diff --git a/src/components/Activity/ActivityPage.tsx b/src/components/Activity/ActivityPage.tsx index 810b1f1a9..b6a95e87c 100644 --- a/src/components/Activity/ActivityPage.tsx +++ b/src/components/Activity/ActivityPage.tsx @@ -88,7 +88,6 @@ export function ActivityPage() { } const allProjects = response.filter((page) => page.group === 'Projects'); - console.log(allProjects); setProjectDetails(allProjects); } diff --git a/src/components/Activity/ProjectProgress.tsx b/src/components/Activity/ProjectProgress.tsx index 9bcff849d..22211e13f 100644 --- a/src/components/Activity/ProjectProgress.tsx +++ b/src/components/Activity/ProjectProgress.tsx @@ -10,14 +10,17 @@ type ProjectProgressType = { projectStatus: ProjectStatusDocument & { title: string; }; + showActions?: boolean; }; export function ProjectProgress(props: ProjectProgressType) { - const { projectStatus } = props; + const { projectStatus, showActions = true } = props; const userId = getUser()?.id; const shouldShowActions = - projectStatus.submittedAt && projectStatus.submittedAt !== null; + projectStatus.submittedAt && + projectStatus.submittedAt !== null && + showActions; return (
diff --git a/src/components/Authenticator/authenticator.ts b/src/components/Authenticator/authenticator.ts index d4c77f6e5..1e9d57ac3 100644 --- a/src/components/Authenticator/authenticator.ts +++ b/src/components/Authenticator/authenticator.ts @@ -48,6 +48,7 @@ function handleGuest() { '/team/members', '/team/member', '/team/settings', + '/dashboard', ]; showHideAuthElements('hide'); diff --git a/src/components/Dashboard/DashboardPage.tsx b/src/components/Dashboard/DashboardPage.tsx index d9ebaf2e6..2644c555f 100644 --- a/src/components/Dashboard/DashboardPage.tsx +++ b/src/components/Dashboard/DashboardPage.tsx @@ -46,23 +46,41 @@ export function DashboardPage(props: DashboardPageProps) { isActive={!selectedTeamId} onClick={() => setSelectedTeamId(undefined)} /> - {teamList.map((team) => ( - setSelectedTeamId(team._id)} - /> - ))} - + {isLoading && ( + <> + + + + + )} + + {!isLoading && ( + <> + {teamList.map((team) => ( + setSelectedTeamId(team._id)} + /> + ))} + + + )}
{!selectedTeamId && } ); } + +function DashboardTabLoading() { + return ( +
+ ); +} diff --git a/src/components/Dashboard/LoadingProgress.tsx b/src/components/Dashboard/LoadingProgress.tsx new file mode 100644 index 000000000..a367efcae --- /dev/null +++ b/src/components/Dashboard/LoadingProgress.tsx @@ -0,0 +1,14 @@ +type LoadingProgressProps = {}; + +export function LoadingProgress(props: LoadingProgressProps) { + return ( +
+ {Array.from({ length: 6 }).map((_, index) => ( +
+ ))} +
+ ); +} diff --git a/src/components/Dashboard/PersonalDashboard.tsx b/src/components/Dashboard/PersonalDashboard.tsx index 81faffcba..4457005c3 100644 --- a/src/components/Dashboard/PersonalDashboard.tsx +++ b/src/components/Dashboard/PersonalDashboard.tsx @@ -3,6 +3,10 @@ import { httpGet } from '../../lib/http'; import type { UserProgress } from '../TeamProgress/TeamProgressPage'; import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions'; import { ResourceProgress } from '../Activity/ResourceProgress'; +import { ProjectProgress } from '../Activity/ProjectProgress'; +import type { PageType } from '../CommandMenu/CommandMenu'; +import { useToast } from '../../hooks/use-toast'; +import { LoadingProgress } from './LoadingProgress'; type UserDashboardResponse = { progresses: UserProgress[]; @@ -12,13 +16,14 @@ type UserDashboardResponse = { type PersonalDashboardProps = {}; export function PersonalDashboard(props: PersonalDashboardProps) { + const toast = useToast(); + const [isLoading, setIsLoading] = useState(true); + const [projectDetails, setProjectDetails] = useState([]); const [personalDashboardDetails, setPersonalDashboardDetails] = useState(); async function loadProgress() { - setIsLoading(true); - const { response: progressList, error } = await httpGet( `${import.meta.env.PUBLIC_API_URL}/v1-user-dashboard`, @@ -31,8 +36,26 @@ export function PersonalDashboard(props: PersonalDashboardProps) { setPersonalDashboardDetails(progressList); } + async function loadAllProjectDetails() { + const { error, response } = await httpGet(`/pages.json`); + + if (error) { + toast.error(error.message || 'Something went wrong'); + return; + } + + if (!response) { + return []; + } + + const allProjects = response.filter((page) => page.group === 'Projects'); + setProjectDetails(allProjects); + } + useEffect(() => { - loadProgress().finally(() => setIsLoading(false)); + Promise.allSettled([loadProgress(), loadAllProjectDetails()]).finally(() => + setIsLoading(false), + ); }, []); const learningRoadmaps = @@ -55,37 +78,68 @@ export function PersonalDashboard(props: PersonalDashboardProps) { return updatedAtB.getTime() - updatedAtA.getTime(); }); + const enrichedProjects = + personalDashboardDetails?.projects?.map((project) => { + const projectDetail = projectDetails.find( + (page) => page.id === project.projectId, + ); + + return { + ...project, + title: projectDetail?.title || 'N/A', + }; + }) || []; + return (
-

+

Progress and Bookmarks

-
- {learningRoadmapsToShow.map((roadmap) => { - const learningCount = roadmap.learning || 0; - const doneCount = roadmap.done || 0; - const totalCount = roadmap.total || 0; - const skippedCount = roadmap.skipped || 0; - - return ( - totalCount ? totalCount : doneCount} - learningCount={ - learningCount > totalCount ? totalCount : learningCount - } - totalCount={totalCount} - skippedCount={skippedCount} - resourceId={roadmap.resourceId} - resourceType="roadmap" - updatedAt={roadmap.updatedAt} - title={roadmap.resourceTitle} - showActions={false} - /> - ); - })} -
+ {isLoading && } + {!isLoading && learningRoadmapsToShow.length > 0 && ( +
+ {learningRoadmapsToShow.map((roadmap) => { + const learningCount = roadmap.learning || 0; + const doneCount = roadmap.done || 0; + const totalCount = roadmap.total || 0; + const skippedCount = roadmap.skipped || 0; + + return ( + totalCount ? totalCount : doneCount} + learningCount={ + learningCount > totalCount ? totalCount : learningCount + } + totalCount={totalCount} + skippedCount={skippedCount} + resourceId={roadmap.resourceId} + resourceType="roadmap" + updatedAt={roadmap.updatedAt} + title={roadmap.resourceTitle} + showActions={false} + /> + ); + })} +
+ )} + +

My Projects

+ {isLoading && } + {!isLoading && enrichedProjects.length > 0 && ( +
+ {enrichedProjects.map((project) => { + return ( + + ); + })} +
+ )}
); }