From b3f52ddb875a0404976570807d26d29b03f10e96 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Wed, 20 Mar 2024 14:55:13 -0400 Subject: [PATCH 1/8] Converting `MARCTable` into a functional component. --- .../AdvancedSearchContainer/index.js | 2 +- .../marc/components/MARCTable/index.js | 146 ++++++------------ 2 files changed, 52 insertions(+), 96 deletions(-) diff --git a/src/modules/advanced/components/AdvancedSearchContainer/index.js b/src/modules/advanced/components/AdvancedSearchContainer/index.js index 7ce317cec..dcef870c7 100644 --- a/src/modules/advanced/components/AdvancedSearchContainer/index.js +++ b/src/modules/advanced/components/AdvancedSearchContainer/index.js @@ -17,7 +17,7 @@ function AdvancedSearchContainer () { const activeDatastore = datastores[activeDatastoreIndex]; return ( -
+
{ - if (marc.leader) { - return ( - - LDR - {marc.leader} - - ); - } - - return null; +const name = (field) => { + return Object.keys(field)[0]; }; -Leader.propTypes = { - marc: PropTypes.object -}; +const FieldValue = ({ field }) => { + const value = field[name(field)]; -const FieldName = ({ field }) => { - const name = Object.keys(field)[0]; + if (typeof value === 'string') { + return value; + }; + const subfields = value.subfields; return ( - - {name} - + <> + {subfields?.map((subfield, index) => { + const subfieldName = name(subfield); + return ( + + |{subfieldName} {subfield[subfieldName]} + + ); + })} + ); }; -FieldName.propTypes = { - field: PropTypes.object +FieldValue.propTypes = { + field: PropTypes.object.isRequired }; -const FieldIndicator = ({ field, ind }) => { - const name = Object.keys(field)[0]; - const value = field[name]; - const indicator = value[ind]; - +function MARCTable ({ marc }) { return ( - {indicator} - ); -}; - -FieldIndicator.propTypes = { - field: PropTypes.object, - ind: PropTypes.string -}; - -const FieldValue = ({ field }) => { - const name = Object.keys(field)[0]; - const value = field[name]; - - if (typeof value === 'string') { - return ( - - {field[name]} - - ); - } - - if (typeof value === 'object') { - if (value.subfields) { - return ( - - {value.subfields.map((subfield, index) => { - const subfieldName = Object.keys(subfield)[0]; - +
+

MARC Data

+ + + {marc.leader && ( + + + + + )} + {marc.fields.map((field, index) => { + const fieldName = name(field); return ( - |{subfieldName} {subfield[subfieldName]} + + + {['ind1', 'ind2'].map((indicator) => { + return ( + + ); + })} + + ); })} - - ); - } - } - - return ( - + +
LDR{marc.leader}
+ {fieldName} + + {field[fieldName][indicator]} + + +
- temp -
+
); -}; - -FieldValue.propTypes = { - field: PropTypes.object -}; - -class MARCTable extends React.Component { - render () { - const { marc } = this.props; - - return ( -
-

MARC Data

- - - - {marc.fields.map((field, index) => { - return ( - - - - - - - ); - })} - -
-
- ); - } } MARCTable.propTypes = { From 9346ce3911143e488c2890072066542560dbe614 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Wed, 20 Mar 2024 15:23:32 -0400 Subject: [PATCH 2/8] Converting `ResultsSummary` into a functional component. --- .../components/ResultsSummary/container.js | 61 ------------------- .../components/ResultsSummary/index.js | 33 +++++++++- .../components/ResultsSummary/presenter.js | 22 ------- 3 files changed, 31 insertions(+), 85 deletions(-) delete mode 100644 src/modules/records/components/ResultsSummary/container.js delete mode 100644 src/modules/records/components/ResultsSummary/presenter.js diff --git a/src/modules/records/components/ResultsSummary/container.js b/src/modules/records/components/ResultsSummary/container.js deleted file mode 100644 index 44bc45a05..000000000 --- a/src/modules/records/components/ResultsSummary/container.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import ResultsSummary from './presenter'; -import { getDatastoreName } from '../../../pride'; -import PropTypes from 'prop-types'; - -class ResultsSummaryContainer extends React.Component { - recordsSummary () { - const { activeDatastoreUid } = this.props; - const { page, totalAvailable, totalPages } = this.props.search.data[activeDatastoreUid]; - const displayTotalAvailable = totalAvailable?.toLocaleString(); - const startRange = (page * 10 - 9)?.toLocaleString(); - const endRange = - // Check if on first page or last page - totalAvailable <= 10 || page === totalPages - ? displayTotalAvailable - : (page * 10).toLocaleString(); - - return { - showingRange: `${startRange} to ${endRange}`, - total: `${displayTotalAvailable}`, - resultsText: `result${totalAvailable !== 1 ? 's' : ''}`, - from: getDatastoreName(activeDatastoreUid) - }; - } - - render () { - const { records } = this.props; - - if (!records) { - return null; - } - - const summary = this.recordsSummary(); - - return ( - - ); - } -} - -ResultsSummaryContainer.propTypes = { - activeDatastoreUid: PropTypes.string, - search: PropTypes.object, - records: PropTypes.array -}; - -function mapStateToProps (state) { - return { - search: state.search, - records: state.records.records[state.datastores.active], - activeDatastoreUid: state.datastores.active - }; -} - -export default connect(mapStateToProps)(ResultsSummaryContainer); diff --git a/src/modules/records/components/ResultsSummary/index.js b/src/modules/records/components/ResultsSummary/index.js index 6359d8b0b..d62785f92 100644 --- a/src/modules/records/components/ResultsSummary/index.js +++ b/src/modules/records/components/ResultsSummary/index.js @@ -1,3 +1,32 @@ -import container from './container'; +import React from 'react'; +import { useSelector } from 'react-redux'; -export default container; +const ResultsSummary = () => { + const activeDatastoreUid = useSelector((state) => { + return state.datastores.active; + }); + const datastores = useSelector((state) => { + return state.datastores.datastores; + }); + const search = useSelector((state) => { + return state.search.data[activeDatastoreUid]; + }); + const { page, totalAvailable, totalPages } = search || {}; + const resultsPerPage = 10; + const startRange = page ? (page * resultsPerPage - 9).toLocaleString() : '0'; + const displayTotalAvailable = totalAvailable?.toLocaleString(); + const endRange = totalAvailable <= resultsPerPage || page === totalPages + ? displayTotalAvailable + : (Math.min(page * resultsPerPage, totalAvailable)).toLocaleString(); + const datastore = datastores.find((ds) => { + return ds.uid === activeDatastoreUid; + }); + + return ( +

+ {startRange} to {endRange} of {displayTotalAvailable} {datastore?.name || ''} result{totalAvailable !== 1 ? 's' : ''} +

+ ); +}; + +export default ResultsSummary; diff --git a/src/modules/records/components/ResultsSummary/presenter.js b/src/modules/records/components/ResultsSummary/presenter.js deleted file mode 100644 index d7649b457..000000000 --- a/src/modules/records/components/ResultsSummary/presenter.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const ResultsSummary = ({ - showingRange, - recordsTotal, - recordsResultsText, - resultsFrom -}) => { - return ( -

{showingRange} of {recordsTotal} {resultsFrom} {recordsResultsText}

- ); -}; - -ResultsSummary.propTypes = { - showingRange: PropTypes.string, - recordsTotal: PropTypes.string, - recordsResultsText: PropTypes.string, - resultsFrom: PropTypes.string -}; - -export default ResultsSummary; From a5d492ec96f998338be28aefae91148639758e13 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Wed, 20 Mar 2024 15:38:26 -0400 Subject: [PATCH 3/8] Creating `TruncateText` to replace `TrimCellText`. --- src/modules/records/index.js | 68 +++++++++---------- .../resource-acccess/components/holding.js | 46 +------------ .../components/ResourceAccess/index.js | 46 +------------ .../reusable/components/TruncateText/index.js | 34 ++++++++++ src/modules/reusable/index.js | 4 +- 5 files changed, 76 insertions(+), 122 deletions(-) create mode 100644 src/modules/reusable/components/TruncateText/index.js diff --git a/src/modules/records/index.js b/src/modules/records/index.js index 03ad3ad54..f61c84e64 100644 --- a/src/modules/records/index.js +++ b/src/modules/records/index.js @@ -1,57 +1,57 @@ -import RecordList from './components/RecordList'; +import BentoboxList from './components/BentoboxList'; +import Bookplate from './components/Bookplate'; +import FullRecordPlaceholder from './components/FullRecordPlaceholder'; +import KeywordSwitch from './components/KeywordSwitch'; import Pagination from './components/Pagination'; +import Record from './components/Record'; +import RecordDescription from './components/RecordDescription'; import RecordFull from './components/RecordFull'; import RecordFullFormats from './components/RecordFullFormats'; -import Record from './components/Record'; +import RecordList from './components/RecordList'; +import RecordMetadata from './components/RecordMetadata'; import RecordPlaceholder from './components/RecordPlaceholder'; -import FullRecordPlaceholder from './components/FullRecordPlaceholder'; +import RecommendedResource from './components/RecommendedResource'; import ResultsSummary from './components/ResultsSummary'; -import BentoboxList from './components/BentoboxList'; import ViewMARC from './components/ViewMARC'; -import Bookplate from './components/Bookplate'; -import RecommendedResource from './components/RecommendedResource'; -import RecordDescription from './components/RecordDescription'; import Zotero from './components/Zotero'; -import RecordMetadata from './components/RecordMetadata'; -import KeywordSwitch from './components/KeywordSwitch'; import recordsReducer from './reducer'; import { + addHoldings, addRecords, - clearRecords, - setRecord, clearRecord, - loadingRecords, - addHoldings, + clearRecords, loadingHoldings, - setRecordHoldings, - setRecordGetThis + loadingRecords, + setRecord, + setRecordGetThis, + setRecordHoldings } from './actions'; export { - RecordList, - RecordFull, - Pagination, - ResultsSummary, - recordsReducer, + addHoldings, addRecords, + BentoboxList, + Bookplate, + clearRecord, + clearRecords, + FullRecordPlaceholder, + KeywordSwitch, + loadingHoldings, + loadingRecords, + Pagination, Record, + RecordDescription, + RecordFull, RecordFullFormats, + RecordList, + RecordMetadata, RecordPlaceholder, - FullRecordPlaceholder, - clearRecords, + recordsReducer, + RecommendedResource, + ResultsSummary, setRecord, - clearRecord, - loadingRecords, - BentoboxList, - addHoldings, - loadingHoldings, - setRecordHoldings, setRecordGetThis, + setRecordHoldings, ViewMARC, - Bookplate, - RecommendedResource, - RecordDescription, - Zotero, - RecordMetadata, - KeywordSwitch + Zotero }; diff --git a/src/modules/resource-acccess/components/holding.js b/src/modules/resource-acccess/components/holding.js index 42f2fcf79..f86e1eedb 100644 --- a/src/modules/resource-acccess/components/holding.js +++ b/src/modules/resource-acccess/components/holding.js @@ -1,6 +1,6 @@ /** @jsxImportSource @emotion/react */ import React from 'react'; -import { Anchor, Icon } from '../../reusable'; +import { Anchor, Icon, TruncateText } from '../../reusable'; import PropTypes from 'prop-types'; function Cell ({ cell }) { @@ -33,7 +33,7 @@ function Cell ({ cell }) { if (cell.html) { return ; } - return (); + return (); })()} ); @@ -43,48 +43,6 @@ Cell.propTypes = { cell: PropTypes.object }; -class TrimCellText extends React.Component { - state = { - expanded: false, - trimTextAt: 120 - }; - - render () { - const { text } = this.props; - const { trimTextAt } = this.state; - - // When text doesn't need to be trimmed. - // Only trimming past trim text at, so user don't show all - // for just a few more chars. - if (text.length <= trimTextAt + 60) { - return text; - } - - // When text is longer than the trim text at length. - const isExpanded = this.state.expanded; - const buttonText = isExpanded ? 'Show less' : 'Show more'; - const displayText = isExpanded ? text : `${text.substr(0, trimTextAt)}...`; - return ( - <> - {displayText} - - - ); - } -} - -TrimCellText.propTypes = { - text: PropTypes.string -}; - export default function Holding ({ holding }) { return ( diff --git a/src/modules/reusable/components/ResourceAccess/index.js b/src/modules/reusable/components/ResourceAccess/index.js index 929774dc2..bb1f82aeb 100644 --- a/src/modules/reusable/components/ResourceAccess/index.js +++ b/src/modules/reusable/components/ResourceAccess/index.js @@ -6,7 +6,8 @@ import { Expandable, ExpandableProvider, ExpandableChildren, - ExpandableButton + ExpandableButton, + TruncateText } from '../../../reusable'; import styled from '@emotion/styled'; @@ -69,47 +70,6 @@ const TableStyled = styled('table')({ th: tdAndTh }); -class TrimCellText extends React.Component { - state = { - expanded: false, - trimTextAt: 120 - }; - - render () { - const { text } = this.props; - const { trimTextAt } = this.state; - - // When text doesn't need to be trimmed. - // Only trimming past trim text at, so user don't show all - // for just a few more chars. - if (text.length <= trimTextAt + 60) { - return text; - } - - // When text is longer than the trim text at length. - const isExpanded = this.state.expanded; - const buttonText = isExpanded ? 'Show less' : 'Show more'; - const displayText = isExpanded ? text : `${text.substr(0, trimTextAt)}...`; - return ( - <> - {displayText} - - - ); - } -} - -TrimCellText.propTypes = { - text: PropTypes.string -}; - const Cell = ({ cell, renderAnchor @@ -139,7 +99,7 @@ const Cell = ({ if (cell.html) { return ; } - return (); + return (); })()} ); diff --git a/src/modules/reusable/components/TruncateText/index.js b/src/modules/reusable/components/TruncateText/index.js new file mode 100644 index 000000000..f0ba6d9ac --- /dev/null +++ b/src/modules/reusable/components/TruncateText/index.js @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; + +const TruncateText = ({ text }) => { + const trimTextAt = 120; + const [expanded, setExpanded] = useState(false); + + // When text doesn't need to be trimmed + if (text.length <= trimTextAt + 60) { + return {text}; + } + + // When text is longer than the trim text at length + return ( + <> + {expanded ? text : `${text.substr(0, trimTextAt)}...`} + + + ); +}; + +TruncateText.propTypes = { + text: PropTypes.string +}; + +export default TruncateText; diff --git a/src/modules/reusable/index.js b/src/modules/reusable/index.js index 79b2a261e..1cd166910 100644 --- a/src/modules/reusable/index.js +++ b/src/modules/reusable/index.js @@ -9,6 +9,7 @@ import Icon from './components/Icon'; import Metadata from './components/Metadata'; import ResourceAccess from './components/ResourceAccess'; import { Tab, TabList, Tabs, TabPanel } from './components/Tabs'; +import TruncateText from './components/TruncateText'; export { Alert, @@ -27,5 +28,6 @@ export { Tab, TabList, Tabs, - TabPanel + TabPanel, + TruncateText }; From 7a15f6a38a453ef645c337a10f6aba7df07c0115 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Wed, 20 Mar 2024 16:00:17 -0400 Subject: [PATCH 4/8] Converting `Expandable` and `ExpandableButton` into functional components. --- .../components/Expandable/Expandable.js | 58 +++++++----------- .../components/Expandable/ExpandableButton.js | 59 ++++++------------- 2 files changed, 40 insertions(+), 77 deletions(-) diff --git a/src/modules/reusable/components/Expandable/Expandable.js b/src/modules/reusable/components/Expandable/Expandable.js index e73197ce8..01388cf6b 100644 --- a/src/modules/reusable/components/Expandable/Expandable.js +++ b/src/modules/reusable/components/Expandable/Expandable.js @@ -1,48 +1,34 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback, createContext } from 'react'; import PropTypes from 'prop-types'; -const ExpandableContext = React.createContext(); +export const ExpandableContext = createContext(); -/** - Use Expandable to show only the first few items. The remaining will be hidden and can be expanded by the user. -*/ -class Expandable extends Component { - state = { - expanded: false, - toggleExpanded: () => { - this.setState({ - expanded: !this.state.expanded - }); - }, - disabled: false, - disable: () => { - this.setState({ - disabled: true - }); - } - }; +const Expandable = (props) => { + const [expanded, setExpanded] = useState(false); + const [disabled, setDisabled] = useState(false); - render () { - return ( - - {this.props.children} - - ); - } -} + const toggleExpanded = useCallback(() => { + setExpanded((prevExpanded) => { + return !prevExpanded; + }); + }, [setExpanded]); + + const disable = useCallback(() => { + setDisabled(true); + }, [setDisabled]); + + return ( + + {props.children} + + ); +}; Expandable.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node - ]) -}; - -Expandable.defaultProps = { - expanded: false + ]).isRequired }; export default Expandable; -export { - ExpandableContext -}; diff --git a/src/modules/reusable/components/Expandable/ExpandableButton.js b/src/modules/reusable/components/Expandable/ExpandableButton.js index 22210712c..8e785e101 100644 --- a/src/modules/reusable/components/Expandable/ExpandableButton.js +++ b/src/modules/reusable/components/Expandable/ExpandableButton.js @@ -1,53 +1,30 @@ -import React, { Component } from 'react'; +import React, { useContext } from 'react'; import { ExpandableContext } from './Expandable'; import PropTypes from 'prop-types'; -const cleanList = (list) => { - return list.filter((x) => { - return (!!x); - }).join(' ').trim(); -}; +const ExpandableButton = (props) => { + const context = useContext(ExpandableContext); -class ExpandableButton extends Component { - render () { - const { context } = this.props; + if (context.disabled) return null; - if (context.disabled) { - return null; - } + const handleToggleExpanded = () => { + context.toggleExpanded(); + }; - return ( - - ); - } -} + return ( + + ); +}; ExpandableButton.propTypes = { - context: PropTypes.object, name: PropTypes.string, count: PropTypes.number }; -export default (props) => { - return ( - - {(context) => { - return ; - }} - - ); -}; +export default ExpandableButton; From 11d93f0973bfa1854dde8b0e153c7506ec283cc2 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Wed, 20 Mar 2024 16:04:42 -0400 Subject: [PATCH 5/8] Deleting `ClearSearchButton` as it was never used. --- .../components/ClearSearchButton/container.js | 22 ------------- .../components/ClearSearchButton/index.js | 3 -- .../components/ClearSearchButton/presenter.js | 12 ------- src/modules/search/index.js | 31 +++++++++---------- 4 files changed, 14 insertions(+), 54 deletions(-) delete mode 100644 src/modules/search/components/ClearSearchButton/container.js delete mode 100644 src/modules/search/components/ClearSearchButton/index.js delete mode 100644 src/modules/search/components/ClearSearchButton/presenter.js diff --git a/src/modules/search/components/ClearSearchButton/container.js b/src/modules/search/components/ClearSearchButton/container.js deleted file mode 100644 index f64817189..000000000 --- a/src/modules/search/components/ClearSearchButton/container.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import ClearSearchButton from './presenter'; - -// TODO -/* -import { - clearEverything -} from '../../../../pride-interface'; -*/ - -class ClearSearchButtonContainer extends React.Component { - triggerClick () { - // TODO - // clearEverything() - } - - render () { - return ; - } -} - -export default ClearSearchButtonContainer; diff --git a/src/modules/search/components/ClearSearchButton/index.js b/src/modules/search/components/ClearSearchButton/index.js deleted file mode 100644 index 25bf96567..000000000 --- a/src/modules/search/components/ClearSearchButton/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import ClearSearchContainer from './container'; - -export default ClearSearchContainer; diff --git a/src/modules/search/components/ClearSearchButton/presenter.js b/src/modules/search/components/ClearSearchButton/presenter.js deleted file mode 100644 index eb7dcd414..000000000 --- a/src/modules/search/components/ClearSearchButton/presenter.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const ClearSearch = ({ triggerClick }) => { - return ; -}; - -ClearSearch.propTypes = { - triggerClick: PropTypes.func -}; - -export default ClearSearch; diff --git a/src/modules/search/index.js b/src/modules/search/index.js index f50cbdd61..48c6643e7 100644 --- a/src/modules/search/index.js +++ b/src/modules/search/index.js @@ -1,30 +1,27 @@ import SearchBox from './components/SearchBox'; -import ClearSearchButton from './components/ClearSearchButton'; import SearchResultsMessage from './components/SearchResultsMessage'; - import searchReducer from './reducer'; import { - setSearchQuery, - setSearchQueryInput, - setSearchData, - searching, - setPage, clearSearch, resetSort, - setParserMessage + searching, + setPage, + setSearchData, + setParserMessage, + setSearchQuery, + setSearchQueryInput } from './actions'; export { - SearchBox, - searchReducer, - setSearchQuery, - setSearchQueryInput, - setSearchData, - setPage, - searching, - ClearSearchButton, clearSearch, resetSort, + searchReducer, + SearchBox, + SearchResultsMessage, + searching, + setPage, + setSearchData, setParserMessage, - SearchResultsMessage + setSearchQuery, + setSearchQueryInput }; From 17adaf7f11ab13f931efdfd2f57d5b67b101f42e Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Thu, 21 Mar 2024 08:26:38 -0400 Subject: [PATCH 6/8] Converting `ExpandableChildren` into a functional component. --- .../Expandable/ExpandableChildren.js | 53 ++++--------------- 1 file changed, 9 insertions(+), 44 deletions(-) diff --git a/src/modules/reusable/components/Expandable/ExpandableChildren.js b/src/modules/reusable/components/Expandable/ExpandableChildren.js index 07a0cc373..db59d95fd 100644 --- a/src/modules/reusable/components/Expandable/ExpandableChildren.js +++ b/src/modules/reusable/components/Expandable/ExpandableChildren.js @@ -1,43 +1,20 @@ -import React, { Component } from 'react'; +import React, { useEffect, useContext } from 'react'; import PropTypes from 'prop-types'; import { ExpandableContext } from './Expandable'; -class ExpandableChildren extends Component { - componentDidMount () { - const { - context, - children, - show - } = this.props; +const ExpandableChildren = ({ children, show = 3 }) => { + const context = useContext(ExpandableContext); - if (children.length <= show && !context.disabled) { + useEffect(() => { + if (React.Children.count(children) <= show && !context.disabled) { context.disable(); } - } + }, [children, show, context]); - render () { - const { - context, - children, - show - } = this.props; - - return ( - <> - {context.expanded - ? ( - children - ) - : ( - children.slice(0, show) - )} - - ); - } -} + return context.expanded ? children : React.Children.toArray(children).slice(0, show); +}; ExpandableChildren.propTypes = { - context: PropTypes.object, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node @@ -45,16 +22,4 @@ ExpandableChildren.propTypes = { show: PropTypes.number }; -ExpandableChildren.defaultProps = { - show: 3 -}; - -export default (props) => { - return ( - - {(context) => { - return ; - }} - - ); -}; +export default ExpandableChildren; From ffe72aa9224f1e3a8412a42ee0ac175796f71d63 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Thu, 21 Mar 2024 10:08:55 -0400 Subject: [PATCH 7/8] Removing `DetailsList` as it is not needed. Also deleted `useIsAuthenticated` as it was never used. --- .../core/components/DetailsList/index.js | 28 ------------------- src/modules/core/index.js | 2 -- .../components/GetThisOptionList/index.js | 5 ++-- .../AuthenticationRequired/index.js | 10 ++----- src/modules/profile/index.js | 4 +-- src/modules/profile/use-is-authenticated.js | 22 --------------- 6 files changed, 6 insertions(+), 65 deletions(-) delete mode 100644 src/modules/core/components/DetailsList/index.js delete mode 100644 src/modules/profile/use-is-authenticated.js diff --git a/src/modules/core/components/DetailsList/index.js b/src/modules/core/components/DetailsList/index.js deleted file mode 100644 index cc06aac48..000000000 --- a/src/modules/core/components/DetailsList/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -/* - DetailsList - - This element should be passed in details element children. - It will then provide an "open all" and "close all" button. -*/ - -class DetailsList extends React.Component { - render () { - return ( - <> - {this.props.children} - - ); - } -} - -DetailsList.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node - ]) -}; - -export default DetailsList; diff --git a/src/modules/core/index.js b/src/modules/core/index.js index 63fa845a3..48979f7f0 100644 --- a/src/modules/core/index.js +++ b/src/modules/core/index.js @@ -1,6 +1,5 @@ import Checkbox from './components/Checkbox'; import DateRangeInput from './components/DateRangeInput'; -import DetailsList from './components/DetailsList'; import Footer from './components/Footer'; import Icon from './components/Icon'; import MultipleChoice from './components/MultipleChoice'; @@ -12,7 +11,6 @@ import TrimString from './components/TrimString'; export { Checkbox, DateRangeInput, - DetailsList, Footer, Icon, MultipleChoice, diff --git a/src/modules/getthis/components/GetThisOptionList/index.js b/src/modules/getthis/components/GetThisOptionList/index.js index 59545c2a4..321c4cfab 100644 --- a/src/modules/getthis/components/GetThisOptionList/index.js +++ b/src/modules/getthis/components/GetThisOptionList/index.js @@ -1,7 +1,6 @@ import React from 'react'; import { Alert } from '../../../reusable'; import { connect } from 'react-redux'; -import { DetailsList } from '../../../core'; import GetThisOption from '../GetThisOption'; import { Authentication } from '../../../profile'; import PropTypes from 'prop-types'; @@ -32,13 +31,13 @@ function GetThisOptions (props) { if (options.length) { section = ( - + <> {options.map((option, key) => { return ( ); })} - + ); } } diff --git a/src/modules/profile/components/AuthenticationRequired/index.js b/src/modules/profile/components/AuthenticationRequired/index.js index 82cf30d72..b217fe3e0 100644 --- a/src/modules/profile/components/AuthenticationRequired/index.js +++ b/src/modules/profile/components/AuthenticationRequired/index.js @@ -2,14 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import Authentication from '../Authentication'; -function AuthenticationRequired (props) { - if (!props.children) { - return null; - } +function AuthenticationRequired ({ profile, children }) { + if (!children) return null; - if (props.profile?.status === 'Logged in') { - return props.children; - } + if (profile?.status === 'Logged in') return children; return ( diff --git a/src/modules/profile/index.js b/src/modules/profile/index.js index 7e7d83611..74c897bbe 100644 --- a/src/modules/profile/index.js +++ b/src/modules/profile/index.js @@ -2,12 +2,10 @@ import { addProfile } from './actions'; import Authentication from './components/Authentication'; import AuthenticationRequired from './components/AuthenticationRequired'; import setupProfile from './setupProfile'; -import useIsAuthenticated from './use-is-authenticated'; export { addProfile, Authentication, AuthenticationRequired, - setupProfile, - useIsAuthenticated + setupProfile }; diff --git a/src/modules/profile/use-is-authenticated.js b/src/modules/profile/use-is-authenticated.js deleted file mode 100644 index 83f0f9cb4..000000000 --- a/src/modules/profile/use-is-authenticated.js +++ /dev/null @@ -1,22 +0,0 @@ -import { useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; - -export default function useIsAuthenticated () { - const [isAuthenticated, setIsAuthenticated] = useState(undefined); - const { profile } = useSelector((state) => { - return state; - }); - const profileStatus = profile && profile.status; - - useEffect(() => { - if (profile && profile.status) { - if (profile.status === 'Logged in') { - setIsAuthenticated(true); - } else { - setIsAuthenticated(false); - } - } - }, [profile, profileStatus]); - - return isAuthenticated; -} From 999bf635342acaab5e633bcfeea2a2ba66e83dea Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Thu, 21 Mar 2024 10:44:51 -0400 Subject: [PATCH 8/8] Simplifying `GetThisOptions`. --- .../components/GetThisOptionList/index.js | 74 ------------------- .../components/GetThisOptions/index.js | 56 ++++++++++++++ .../getthis/components/GetThisPage/index.js | 9 ++- src/modules/getthis/index.js | 10 +-- 4 files changed, 68 insertions(+), 81 deletions(-) delete mode 100644 src/modules/getthis/components/GetThisOptionList/index.js create mode 100644 src/modules/getthis/components/GetThisOptions/index.js diff --git a/src/modules/getthis/components/GetThisOptionList/index.js b/src/modules/getthis/components/GetThisOptionList/index.js deleted file mode 100644 index 321c4cfab..000000000 --- a/src/modules/getthis/components/GetThisOptionList/index.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { Alert } from '../../../reusable'; -import { connect } from 'react-redux'; -import GetThisOption from '../GetThisOption'; -import { Authentication } from '../../../profile'; -import PropTypes from 'prop-types'; - -function GetThisOptions (props) { - let section = ( - -

Loading holding options...

- - ); - - if (props.record?.getthis) { - const { status, options } = props.record.getthis; - - section = ( - -

Sorry, something unexpected happened.

-

Status: {status}

- - ); - - if (status === 'Success') { - section = ( - - No options available. - - ); - - if (options.length) { - section = ( - <> - {options.map((option, key) => { - return ( - - ); - })} - - ); - } - } - - if (status === 'Not logged in') { - section = ( - - Log in to view request options - - ); - } - } - - return ( -
-

- How would you like to get this item? -

- {section} -
- ); -} - -GetThisOptions.propTypes = { - record: PropTypes.object -}; - -function mapStateToProps (state) { - return { - record: state.records.record - }; -} - -export default connect(mapStateToProps)(GetThisOptions); diff --git a/src/modules/getthis/components/GetThisOptions/index.js b/src/modules/getthis/components/GetThisOptions/index.js new file mode 100644 index 000000000..d559aed0b --- /dev/null +++ b/src/modules/getthis/components/GetThisOptions/index.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Alert } from '../../../reusable'; +import GetThisOption from '../GetThisOption'; +import { Authentication } from '../../../profile'; +import PropTypes from 'prop-types'; + +function GetThisOptions ({ record }) { + if (!record?.getthis) { + return ( + +

Loading holding options...

+ + ); + } + + const { status, options } = record.getthis; + + if (status === 'Not logged in') { + return ( + + Log in to view request options + + ); + } + + if (status === 'Success') { + return options?.length + ? ( + <> + {options.map((option, index) => { + return ( + + ); + })} + + ) + : ( + + No options available. + + ); + } + + return ( + +

Sorry, something unexpected happened.

+

Status: {status}

+ + ); +} + +GetThisOptions.propTypes = { + record: PropTypes.object.isRequired +}; + +export default GetThisOptions; diff --git a/src/modules/getthis/components/GetThisPage/index.js b/src/modules/getthis/components/GetThisPage/index.js index 7460c992d..07080c49c 100644 --- a/src/modules/getthis/components/GetThisPage/index.js +++ b/src/modules/getthis/components/GetThisPage/index.js @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import { useSelector } from 'react-redux'; import { useParams, useLocation } from 'react-router-dom'; import { requestRecord, requestGetThis } from '../../../pride'; -import { GetThisOptionList, GetThisRecord } from '../../../getthis'; +import { GetThisOptions, GetThisRecord } from '../../../getthis'; import { Alert, Breadcrumb, H1 } from '../../../reusable'; const GetThisPage = () => { @@ -43,7 +43,12 @@ const GetThisPage = () => { : ( <> - +
+

+ How would you like to get this item? +

+ +
)} diff --git a/src/modules/getthis/index.js b/src/modules/getthis/index.js index ed1143e9f..152fbaa03 100644 --- a/src/modules/getthis/index.js +++ b/src/modules/getthis/index.js @@ -1,11 +1,11 @@ +import GetThisForm from './components/GetThisForm'; +import GetThisOptions from './components/GetThisOptions'; import GetThisPage from './components/GetThisPage'; -import GetThisOptionList from './components/GetThisOptionList'; import GetThisRecord from './components/GetThisRecord'; -import GetThisForm from './components/GetThisForm'; export { + GetThisForm, + GetThisOptions, GetThisPage, - GetThisOptionList, - GetThisRecord, - GetThisForm + GetThisRecord };