Shopping cart by UUID

src/ui/AccessionListPage.tsx

@@ -14,7 +14,7 @@ import { LocalStorageCart } from 'utilities';
 interface IAccessionListPageState {
   filter: AccessionFilter;
   accessions: FilteredPage<Accession>;
-  selected: number[];
+  selected: string[];
   isAllSelected: boolean;
 }
 
@@ -79,10 +79,10 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
 
   private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { selected } = this.state;
-    const { id } = (e.currentTarget as HTMLElement).dataset;
-    const updated = selected.filter((selectedId) => selectedId !== +id);
+    const { uuid } = (e.currentTarget as HTMLElement).dataset;
+    const updated = selected.filter((selectedUuid) => selectedUuid !== uuid);
     if (updated.length === selected.length) {
-      updated.push(+id);
+      updated.push(uuid);
     }
     this.setState({ selected: updated });
   };
@@ -95,15 +95,15 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
   private onToggleAll = () => {
     this.setState((prevState) => ({
       isAllSelected: !prevState.isAllSelected,
-      selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => acc.id) : [],
+      selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => acc.uuid) : [],
     }));
   };
 
   public render() {
     const { accessions, selected, isAllSelected } = this.state;
     const { t } = this.props;
-    const selectedIds = new Set();
-    selected.forEach((id) => selectedIds.add(+id));
+    const selectedUUIDs = new Set();
+    selected.forEach((uuid) => selectedUUIDs.add(uuid));
 
     if (accessions === null) {
       return (
@@ -144,13 +144,13 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
               </thead>
               <tbody>
                 { accessions.content.map((a, i) => (
-                  <tr key={ a.id } className={ selectedIds.has(a.id) ? 'table-primary' : '' }>
+                  <tr key={ a.id } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
                     <td>
                       <input
                         type="checkbox"
-                        name={ `checkbox-${a.id}-${i}` }
-                        data-id={ a.id }
-                        checked={ selectedIds.has(a.id) }
+                        name={ `checkbox-${a.uuid}-${i}` }
+                        data-uuid={ a.uuid }
+                        checked={ selectedUUIDs.has(a.uuid) }
                         onChange={ this.toggleRowSelect }
                         className="align-middle"
                       />

src/ui/CartPage.tsx

@@ -3,15 +3,14 @@ import React from 'react';
 import { AccessionService } from '@genesys/client/service';
 import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
 import Accession from '@genesys/client/model/accession/Accession';
-import FilteredPage, { IPageRequest } from '@genesys/client/model/FilteredPage';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { LocalStorageCart } from 'utilities';
 import { Link } from 'react-router-dom';
 
 interface IAccessionListPageState {
-  accessions: FilteredPage<Accession & Record<string, any>>;
+  accessions: Array<Accession & Record<string, any>>;
   isEmpty: boolean;
-  selected: number[];
+  selected: string[];
   isAllSelected: boolean;
 }
 
@@ -51,24 +50,24 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
   };
 
   private receiveData = () => {
-    const accessionsIds = LocalStorageCart.getCartItemsIds();
-    if (accessionsIds.length === 0) {
+    const accessionsUUIDds = LocalStorageCart.getCartItemsLS();
+    if (accessionsUUIDds.length === 0) {
       this.setState({ isEmpty: true, accessions: null });
     } else {
-      this.loadData({ id: accessionsIds }, {});
+      this.loadData(accessionsUUIDds);
     }
   };
 
-  private loadData = (filter: AccessionFilter, pageR: IPageRequest): Promise<void> => {
-    const cartItems = LocalStorageCart.getCartItemsLS();
-    const map = new Map();
-    cartItems.forEach((item) => map.set(+item.id, item.distributionFormCode));
+  private loadData = (UUIDs: string[]): Promise<void> => {
+    // const cartItems = LocalStorageCart.getCartItemsLS();
+    // const map = new Map();
+    // cartItems.forEach((item) => map.set(+item.id, item.distributionFormCode));
 
     return AccessionService
-      .list(filter, pageR)
-      .then((data: FilteredPage<Accession & any>) => {
-        console.log('accessions: ', data);
-        data.content.forEach((accession) => accession.distributionFormCode = map.get(accession.id));
+      .listAllByUuid(UUIDs)
+      .then((data: Array<Accession & any>) => {
+        // console.log('accessions: ', data);
+        // data.forEach((accession) => accession.distributionFormCode = map.get(accession.id));
         this.setState({ accessions: data, isEmpty: false });
       })
       .catch((e) => {
@@ -78,10 +77,10 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
 
   private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { selected } = this.state;
-    const { id } = (e.currentTarget as HTMLElement).dataset;
-    const updated = selected.filter((selectedId) => selectedId !== +id);
+    const { uuid } = (e.currentTarget as HTMLElement).dataset;
+    const updated = selected.filter((selectedUuid) => selectedUuid !== uuid);
     if (updated.length === selected.length) {
-      updated.push(+id);
+      updated.push(uuid);
     }
     this.setState({ selected: updated });
   };
@@ -89,23 +88,23 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
   private removeItems = () => {
     const { selected, accessions } = this.state;
     LocalStorageCart.removeFromCart(selected);
-    const accessionsUpdated = { ...accessions, content: accessions.content.filter((acc) => !selected.some((id) => id === acc.id)) };
-    const isEmpty = accessionsUpdated.content.length === 0;
+    const accessionsUpdated = accessions.filter((acc) => !selected.some((uuid) => uuid === acc.uuid));
+    const isEmpty = accessionsUpdated.length === 0;
     this.setState({ selected: [], accessions: isEmpty ? null : accessionsUpdated, isEmpty, isAllSelected: false });
   };
 
   private onToggleAll = () => {
     this.setState((prevState) => ({
       isAllSelected: !prevState.isAllSelected,
-      selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => acc.id) : [],
+      selected: !prevState.isAllSelected ? prevState.accessions.map((acc) => acc.uuid) : [],
     }));
   };
 
   public render() {
     const { accessions, selected, isEmpty, isAllSelected } = this.state;
     const { t } = this.props;
-    const selectedIds = new Set();
-    selected.forEach((id) => selectedIds.add(id));
+    const selectedUUIDs = new Set();
+    selected.forEach((uuid) => selectedUUIDs.add(uuid));
 
     return (
       <>
@@ -137,14 +136,14 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
               </tr>
             </thead>
             <tbody>
-              { accessions.content.map((a, i) => (
-                <tr key={ a.id } className={ selectedIds.has(a.id) ? 'table-primary' : '' }>
+              { accessions.map((a, i) => (
+                <tr key={ a.uuid } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
                   <td>
                     <input
                       type="checkbox"
-                      name={ `checkbox-${a.id}-${i}` }
-                      data-id={ a.id }
-                      checked={ selectedIds.has(a.id) }
+                      name={ `checkbox-${a.uuid}-${i}` }
+                      data-uuid={ a.uuid }
+                      checked={ selectedUUIDs.has(a.uuid) }
                       onChange={ this.toggleRowSelect }
                       className="align-middle"
                     />

src/utilities/index.ts

@@ -35,35 +35,33 @@ export function checkAccessTokens(apiUrl: string, clientId: string, clientSecret
 export class LocalStorageCart {
   public static LS_KEY = 'ui-embedded-cart';
 
-  public static getCartItemsLS = () => JSON.parse(localStorage.getItem(LocalStorageCart.LS_KEY));
-
-  public static getCartItemsIds = () => {
-    const localStorageCart = LocalStorageCart.getCartItemsLS();
-    return localStorageCart && localStorageCart.length ? localStorageCart.map((id) => +id) : [];
+  public static getCartItemsLS = () => {
+    const items = JSON.parse(localStorage.getItem(LocalStorageCart.LS_KEY));
+    return items && items.length ? items : [];
   };
 
-  public static addToCart = (items: number[]) => {
+  public static addToCart = (items: string[]) => {
     // console.log('add to cart: ', items);
-    const cartIds = LocalStorageCart.getCartItemsIds();
-    if (cartIds.length === 0) {
+    const cartUuids = LocalStorageCart.getCartItemsLS();
+    if (cartUuids.length === 0) {
       return localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(items));
     }
-    const idsSet = new Set(cartIds);
+    const uuidsSet = new Set(cartUuids);
 
     items.forEach((id) => {
-      if (idsSet.has(id)) {
+      if (uuidsSet.has(id)) {
         return;
       }
-      idsSet.add(id);
+      uuidsSet.add(id);
     });
     const cart = [];
-    idsSet.forEach((id) => cart.push(id));
+    uuidsSet.forEach((id) => cart.push(id));
     localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(cart));
   };
 
-  public static removeFromCart = (ids: number[]) => {
-    const cartIds = LocalStorageCart.getCartItemsIds();
-    const updatedCartItems = cartIds.filter((cartId) => !ids.some((idToRemove) => cartId === idToRemove));
+  public static removeFromCart = (uuids: string[]) => {
+    const cartUuids = LocalStorageCart.getCartItemsLS();
+    const updatedCartItems = cartUuids.filter((cartUuid) => !uuids.some((uuidToRemove) => cartUuid === uuidToRemove));
     localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(updatedCartItems));
   }
 }