diff --git a/src/ui/AccessionListPage.tsx b/src/ui/AccessionListPage.tsx index 1ff28e629058d311944e61beb22462ac1a289044..288da101a9d63cf9ebb588a3a0c77d0612bf0ca2 100644 --- a/src/ui/AccessionListPage.tsx +++ b/src/ui/AccessionListPage.tsx @@ -14,7 +14,7 @@ import { LocalStorageCart } from 'utilities'; interface IAccessionListPageState { filter: AccessionFilter; accessions: FilteredPage; - selected: number[]; + selected: string[]; isAllSelected: boolean; } @@ -79,10 +79,10 @@ class AccessionListPage extends React.Component) => { 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 { 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 { accessions.content.map((a, i) => ( - + diff --git a/src/ui/CartPage.tsx b/src/ui/CartPage.tsx index 3aa455ba7d78e18d160f6fca031b535e074dfa1b..ee94cad2580e3806c65d6767008997beb93ed147 100644 --- a/src/ui/CartPage.tsx +++ b/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>; + accessions: Array>; isEmpty: boolean; - selected: number[]; + selected: string[]; isAllSelected: boolean; } @@ -51,24 +50,24 @@ export class AccessionListPage extends React.Component { - 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 => { - const cartItems = LocalStorageCart.getCartItemsLS(); - const map = new Map(); - cartItems.forEach((item) => map.set(+item.id, item.distributionFormCode)); + private loadData = (UUIDs: string[]): Promise => { + // 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) => { - console.log('accessions: ', data); - data.content.forEach((accession) => accession.distributionFormCode = map.get(accession.id)); + .listAllByUuid(UUIDs) + .then((data: Array) => { + // 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) => { 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 { 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 - { accessions.content.map((a, i) => ( - + { accessions.map((a, i) => ( + diff --git a/src/utilities/index.ts b/src/utilities/index.ts index 6ea58e4646a3fb7aded106150057f59820dd0c69..e2f259ca0860dd183b4424e660690bfb19a9366c 100644 --- a/src/utilities/index.ts +++ b/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)); } }