Merge pull request #1397 from phac-nml/hotfix-sample-modal-cart

Hotfix: Sample details modal add/remove to/from cart
phac-nml · Nov 3, 2022 · c87efff · c87efff
2 parents 3115d7f + aeede87
commit c87efff
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * [UI]: Fixed bug causing associated project samples to be added to the cart with the wrong project identifier. See [PR 1395](https://github.com/phac-nml/irida/pull/1395)
 * [UI]: Fixed bug preventing the removal of locked samples within a project. See [PR 1396](https://github.com/phac-nml/irida/pull/1396)
 * [Developer/UI]: Fixed bug preventing managers from sharing project samples. See [PR 1398](https://github.com/phac-nml/irida/pull/1398)
+* [UI]: Fixed bug where a sample added to the cart from the sample detail viewer still had a `Add to Cart` button if the viewer was closed and relaunched. See [PR 1397](https://github.com/phac-nml/irida/pull/1397)
 
 ## [22.09.1] - 2022/10/21
 * [UI]: Fixed when sharing or exporting sample on the project sample page, and other minor bugs. See [PR 1382](https://github.com/phac-nml/irida/pull/1382)

diff --git a/src/main/webapp/resources/js/apis/cart/cart.ts b/src/main/webapp/resources/js/apis/cart/cart.ts
@@ -122,7 +122,7 @@ export const {
   useRemoveSampleMutation,
 } = cartApi;
 
-const updateCart = (data: CartUpdated) => {
+export const updateCart = (data: CartUpdated) => {
   data.notifications.forEach((n) => notification[n.type](n));
   cartUpdated(data.count);
   return data.count;

diff --git a/src/main/webapp/resources/js/apis/samples/samples.ts b/src/main/webapp/resources/js/apis/samples/samples.ts
@@ -2,12 +2,15 @@ import { setBaseUrl } from "../../utilities/url-utilities";
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
 import { get, post } from "../requests";
-import { AnalysisSubmission } from "../../types/irida";
+import { AnalysisSubmission, Sample } from "../../types/irida";
+import { CartUpdated, updateCart } from "../cart/cart";
 
 const URL = setBaseUrl(`ajax/samples`);
 
 const SEQUENCE_FILES_AJAX_URL = setBaseUrl("ajax/sequenceFiles");
 
+const CART_URL = setBaseUrl("ajax/cart");
+
 export type AnalysisState =
   | "NEW"
   | "PREPARING"
@@ -137,17 +140,15 @@ export interface SequencingObject {
  */
 export const sampleApi = createApi({
   reducerPath: `sampleApi`,
-  baseQuery: fetchBaseQuery({
-    baseUrl: setBaseUrl(URL),
-  }),
+  baseQuery: fetchBaseQuery({}),
   tagTypes: ["SampleDetails", "SampleMetadata"],
   endpoints: (build) => ({
     /*
     Get the default information about a sample
      */
     getSampleDetails: build.query({
       query: ({ sampleId, projectId }) => ({
-        url: `/${sampleId}/details?projectId=${projectId}`,
+        url: `${URL}/${sampleId}/details?projectId=${projectId}`,
       }),
       providesTags: ["SampleDetails"],
     }),
@@ -156,7 +157,7 @@ export const sampleApi = createApi({
      */
     updateSampleDetails: build.mutation({
       query: ({ sampleId, field, value }) => ({
-        url: `/${sampleId}/details`,
+        url: `${URL}/${sampleId}/details`,
         body: { field, value },
         method: "PUT",
       }),
@@ -170,15 +171,15 @@ export const sampleApi = createApi({
         metadataEntry,
         metadataRestriction,
       }) => ({
-        url: `/${sampleId}/metadata`,
+        url: `${URL}/${sampleId}/metadata`,
         body: { projectId, metadataField, metadataEntry, metadataRestriction },
         method: "POST",
       }),
       invalidatesTags: ["SampleMetadata"],
     }),
     removeSampleMetadata: build.mutation({
       query: ({ fieldId, entryId, projectId }) => ({
-        url: `/metadata?projectId=${projectId}&metadataFieldId=${fieldId}&metadataEntryId=${entryId}`,
+        url: `${URL}/metadata?projectId=${projectId}&metadataFieldId=${fieldId}&metadataEntryId=${entryId}`,
         method: "DELETE",
       }),
       invalidatesTags: ["SampleMetadata"],
@@ -193,7 +194,7 @@ export const sampleApi = createApi({
         metadataEntry,
         metadataRestriction,
       }) => ({
-        url: `/${sampleId}/metadata`,
+        url: `${URL}/${sampleId}/metadata`,
         body: {
           projectId,
           metadataFieldId,
@@ -208,7 +209,7 @@ export const sampleApi = createApi({
     }),
     removeSampleFiles: build.mutation({
       query: ({ sampleId, fileObjectId, type }) => ({
-        url: `/${sampleId}/files?fileObjectId=${fileObjectId}&fileType=${type}`,
+        url: `${URL}/${sampleId}/files?fileObjectId=${fileObjectId}&fileType=${type}`,
         method: "DELETE",
       }),
     }),
@@ -219,24 +220,44 @@ export const sampleApi = createApi({
         newFileName,
         removeOriginals,
       }) => ({
-        url: `/${sampleId}/files/concatenate?sequencingObjectIds=${sequencingObjectIds}&newFileName=${newFileName}&removeOriginals=${removeOriginals}`,
+        url: `${URL}/${sampleId}/files/concatenate?sequencingObjectIds=${sequencingObjectIds}&newFileName=${newFileName}&removeOriginals=${removeOriginals}`,
         method: "POST",
       }),
     }),
     updateDefaultSampleSequencingObject: build.mutation({
       query: ({ sampleId, sequencingObjectId }) => ({
-        url: `/${sampleId}/default-sequencing-object?sequencingObjectId=${sequencingObjectId}`,
+        url: `${URL}/${sampleId}/default-sequencing-object?sequencingObjectId=${sequencingObjectId}`,
         method: "PUT",
       }),
       invalidatesTags: ["SampleDetails"],
     }),
     updateDefaultSampleGenomeAssembly: build.mutation({
       query: ({ sampleId, genomeAssemblyId }) => ({
-        url: `/${sampleId}/default-genome-assembly?genomeAssemblyId=${genomeAssemblyId}`,
+        url: `${URL}/${sampleId}/default-genome-assembly?genomeAssemblyId=${genomeAssemblyId}`,
         method: "PUT",
       }),
       invalidatesTags: ["SampleDetails"],
     }),
+    putSampleInCart: build.mutation({
+      query: ({ projectId, samples }) => ({
+        url: CART_URL,
+        body: {
+          projectId,
+          sampleIds: samples.map((s: Sample) => s.id || s.identifier),
+        },
+        method: "POST",
+      }),
+      transformResponse: (res: CartUpdated) => updateCart(res),
+      invalidatesTags: ["SampleDetails"],
+    }),
+    removeSampleFromCart: build.mutation({
+      query: ({ sampleId }) => ({
+        url: `${CART_URL}/sample?sampleId=${sampleId}`,
+        method: "DELETE",
+      }),
+      transformResponse: (res: CartUpdated) => updateCart(res),
+      invalidatesTags: ["SampleDetails"],
+    }),
   }),
 });
 
@@ -250,6 +271,8 @@ export const {
   useConcatenateSequencingObjectsMutation,
   useUpdateDefaultSampleGenomeAssemblyMutation,
   useUpdateDefaultSampleSequencingObjectMutation,
+  usePutSampleInCartMutation,
+  useRemoveSampleFromCartMutation,
 } = sampleApi;
 
 /**

diff --git a/src/main/webapp/resources/js/components/samples/SampleDetailViewer.tsx b/src/main/webapp/resources/js/components/samples/SampleDetailViewer.tsx
@@ -9,7 +9,7 @@ export interface SampleDetailViewerProps {
   projectId: number;
   displayActions?: boolean;
   children: React.ReactElement;
-  refetch?: () => void;
+  refetchCart?: () => void;
 }
 
 /**
@@ -26,7 +26,7 @@ export function SampleDetailViewer({
   projectId,
   displayActions = true,
   children,
-  refetch,
+  refetchCart,
 }: SampleDetailViewerProps): JSX.Element {
   const [visible, setVisible] = useState(false);
 
@@ -41,7 +41,7 @@ export function SampleDetailViewer({
             sampleId={sampleId}
             projectId={projectId}
             displayActions={displayActions}
-            refetchSample={refetch}
+            refetchCart={refetchCart}
             setVisible={setVisible}
             visible={visible}
           />

diff --git a/src/main/webapp/resources/js/components/samples/components/SampleDetailsModal.tsx b/src/main/webapp/resources/js/components/samples/components/SampleDetailsModal.tsx
@@ -10,7 +10,7 @@ export interface DisplaySampleDetailsProps {
   sampleId: number;
   projectId: number;
   displayActions?: boolean;
-  refetch?: () => void;
+  refetchCart?: () => void;
   visible: boolean;
   setVisible: Dispatch<SetStateAction<boolean>>;
 }
@@ -21,7 +21,7 @@ export default function SampleDetailsModal({
   sampleId,
   projectId,
   displayActions,
-  refetch,
+  refetchCart,
   visible,
   setVisible,
 }: DisplaySampleDetailsProps) {
@@ -55,6 +55,7 @@ export default function SampleDetailsModal({
     details.projectId,
     details.projectName,
     details.sample,
+    details.inCart,
     dispatch,
     isLoading,
   ]);
@@ -85,7 +86,7 @@ export default function SampleDetailsModal({
             tab={component}
             onMenuChange={setComponent}
             displayActions={!!displayActions}
-            refetch={refetch}
+            refetchCart={refetchCart}
           />
           <div
             style={{

diff --git a/src/main/webapp/resources/js/components/samples/components/SampleDetailsWrapper.tsx b/src/main/webapp/resources/js/components/samples/components/SampleDetailsWrapper.tsx
@@ -7,7 +7,7 @@ interface SampleDetailsWrapperProps {
   sampleId: number;
   projectId: number;
   displayActions: boolean;
-  refetchSample?: () => void;
+  refetchCart?: () => void;
   visible: boolean;
   setVisible: Dispatch<SetStateAction<boolean>>;
 }
@@ -16,7 +16,7 @@ export default function SampleDetailsWrapper({
   sampleId,
   projectId,
   displayActions,
-  refetchSample,
+  refetchCart,
   visible,
   setVisible,
 }: SampleDetailsWrapperProps) {
@@ -26,7 +26,7 @@ export default function SampleDetailsWrapper({
         sampleId={sampleId}
         projectId={projectId}
         displayActions={displayActions}
-        refetch={refetchSample}
+        refetchCart={refetchCart}
         visible={visible}
         setVisible={setVisible}
       />

diff --git a/src/main/webapp/resources/js/components/samples/components/ViewerHeader.tsx b/src/main/webapp/resources/js/components/samples/components/ViewerHeader.tsx
@@ -4,25 +4,26 @@ import { useAppDispatch, useAppSelector } from "../../../hooks/useState";
 import { generateColourForItem } from "../../../utilities/colour-utilities";
 import { ViewerTab } from "./SampleDetailsModal";
 
+import { updateSampleInCart } from "../sampleSlice";
 import {
-  addSampleToCartThunk,
-  removeSampleFromCartThunk,
-} from "../sampleSlice";
+  usePutSampleInCartMutation,
+  useRemoveSampleFromCartMutation,
+} from "../../../apis/samples/samples";
 
 export const HEADER_HEIGHT = 90;
 export const HEADER_HEIGHT_WITH_PADDING = 97;
 
 export default function ViewerHeader({
   displayActions,
   projectId,
-  refetch,
+  refetchCart,
   tab,
   onMenuChange,
 }: {
   displayActions: boolean;
   projectId: number;
   sampleId: number;
-  refetch: undefined | (() => void);
+  refetchCart: undefined | (() => void);
   tab: ViewerTab;
   onMenuChange: Dispatch<SetStateAction<ViewerTab>>;
 }): JSX.Element {
@@ -31,6 +32,9 @@ export default function ViewerHeader({
     (state) => state.sampleReducer
   );
 
+  const [removeSampleFromCart] = useRemoveSampleFromCartMutation();
+  const [addSampleToCart] = usePutSampleInCartMutation();
+
   const projectColour = useMemo(
     () =>
       generateColourForItem({
@@ -54,7 +58,7 @@ export default function ViewerHeader({
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-          margin: `10px 50px 0 20px`,
+          margin: `10px 56px 0 20px`,
         }}
       >
         <Space>
@@ -83,8 +87,10 @@ export default function ViewerHeader({
             className="t-remove-sample-from-cart"
             danger
             onClick={() => {
-              dispatch(removeSampleFromCartThunk());
-              if (typeof refetch !== "undefined") refetch();
+              removeSampleFromCart({ sampleId: sample.identifier }).then(() => {
+                dispatch(updateSampleInCart({ inCart: false }));
+                if (typeof refetchCart !== "undefined") refetchCart();
+              });
             }}
           >
             {i18n("SampleDetailsViewer.removeFromCart")}
@@ -95,8 +101,10 @@ export default function ViewerHeader({
             size="small"
             className="t-add-sample-to-cart"
             onClick={() => {
-              dispatch(addSampleToCartThunk());
-              if (typeof refetch !== "undefined") refetch();
+              addSampleToCart({ projectId, samples: [sample] }).then(() => {
+                dispatch(updateSampleInCart({ inCart: true }));
+                if (typeof refetchCart !== "undefined") refetchCart();
+              });
             }}
           >
             {i18n("SampleDetailsViewer.addToCart")}

diff --git a/src/main/webapp/resources/js/components/samples/sampleSlice.ts b/src/main/webapp/resources/js/components/samples/sampleSlice.ts
@@ -4,7 +4,6 @@ import {
   SampleMetadataFieldEntry,
 } from "../../apis/samples/samples";
 import { Sample } from "../../types/irida";
-import { putSampleInCart, removeSample } from "../../apis/cart/cart";
 
 /**
  * Action to set the target sample
@@ -119,25 +118,11 @@ export const updateDetails = createAction(
   })
 );
 
-export const addSampleToCartThunk = createAsyncThunk(
-  "sample/addSampleToCartThunk",
-  async (_, { getState }) => {
-    const { sampleReducer } = getState();
-    await putSampleInCart(sampleReducer.projectId, [sampleReducer.sample]);
-    return {};
-  }
-);
-
-export const removeSampleFromCartThunk = createAsyncThunk(
-  "sample/removeSampleFromCartThunk",
-  async (_, { getState }) => {
-    const { sampleReducer } = getState();
-    await removeSample(
-      sampleReducer.projectId,
-      sampleReducer.sample.identifier
-    );
-    return {};
-  }
+export const updateSampleInCart = createAction(
+  `sample/updateSampleInCart`,
+  ({ inCart }) => ({
+    payload: { inCart },
+  })
 );
 
 /**
@@ -261,12 +246,8 @@ const sampleSlice = createSlice({
       };
     });
 
-    builder.addCase(addSampleToCartThunk.fulfilled, (state) => {
-      state.inCart = true;
-    });
-
-    builder.addCase(removeSampleFromCartThunk.fulfilled, (state) => {
-      state.inCart = false;
+    builder.addCase(updateSampleInCart, (state, action) => {
+      state.inCart = action.payload.inCart;
     });
   },
 });

diff --git a/src/main/webapp/resources/js/pages/cart/components/SampleRenderer.jsx b/src/main/webapp/resources/js/pages/cart/components/SampleRenderer.jsx
@@ -41,7 +41,7 @@ export class SampleRenderer extends React.Component {
             <SampleDetailViewer
               sampleId={sample.id}
               projectId={this.props.data.project.id}
-              refetch={this.props.refetch}
+              refetchCart={this.props.refetch}
             >
               <Button
                 className="t-sample-details-btn"