diff --git a/app/components/Dashboard.tsx b/app/components/Dashboard.tsx new file mode 100644 index 0000000000..09b9b02bb9 --- /dev/null +++ b/app/components/Dashboard.tsx @@ -0,0 +1,166 @@ +import { ADMIN_ROLES } from "data/group-constants"; +import { useCallback, useMemo } from "react"; +import Link from "next/link"; +import BCGovLink from "@button-inc/bcgov-theme/Link"; +import { useFragment, graphql, useMutation } from "react-relay"; +import { Dashboard_query$key } from "__generated__/Dashboard_query.graphql"; +import { + getContactsPageRoute, + getOperatorsPageRoute, + getProjectRevisionPageRoute, + getProjectsPageRoute, +} from "pageRoutes"; +import { mutation as createProjectMutation } from "mutations/Project/createProject"; +import { createProjectMutationResponse } from "__generated__/createProjectMutation.graphql"; +import { useRouter } from "next/router"; + +interface Props { + query: Dashboard_query$key; +} + +const Dashboard: React.FC = ({ query: queryKey }) => { + const router = useRouter(); + const { session, pendingNewProjectRevision } = useFragment( + graphql` + fragment Dashboard_query on Query { + session { + cifUserBySub { + firstName + } + userGroups + } + pendingNewProjectRevision { + id + } + } + `, + queryKey + ); + + const [createProject, isProjectCreating] = useMutation(createProjectMutation); + + const handleProjectCreation = useCallback(() => { + if (isProjectCreating) return; + createProject({ + variables: { input: {} }, + onCompleted: (response: createProjectMutationResponse) => { + router.push( + getProjectRevisionPageRoute(response.createProject.projectRevision.id) + ); + }, + }); + }, [createProject, isProjectCreating, router]); + + const isAdmin = useMemo( + () => ADMIN_ROLES.some((role) => session?.userGroups?.includes(role)), + [session?.userGroups] + ); + + const addOrResumeProjectLink = useMemo( + () => + pendingNewProjectRevision ? ( + + Resume Project Draft + + ) : ( + + ), + [pendingNewProjectRevision, handleProjectCreation, isProjectCreating] + ); + + return ( + <> +
+

Welcome, {session.cifUserBySub?.firstName}

+
+
+
+
+

Projects

+
+
+ + Projects List + + {addOrResumeProjectLink} +
+
+
+
+

Reporting Operations

+
+
+ + Operators + + + Contacts + +
+
+ {isAdmin && ( +
+
+

Administration

+
+
+
+ )} +
+ + + ); +}; + +export default Dashboard; diff --git a/app/components/Layout/SubHeader.tsx b/app/components/Layout/SubHeader.tsx index 4f9edec4f8..e4435a74a4 100644 --- a/app/components/Layout/SubHeader.tsx +++ b/app/components/Layout/SubHeader.tsx @@ -5,7 +5,7 @@ import subHeaderLinks from "data/subHeaderLinks"; import { useMemo } from "react"; import { match } from "path-to-regexp"; -export default function SubHeader({ isAdmin = false }) { +export default function SubHeader() { const router = useRouter(); const highlightedLinkName = useMemo(() => { @@ -24,7 +24,7 @@ export default function SubHeader({ isAdmin = false }) {