From c255b277b0a2462fe0abd2ce8a6dbdae080c4676 Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Fri, 13 Oct 2023 00:45:06 +0600 Subject: [PATCH] Refactor UI --- .../MemberCustomProgressModal.tsx | 132 ++-------------- .../TeamProgress/MemberProgressModal.tsx | 130 ++------------- .../MemberProgressModalHeader.tsx | 148 ++++++++++++++++++ .../UserProgress/ProgressLoadingError.tsx | 37 +++++ .../UserProgress/UserCustomProgressModal.tsx | 100 +----------- .../UserProgress/UserProgressModal.tsx | 102 +----------- .../UserProgress/UserProgressModalHeader.tsx | 79 ++++++++++ 7 files changed, 298 insertions(+), 430 deletions(-) create mode 100644 src/components/TeamProgress/MemberProgressModalHeader.tsx create mode 100644 src/components/UserProgress/ProgressLoadingError.tsx create mode 100644 src/components/UserProgress/UserProgressModalHeader.tsx diff --git a/src/components/TeamProgress/MemberCustomProgressModal.tsx b/src/components/TeamProgress/MemberCustomProgressModal.tsx index 56bf7babd..4876e57b4 100644 --- a/src/components/TeamProgress/MemberCustomProgressModal.tsx +++ b/src/components/TeamProgress/MemberCustomProgressModal.tsx @@ -28,6 +28,7 @@ import { calculateDimensions } from '../../../editor/utils/roadmap'; import { isMobile } from '../../../editor/utils/is-mobile'; import { useKeydown } from '../../hooks/use-keydown'; import { useOutsideClick } from '../../hooks/use-outside-click'; +import { MemberProgressModalHeader } from './MemberProgressModalHeader'; export type ProgressMapProps = { member: TeamMember; @@ -39,7 +40,7 @@ export type ProgressMapProps = { isCustomResource?: boolean; }; -type MemberProgressResponse = { +export type MemberProgressResponse = { removed: string[]; done: string[]; learning: string[]; @@ -227,22 +228,6 @@ export function MemberCustomProgressModal(props: ProgressMapProps) { } }, []); - const removedTopics = memberProgress?.removed || []; - const memberDone = - memberProgress?.done.filter((id) => !removedTopics.includes(id)).length || - 0; - const memberLearning = - memberProgress?.learning.filter((id) => !removedTopics.includes(id)) - .length || 0; - const memberSkipped = - memberProgress?.skipped.filter((id) => !removedTopics.includes(id)) - .length || 0; - - const currProgress = member.progress.find((p) => p.resourceId === resourceId); - const memberTotal = currProgress?.total || 0; - - const progressPercentage = Math.round((memberDone / memberTotal) * 100); - return (
- {isCurrentUser && ( -
-

- Follow the Instructions below to update your progress -

-
    -
  • - - Right Mouse Click - {' '} - on a topic to mark as{' '} - Done. -
    • -
  • - - Shift - {' '} - +{' '} - - Click - {' '} - on a topic to mark as{' '} - In progress. -
    • -
-
- )} - -
- {!isCurrentUser && ( -
-

- {member.name}'s Progress -

-

- You are looking at {member.name}'s progress.{' '} - - . -

-

- -

-
- )} -

- - {progressPercentage}% Done - - - - {memberDone} of {memberTotal} done - -

- -
+ {!isLoading && roadmap && (
diff --git a/src/components/TeamProgress/MemberProgressModal.tsx b/src/components/TeamProgress/MemberProgressModal.tsx index fdb640da4..de8e8597b 100644 --- a/src/components/TeamProgress/MemberProgressModal.tsx +++ b/src/components/TeamProgress/MemberProgressModal.tsx @@ -16,7 +16,7 @@ import CloseIcon from '../../icons/close.svg'; import { useToast } from '../../hooks/use-toast'; import { useAuth } from '../../hooks/use-auth'; import { pageProgressMessage } from '../../stores/page'; -import { renderFlowJSON } from '../../../renderer/renderer'; +import { MemberProgressModalHeader } from './MemberProgressModalHeader'; export type ProgressMapProps = { member: TeamMember; @@ -255,22 +255,6 @@ export function MemberProgressModal(props: ProgressMapProps) { }; }, [member]); - const removedTopics = memberProgress?.removed || []; - const memberDone = - memberProgress?.done.filter((id) => !removedTopics.includes(id)).length || - 0; - const memberLearning = - memberProgress?.learning.filter((id) => !removedTopics.includes(id)) - .length || 0; - const memberSkipped = - memberProgress?.skipped.filter((id) => !removedTopics.includes(id)) - .length || 0; - - const currProgress = member.progress.find((p) => p.resourceId === resourceId); - const memberTotal = currProgress?.total || 0; - - const progressPercentage = Math.round((memberDone / memberTotal) * 100); - return (
- {isCurrentUser && ( -
-

- Follow the Instructions below to update your progress -

-
    -
  • - - Right Mouse Click - {' '} - on a topic to mark as{' '} - Done. -
    • -
  • - - Shift - {' '} - +{' '} - - Click - {' '} - on a topic to mark as{' '} - In progress. -
    • -
-
- )} -
- {!isCurrentUser && ( -
-

- {member.name}'s Progress -

-

- You are looking at {member.name}'s progress.{' '} - - . -

-

- -

-
- )} -

- - {progressPercentage}% Done - - - - {memberDone} of {memberTotal} done - -

- -
+
void; + isCurrentUser: boolean; +}; + +export function MemberProgressModalHeader( + props: MemberProgressModalHeaderProps +) { + const { + progress: memberProgress, + member, + resourceId, + isLoading, + onShowMyProgress, + isCurrentUser, + } = props; + + const removedTopics = memberProgress?.removed || []; + const memberDone = + memberProgress?.done.filter((id) => !removedTopics.includes(id)).length || + 0; + const memberLearning = + memberProgress?.learning.filter((id) => !removedTopics.includes(id)) + .length || 0; + const memberSkipped = + memberProgress?.skipped.filter((id) => !removedTopics.includes(id)) + .length || 0; + + const currProgress = member.progress.find((p) => p.resourceId === resourceId); + const memberTotal = currProgress?.total || 0; + + const progressPercentage = Math.round((memberDone / memberTotal) * 100); + + return ( + <> + {isCurrentUser && ( +
+

+ Follow the Instructions below to update your progress +

+
    +
  • + + Right Mouse Click + {' '} + on a topic to mark as{' '} + Done. +
    • +
  • + + Shift + {' '} + +{' '} + + Click + {' '} + on a topic to mark as{' '} + In progress. +
    • +
+
+ )} + +
+ {!isCurrentUser && ( +
+

+ {member.name}'s Progress +

+

+ You are looking at {member.name}'s progress.{' '} + + . +

+

+ +

+
+ )} +

+ + {progressPercentage}% Done + + + + {memberDone} of {memberTotal} done + +

+ +
+ + ); +} diff --git a/src/components/UserProgress/ProgressLoadingError.tsx b/src/components/UserProgress/ProgressLoadingError.tsx new file mode 100644 index 000000000..b7ce8bedc --- /dev/null +++ b/src/components/UserProgress/ProgressLoadingError.tsx @@ -0,0 +1,37 @@ +import { ErrorIcon } from "../ReactIcons/ErrorIcon"; +import { Spinner } from "../ReactIcons/Spinner"; + +type ProgressLoadingErrorProps = { + isLoading: boolean; + error: string; +} + +export function ProgressLoadingError(props: ProgressLoadingErrorProps) { + const { isLoading, error } = props; + + return ( +
+
+
+
+ {isLoading && ( + <> + + + Loading user progress... + + + )} + + {error && ( + <> + + {error} + + )} +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/UserProgress/UserCustomProgressModal.tsx b/src/components/UserProgress/UserCustomProgressModal.tsx index 52e489230..e9c22d63e 100644 --- a/src/components/UserProgress/UserCustomProgressModal.tsx +++ b/src/components/UserProgress/UserCustomProgressModal.tsx @@ -7,12 +7,12 @@ import { topicSelectorAll } from '../../lib/resource-progress'; import CloseIcon from '../../icons/close.svg'; import { deleteUrlParam, getUrlParams } from '../../lib/browser'; import { useAuth } from '../../hooks/use-auth'; -import { Spinner } from '../ReactIcons/Spinner'; -import { ErrorIcon } from '../ReactIcons/ErrorIcon'; import type { GetRoadmapResponse } from '../CustomRoadmap/CustomRoadmap'; import { ReadonlyEditor } from '../../../editor/readonly-editor'; import { isMobile } from '../../../editor/utils/is-mobile'; import { calculateDimensions } from '../../../editor/utils/roadmap'; +import { ProgressLoadingError } from './ProgressLoadingError'; +import { UserProgressModalHeader } from './UserProgressModalHeader'; export type ProgressMapProps = { userId?: string; @@ -147,16 +147,6 @@ export function UserCustomProgressModal(props: ProgressMapProps) { }); }, [userId]); - const user = progressResponse?.user; - const progress = progressResponse?.progress; - - const userProgressTotal = progress?.total || 0; - const userDone = progress?.done?.length || 0; - const progressPercentage = - Math.round((userDone / userProgressTotal) * 100) || 0; - const userLearning = progress?.learning?.length || 0; - const userSkipped = progress?.skipped?.length || 0; - if (currentUser?.id === userId) { deleteUrlParam('s'); return null; @@ -167,31 +157,7 @@ export function UserCustomProgressModal(props: ProgressMapProps) { } if (isLoading || error) { - return ( -
-
-
-
- {isLoading && ( - <> - - - Loading user progress... - - - )} - - {error && ( - <> - - {error} - - )} -
-
-
-
- ); + return ; } return ( @@ -204,62 +170,10 @@ export function UserCustomProgressModal(props: ProgressMapProps) { ref={popupBodyEl} className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`} > -
-
-

- {user?.name}'s Progress -

-

- You can close this popup and start tracking your progress. -

-
-

- - {progressPercentage}% Done - - - - {userDone} of {userProgressTotal} done - -

- -
+
-
-
-
- {isLoading && ( - <> - - - Loading user progress... - - - )} - - {error && ( - <> - - {error} - - )} -
-
-
-
- ); + return ; } return ( @@ -234,62 +200,10 @@ export function UserProgressModal(props: ProgressMapProps) { ref={popupBodyEl} className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`} > -
-
-

- {user?.name}'s Progress -

-

- You can close this popup and start tracking your progress. -

-
-

- - {progressPercentage}% Done - - - - {userDone} of {userProgressTotal} done - -

- -
+
+
+

+ {user?.name}'s Progress +

+

+ You can close this popup and start tracking your progress. +

+
+

+ + {progressPercentage}% Done + + + + {userDone} of {userProgressTotal} done + +

+ +
+ ); +}