From 36cd03f14fabae248bdd0bd24c24f59d33c8ee1f Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 25 Jul 2023 20:50:40 +0100 Subject: [PATCH] Use the same add roadmap modal --- src/components/CreateTeam/RoadmapSelector.tsx | 26 ++-- src/components/CreateTeam/Step2.tsx | 37 ++---- src/components/TeamDropdown/TeamDropdown.tsx | 4 - src/components/TeamRoadmaps.tsx | 114 +++++++++++++----- src/components/Toast.tsx | 2 +- 5 files changed, 112 insertions(+), 71 deletions(-) diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx index 5eeb2a0d1..0dc617a97 100644 --- a/src/components/CreateTeam/RoadmapSelector.tsx +++ b/src/components/CreateTeam/RoadmapSelector.tsx @@ -14,13 +14,13 @@ export type TeamResourceConfig = { }[]; type RoadmapSelectorProps = { - team: TeamDocument; + teamId: string; teamResourceConfig: TeamResourceConfig; setTeamResourceConfig: (config: TeamResourceConfig) => void; }; export function RoadmapSelector(props: RoadmapSelectorProps) { - const { team, teamResourceConfig = [], setTeamResourceConfig } = props; + const { teamId, teamResourceConfig = [], setTeamResourceConfig } = props; const [showSelectRoadmapModal, setShowSelectRoadmapModal] = useState(false); const [allRoadmaps, setAllRoadmaps] = useState([]); @@ -51,15 +51,15 @@ export function RoadmapSelector(props: RoadmapSelectorProps) { } async function deleteResource(roadmapId: string) { - if (!team?._id) { + if (!teamId) { return; } pageProgressMessage.set(`Deleting resource`); const { error, response } = await httpPut( - `${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${ - team._id - }`, + `${ + import.meta.env.PUBLIC_API_URL + }/v1-delete-team-resource-config/${teamId}`, { resourceId: roadmapId, resourceType: 'roadmap', @@ -83,17 +83,17 @@ export function RoadmapSelector(props: RoadmapSelectorProps) { } async function addTeamResource(roadmapId: string) { - if (!team?._id) { + if (!teamId) { return; } pageProgressMessage.set(`Adding roadmap to team`); const { error, response } = await httpPut( - `${import.meta.env.PUBLIC_API_URL}/v1-update-team-resource-config/${ - team._id - }`, + `${ + import.meta.env.PUBLIC_API_URL + }/v1-update-team-resource-config/${teamId}`, { - teamId: team._id, + teamId: teamId, resourceId: roadmapId, resourceType: 'roadmap', removed: [], @@ -119,7 +119,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) { onClose={() => setChangingRoadmapId('')} resourceId={changingRoadmapId} resourceType={'roadmap'} - teamId={team?._id!} + teamId={teamId} setTeamResourceConfig={setTeamResourceConfig} defaultRemovedItems={ teamResourceConfig.find((c) => c.resourceId === changingRoadmapId) @@ -132,7 +132,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) { onClose={() => setShowSelectRoadmapModal(false)} teamResourceConfig={teamResourceConfig} allRoadmaps={allRoadmaps} - teamId={team?._id!} + teamId={teamId} onRoadmapAdd={(roadmapId) => { addTeamResource(roadmapId).finally(() => { pageProgressMessage.set(''); diff --git a/src/components/CreateTeam/Step2.tsx b/src/components/CreateTeam/Step2.tsx index c629020b7..71b1aa600 100644 --- a/src/components/CreateTeam/Step2.tsx +++ b/src/components/CreateTeam/Step2.tsx @@ -24,7 +24,7 @@ export function Step2(props: Step2Props) { @@ -41,30 +41,17 @@ export function Step2(props: Step2Props) { ← Previous Step -
- {teamResourceConfig.length === 0 && ( - - )} - -
+ ); diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx index bd191db74..dce18d218 100644 --- a/src/components/TeamDropdown/TeamDropdown.tsx +++ b/src/components/TeamDropdown/TeamDropdown.tsx @@ -139,10 +139,6 @@ export function TeamDropdown() { pageLink = `/team/progress?t=${team._id}`; } - if (team.roadmaps.length === 0) { - pageLink = `/team/new?t=${team._id}&s=2`; - } - return (
  • (''); const [isAddingRoadmap, setIsAddingRoadmap] = useState(false); const [changingRoadmapId, setChangingRoadmapId] = useState(''); @@ -83,12 +85,14 @@ export function TeamRoadmaps() { return; } + setIsLoading(true); Promise.all([ loadTeam(teamId), loadTeamResourceConfig(teamId), loadAllRoadmaps(), ]).finally(() => { pageProgressMessage.set(''); + setIsLoading(false); }); }, [teamId]); @@ -97,6 +101,7 @@ export function TeamRoadmaps() { return; } + toast.loading('Deleting roadmap'); pageProgressMessage.set(`Deleting roadmap from team`); const { error, response } = await httpPut( `${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${ @@ -117,6 +122,35 @@ export function TeamRoadmaps() { setResourceConfigs(response); } + async function onAdd(roadmapId: string) { + if (!teamId) { + return; + } + + toast.loading('Adding roadmap'); + pageProgressMessage.set('Adding roadmap'); + setIsLoading(true); + const { error, response } = await httpPut( + `${ + import.meta.env.PUBLIC_API_URL + }/v1-update-team-resource-config/${teamId}`, + { + teamId: teamId, + resourceId: roadmapId, + resourceType: 'roadmap', + removed: [], + } + ); + + if (error || !response) { + toast.error(error?.message || 'Error adding roadmap'); + return; + } + + setResourceConfigs(response); + toast.success('Roadmap added'); + } + async function onRemove(resourceId: string) { pageProgressMessage.set('Removing roadmap'); @@ -129,26 +163,56 @@ export function TeamRoadmaps() { return null; } + const addRoadmapModal = isAddingRoadmap && ( + setIsAddingRoadmap(false)} + teamResourceConfig={resourceConfigs} + allRoadmaps={allRoadmaps} + teamId={teamId} + onRoadmapAdd={(roadmapId) => { + onAdd(roadmapId).finally(() => { + pageProgressMessage.set(''); + }); + }} + onRoadmapRemove={(roadmapId) => { + if (confirm('Are you sure you want to remove this roadmap?')) { + onRemove(roadmapId).finally(() => {}); + } + }} + /> + ); + + if (resourceConfigs.length === 0 && !isLoading) { + return ( +
    + {addRoadmapModal} + roadmap +

    No roadmaps

    +

    + {canManageCurrentTeam + ? 'Add a roadmap to start tracking your team' + : 'Ask your team admin to add some roadmaps'} +

    + + {canManageCurrentTeam && ( + + )} +
    + ); + } + return (
    - {isAddingRoadmap && ( - { - setChangingRoadmapId(roadmapId); - setIsAddingRoadmap(false); - }} - teamId={team?._id!} - setResourceConfigs={setResourceConfigs} - allRoadmaps={allRoadmaps} - availableRoadmaps={allRoadmaps.filter((r) => { - const isAlreadyAdded = resourceConfigs.find( - (c) => c.resourceId === r.id - ); - return !isAlreadyAdded; - })} - onClose={() => setIsAddingRoadmap(false)} - /> - )} + {addRoadmapModal}
    {changingRoadmapId && ( - { canManageCurrentTeam && ( -
    + {canManageCurrentTeam && ( +
    diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index 9fdfd44df..a5b844a5d 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -37,7 +37,7 @@ export function Toaster(props: Props) { onClick={() => { $toastMessage.set(undefined); }} - className={`fixed bottom-5 left-1/2 max-w-[300px] animate-fade-slide-up min-w-[300px] sm:min-w-[auto] z-50`} + className={`fixed bottom-5 left-1/2 z-50 min-w-[300px] max-w-[300px] animate-fade-slide-up sm:min-w-[auto]`} >