Merge pull request #74 from djnunez-aot/setup-react-query-&-refetch

Setup refetch for new submission
bcgov · Sep 16, 2024 · d8d37cd · d8d37cd
2 parents c117e53 + 5242bda
commit d8d37cd
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 67 deletions.
diff --git a/submit-web/src/components/Projects/projectStore.ts b/submit-web/src/components/Projects/projectStore.ts
diff --git a/submit-web/src/components/Submission/SubmissionItemTableRow.tsx b/submit-web/src/components/Submission/SubmissionItemTableRow.tsx
@@ -18,7 +18,7 @@ type SubmissionItemTableRowProps = {
 const StyledTableCell = styled(TableCell)(() => ({
   borderTop: `1px solid ${BCDesignTokens.themeBlue20}`,
   borderBottom: `1px solid ${BCDesignTokens.themeBlue20}`,
-  padding: `${BCDesignTokens.layoutPaddingSmall} !important`,
+  padding: `${BCDesignTokens.layoutPaddingXsmall} !important`,
   "&:first-of-type": {
     borderLeft: `1px solid ${BCDesignTokens.themeBlue20}`,
     borderTopLeftRadius: 5,
@@ -75,6 +75,7 @@ export default function SubmissionItemTableRow({
             style={{
               color: BCDesignTokens.typographyColorLink,
               textDecoration: "none",
+              marginRight: BCDesignTokens.layoutMarginSmall,
             }}
             to={`/projects/${projectId}/submission-packages/${submissionPackageId}/submissions/${item.id}`}
           >

diff --git a/submit-web/src/components/SubmissionItem/ContactInformation/index.tsx b/submit-web/src/components/SubmissionItem/ContactInformation/index.tsx
@@ -156,8 +156,9 @@ export const ContactInformation = () => {
                     />
                   </Grid>
                   <Grid item xs={12}>
-                    <ControlledTextField
+                    <ControlledInputMask
                       name="primaryContact.workPhoneNumber"
+                      mask="(999) 999-9999"
                       label="Work Phone Number"
                     />
                   </Grid>

diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout.tsx
@@ -1,9 +1,7 @@
 import { ProjectsSkeleton } from "@/components/Projects";
-import { useAccountProject } from "@/components/Projects/projectStore";
 import { useBreadCrumb } from "@/components/Shared/layout/SideNav/breadCrumbStore";
 import { PageGrid } from "@/components/Shared/PageGrid";
 import { useGetProject } from "@/hooks/api/useProjects";
-import { AccountProject } from "@/models/Project";
 import {
   createFileRoute,
   Navigate,
@@ -22,28 +20,24 @@ export const Route = createFileRoute(
 });
 
 function ProjectLayout() {
-  const { setAccountProject } = useAccountProject();
   const { projectId: projectIdParam } = useParams({ strict: false });
   const projectId = Number(projectIdParam);
-  const { data, isLoading, isError, error } = useGetProject({
+  const {
+    data: accountProject,
+    isLoading,
+    isError,
+    error,
+  } = useGetProject({
     projectId,
   });
-  const accountProject = data as AccountProject;
   const META_TITLE = `Project ${projectId}`;
   const matches = useRouterState({ select: (s) => s.matches });
   const { replaceBreadcrumb } = useBreadCrumb();
   useEffect(() => {
     if (accountProject) {
-      setAccountProject(accountProject);
       replaceBreadcrumb(META_TITLE, accountProject?.project.name || "");
     }
-  }, [
-    accountProject,
-    matches,
-    setAccountProject,
-    replaceBreadcrumb,
-    META_TITLE,
-  ]);
+  }, [accountProject, matches, replaceBreadcrumb, META_TITLE]);
 
   if (isLoading) {
     return (

diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/index.tsx
@@ -1,8 +1,8 @@
 import { PageGrid } from "@/components/Shared/PageGrid";
 import { Grid } from "@mui/material";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Navigate, useParams } from "@tanstack/react-router";
 import { Project as ProjectComponent } from "@/components/Projects/Project";
-import { useAccountProject } from "@/components/Projects/projectStore";
+import { useGetProject } from "@/hooks/api/useProjects";
 
 export const Route = createFileRoute(
   "/_authenticated/_dashboard/projects/$projectId/_projectLayout/"
@@ -14,7 +14,13 @@ export const Route = createFileRoute(
 });
 
 function ProjectPage() {
-  const { accountProject } = useAccountProject();
+  const { projectId: projectIdParam } = useParams({ strict: false });
+  const projectId = Number(projectIdParam);
+  const { data: accountProject } = useGetProject({
+    projectId,
+  });
+
+  if (!accountProject) return <Navigate to="/error" />;
 
   return (
     <PageGrid>

diff --git a/...rc/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/new-submission.tsx b/...rc/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/new-submission.tsx
@@ -13,6 +13,7 @@ import { useCreateSubmissionPackage } from "@/hooks/api/usePackages";
 import { useGetProject } from "@/hooks/api/useProjects";
 import { SubmissionPackage } from "@/models/Package";
 import { Box, Grid, Typography } from "@mui/material";
+import { useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { BCDesignTokens } from "epic.theme";
 import { useEffect } from "react";
@@ -26,6 +27,7 @@ export const Route = createFileRoute(
 
 export function NewManagementPlan() {
   // get the projectId from the route
+  const queryClient = useQueryClient();
   const { projectId } = Route.useParams();
   const { setIsOpen } = useLoaderBackdrop();
   const { data: accountProject, isPending: isProjectPending } = useGetProject({
@@ -37,6 +39,9 @@ export function NewManagementPlan() {
     notify.error("Failed to create submission package");
 
   const onCreateSuccess = (createdSubmissionPackage: SubmissionPackage) => {
+    queryClient.invalidateQueries({
+      queryKey: ["project", projectId],
+    });
     notify.success("Submission package created successfully");
     navigate({
       to: `/projects/${projectId}/submission-packages/${createdSubmissionPackage.id}`,

diff --git a/.../$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout.tsx b/.../$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout.tsx
@@ -1,8 +1,8 @@
-import { useAccountProject } from "@/components/Projects/projectStore";
 import { ContentBoxSkeleton } from "@/components/Shared/ContentBox/ContentBoxSkeleton";
 import { useBreadCrumb } from "@/components/Shared/layout/SideNav/breadCrumbStore";
 import { PageGrid } from "@/components/Shared/PageGrid";
 import { useGetSubmissionPackage } from "@/hooks/api/usePackages";
+import { useGetProject } from "@/hooks/api/useProjects";
 import { Grid } from "@mui/material";
 import {
   createFileRoute,
@@ -20,11 +20,15 @@ export const Route = createFileRoute(
 });
 
 export default function SubmissionLayout() {
+  const { projectId: projectIdParam } = useParams({ strict: false });
+  const projectId = Number(projectIdParam);
+  const { data: accountProject } = useGetProject({
+    projectId,
+  });
   const { submissionPackageId: submissionPackageIdParam } = useParams({
     strict: false,
   });
   const submissionPackageId = Number(submissionPackageIdParam);
-  const { accountProject, setSubmissionPackage } = useAccountProject();
   const META_TITLE = `Submission ${submissionPackageId}`;
   const { data: submissionPackage, isPending: isSubPackageLoading } =
     useGetSubmissionPackage({
@@ -36,16 +40,9 @@ export default function SubmissionLayout() {
 
   useEffect(() => {
     if (submissionPackage) {
-      setSubmissionPackage(submissionPackage);
       replaceBreadcrumb(META_TITLE, submissionPackage?.name || "");
     }
-  }, [
-    submissionPackage,
-    matches,
-    setSubmissionPackage,
-    replaceBreadcrumb,
-    META_TITLE,
-  ]);
+  }, [submissionPackage, matches, replaceBreadcrumb, META_TITLE]);
 
   if (isSubPackageLoading) {
     return (

diff --git a/...ectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx b/...ectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx
@@ -4,13 +4,19 @@ import { ContentBox } from "@/components/Shared/ContentBox";
 import { YellowBar } from "@/components/Shared/YellowBar";
 import ItemsTable from "@/components/Submission/ItemsTable";
 import { Box, Button, Grid, Typography } from "@mui/material";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import {
+  createFileRoute,
+  Navigate,
+  useNavigate,
+  useParams,
+} from "@tanstack/react-router";
 import { BCDesignTokens } from "epic.theme";
 import { PageGrid } from "@/components/Shared/PageGrid";
 import SubmissionStatusChip from "@/components/Submission/SubmissionStatusChip";
 import { SUBMISSION_STATUS } from "@/models/Submission";
 import { InfoBox } from "@/components/Submission/InfoBox";
-import { useAccountProject } from "@/components/Projects/projectStore";
+import { useGetSubmissionPackage } from "@/hooks/api/usePackages";
+import { useGetProject } from "@/hooks/api/useProjects";
 
 export const Route = createFileRoute(
   "/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/"
@@ -19,9 +25,26 @@ export const Route = createFileRoute(
 });
 
 export default function SubmissionPage() {
-  const { accountProject, submissionPackage } = useAccountProject();
+  const { projectId: projectIdParam } = useParams({ strict: false });
+  const projectId = Number(projectIdParam);
+  const { data: accountProject } = useGetProject({
+    projectId,
+  });
+  const { submissionPackageId: submissionPackageIdParam } = useParams({
+    strict: false,
+  });
+  const submissionPackageId = Number(submissionPackageIdParam);
+  const { data: submissionPackage } = useGetSubmissionPackage({
+    packageId: submissionPackageId,
+    enabled: Boolean(accountProject?.id),
+  });
+
   const navigate = useNavigate();
 
+  if (!accountProject || !submissionPackage) {
+    return <Navigate to={"/error"} />;
+  }
+
   return (
     <PageGrid>
       <Grid item xs={12} lg={10}>