Commit 63bfa4b7 authored by Oleksii Savran's avatar Oleksii Savran
Browse files

Shopping cart by UUID

parent 180b2365
...@@ -14,7 +14,7 @@ import { LocalStorageCart } from 'utilities'; ...@@ -14,7 +14,7 @@ import { LocalStorageCart } from 'utilities';
interface IAccessionListPageState { interface IAccessionListPageState {
filter: AccessionFilter; filter: AccessionFilter;
accessions: FilteredPage<Accession>; accessions: FilteredPage<Accession>;
selected: number[]; selected: string[];
isAllSelected: boolean; isAllSelected: boolean;
} }
...@@ -79,10 +79,10 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -79,10 +79,10 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => { private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const { selected } = this.state; const { selected } = this.state;
const { id } = (e.currentTarget as HTMLElement).dataset; const { uuid } = (e.currentTarget as HTMLElement).dataset;
const updated = selected.filter((selectedId) => selectedId !== +id); const updated = selected.filter((selectedUuid) => selectedUuid !== uuid);
if (updated.length === selected.length) { if (updated.length === selected.length) {
updated.push(+id); updated.push(uuid);
} }
this.setState({ selected: updated }); this.setState({ selected: updated });
}; };
...@@ -95,15 +95,15 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -95,15 +95,15 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
private onToggleAll = () => { private onToggleAll = () => {
this.setState((prevState) => ({ this.setState((prevState) => ({
isAllSelected: !prevState.isAllSelected, 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() { public render() {
const { accessions, selected, isAllSelected } = this.state; const { accessions, selected, isAllSelected } = this.state;
const { t } = this.props; const { t } = this.props;
const selectedIds = new Set(); const selectedUUIDs = new Set();
selected.forEach((id) => selectedIds.add(+id)); selected.forEach((uuid) => selectedUUIDs.add(uuid));
if (accessions === null) { if (accessions === null) {
return ( return (
...@@ -144,13 +144,13 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -144,13 +144,13 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
</thead> </thead>
<tbody> <tbody>
{ accessions.content.map((a, i) => ( { 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> <td>
<input <input
type="checkbox" type="checkbox"
name={ `checkbox-${a.id}-${i}` } name={ `checkbox-${a.uuid}-${i}` }
data-id={ a.id } data-uuid={ a.uuid }
checked={ selectedIds.has(a.id) } checked={ selectedUUIDs.has(a.uuid) }
onChange={ this.toggleRowSelect } onChange={ this.toggleRowSelect }
className="align-middle" className="align-middle"
/> />
......
...@@ -3,15 +3,14 @@ import React from 'react'; ...@@ -3,15 +3,14 @@ import React from 'react';
import { AccessionService } from '@genesys/client/service'; import { AccessionService } from '@genesys/client/service';
import AccessionFilter from '@genesys/client/model/accession/AccessionFilter'; import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
import Accession from '@genesys/client/model/accession/Accession'; import Accession from '@genesys/client/model/accession/Accession';
import FilteredPage, { IPageRequest } from '@genesys/client/model/FilteredPage';
import { withTranslation, WithTranslation } from 'react-i18next'; import { withTranslation, WithTranslation } from 'react-i18next';
import { LocalStorageCart } from 'utilities'; import { LocalStorageCart } from 'utilities';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
interface IAccessionListPageState { interface IAccessionListPageState {
accessions: FilteredPage<Accession & Record<string, any>>; accessions: Array<Accession & Record<string, any>>;
isEmpty: boolean; isEmpty: boolean;
selected: number[]; selected: string[];
isAllSelected: boolean; isAllSelected: boolean;
} }
...@@ -51,24 +50,24 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps, ...@@ -51,24 +50,24 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
}; };
private receiveData = () => { private receiveData = () => {
const accessionsIds = LocalStorageCart.getCartItemsIds(); const accessionsUUIDds = LocalStorageCart.getCartItemsLS();
if (accessionsIds.length === 0) { if (accessionsUUIDds.length === 0) {
this.setState({ isEmpty: true, accessions: null }); this.setState({ isEmpty: true, accessions: null });
} else { } else {
this.loadData({ id: accessionsIds }, {}); this.loadData(accessionsUUIDds);
} }
}; };
private loadData = (filter: AccessionFilter, pageR: IPageRequest): Promise<void> => { private loadData = (UUIDs: string[]): Promise<void> => {
const cartItems = LocalStorageCart.getCartItemsLS(); // const cartItems = LocalStorageCart.getCartItemsLS();
const map = new Map(); // const map = new Map();
cartItems.forEach((item) => map.set(+item.id, item.distributionFormCode)); // cartItems.forEach((item) => map.set(+item.id, item.distributionFormCode));
return AccessionService return AccessionService
.list(filter, pageR) .listAllByUuid(UUIDs)
.then((data: FilteredPage<Accession & any>) => { .then((data: Array<Accession & any>) => {
console.log('accessions: ', data); // console.log('accessions: ', data);
data.content.forEach((accession) => accession.distributionFormCode = map.get(accession.id)); // data.forEach((accession) => accession.distributionFormCode = map.get(accession.id));
this.setState({ accessions: data, isEmpty: false }); this.setState({ accessions: data, isEmpty: false });
}) })
.catch((e) => { .catch((e) => {
...@@ -78,10 +77,10 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps, ...@@ -78,10 +77,10 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => { private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const { selected } = this.state; const { selected } = this.state;
const { id } = (e.currentTarget as HTMLElement).dataset; const { uuid } = (e.currentTarget as HTMLElement).dataset;
const updated = selected.filter((selectedId) => selectedId !== +id); const updated = selected.filter((selectedUuid) => selectedUuid !== uuid);
if (updated.length === selected.length) { if (updated.length === selected.length) {
updated.push(+id); updated.push(uuid);
} }
this.setState({ selected: updated }); this.setState({ selected: updated });
}; };
...@@ -89,23 +88,23 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps, ...@@ -89,23 +88,23 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
private removeItems = () => { private removeItems = () => {
const { selected, accessions } = this.state; const { selected, accessions } = this.state;
LocalStorageCart.removeFromCart(selected); LocalStorageCart.removeFromCart(selected);
const accessionsUpdated = { ...accessions, content: accessions.content.filter((acc) => !selected.some((id) => id === acc.id)) }; const accessionsUpdated = accessions.filter((acc) => !selected.some((uuid) => uuid === acc.uuid));
const isEmpty = accessionsUpdated.content.length === 0; const isEmpty = accessionsUpdated.length === 0;
this.setState({ selected: [], accessions: isEmpty ? null : accessionsUpdated, isEmpty, isAllSelected: false }); this.setState({ selected: [], accessions: isEmpty ? null : accessionsUpdated, isEmpty, isAllSelected: false });
}; };
private onToggleAll = () => { private onToggleAll = () => {
this.setState((prevState) => ({ this.setState((prevState) => ({
isAllSelected: !prevState.isAllSelected, isAllSelected: !prevState.isAllSelected,
selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => acc.id) : [], selected: !prevState.isAllSelected ? prevState.accessions.map((acc) => acc.uuid) : [],
})); }));
}; };
public render() { public render() {
const { accessions, selected, isEmpty, isAllSelected } = this.state; const { accessions, selected, isEmpty, isAllSelected } = this.state;
const { t } = this.props; const { t } = this.props;
const selectedIds = new Set(); const selectedUUIDs = new Set();
selected.forEach((id) => selectedIds.add(id)); selected.forEach((uuid) => selectedUUIDs.add(uuid));
return ( return (
<> <>
...@@ -137,14 +136,14 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps, ...@@ -137,14 +136,14 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{ accessions.content.map((a, i) => ( { accessions.map((a, i) => (
<tr key={ a.id } className={ selectedIds.has(a.id) ? 'table-primary' : '' }> <tr key={ a.uuid } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
<td> <td>
<input <input
type="checkbox" type="checkbox"
name={ `checkbox-${a.id}-${i}` } name={ `checkbox-${a.uuid}-${i}` }
data-id={ a.id } data-uuid={ a.uuid }
checked={ selectedIds.has(a.id) } checked={ selectedUUIDs.has(a.uuid) }
onChange={ this.toggleRowSelect } onChange={ this.toggleRowSelect }
className="align-middle" className="align-middle"
/> />
......
...@@ -35,35 +35,33 @@ export function checkAccessTokens(apiUrl: string, clientId: string, clientSecret ...@@ -35,35 +35,33 @@ export function checkAccessTokens(apiUrl: string, clientId: string, clientSecret
export class LocalStorageCart { export class LocalStorageCart {
public static LS_KEY = 'ui-embedded-cart'; public static LS_KEY = 'ui-embedded-cart';
public static getCartItemsLS = () => JSON.parse(localStorage.getItem(LocalStorageCart.LS_KEY)); public static getCartItemsLS = () => {
const items = JSON.parse(localStorage.getItem(LocalStorageCart.LS_KEY));
public static getCartItemsIds = () => { return items && items.length ? items : [];
const localStorageCart = LocalStorageCart.getCartItemsLS();
return localStorageCart && localStorageCart.length ? localStorageCart.map((id) => +id) : [];
}; };
public static addToCart = (items: number[]) => { public static addToCart = (items: string[]) => {
// console.log('add to cart: ', items); // console.log('add to cart: ', items);
const cartIds = LocalStorageCart.getCartItemsIds(); const cartUuids = LocalStorageCart.getCartItemsLS();
if (cartIds.length === 0) { if (cartUuids.length === 0) {
return localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(items)); return localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(items));
} }
const idsSet = new Set(cartIds); const uuidsSet = new Set(cartUuids);
items.forEach((id) => { items.forEach((id) => {
if (idsSet.has(id)) { if (uuidsSet.has(id)) {
return; return;
} }
idsSet.add(id); uuidsSet.add(id);
}); });
const cart = []; const cart = [];
idsSet.forEach((id) => cart.push(id)); uuidsSet.forEach((id) => cart.push(id));
localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(cart)); localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(cart));
}; };
public static removeFromCart = (ids: number[]) => { public static removeFromCart = (uuids: string[]) => {
const cartIds = LocalStorageCart.getCartItemsIds(); const cartUuids = LocalStorageCart.getCartItemsLS();
const updatedCartItems = cartIds.filter((cartId) => !ids.some((idToRemove) => cartId === idToRemove)); const updatedCartItems = cartUuids.filter((cartUuid) => !uuids.some((uuidToRemove) => cartUuid === uuidToRemove));
localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(updatedCartItems)); localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(updatedCartItems));
} }
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment