feat: refetch

fullstackatbrown · Aug 4, 2023 · e69971b · e69971b
1 parent 5cb806c
commit e69971b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 46 deletions.
diff --git a/src/components/layouts/PiecesResponsiveGridRead.tsx b/src/components/layouts/PiecesResponsiveGridRead.tsx
@@ -1,5 +1,4 @@
 import { api } from "@CarteBlanche/utils/api";
-import type { Content } from "@prisma/client";
 import clsx from "clsx";
 import Link from "next/link";
 import { useState } from "react";
@@ -8,13 +7,13 @@ import { Delete, Star } from "@mui/icons-material";
 
 import {
   Button,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
-import { UseQueryResult } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 import { Responsive, WidthProvider, type Layouts } from "react-grid-layout";
 import "react-grid-layout/css/styles.css";
@@ -25,9 +24,7 @@ import { SuccessSnackbar } from "../forms/snackbars/SuccessSnackbar";
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 interface PiecesResponsiveGridReadProps {
-  pieces: Content[];
   layout: Layouts | null;
-  refetchPieces: Promise<UseQueryResult>;
 }
 
 /**
@@ -49,9 +46,7 @@ const toggleStatic = (layout: Layouts) => {
 };
 
 export default function PiecesResponsiveGridRead({
-  pieces,
   layout,
-  refetchPieces,
 }: PiecesResponsiveGridReadProps) {
   const [openSuccessSnackbar, setOpenSuccessSnackbar] = useState(false);
   const [successSnackbarMessage, setSuccessSnackbarMessage] = useState("");
@@ -62,6 +57,16 @@ export default function PiecesResponsiveGridRead({
 
   const { data: session } = useSession();
 
+  const {
+    data: pieces,
+    isLoading: piecesLoading,
+    error: piecesError,
+    refetch: refetchPieces,
+  } = api.content.getAllTextAndImageContent.useQuery(
+    {},
+    { refetchOnWindowFocus: false }
+  );
+
   const { mutate: toggleFeatured } =
     api.content.toggleFeaturedContent.useMutation({
       onError(error) {
@@ -73,7 +78,7 @@ export default function PiecesResponsiveGridRead({
         setOpenSuccessSnackbar(true);
         setSuccessSnackbarMessage(`Successfully toggled featured!`);
         setDeleteContentId("");
-        refetchPieces();
+        void refetchPieces();
       },
     });
 
@@ -89,7 +94,7 @@ export default function PiecesResponsiveGridRead({
       setSuccessSnackbarMessage("Successfully deleted content!");
       setDeleteContentId("");
       setOpenConfirmDeleteDialog(false);
-      refetchPieces();
+      void refetchPieces();
     },
   });
 
@@ -113,6 +118,18 @@ export default function PiecesResponsiveGridRead({
     deleteContent({ id });
   };
 
+  if (piecesLoading || piecesError) {
+    return (
+      <CircularProgress
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+        }}
+      />
+    );
+  }
+
   return (
     <>
       <SuccessSnackbar

diff --git a/src/components/layouts/PiecesResponsiveGridWrite.tsx b/src/components/layouts/PiecesResponsiveGridWrite.tsx
@@ -1,4 +1,5 @@
-import type { Content } from "@prisma/client";
+import { api } from "@CarteBlanche/utils/api";
+import { CircularProgress } from "@mui/material";
 
 import {
   type Layout,
@@ -11,13 +12,7 @@ import "react-resizable/css/styles.css";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
-interface PiecesResponsiveGridWriteProps {
-  pieces: Content[];
-}
-
-export default function PiecesResponsiveGridWrite({
-  pieces,
-}: PiecesResponsiveGridWriteProps) {
+export default function PiecesResponsiveGridWrite() {
   const getLayouts = (): Layouts => {
     const savedLayouts = localStorage.getItem("layout");
     return savedLayouts ? (JSON.parse(savedLayouts) as Layouts) : {};
@@ -27,6 +22,23 @@ export default function PiecesResponsiveGridWrite({
     localStorage.setItem("layout", JSON.stringify(layouts));
   };
 
+  const {
+    data: pieces,
+    isLoading: piecesLoading,
+    error: piecesError,
+  } = api.content.getAllTextAndImageContent.useQuery(
+    {},
+    { refetchOnWindowFocus: false }
+  );
+
+  if (piecesLoading || piecesError) {
+    return (
+      <CircularProgress
+        sx={{ position: "absolute", top: "50%", left: "50%" }}
+      />
+    );
+  }
+
   return (
     <ResponsiveGridLayout
       className="layout basis-full"

diff --git a/src/pages/pieces/index.tsx b/src/pages/pieces/index.tsx
@@ -32,18 +32,31 @@ const Pieces: NextPage = () => {
     id: session?.user.id,
   });
 
+  const {
+    data: layout,
+    isLoading: isLoadingLayout,
+    error: errorLayout,
+    refetch: refetchLayout,
+  } = api.layout.getLayout.useQuery(
+    {
+      name: "pieces",
+    },
+    { refetchOnWindowFocus: false }
+  );
+
   const { mutate: upsertLayout, isLoading: isUpsertingLayout } =
     api.layout.upsertLayout.useMutation({
       onError(error) {
         setOpenErrorSnackbar(true);
         setErrorSnackbarMessage(error.message);
         setErrorMessage(error.message);
       },
-      onSuccess() {
+      onSuccess(data) {
         setOpenSuccessSnackbar(true);
         setSuccessSnackbarMessage("Layout successfully saved!");
         setIsEditing(false);
         setErrorMessage("");
+        void refetchLayout();
       },
     });
 
@@ -66,26 +79,7 @@ const Pieces: NextPage = () => {
     upsertLayout(layoutToSave);
   };
 
-  const {
-    data: pieces,
-    isLoading,
-    error,
-    refetch: refetchPieces,
-  } = api.content.getAllTextAndImageContent.useQuery(
-    {},
-    { refetchOnWindowFocus: false }
-  );
-
-  const {
-    data: layout,
-    isLoading: isLoadingLayout,
-    error: errorLayout,
-  } = api.layout.getLayout.useQuery(
-    { name: "pieces" },
-    { refetchOnWindowFocus: false }
-  );
-
-  if (isLoading || isLoadingLayout || !pieces) {
+  if (isLoadingLayout) {
     return (
       <div className="h-screen overflow-hidden">
         <TopNav />
@@ -104,9 +98,7 @@ const Pieces: NextPage = () => {
       </div>
     );
   }
-  if (error) {
-    return <p>Oh no... {error.message}</p>;
-  }
+
   if (errorLayout) {
     return <p>Oh no... {errorLayout.message}</p>;
   }
@@ -150,13 +142,9 @@ const Pieces: NextPage = () => {
       <div className="flex min-h-screen">
         <PiecesSidebar user={user ?? undefined} setIsEditing={setIsEditing} />
         {isEditing ? (
-          <PiecesResponsiveGridWrite pieces={pieces} />
+          <PiecesResponsiveGridWrite />
         ) : (
-          <PiecesResponsiveGridRead
-            pieces={pieces}
-            layout={piecesLayout}
-            refetchPieces={refetchPieces}
-          />
+          <PiecesResponsiveGridRead layout={piecesLayout} />
         )}
       </div>
     </>