fix(frontend): refresh list on create/update

Author: berdal84

frontend/src/app/components/SampleDialog.tsx

@@ -19,6 +19,8 @@ type SampleDialogProps = {
     open: boolean;
     /** Setter to change modal state */
     setOpen: (open: boolean) => void;
+    /** triggered when sample is created or updated */
+    onChange: (sample: Sample) => void;
 }
 
 type FormType =
@@ -36,7 +38,7 @@ const DEFAULT_VALUES: FormType = {
 /**
  * Sample dialog to create or edit a sample.
  */
-export default function SampleDialog({ sample, open, setOpen }: SampleDialogProps) {
+export default function SampleDialog({ sample, open, setOpen, onChange }: SampleDialogProps) {
     const { createSample, updateSample } = useAPI()
     /** Check if sample is being edited, ensure at compile time sample is not undefined when return true */
     const isEditing = (sample: Sample|undefined): sample is Sample => {
@@ -73,6 +75,7 @@ export default function SampleDialog({ sample, open, setOpen }: SampleDialogProp
 
             if (result) {
                 setOpen(false)
+                onChange(result)
             } else {
                 alert(`Unable to ${sample ? "update" : "create"} sample, check console.`)
             }

frontend/src/app/page.tsx

@@ -25,7 +25,7 @@ export default function Home() {
 
   /** On mount */
   useEffect(() => {
-    api.getPage()
+    api.getPage(0)
     // Load sample from sample-id URLParam
     if (urlSampleId) {
       api.getSample(parseInt(urlSampleId, 10))
@@ -46,7 +46,7 @@ export default function Home() {
   }
 
   const handleRefresh = async () => {
-    await api.getPage();
+    await api.refreshPage();
 
     if (sample !== null) {
       api.getSample(sample.id);
@@ -74,6 +74,10 @@ export default function Home() {
     setCurrentSample(null)
   }
 
+  function handleSampleChange(): void {
+    api.refreshPage()
+  }
+
   /**
    * Handle onClose event from Delete Dialog
    */
@@ -136,12 +140,14 @@ export default function Home() {
       <SampleDialog
         open={dialogCreateOpen}
         setOpen={setDialogCreateOpen}
+        onChange={handleSampleChange}
       />
       {/** Edit Sample Dialog */}
       {sample && <SampleDialog
         sample={sample}
         open={dialogEditOpen}
         setOpen={setDialogEditOpen}
+        onChange={handleSampleChange}
       />}
       {/** Delete Sample Dialog */}
       {sample && <ConfirmationDialog

frontend/src/app/utilities/useApi.ts

@@ -16,7 +16,7 @@ const api = axios.create({
  * Hook wrapping several callbacks to interact with Biostack's API while updating the AppContext
  */
 export function useAPI() {
-    const state = useAppContext();
+    const { page } = useAppContext();
     const dispatch = useAppDispatchContext();
 
     /**
@@ -35,8 +35,8 @@ export function useAPI() {
      * @param limit the page item limit (default is current page.limit)
      */
     const getPage = useCallback(async (
-        index: number = state.page.index,
-        limit: number = state.page.limit
+        index: number,
+        limit: number = page.limit
     ) => {
         dispatch({ type: 'setStatus', payload: { status: 'loading' } })
         try {
@@ -48,7 +48,7 @@ export function useAPI() {
         } catch (error: any) {
             return handleError(error)
         }
-    }, [state, dispatch, handleError])
+    }, [page, dispatch, handleError])
 
     /**
      * Get a sample from a given id.
@@ -108,12 +108,16 @@ export function useAPI() {
         }
     };
 
+    /** Refresh the current page */
+    const refreshPage = async () => getPage(page.index)
+
     return {
         getPage,
         getSample,
         createSample,
         updateSample,
         deleteSample,
+        refreshPage,
     }
 }