Skip to content

Commit

Permalink
Simplifying logic and reducing code.
Browse files Browse the repository at this point in the history
  • Loading branch information
@erinesullivan
erinesullivan committed Nov 15, 2024
1 parent 1ee43c0 commit 596d34b
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 106 deletions.
145 changes: 55 additions & 90 deletions src/modules/records/components/BentoboxList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,81 +2,13 @@ import { Anchor, Icon } from '../../../reusable';
import { getMultiSearchRecords } from '../../utilities';
import ILLRequestMessage from '../ILLRequestMessage';
import KeywordSwitch from '../KeywordSwitch';
import PropTypes from 'prop-types';
import React from 'react';
import RecordPreview from '../RecordPreview';
import RecordPreviewPlaceholder from '../RecordPreviewPlaceholder';
import { Specialists } from '../../../specialists';
import { useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';

const BentoResults = ({ data, datastore, query, searchQuery }) => {
// No results
if (data[datastore.uid]?.totalAvailable === 0) {
return (
<>
{datastore.uid === 'primo' && <KeywordSwitch datastore={datastore} query={query} />}
<div className='bentobox-no-results'>
<p className='no-margin'><span className='strong'>No results</span> match your search.</p>
{['databases', 'onlinejournals'].includes(datastore.uid) && (
<p className='u-margin-bottom-none'>Try our <Anchor to={`/${datastore.slug}/browse`}>Browse {datastore.name} page</Anchor> to view all titles alphabetically or by academic discipline.</p>
)}
{datastore.uid === 'mirlyn' && (
<p className='u-margin-bottom-none'><ILLRequestMessage /></p>
)}
</div>
</>
);
}

// Loading results
if (datastore.records.length === 0) {
return (
<div className='results-list results-list-border'>
{[...Array(3)].map((elementInArray, index) => {
return <RecordPreviewPlaceholder key={index} />;
})}
</div>
);
}

// Results
return (
<div className='results-list results-list-border'>
{datastore.records.map((record, index) => {
if (index === 0) {
return (
<div key={`${index}keyword-switch`}>
<KeywordSwitch {...{ datastore, query }} />
<RecordPreview
key={index}
datastoreUid={datastore.uid}
record={record}
searchQuery={searchQuery}
/>
</div>
);
}
return (
<RecordPreview
key={index}
datastoreUid={datastore.uid}
record={record}
searchQuery={searchQuery}
/>
);
})}
</div>
);
};

BentoResults.propTypes = {
data: PropTypes.object,
datastore: PropTypes.object,
query: PropTypes.string,
searchQuery: PropTypes.string
};

const BentoboxList = () => {
const { records } = useSelector((state) => {
return state.records;
Expand All @@ -93,34 +25,67 @@ const BentoboxList = () => {
return (
<article className='bentobox-list' id='search-results'>
{getMultiSearchRecords(active, records).map((datastore, index) => {
if (!datastore.records) {
const { name, records: datastoreRecords, slug, uid } = datastore;

if (!datastoreRecords) {
return null;
}

const totalResults = data[datastore.uid]?.totalAvailable;
const totalResults = data[uid]?.totalAvailable;
const hasRecords = datastoreRecords.length > 0;

return (
<React.Fragment key={datastore.uid}>
<React.Fragment key={uid}>
{index === 2 && <Specialists show={2} />}
<section className={`bentobox bentobox-${datastore.uid}`}>
<div className='container__rounded'>
<Anchor
className='bentobox-heading-container'
to={`/${datastore.slug}${searchQuery}`}
>
<h2 className='bentobox-heading'>{datastore.name}</h2>
<span className='bentobox-results-info'>{typeof totalResults === 'number' ? `${totalResults.toLocaleString()} Result${totalResults === 1 ? '' : 's'}` : 'Loading...'}</span>
</Anchor>
<BentoResults {...{ active, data, datastore, query, searchQuery }} />
{(totalResults > 0 || datastore.records.length > 0) && (
<Anchor
className='bentobox-footer-container'
to={`/${datastore.slug}${searchQuery}`}
>
<span>{`View all ${datastore.name} results`}</span><Icon icon='arrow_forward' size='1.5rem' />
</Anchor>
)}
</div>
<section className={`container__rounded bentobox bentobox-${uid}`}>
<Anchor className='bentobox-heading-container' to={`/${slug}${searchQuery}`}>
<h2 className='bentobox-heading'>{name}</h2>
<span className='bentobox-results-info'>
{typeof totalResults === 'number'
? `${totalResults.toLocaleString()} Result${totalResults === 1 ? '' : 's'}`
: 'Loading...'}
</span>
</Anchor>
{hasRecords && <KeywordSwitch {...{ datastore, query }} />}
{totalResults === 0
? (
<div className='bentobox-no-results'>
<p className='no-margin'>
<span className='strong'>No results</span> match your search.
</p>
{['databases', 'onlinejournals'].includes(uid) && (
<p className='u-margin-bottom-none'>
Try our <Anchor to={`/${slug}/browse`}>Browse {name} page</Anchor> to view all titles alphabetically or by academic discipline.
</p>
)}
{uid === 'mirlyn' && (
<p className='u-margin-bottom-none'>
<ILLRequestMessage />
</p>
)}
</div>
)
: (
<>
<div className='results-list results-list-border'>
{hasRecords
? datastoreRecords.map((record, place) => {
return (
<RecordPreview key={`${uid}-${place}`} {...{ datastoreUid: uid, record, searchQuery }} />
);
})
: Array.from({ length: 3 }).map((elementInArray, place) => {
return <RecordPreviewPlaceholder key={place} />;
})}
</div>
{hasRecords && (
<Anchor className='bentobox-footer-container' to={`/${slug}${searchQuery}`}>
<span>{`View all ${name} results`}</span>
<Icon icon='arrow_forward' size='1.5rem' />
</Anchor>
)}
</>
)}
</section>
</React.Fragment>
);
Expand Down
28 changes: 12 additions & 16 deletions src/modules/records/utilities/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,29 @@ const getFieldValue = (field) => {
};

const getMultiSearchRecords = (activeDatastore, allRecords) => {
const configDs = getDatastoreByUid(activeDatastore);
const configDatastore = getDatastoreByUid(activeDatastore);

if (!configDs) {
if (!configDatastore) {
return null;
}

const { datastores } = configDs;
const { datastores } = configDatastore;

// Pick records corresponding to configDs.datastores using Object.keys
const multiSearchRecords = datastores.reduce((selectedRecords, datastore) => {
const datastoreRecords = datastores.reduce((acc, datastore) => {
if (allRecords[datastore]) {
selectedRecords[datastore] = allRecords[datastore];
acc[datastore] = allRecords[datastore];
}
return selectedRecords;
return acc;
}, {});

const bentoBoxes = datastores.reduce(
(memo, datastore) => {
const { name, slug, uid } = getDatastoreByUid(datastore);
const records = (multiSearchRecords[datastore] && Object.values(multiSearchRecords[datastore]).splice(0, 3)) || [];
memo.push({ name, records, slug, uid });
const multiSearchRecords = datastores.map((datastore) => {
const { name, slug, uid } = getDatastoreByUid(datastore);
const records = datastoreRecords[datastore] ? Object.values(datastoreRecords[datastore]).slice(0, 3) : [];

return memo;
}, []
);
return { name, records, slug, uid };
});

return bentoBoxes;
return multiSearchRecords;
};

export {
Expand Down

0 comments on commit 596d34b

Please sign in to comment.