From 2fd10dee1cdcad0f8223db0f0f3367ae6a81c8c3 Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Tue, 11 Oct 2022 16:34:50 -0400 Subject: [PATCH 01/93] set up structure for filter sidebar --- src/components/FilterPanel/FilterPanel.jsx | 84 ++++++++++++ src/components/FilterPanel/FilterPanel.md | 5 + .../FilterPanel/FilterPanel.test.jsx | 9 ++ src/components/FilterPanel/index.js | 3 + src/routes/Search/Search.jsx | 128 ++++++++++-------- 5 files changed, 170 insertions(+), 59 deletions(-) create mode 100644 src/components/FilterPanel/FilterPanel.jsx create mode 100644 src/components/FilterPanel/FilterPanel.md create mode 100644 src/components/FilterPanel/FilterPanel.test.jsx create mode 100644 src/components/FilterPanel/index.js diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx new file mode 100644 index 00000000..79a92b89 --- /dev/null +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -0,0 +1,84 @@ +/* eslint-disable no-unused-vars */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + +import { + Dialog, + IconButton, + Toolbar, +} from '@material-ui/core'; + +import CloseIcon from '@material-ui/icons/Close'; + +const styles = { + toolbar: { + justifyContent: 'flex-end', + }, + dialogBody: { + padding: '0 24px', + marginBottom: 15, + }, +}; + +const FilterPanel = ({ + open, + onClose, + type, + classes, + filters, + setFilters, +}) => { + const placeholder = `We got some filters: ${Object.keys(filters).join()}!`; + + if (type === 'desktop') { + return ( +
+ { placeholder } +
+ ); + } + return ( +
+ + + + + + +
+ { placeholder } +
+ +
+ ); +}; + +FilterPanel.propTypes = { + open: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + type: PropTypes.oneOf(['desktop', 'mobile']), + filters: PropTypes.shape({ + stars: PropTypes.number, + distance: PropTypes.number, + price: PropTypes.number, + }), + setFilters: PropTypes.func.isRequired, +}; + +FilterPanel.defaultProps = { + type: 'mobile', + filters: { + stars: 0, + distance: 0, + price: 0, + }, +}; + +export default withStyles(styles)(FilterPanel); diff --git a/src/components/FilterPanel/FilterPanel.md b/src/components/FilterPanel/FilterPanel.md new file mode 100644 index 00000000..c7f963a9 --- /dev/null +++ b/src/components/FilterPanel/FilterPanel.md @@ -0,0 +1,5 @@ +## FilterPanel + +```jsx + +``` \ No newline at end of file diff --git a/src/components/FilterPanel/FilterPanel.test.jsx b/src/components/FilterPanel/FilterPanel.test.jsx new file mode 100644 index 00000000..fadc7edc --- /dev/null +++ b/src/components/FilterPanel/FilterPanel.test.jsx @@ -0,0 +1,9 @@ +/* eslint-disable no-unused-vars */ +import React from 'react'; +import { render } from '@testing-library/react'; + +import FilterPanel from './FilterPanel'; + +test('FilterPanel', () => { + +}); diff --git a/src/components/FilterPanel/index.js b/src/components/FilterPanel/index.js new file mode 100644 index 00000000..548067c4 --- /dev/null +++ b/src/components/FilterPanel/index.js @@ -0,0 +1,3 @@ +import FilterPanel from './FilterPanel'; + +export default FilterPanel; diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 9d828fd3..f730b90d 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -13,7 +13,7 @@ import Typography from '@material-ui/core/Typography'; import SearchIcon from '@material-ui/icons/Search'; import BusinessCard from '../../components/BusinessCard'; -import FilterDialog from '../../components/FilterDialog'; +import FilterPanel from '../../components/FilterPanel'; import Pagination from '../../components/Pagination'; import useSearch from './hooks/useSearch'; @@ -31,11 +31,21 @@ const styles = (theme) => ({ margin: '0 15px', }, }, - searchResultsWrapper: { + resultsWrapper: { + display: 'flex', + flexDirection: 'column', + [theme.breakpoints.up('mobile')]: { + display: 'grid', + gridTemplateColumns: '1fr 3fr', + }, + }, + filters: { + padding: '25px', + }, + list: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, 350px)', gridGap: 50, - justifyContent: 'center', }, searchResult: { [theme.breakpoints.up('xs')]: { @@ -68,6 +78,9 @@ const styles = (theme) => ({ flexGrow: 2, }, filterButton: { + [theme.breakpoints.up('mobile')]: { + display: 'none', + }, width: '100px !important', height: 36, }, @@ -155,29 +168,26 @@ const Search = ({ })} > {searchResults !== null && searchResults.length > 0 && ( - <> -
- - {getResultsString()} - - -
-
- {openFilter && ( - setOpenFilter(false)} - onToggle={() => setOpenFilter(!openFilter)} - defaultFilters={filters} - setFilters={(changedFilters) => setFilters(changedFilters)} - type={matches ? 'desktop' : 'mobile'} - overrideClasses={{ root: classes.filterDialog }} - /> - )} -
- +
+

{ getResultsString() }

+ + setOpenFilter(false)} + type={matches ? 'desktop' : 'mobile'} + filters={filters} + setFilter={setFilters} + /> +
)} -
+
{searchResults !== null && searchResults.length > 0 && searchResults.map((result) => (
@@ -189,41 +199,41 @@ const Search = ({
))}
- {pagination && pagination !== null && ( - - )} - {searchResults !== null - && search.searchTerm !== null - && searchResults.length === 0 - && !loading - && ( -
- - No Results - -
- -
- - We couldn’t find what you’re looking for. - Please try again or add a space to Lavender Book. - -
- - -
-
- )} - {loading && }
+ {pagination && pagination !== null && ( + + )} + {searchResults !== null + && search.searchTerm !== null + && searchResults.length === 0 + && !loading + && ( +
+ + No Results + +
+ +
+ + We couldn’t find what you’re looking for. + Please try again or add a space to Lavender Book. + +
+ + +
+
+ )} + {loading && } ); }; From 11e50c983f5242ec40fffd053aa53a187e03243e Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Wed, 12 Oct 2022 14:31:44 -0400 Subject: [PATCH 02/93] header --- src/components/FilterPanel/FilterPanel.jsx | 27 ++++++++++++++++-- src/routes/Search/Search.jsx | 32 +++------------------- 2 files changed, 28 insertions(+), 31 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 79a92b89..5852aa7c 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -7,6 +7,7 @@ import { Dialog, IconButton, Toolbar, + Button, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; @@ -19,6 +20,13 @@ const styles = { padding: '0 24px', marginBottom: 15, }, + filterHeader: { + display: 'flex', + flexDirection: 'row', + }, + clearButton: { + marginLeft: 'auto', + }, }; const FilterPanel = ({ @@ -29,12 +37,25 @@ const FilterPanel = ({ filters, setFilters, }) => { - const placeholder = `We got some filters: ${Object.keys(filters).join()}!`; + const checkedFilters = 2; + const header = ( +
+

+ Filter + { ` (${checkedFilters})` } +

+ +
+ ); if (type === 'desktop') { return (
- { placeholder } + { header }
); } @@ -53,7 +74,7 @@ const FilterPanel = ({
- { placeholder } + { header }
diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index f730b90d..4d2e3a01 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -40,7 +40,9 @@ const styles = (theme) => ({ }, }, filters: { - padding: '25px', + [theme.breakpoints.up('mobile')]: { + padding: '61px 24px 0 24px', + }, }, list: { display: 'grid', @@ -124,33 +126,8 @@ const Search = ({ updateFilters('rating', changedFilters.stars); }; - const getResultsString = () => { - let text = `${pagination.total_count} results found for`; - let comma = ''; - if (search.searchTerm) { - text = `${text} ${search.searchTerm}`; - comma = ','; - } - if (search.category) { - text = `${text}${comma} ${search.category}`; - comma = ','; - } - if (search.location) { - text = `${text}${comma} ${search.location}`; - comma = ','; - } - const indicatorNames = indicators - .filter((indicator) => search.indicators.includes(indicator.value)) - .map((indicator) => indicator.name); - - if (indicatorNames.length < 3) { - text = `${text}${comma} ${indicatorNames.join(' and ')}`; - } else { - text = `${text}${comma} ${indicatorNames[0]} and ${indicatorNames.length - 1} more`; - } - return text; - }; const isGeoLoading = isGeolocationEnabled && coords === null; + return (
{indicators.length > 0 && searchResults === null && !isGeoLoading && !loading && ( @@ -169,7 +146,6 @@ const Search = ({ > {searchResults !== null && searchResults.length > 0 && (
-

{ getResultsString() }

); + const nameFilter = ( + + ); + + const priceFilter =
$$ more to come $$
; + + const indicatorFilters = ( +
+ { indicators.map((i) => ( + } label={i.name} /> + )) } +
+ ); + if (type === 'desktop') { return (
{ header } + { nameFilter } + { priceFilter } + { indicatorFilters }
); } @@ -75,6 +103,9 @@ const FilterPanel = ({
{ header } + { nameFilter } + { priceFilter } + { indicatorFilters }
@@ -85,21 +116,12 @@ FilterPanel.propTypes = { open: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, type: PropTypes.oneOf(['desktop', 'mobile']), - filters: PropTypes.shape({ - stars: PropTypes.number, - distance: PropTypes.number, - price: PropTypes.number, - }), - setFilters: PropTypes.func.isRequired, + indicators: PropTypes.arrayOf(PropTypes.string), }; FilterPanel.defaultProps = { type: 'mobile', - filters: { - stars: 0, - distance: 0, - price: 0, - }, + indicators: [], }; export default withStyles(styles)(FilterPanel); diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 4d2e3a01..f99445a2 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-vars */ import React, { useState } from 'react'; import PropTypes from 'prop-types'; @@ -158,8 +159,7 @@ const Search = ({ open={openFilter} onClose={() => setOpenFilter(false)} type={matches ? 'desktop' : 'mobile'} - filters={filters} - setFilter={setFilters} + indicators={indicators} /> )} From 186a377462901e48f8aa205871b4519d1f7700a0 Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Sat, 15 Oct 2022 15:27:02 -0400 Subject: [PATCH 04/93] improve markup; add click handlers to controls --- src/components/FilterPanel/FilterPanel.jsx | 60 ++++++++++++++++++---- 1 file changed, 50 insertions(+), 10 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 194767a2..718e3b52 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -1,4 +1,4 @@ -/* eslint-disable no-unused-vars */ +/* eslint-disable no-unused-vars, no-console */ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; @@ -11,9 +11,11 @@ import { TextField, FormControlLabel, Checkbox, + InputAdornment, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; +import SearchIcon from '@material-ui/icons/Search'; const styles = { toolbar: { @@ -23,14 +25,14 @@ const styles = { padding: '0 24px', marginBottom: 15, }, - filterHeader: { + header: { display: 'flex', flexDirection: 'row', }, clearButton: { marginLeft: 'auto', }, - indicators: { + controls: { display: 'flex', flexDirection: 'column', }, @@ -42,10 +44,12 @@ const FilterPanel = ({ type, classes, indicators, + /* search */ + /* updateSearch */ }) => { const checkedFilters = 2; const header = ( -
+

Filter { ` (${checkedFilters})` } @@ -64,16 +68,52 @@ const FilterPanel = ({ variant="outlined" label="Search by name within results" fullWidth + InputProps={{ + endAdornment: ( + + console.log('call updateSearch with input value')} + > + + + + ), + }} /> ); - const priceFilter =
$$ more to come $$
; + const priceFilter = ( +
+
+ Price +
+
+ { [1, 2, 3, 4].map((i) => ( + console.log('price checkbox!')} />} + label={`${'$'.repeat(i)}`} + /> + )) } +
+
+ ); const indicatorFilters = ( -
- { indicators.map((i) => ( - } label={i.name} /> - )) } +
+
+ Indicators +
+
+ { indicators.map((i) => ( + console.log('indicator!')} />} + label={i.name} + /> + )) } +
); @@ -116,7 +156,7 @@ FilterPanel.propTypes = { open: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, type: PropTypes.oneOf(['desktop', 'mobile']), - indicators: PropTypes.arrayOf(PropTypes.string), + indicators: PropTypes.arrayOf(PropTypes.object), }; FilterPanel.defaultProps = { From a2a0fbeecf671a074f5feba455b772086b0bf294 Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Wed, 19 Oct 2022 16:50:55 -0400 Subject: [PATCH 05/93] state for filter vals; attempt at collapsing list --- src/components/FilterPanel/FilterPanel.jsx | 123 ++++++++++++++++----- 1 file changed, 96 insertions(+), 27 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 718e3b52..7ba5d4ee 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -1,5 +1,5 @@ /* eslint-disable no-unused-vars, no-console */ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; @@ -12,6 +12,10 @@ import { FormControlLabel, Checkbox, InputAdornment, + FormControl, + FormLabel, + FormGroup, + Collapse, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; @@ -22,8 +26,10 @@ const styles = { justifyContent: 'flex-end', }, dialogBody: { - padding: '0 24px', + display: 'flex', + flexDirection: 'column', marginBottom: 15, + padding: '0 24px', }, header: { display: 'flex', @@ -38,6 +44,13 @@ const styles = { }, }; +const priceFilterDefault = { + price_1: false, + price_2: false, + price_3: false, + price_4: false, +}; + const FilterPanel = ({ open, onClose, @@ -47,15 +60,37 @@ const FilterPanel = ({ /* search */ /* updateSearch */ }) => { - const checkedFilters = 2; + const [nameFilterVal, setNameFilterVal] = useState(''); + const [priceFilterVal, setPriceFilterVal] = useState(priceFilterDefault); + const [indicatorVals, setIndicatorVals] = useState({}); + const [filterCount, setFilterCount] = useState(0); + const [collapsed, setCollapsed] = useState(true); + + useEffect(() => { + let active = 0; + if (nameFilterVal) { + active++; + } + active += Object.values(priceFilterVal).filter((v) => v === true).length; + active += Object.values(indicatorVals).length; + setFilterCount(active); + }, [nameFilterVal, priceFilterVal, indicatorVals]); + + const clearFilters = () => { + setNameFilterVal(''); + setPriceFilterVal(priceFilterDefault); + setIndicatorVals({}); + }; + const header = (

Filter - { ` (${checkedFilters})` } + {filterCount > 0 && ` (${filterCount})`}

@@ -64,6 +99,7 @@ const FilterPanel = ({ const nameFilter = ( console.log('call updateSearch with input value')} + onClick={() => console.log('do the search!')} > ), }} + value={nameFilterVal} + onChange={(e) => setNameFilterVal(e.target.value)} /> ); const priceFilter = ( -
-
- Price -
-
+ + Price + { [1, 2, 3, 4].map((i) => ( console.log('price checkbox!')} />} + control={( + setPriceFilterVal( + { ...priceFilterVal, [e.target.name]: e.target.checked }, + )} + inputProps={{ 'aria-label': `Price, level ${i}` }} + /> + )} label={`${'$'.repeat(i)}`} /> )) } -
-
+ + ); const indicatorFilters = ( -
-
- Indicators -
-
- { indicators.map((i) => ( - console.log('indicator!')} />} - label={i.name} - /> - )) } -
-
+ + Indicators + + + { indicators.map((i) => ( + { + if (e.target.checked) { + setIndicatorVals({ ...indicatorVals, [e.target.name]: e.target.value }); + } else { + setIndicatorVals( + { + ...Object.fromEntries( + Object.entries(indicatorVals).filter( + ([key, val]) => key !== e.target.name, + ), + ), + }, + ); + } + }} + /> + )} + label={i.name} + /> + )) } + + + + ); if (type === 'desktop') { From ac165b530bb6be4a816e7ca950db109d839e75c1 Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Wed, 26 Oct 2022 12:15:56 -0400 Subject: [PATCH 06/93] collapse indicators --- src/components/FilterPanel/FilterPanel.jsx | 79 +++++++++++----------- 1 file changed, 40 insertions(+), 39 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 7ba5d4ee..302acdf9 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -38,10 +38,6 @@ const styles = { clearButton: { marginLeft: 'auto', }, - controls: { - display: 'flex', - flexDirection: 'column', - }, }; const priceFilterDefault = { @@ -145,44 +141,49 @@ const FilterPanel = ({ ); + const indicatorCheckboxes = indicators.map((i) => ( + { + if (e.target.checked) { + setIndicatorVals({ ...indicatorVals, [e.target.name]: e.target.value }); + } else { + setIndicatorVals( + { + ...Object.fromEntries( + Object.entries(indicatorVals).filter( + ([key, val]) => key !== e.target.name, + ), + ), + }, + ); + } + }} + /> + )} + label={i.name} + /> + )); + const indicatorFilters = ( Indicators - - - { indicators.map((i) => ( - { - if (e.target.checked) { - setIndicatorVals({ ...indicatorVals, [e.target.name]: e.target.value }); - } else { - setIndicatorVals( - { - ...Object.fromEntries( - Object.entries(indicatorVals).filter( - ([key, val]) => key !== e.target.name, - ), - ), - }, - ); - } - }} - /> - )} - label={i.name} - /> - )) } - - - + + { indicatorCheckboxes.slice(0, 5) } + + + { indicatorCheckboxes.slice(5) } + + + + ); From df1a5d6971f1b3c7bcf210b1c71fd511da3a45ff Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Wed, 26 Oct 2022 16:43:48 -0400 Subject: [PATCH 07/93] add update search logic --- src/components/FilterPanel/FilterPanel.jsx | 83 ++++++++++++++++++++-- src/routes/Search/Search.jsx | 5 +- 2 files changed, 80 insertions(+), 8 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 302acdf9..8564034f 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -38,6 +38,11 @@ const styles = { clearButton: { marginLeft: 'auto', }, + apply: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, }; const priceFilterDefault = { @@ -52,9 +57,10 @@ const FilterPanel = ({ onClose, type, classes, - indicators, - /* search */ - /* updateSearch */ + allIndicators, + search, + updateSearch, + resultCount, }) => { const [nameFilterVal, setNameFilterVal] = useState(''); const [priceFilterVal, setPriceFilterVal] = useState(priceFilterDefault); @@ -62,6 +68,22 @@ const FilterPanel = ({ const [filterCount, setFilterCount] = useState(0); const [collapsed, setCollapsed] = useState(true); + useEffect(() => { + const { searchTerm = '', price = 0, indicators = [] } = search; + setNameFilterVal(searchTerm); + if (price) { + setPriceFilterVal(...priceFilterDefault, { [`price_${price}`]: true }); + } + const checkedIndicators = {}; + allIndicators.forEach((i) => { + if (indicators.includes(i.value)) { + checkedIndicators[i.name] = i.value; + } + }); + setIndicatorVals(checkedIndicators); + console.log(search); + }, [search, allIndicators]); + useEffect(() => { let active = 0; if (nameFilterVal) { @@ -78,6 +100,23 @@ const FilterPanel = ({ setIndicatorVals({}); }; + const applyFilters = () => { + const indicators = []; + Object.entries(indicatorVals).forEach(([name, value]) => ( + indicators.push({ + name, + value, + isSelected: true, + }) + )); + updateSearch({ + ...search, + name: { name: nameFilterVal }, + category: { alias: search.category }, + indicators, + }); + }; + const header = (

@@ -105,7 +144,7 @@ const FilterPanel = ({ console.log('do the search!')} + onClick={applyFilters} > @@ -141,7 +180,7 @@ const FilterPanel = ({ ); - const indicatorCheckboxes = indicators.map((i) => ( + const indicatorCheckboxes = allIndicators.map((i) => ( ); + const apply = ( + + ); + if (type === 'desktop') { return (
@@ -194,6 +241,9 @@ const FilterPanel = ({ { nameFilter } { priceFilter } { indicatorFilters } +
+ { apply } +
); } @@ -216,6 +266,17 @@ const FilterPanel = ({ { nameFilter } { priceFilter } { indicatorFilters } +
+ + {`${resultCount} Search Result${resultCount === 1 ? '' : 's'}`} + + + { apply } +

@@ -226,12 +287,20 @@ FilterPanel.propTypes = { open: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, type: PropTypes.oneOf(['desktop', 'mobile']), - indicators: PropTypes.arrayOf(PropTypes.object), + allIndicators: PropTypes.arrayOf(PropTypes.object), + search: PropTypes.shape({ + searchTerm: PropTypes.string, + indicators: PropTypes.arrayOf(PropTypes.string), + price: PropTypes.number, + }).isRequired, + updateSearch: PropTypes.func.isRequired, + resultCount: PropTypes.number, }; FilterPanel.defaultProps = { type: 'mobile', - indicators: [], + allIndicators: [], + resultCount: 0, }; export default withStyles(styles)(FilterPanel); diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index f99445a2..9258d391 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -159,7 +159,10 @@ const Search = ({ open={openFilter} onClose={() => setOpenFilter(false)} type={matches ? 'desktop' : 'mobile'} - indicators={indicators} + allIndicators={indicators} + search={search} + updateSearch={updateSearch} + resultCount={searchResults.length} />
)} From 52b39186487abc3a89e4691c913805c8605e02aa Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Wed, 2 Nov 2022 18:15:19 -0400 Subject: [PATCH 08/93] price filter; start on styles --- src/components/FilterPanel/FilterPanel.jsx | 75 +++++++++++++--------- src/routes/Search/Search.jsx | 1 + src/routes/Search/hooks/useSearch.js | 4 ++ 3 files changed, 51 insertions(+), 29 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 8564034f..7f1b9c27 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -1,4 +1,3 @@ -/* eslint-disable no-unused-vars, no-console */ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; @@ -15,6 +14,8 @@ import { FormControl, FormLabel, FormGroup, + Radio, + RadioGroup, Collapse, } from '@material-ui/core'; @@ -34,6 +35,29 @@ const styles = { header: { display: 'flex', flexDirection: 'row', + '& h2': { + fontSize: '20px', + textTransform: 'uppercase', + }, + '& button': { + color: '#1e1131', + textTransform: 'capitalize', + }, + }, + nameFilter: { + backgroundColor: '#fff', + border: '1px solid #999', + }, + filterGroup: { + backgroundColor: '#fff', + borderRadius: '4px', + padding: '24px', + margin: '16px 0', + width: '100%', + '& legend': { + fontWeight: '600', + textTransform: 'uppercase', + }, }, clearButton: { marginLeft: 'auto', @@ -45,13 +69,6 @@ const styles = { }, }; -const priceFilterDefault = { - price_1: false, - price_2: false, - price_3: false, - price_4: false, -}; - const FilterPanel = ({ open, onClose, @@ -63,7 +80,7 @@ const FilterPanel = ({ resultCount, }) => { const [nameFilterVal, setNameFilterVal] = useState(''); - const [priceFilterVal, setPriceFilterVal] = useState(priceFilterDefault); + const [priceFilterVal, setPriceFilterVal] = useState(0); const [indicatorVals, setIndicatorVals] = useState({}); const [filterCount, setFilterCount] = useState(0); const [collapsed, setCollapsed] = useState(true); @@ -72,7 +89,7 @@ const FilterPanel = ({ const { searchTerm = '', price = 0, indicators = [] } = search; setNameFilterVal(searchTerm); if (price) { - setPriceFilterVal(...priceFilterDefault, { [`price_${price}`]: true }); + setPriceFilterVal(price); } const checkedIndicators = {}; allIndicators.forEach((i) => { @@ -81,7 +98,6 @@ const FilterPanel = ({ } }); setIndicatorVals(checkedIndicators); - console.log(search); }, [search, allIndicators]); useEffect(() => { @@ -89,14 +105,16 @@ const FilterPanel = ({ if (nameFilterVal) { active++; } - active += Object.values(priceFilterVal).filter((v) => v === true).length; + if (priceFilterVal) { + active++; + } active += Object.values(indicatorVals).length; setFilterCount(active); }, [nameFilterVal, priceFilterVal, indicatorVals]); const clearFilters = () => { setNameFilterVal(''); - setPriceFilterVal(priceFilterDefault); + setPriceFilterVal(0); setIndicatorVals({}); }; @@ -114,6 +132,7 @@ const FilterPanel = ({ name: { name: nameFilterVal }, category: { alias: search.category }, indicators, + price: priceFilterVal, }); }; @@ -135,6 +154,7 @@ const FilterPanel = ({ const nameFilter = ( + Price - + setPriceFilterVal(parseInt(e.target.value, 10))} + > { [1, 2, 3, 4].map((i) => ( setPriceFilterVal( - { ...priceFilterVal, [e.target.name]: e.target.checked }, - )} - inputProps={{ 'aria-label': `Price, level ${i}` }} - /> - )} + control={} label={`${'$'.repeat(i)}`} + value={i} /> )) } - + ); @@ -196,7 +213,7 @@ const FilterPanel = ({ { ...Object.fromEntries( Object.entries(indicatorVals).filter( - ([key, val]) => key !== e.target.name, + ([key]) => key !== e.target.name, ), ), }, @@ -210,7 +227,7 @@ const FilterPanel = ({ )); const indicatorFilters = ( - + Indicators { indicatorCheckboxes.slice(0, 5) } @@ -228,7 +245,7 @@ const FilterPanel = ({ const apply = ( diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 9258d391..89b728e3 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -44,6 +44,7 @@ const styles = (theme) => ({ [theme.breakpoints.up('mobile')]: { padding: '61px 24px 0 24px', }, + backgroundColor: '#f2f2f2', }, list: { display: 'grid', diff --git a/src/routes/Search/hooks/useSearch.js b/src/routes/Search/hooks/useSearch.js index 836ed264..b41f7bf7 100644 --- a/src/routes/Search/hooks/useSearch.js +++ b/src/routes/Search/hooks/useSearch.js @@ -125,6 +125,7 @@ const useSearch = ({ isGeolocationEnabled, userCoords }) => { category, indicators: searchIndicators, location, + price, } = searchData; if (name) { query.set('searchTerm', name.name); @@ -135,6 +136,9 @@ const useSearch = ({ isGeolocationEnabled, userCoords }) => { if (location) { query.set('location', location); } + if (price) { + query.set('price', price); + } query.delete('indicators'); if (searchIndicators) { searchIndicators.forEach((indicator) => { From 4ed9e805787cc57102645fd36552c8d1ad6298d6 Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Wed, 9 Nov 2022 18:03:51 -0500 Subject: [PATCH 09/93] styles --- src/components/FilterPanel/FilterPanel.jsx | 121 +++++++++++++++++---- 1 file changed, 97 insertions(+), 24 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 7f1b9c27..1d04aee8 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -23,14 +23,23 @@ import CloseIcon from '@material-ui/icons/Close'; import SearchIcon from '@material-ui/icons/Search'; const styles = { + dialog: { + paddingRight: '20%', + '& .MuiBackdrop-root': { + backgroundColor: 'rgba(0, 0, 0, 0.3)', + }, + }, toolbar: { + backgroundColor: '#f2f2f2', justifyContent: 'flex-end', }, dialogBody: { + backgroundColor: '#f2f2f2', display: 'flex', flexDirection: 'column', marginBottom: 15, padding: '0 24px', + position: 'relative', }, header: { display: 'flex', @@ -47,25 +56,61 @@ const styles = { nameFilter: { backgroundColor: '#fff', border: '1px solid #999', + borderRadius: '4px', }, filterGroup: { backgroundColor: '#fff', borderRadius: '4px', padding: '24px', - margin: '16px 0', + margin: '0 0 16px 0', width: '100%', - '& legend': { - fontWeight: '600', - textTransform: 'uppercase', + '&:first-of-type': { + marginTop: '16px', + }, + }, + filterHeader: { + fontSize: '14px', + fontWeight: '600', + textTransform: 'uppercase', + }, + visuallyHidden: { + position: 'absolute', + overflow: 'hidden', + clip: 'rect(0 0 0 0)', + clipPath: 'inset(50%)', + width: '1px', + height: '1px', + whiteSpace: 'nowrap', + }, + filterToggle: { + fontSize: '14px', + fontWeight: '600', + paddingLeft: '0', + textTransform: 'capitalize', + '& > *': { + justifyContent: 'flex-start', }, }, clearButton: { marginLeft: 'auto', }, apply: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', + backgroundColor: '#fff', + bottom: '0px', + left: '0px', + padding: '16px 0', + position: 'sticky', + textAlign: 'center', + width: '100%', + '& button': { + margin: '0 8px', + padding: '12px 42px', + }, + }, + resultCount: { + display: 'inline-block', + marginBottom: '20px', + width: '100%', }, }; @@ -134,6 +179,9 @@ const FilterPanel = ({ indicators, price: priceFilterVal, }); + if (open) { + onClose(); + } }; const header = ( @@ -157,7 +205,7 @@ const FilterPanel = ({ className={classes.nameFilter} type="text" variant="outlined" - label="Search by name within results" + label={`Search by name${type === 'desktop' ? ' within results' : ''}`} fullWidth InputProps={{ endAdornment: ( @@ -178,7 +226,13 @@ const FilterPanel = ({ const priceFilter = ( - Price + Price + } label={`${'$'.repeat(i)}`} + aria-label={`price level ${i}`} value={i} /> )) } @@ -228,7 +283,13 @@ const FilterPanel = ({ const indicatorFilters = ( - Indicators + Indicators + { indicatorCheckboxes.slice(0, 5) } @@ -236,8 +297,11 @@ const FilterPanel = ({ { indicatorCheckboxes.slice(5) } - @@ -246,6 +310,8 @@ const FilterPanel = ({ const apply = ( @@ -266,7 +332,12 @@ const FilterPanel = ({ } return (
- + - - {`${resultCount} Search Result${resultCount === 1 ? '' : 's'}`} - - - { apply } -
+

+
+ + {`${resultCount} Search Result${resultCount === 1 ? '' : 's'}`} + + + { apply }
From ceb07d13dc733a0bb0f44e65924837d92a52ec07 Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Wed, 9 Nov 2022 18:14:54 -0500 Subject: [PATCH 10/93] cleanup --- src/components/FilterDialog/FilterDialog.jsx | 274 ------------------ src/components/FilterDialog/FilterDialog.md | 25 -- .../FilterDialog/FilterDialog.test.jsx | 16 - src/components/FilterDialog/PriceFilter.jsx | 52 ---- .../FilterDialog/PriceFilter.test.jsx | 15 - .../__snapshots__/FilterDialog.test.jsx.snap | 9 - .../__snapshots__/PriceFilter.test.jsx.snap | 92 ------ .../FilterDialog/hooks/useFilters.js | 46 --- src/components/FilterDialog/index.js | 3 - 9 files changed, 532 deletions(-) delete mode 100644 src/components/FilterDialog/FilterDialog.jsx delete mode 100644 src/components/FilterDialog/FilterDialog.md delete mode 100644 src/components/FilterDialog/FilterDialog.test.jsx delete mode 100644 src/components/FilterDialog/PriceFilter.jsx delete mode 100644 src/components/FilterDialog/PriceFilter.test.jsx delete mode 100644 src/components/FilterDialog/__snapshots__/FilterDialog.test.jsx.snap delete mode 100644 src/components/FilterDialog/__snapshots__/PriceFilter.test.jsx.snap delete mode 100644 src/components/FilterDialog/hooks/useFilters.js delete mode 100644 src/components/FilterDialog/index.js diff --git a/src/components/FilterDialog/FilterDialog.jsx b/src/components/FilterDialog/FilterDialog.jsx deleted file mode 100644 index ff782894..00000000 --- a/src/components/FilterDialog/FilterDialog.jsx +++ /dev/null @@ -1,274 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import cx from 'classnames'; -import { withStyles } from '@material-ui/core/styles'; - -import { - Accordion, - AccordionSummary, - AccordionDetails, - Button, - Dialog, - Divider, - IconButton, - Slider, - Toolbar, - Typography, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; - -import StarRating from '../StarRating'; -import PriceFilter from './PriceFilter'; -import useFilters from './hooks/useFilters'; - -const styles = { - toolbar: { - justifyContent: 'flex-end', - }, - dialogBody: { - padding: '0 24px', - marginBottom: 15, - }, - section: { - marginTop: 50, - }, - distanceHeader: { - display: 'inline', - marginRight: 20, - }, - slider: { - marginTop: 40, - }, - footer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - marginTop: 30, - }, - footerButtons: { - marginRight: 20, - }, - // Desktop filters - filterHeaderContainer: { - display: 'flex', - flexWrap: 'wrap', - }, - filterHeaderItem: { - justifyContent: 'center', - alignItems: 'center', - flexBasis: '100%', - textAlign: 'center', - }, - filterContainer: { - display: 'block', - }, - filterItemsWrapper: { - width: '100%', - display: 'flex', - }, - filterItem: { - justifyContent: 'center', - alignItems: 'center', - flexBasis: '100%', - textAlign: 'center', - }, -}; - -const FilterDialog = ({ - open, - onToggle, - onClose, - classes, - overrideClasses, - setFilters, - defaultFilters, - type, -}) => { - const { state: { stars, price, distance }, dispatch } = useFilters(defaultFilters); - const ratingText = `${stars} and above`; - const priceFilters = [{ - label: '$', - active: price === 1, - value: 1, - }, { - label: '$$', - active: price === 2, - value: 2, - }, { - label: '$$$', - active: price === 3, - value: 3, - }, { - label: '$$$$', - active: price === 4, - value: 4, - }]; - return ( -
- { type === 'desktop' && ( - - -
- Distance - -
-
- Price - -
-
- Rating -
- - -
-
- dispatch({ type: 'distance', payload: { distance: value } })} - /> -
-
- dispatch({ type: 'price', payload: { price: i } })} - /> -
-
- dispatch({ type: 'stars', payload: { stars: value } })} /> -
-
-
- - -
- - - )} - { type === 'mobile' && ( - - - - - - -
- Filter by -
- Average Rating - dispatch({ type: 'stars', payload: { stars: value } })} /> - {ratingText} -
-
- Price - {/* make price list */} - dispatch({ type: 'price', payload: { price: i } })} - /> -
-
- Distance - Number of miles away - dispatch({ type: 'distance', payload: { distance: value } })} - /> -
-
-
- - -
- - )} -
- ); -}; - -FilterDialog.propTypes = { - open: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - classes: PropTypes.shape({}).isRequired, - overrideClasses: PropTypes.shape({}), - setFilters: PropTypes.func, - type: PropTypes.oneOf(['desktop', 'mobile']), - defaultFilters: PropTypes.shape({ - star: PropTypes.number, - distance: PropTypes.number, - price: PropTypes.number, - }), - onToggle: PropTypes.func, -}; - -FilterDialog.defaultProps = { - setFilters: () => {}, - defaultFilters: {}, - type: 'mobile', - overrideClasses: {}, - onToggle: () => {}, -}; - -export default withStyles(styles)(FilterDialog); diff --git a/src/components/FilterDialog/FilterDialog.md b/src/components/FilterDialog/FilterDialog.md deleted file mode 100644 index c983d127..00000000 --- a/src/components/FilterDialog/FilterDialog.md +++ /dev/null @@ -1,25 +0,0 @@ -## FilterDialog - -```jsx -import FilterDialog from './FilterDialog'; -const [open, setOpen] = React.useState(false); -<> - - setOpen(false)}/> - -``` - -### PriceFilter - -```jsx -import PriceFilter from './PriceFilter'; - -const [active, setActive] = React.useState(1); -const priceFilters = [...Array(4)].map((_, i) => ({ - label: [...Array(i + 1)].map(() => '$').join(), - value: i + 1, - active: active === i + 1, -})); -const filterClick = (i) => setActive(i); - -``` \ No newline at end of file diff --git a/src/components/FilterDialog/FilterDialog.test.jsx b/src/components/FilterDialog/FilterDialog.test.jsx deleted file mode 100644 index a7e17053..00000000 --- a/src/components/FilterDialog/FilterDialog.test.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import FilterDialog from './FilterDialog'; - -jest.mock('../StarRating', () => () => 'StarRating'); -jest.mock('./PriceFilter', () => () => 'PriceFilter'); - -test('FilterDialog', () => { - const props = { - open: false, - onClose: jest.fn(), - }; - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/src/components/FilterDialog/PriceFilter.jsx b/src/components/FilterDialog/PriceFilter.jsx deleted file mode 100644 index 8cd1e93c..00000000 --- a/src/components/FilterDialog/PriceFilter.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; - -import { Chip, Typography } from '@material-ui/core'; -import CheckIcon from '@material-ui/icons/Check'; - -const styles = { - wrapper: { - display: 'inline', - }, - filter: { - marginRight: 10, - minWidth: 42, - textAlign: 'center', - marginBottom: 5, - }, -}; - -const PriceFilter = ({ filters, classes, onFilterClick }) => ( -
- {filters.map((filter) => ( - - {filter.label} - - )} - // eslint-disable-next-line react/jsx-props-no-spreading - {...filter.active && { icon: }} - color={filter.active ? 'primary' : 'default'} - className={classes.filter} - onClick={() => onFilterClick(filter.value)} - key={filter.value} - /> - ))} -
-); - -PriceFilter.propTypes = { - filters: PropTypes.arrayOf( - PropTypes.shape({ - value: PropTypes.number.isRequired, - label: PropTypes.string.isRequierd, - active: PropTypes.bool, - }), - ).isRequired, - onFilterClick: PropTypes.func.isRequired, - classes: PropTypes.shape({}).isRequired, -}; - -export default withStyles(styles)(PriceFilter); diff --git a/src/components/FilterDialog/PriceFilter.test.jsx b/src/components/FilterDialog/PriceFilter.test.jsx deleted file mode 100644 index d174ba01..00000000 --- a/src/components/FilterDialog/PriceFilter.test.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import PriceFilter from './PriceFilter'; - -test('renders the BusinessCardComponent', () => { - const active = 1; - const priceFilters = [...Array(4)].map((_, i) => ({ - label: [...Array(i + 1)].map(() => '$').join(), - value: i + 1, - active: active === i + 1, - })); - const filterClick = jest.fn(); - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/src/components/FilterDialog/__snapshots__/FilterDialog.test.jsx.snap b/src/components/FilterDialog/__snapshots__/FilterDialog.test.jsx.snap deleted file mode 100644 index d4ce7952..00000000 --- a/src/components/FilterDialog/__snapshots__/FilterDialog.test.jsx.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FilterDialog 1`] = ` - -
- -`; diff --git a/src/components/FilterDialog/__snapshots__/PriceFilter.test.jsx.snap b/src/components/FilterDialog/__snapshots__/PriceFilter.test.jsx.snap deleted file mode 100644 index a3c49a1a..00000000 --- a/src/components/FilterDialog/__snapshots__/PriceFilter.test.jsx.snap +++ /dev/null @@ -1,92 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders the BusinessCardComponent 1`] = ` - -
-
- - -

- $ -

- - -
-
- -

- $,$ -

- - -
-
- -

- $,$,$ -

- - -
-
- -

- $,$,$,$ -

- - -
-
- -`; diff --git a/src/components/FilterDialog/hooks/useFilters.js b/src/components/FilterDialog/hooks/useFilters.js deleted file mode 100644 index 608ad2e1..00000000 --- a/src/components/FilterDialog/hooks/useFilters.js +++ /dev/null @@ -1,46 +0,0 @@ -import { useReducer } from 'react'; - -export const reducer = (state, action) => { - switch (action.type) { - case 'stars': - return { - ...state, - stars: action.payload.stars, - }; - case 'price': - return { - ...state, - price: state.price === action.payload.price ? 0 : action.payload.price, - }; - case 'distance': - return { - ...state, - distance: action.payload.distance, - }; - case 'reset': - return { - stars: 0, - price: 0, - distance: 0, - }; - default: - return state; - } -}; - -const useFilters = ({ stars = 0, price = 0, distance = 0 }) => { - // default filter values - const initialState = { - stars, - price, - distance, - }; - - const [state, dispatch] = useReducer(reducer, initialState); - return { - state, - dispatch, - }; -}; - -export default useFilters; diff --git a/src/components/FilterDialog/index.js b/src/components/FilterDialog/index.js deleted file mode 100644 index f443ec5f..00000000 --- a/src/components/FilterDialog/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import FilterDialog from './FilterDialog'; - -export default FilterDialog; From 41a52efd9e5e3384a2338c04c4b121d2a2269d88 Mon Sep 17 00:00:00 2001 From: Edward Ficklin Date: Tue, 15 Nov 2022 12:12:55 -0500 Subject: [PATCH 11/93] more descritive button text for AT --- src/components/FilterPanel/FilterPanel.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 1d04aee8..08d2b6bf 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -302,6 +302,7 @@ const FilterPanel = ({ className={classes.filterToggle} > { `See ${collapsed ? 'More' : 'Less'}` } + Indicators From c88ae34991822541319a67f0ad20a5f63d136201 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Fri, 9 Dec 2022 20:42:15 -0500 Subject: [PATCH 12/93] Removed margins between navbar and results page --- src/components/AppLayout/AppLayout.jsx | 10 +- src/components/FilterPanel/FilterPanel.jsx | 49 +++++---- src/components/SearchBar/SearchBar.jsx | 110 ++++++++++----------- 3 files changed, 83 insertions(+), 86 deletions(-) diff --git a/src/components/AppLayout/AppLayout.jsx b/src/components/AppLayout/AppLayout.jsx index 46cf4297..9cee245e 100644 --- a/src/components/AppLayout/AppLayout.jsx +++ b/src/components/AppLayout/AppLayout.jsx @@ -9,7 +9,7 @@ import Header from '../Header/Header'; import AppBar from '../AppBar'; import Footer from '../Footer'; -const styles = (theme) => ({ +const styles = () => ({ root: { minHeight: '100vh', display: 'flex', @@ -18,12 +18,6 @@ const styles = (theme) => ({ content: { height: '100%', flex: 1, - [theme.breakpoints.up('xs')]: { - margin: '10px 0px 20px 0px', - }, - [theme.breakpoints.up('mobile')]: { - margin: '20px 0px 125px 0px', - }, }, }); @@ -51,7 +45,7 @@ const AppLayout = ({ selected={selected} isLoading={isLoading} /> - { ifHome &&
} + {ifHome &&
}
{isLoading && ( diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 08d2b6bf..e4d88167 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -6,6 +6,7 @@ import { Dialog, IconButton, Toolbar, + Box, Button, TextField, FormControlLabel, @@ -112,6 +113,14 @@ const styles = { marginBottom: '20px', width: '100%', }, + filterContainer: { + display: 'flex', + }, + filterFont: { + fontWeight: 700, + lineHeight: '24px', + letterSpacing: '0px', + }, }; const FilterPanel = ({ @@ -187,7 +196,7 @@ const FilterPanel = ({ const header = (

- Filter +

Filter

{filterCount > 0 && ` (${filterCount})`}

- { indicatorCheckboxes.slice(0, 5) } + {indicatorCheckboxes.slice(0, 5)} - { indicatorCheckboxes.slice(5) } + {indicatorCheckboxes.slice(5)} @@ -320,15 +329,17 @@ const FilterPanel = ({ if (type === 'desktop') { return ( -
- { header } - { nameFilter } - { priceFilter } - { indicatorFilters } -
- { apply } + +
+ {header} + {nameFilter} + {priceFilter} + {indicatorFilters} +
+ {apply} +
-
+ ); } return ( @@ -351,10 +362,10 @@ const FilterPanel = ({
- { header } - { nameFilter } - { priceFilter } - { indicatorFilters } + {header} + {nameFilter} + {priceFilter} + {indicatorFilters}
@@ -367,7 +378,7 @@ const FilterPanel = ({ > Close - { apply } + {apply}
diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx index 1ba49c6a..707b93a3 100644 --- a/src/components/SearchBar/SearchBar.jsx +++ b/src/components/SearchBar/SearchBar.jsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; import { usePromiseTracker } from 'react-promise-tracker'; import { useHistory } from 'react-router-dom'; - import { geolocated } from 'react-geolocated'; import { withStyles } from '@material-ui/core/styles'; @@ -22,7 +21,7 @@ import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete import States from '../../api/states'; import useSearch from '../../routes/Search/hooks/useSearch'; -const filterOptions = createFilterOptions({ +const autoCompleteSettings = createFilterOptions({ limit: 5, trim: true, stringify: (option) => option.name, @@ -31,38 +30,36 @@ const filterOptions = createFilterOptions({ const styles = (theme) => ({ root: { display: 'flex', + maxHeight: '48px', + height: '100%', alignItems: 'center', - [theme.breakpoints.up('xs')]: { - width: theme.spacing(34), - }, - [theme.breakpoints.up('sm')]: { - width: theme.spacing(45), - }, - [theme.breakpoints.up('md')]: { - width: theme.spacing(80), - }, - }, - title: { - padding: '0 0.8rem', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', + maxWidth: '584px', + minWidth: '252px', + width: '90%', }, - input: { - display: 'flex', - flexGrow: 1, - alignItems: 'left', + searchInput: { + flex: 1, }, - icon: { + dropdownIcon: { color: theme.palette.primary.main, - display: 'flex', }, - dropdown: { + dropdownMenu: { display: 'flex', - alignItems: 'center', - flexWrap: 'wrap', fontWeight: 'bold', }, + autoCompleteContainer: { + width: '100%', + display: 'flex', + justifyContent: 'center', + }, + submitButtonContainer: { + color: 'white', + backgroundColor: '#1E1131', + minWidth: '48px', + }, + removeTextFieldRadius: { + borderRadius: 0, + }, }); const SearchBar = ({ @@ -77,11 +74,13 @@ const SearchBar = ({ const geopositionLoading = promiseInProgress || (isGeolocationEnabled && coords === null); const [location, setLocation] = useState(''); - const [autofillWithBlankInput, setAutoFillWithBlankInput] = useState([]); + const [userLocationAutocomplete, setUserLocationAutocomplete] = useState([]); useEffect(() => { - if (isGeolocationEnabled && !geopositionLoading && userLocation.address !== undefined) { - setAutoFillWithBlankInput([{ name: userLocation.address.city }]); + try { + setUserLocationAutocomplete([{ name: userLocation.address.city }]); + } catch (e) { + setUserLocationAutocomplete([]); } }, [geopositionLoading]); @@ -89,7 +88,6 @@ const SearchBar = ({ setLocation(event.target.value); }; - // eslint-disable-next-line consistent-return const handleSubmit = (event) => { event.preventDefault(); history.push({ @@ -98,39 +96,30 @@ const SearchBar = ({ }); }; - const parseLocationObjectToString = (obj) => { - let locationObjString = `${obj.name}`; - if (obj.abbreviation) { - locationObjString += `, ${obj.abbreviation}`; - } - return locationObjString; - }; + const parseLocationObjectToString = (obj) => ( + obj.abbreviation ? `${obj.name}, ${obj.abbreviation}` : obj.name + ); return ( - - + + option.name === value.name} getOptionLabel={(option) => parseLocationObjectToString(option)} - onChange={(event, newLocation) => { - setLocation(parseLocationObjectToString(newLocation)); + onChange={(event, selectedOption) => { + setLocation(parseLocationObjectToString(selectedOption)); }} forcePopupIcon={false} disableClearable - filterSelectedOptions - filterOptions={filterOptions} + filterOptions={autoCompleteSettings} renderOption={(props) => { const dropdownText = parseLocationObjectToString(props); - const dropdownIcon = location.trim() === '' ? - : ; + const dropdownIcon = location.trim() === '' ? + : ; return ( - img': { mr: 2, flexShrink: 0 } }} - className={classes.dropdown} - > + {dropdownIcon} {dropdownText} @@ -140,30 +129,33 @@ const SearchBar = ({ )} /> - - + + ); }; From 6433ee748c869ad438f62a454aded7cce2ee7c34 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Fri, 9 Dec 2022 21:05:41 -0500 Subject: [PATCH 13/93] Aligning filter with filter number and applying new font css --- src/components/FilterPanel/FilterPanel.jsx | 31 +++++++++++++++------- src/routes/Search/Search.jsx | 21 ++++++++------- 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index e4d88167..27add4bc 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -120,6 +120,17 @@ const styles = { fontWeight: 700, lineHeight: '24px', letterSpacing: '0px', + textAlign: 'left', + display: 'flex', + alignItems: 'center', + }, + verticalContainer: { + width: '100%', + display: 'inline-block', + }, + filterParentContainer: { + display: 'inline-flex', + width: '!00%', }, }; @@ -195,8 +206,8 @@ const FilterPanel = ({ const header = (
-

-

Filter

+

+

Filter

{filterCount > 0 && ` (${filterCount})`}

); From a6350aa76a677eb491ee304b82317f74a2d55309 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Fri, 9 Dec 2022 22:18:15 -0500 Subject: [PATCH 16/93] Shrunk clear all button and aligned them lower in the contaienr --- src/components/FilterPanel/FilterPanel.jsx | 52 +++++++++++----------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 5f951e73..844bb136 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -11,7 +11,6 @@ import { TextField, FormControlLabel, Checkbox, - InputAdornment, FormControl, FormLabel, FormGroup, @@ -21,7 +20,7 @@ import { } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; -import SearchIcon from '@material-ui/icons/Search'; +// import SearchIcon from '@material-ui/icons/Search'; const styles = { dialog: { @@ -53,12 +52,15 @@ const styles = { color: '#1e1131', textTransform: 'capitalize', }, - maxHeight: '100%', + alignItems: 'baseline', + maxHeight: '80px', + marginBottom: '5px', }, nameFilter: { backgroundColor: '#fff', border: '1px solid #999', borderRadius: '4px', + }, filterGroup: { backgroundColor: '#fff', @@ -96,6 +98,7 @@ const styles = { clearButton: { flexGrow: 1, justifyContent: 'right', + maxHeight: '23.991', }, apply: { backgroundColor: '#fff', @@ -147,6 +150,10 @@ const styles = { fontSize: '14px', height: 'inherit', }, + filterSearchContainer: { + display: 'flex', + flexDirection: 'row', + }, }; const FilterPanel = ({ @@ -236,28 +243,23 @@ const FilterPanel = ({ ); const nameFilter = ( - - - - - - ), - }} - value={nameFilterVal} - onChange={(e) => setNameFilterVal(e.target.value)} - /> + + setNameFilterVal(e.target.value)} + /> + ); const priceFilter = ( From ee51952a2513d53fa9af9e7fe4d05b139f459908 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Fri, 9 Dec 2022 22:38:19 -0500 Subject: [PATCH 17/93] Changed search bar into outlined variant --- src/components/FilterPanel/FilterPanel.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 844bb136..737b968f 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -249,7 +249,7 @@ const FilterPanel = ({ className={classes.nameFilter} type="text" fullWidth - variant="standard" + variant="outlined" size="small" value={nameFilterVal} InputProps={{ From 39c183f84e97d63324f08a813b57833c0676a9f2 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 00:56:48 -0500 Subject: [PATCH 18/93] Updated filter titles and checkbox + label with new font sizes --- src/components/FilterPanel/FilterPanel.jsx | 25 +++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 737b968f..cc180d7e 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -17,6 +17,7 @@ import { Radio, RadioGroup, Collapse, + Typography, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; @@ -73,9 +74,14 @@ const styles = { }, }, filterHeader: { + color: '#1E1131', fontSize: '14px', - fontWeight: '600', + lineHeight: '20px', + textAlign: 'left', + letterSpacing: '0px', + fontWeight: 'bold', textTransform: 'uppercase', + marginBottom: '3px', }, visuallyHidden: { position: 'absolute', @@ -154,6 +160,18 @@ const styles = { display: 'flex', flexDirection: 'row', }, + checkBox: { + verticalAlign: 'top', + display: 'table-cell', + color: '#1E1131', + }, + formFontColor: { + color: '#1E1131', + }, + checkBoxLabels: { + fontSize: '14px', + fontWeight: '600', + }, }; const FilterPanel = ({ @@ -297,6 +315,7 @@ const FilterPanel = ({ { if (e.target.checked) { @@ -315,7 +334,7 @@ const FilterPanel = ({ }} /> )} - label={i.name} + label={{i.name}} /> )); @@ -328,7 +347,7 @@ const FilterPanel = ({ > Indicators
- + {indicatorCheckboxes.slice(0, 5)} From e5a8d662d2988878c0160fc14609812574a0eb85 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 00:59:52 -0500 Subject: [PATCH 19/93] Changed indicator title to inclusion --- src/components/FilterPanel/FilterPanel.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index cc180d7e..b27307f0 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -345,7 +345,7 @@ const FilterPanel = ({ aria-hidden="true" className={classes.filterHeader} > - Indicators + Inclusion
{indicatorCheckboxes.slice(0, 5)} From 53a8744e6012782114211149ce931ec716b419d5 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 01:06:08 -0500 Subject: [PATCH 20/93] Extended the filter bar to fill the entire height --- src/routes/Search/Search.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index f3c8d955..7e2ca8ec 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -42,6 +42,7 @@ const styles = (theme) => ({ flexDirection: 'column', flexShrink: 0, width: '316px', + height: '100%', zIndex: 999, paddingTop: '32px', marginRight: '40px', From 7ececf6101e65efa4bce1c12a3273be16ece01e7 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 01:16:51 -0500 Subject: [PATCH 21/93] Fixed a bug where pagination was blocking the filter from extending completely --- src/routes/Search/Search.jsx | 39 +++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 7e2ca8ec..07a4cf93 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -169,26 +169,29 @@ const Search = ({ /> )} -
- {searchResults !== null && searchResults.length > 0 - && searchResults.map((result) => ( -
- -
- ))} +
+
+ {searchResults !== null && searchResults.length > 0 + && searchResults.map((result) => ( +
+ +
+ ))} +
+ {pagination && pagination !== null && ( + + )}
- {pagination && pagination !== null && ( - - )} + {searchResults !== null && search.searchTerm !== null && searchResults.length === 0 From f8e754e37aa503cba217d0d87bb2b6b65538992b Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 01:26:07 -0500 Subject: [PATCH 22/93] Updated price label fontweights --- src/components/FilterPanel/FilterPanel.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index b27307f0..964fbeee 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -299,7 +299,13 @@ const FilterPanel = ({ } - label={`${'$'.repeat(i)}`} + label={ + ( + + {'$'.repeat(i)} + + ) + } aria-label={`price level ${i}`} value={i} /> From 614dd3b67e1c3b2713d3bf2f8c08709b4372fa3a Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 01:28:47 -0500 Subject: [PATCH 23/93] Added some bottom margins to the apply button --- src/components/FilterPanel/FilterPanel.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 964fbeee..a42da80b 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -118,6 +118,7 @@ const styles = { margin: '0 8px', padding: '12px 42px', }, + marginBottom: '48px', }, resultCount: { display: 'inline-block', @@ -172,6 +173,9 @@ const styles = { fontSize: '14px', fontWeight: '600', }, + applyContainer: { + + }, }; const FilterPanel = ({ From baea3b4716bc4bfef2af6c81de0b245c1fe72497 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 01:41:50 -0500 Subject: [PATCH 24/93] Switched textfield label with placeholder element --- src/components/FilterPanel/FilterPanel.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index a42da80b..13742ab8 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -118,7 +118,7 @@ const styles = { margin: '0 8px', padding: '12px 42px', }, - marginBottom: '48px', + marginBottom: '188px', }, resultCount: { display: 'inline-block', @@ -273,6 +273,7 @@ const FilterPanel = ({ fullWidth variant="outlined" size="small" + placeholder="Search by name within results" value={nameFilterVal} InputProps={{ disableUnderline: true, From 81d9468adfd26d727127f56f3870994cadbc82d7 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 02:09:44 -0500 Subject: [PATCH 25/93] Made placeholder text shorter, as it was overflowing --- src/components/FilterPanel/FilterPanel.jsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 13742ab8..34c3e454 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -18,10 +18,11 @@ import { RadioGroup, Collapse, Typography, + InputAdornment, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; -// import SearchIcon from '@material-ui/icons/Search'; +import SearchIcon from '@material-ui/icons/Search'; const styles = { dialog: { @@ -61,7 +62,6 @@ const styles = { backgroundColor: '#fff', border: '1px solid #999', borderRadius: '4px', - }, filterGroup: { backgroundColor: '#fff', @@ -173,9 +173,6 @@ const styles = { fontSize: '14px', fontWeight: '600', }, - applyContainer: { - - }, }; const FilterPanel = ({ @@ -271,14 +268,25 @@ const FilterPanel = ({ className={classes.nameFilter} type="text" fullWidth + margin="normal" variant="outlined" size="small" - placeholder="Search by name within results" + placeholder="Search by name" value={nameFilterVal} InputProps={{ disableUnderline: true, padding: 5, classes: { borderRadius: 0 }, + endAdornment: ( + + + + + + ), }} onChange={(e) => setNameFilterVal(e.target.value)} /> From 1d75844fe4a94d7706922bacf5f055c78ee7cec3 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sat, 10 Dec 2022 02:12:42 -0500 Subject: [PATCH 26/93] Added margin between pagination and search result --- src/components/Pagination/Pagination.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 673daf6c..6286620f 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -18,6 +18,7 @@ const styles = (theme) => ({ display: 'block', flexGrow: 2, width: '100%', + marginTop: '30px', }, button: { [theme.breakpoints.up('xs')]: { @@ -89,9 +90,9 @@ const Pagination = ({
{(backExists || nextExists) && ( - - {`Showing ${perPage} of ${totalCount} results`} - + + {`Showing ${perPage} of ${totalCount} results`} + )} {backButton} {nextButton} From fd714c783d1d218b697e0adc7f78736cad8a0509 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 20:41:02 -0500 Subject: [PATCH 27/93] Modified the color, spacing, and alignment of the mobile buttons --- src/components/FilterPanel/FilterPanel.jsx | 40 +++++++++++++++++----- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 34c3e454..819a513f 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -124,6 +124,9 @@ const styles = { display: 'inline-block', marginBottom: '20px', width: '100%', + color: '#1E1131', + fontSize: '14px', + fontWeight: 500, }, filterContainer: { display: 'flex', @@ -173,6 +176,23 @@ const styles = { fontSize: '14px', fontWeight: '600', }, + mobileFilterButtons: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + padding: '12px 16px', + gap: '10px', + }, + closeButton: { + border: '#EBE5F6 1px solid', + backgroundColor: '#FCFBFE', + }, + applyButton: { + border: '#EBE5F6 1px solid', + backgroundColor: '#351F57', + color: '#FFFFFF', + }, }; const FilterPanel = ({ @@ -388,7 +408,7 @@ const FilterPanel = ({ @@ -442,14 +462,16 @@ const FilterPanel = ({ {`${resultCount} Search Result${resultCount === 1 ? '' : 's'}`} - - {apply} +
+ + {apply} +
From 1a97ecc615827742bdc200b4c82af1f45eb9286e Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 20:43:09 -0500 Subject: [PATCH 28/93] Modified Search Results in mobile view to be bolder --- src/components/FilterPanel/FilterPanel.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index 819a513f..ab0163c7 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -126,7 +126,7 @@ const styles = { width: '100%', color: '#1E1131', fontSize: '14px', - fontWeight: 500, + fontWeight: 600, }, filterContainer: { display: 'flex', From 2316b344e50df6c9c5c3b49d4ee2670db3685cb4 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 20:56:54 -0500 Subject: [PATCH 29/93] Modified mobile filter prompt button to the proper styling --- src/routes/Search/Search.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 07a4cf93..56c9297c 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -88,7 +88,15 @@ const styles = (theme) => ({ display: 'none', }, width: '100px !important', + marginBottom: '16px', height: 36, + border: '#EBE5F6 1px solid', + }, + filterButtonText: { + fontWeight: 600, + fontSize: '14px', + lineHeight: '20px', + color: '#1E1131', }, }); @@ -156,7 +164,7 @@ const Search = ({ color="primary" className={classes.filterButton} > - FILTER + FILTER Date: Sun, 11 Dec 2022 21:42:49 -0500 Subject: [PATCH 30/93] Aligned the search result as single card rows --- src/routes/Search/Search.jsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 56c9297c..e70fd6ea 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -26,7 +26,8 @@ const styles = (theme) => ({ }, content: { display: 'flex', - flexDirection: 'column', + flexDirection: 'row', + width: '100%', }, resultsWrapper: { display: 'flex', @@ -50,16 +51,11 @@ const styles = (theme) => ({ }, list: { display: 'grid', - gridTemplateColumns: 'repeat(auto-fill, 350px)', + gridTemplateColumns: 'repeat(1fr)', gridGap: 50, }, searchResult: { - [theme.breakpoints.up('xs')]: { - maxWidth: '350px', - }, - [theme.breakpoints.up('mobile')]: { - width: '100%', - }, + width: '100%', }, emptyStateWrapper: { marginTop: 60, From 290a5e264339e52aa2654d838ce70eb118fef742 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 22:08:03 -0500 Subject: [PATCH 31/93] Removed BusinessCard minimum width --- src/components/BusinessCard/BusinessCard.jsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 74029308..de9eeed7 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -25,12 +25,7 @@ const styles = (theme) => ({ '& .MuiSvgIcon-root': { padding: '6px 6px;', }, - [theme.breakpoints.up('xs')]: { - maxWidth: 344, - }, - [theme.breakpoints.up('mobile')]: { - maxWidth: 436, - }, + flexGrow: 1, }, starIcon: { paddingBottom: '0 !important', From 8c6def588154107e170fbd6b03b59e6cf1ecec90 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 22:11:19 -0500 Subject: [PATCH 32/93] Added 8px of margins at the top --- src/components/BusinessCard/BusinessCard.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index de9eeed7..5ce39f79 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -26,6 +26,7 @@ const styles = (theme) => ({ padding: '6px 6px;', }, flexGrow: 1, + marginTop: '8px', }, starIcon: { paddingBottom: '0 !important', From c01bd85a7aeb760c5fcbc5525648f7cdecde91bb Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 22:12:41 -0500 Subject: [PATCH 33/93] Aligned the cards in rows extending the length of the page --- src/components/BusinessCard/BusinessCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 5ce39f79..f886c941 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -95,7 +95,7 @@ const BusinessCard = ({ overrideClasses, }) => ( - + From d318f32ba505731091a3a65e027552931813cc2e Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 22:21:10 -0500 Subject: [PATCH 34/93] Extended the length of business card based on grid --- src/components/BusinessCard/BusinessCard.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index f886c941..7faf7dd6 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -27,6 +27,7 @@ const styles = (theme) => ({ }, flexGrow: 1, marginTop: '8px', + marginRight: '142px', }, starIcon: { paddingBottom: '0 !important', @@ -95,7 +96,7 @@ const BusinessCard = ({ overrideClasses, }) => ( - + From 8d0a339c1f4724b303786d91e662830f625734a4 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 11 Dec 2022 22:21:36 -0500 Subject: [PATCH 35/93] Extended the length of business card based on grid --- src/routes/Search/Search.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index e70fd6ea..0b00fc56 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -34,7 +34,7 @@ const styles = (theme) => ({ flexDirection: 'column', [theme.breakpoints.up('mobile')]: { display: 'grid', - gridTemplateColumns: '1fr 3fr', + gridTemplateColumns: '1fr 8fr', }, }, filtersContainer: { From 3cba068ce3584a187c689b46d1ecf4907214ecfd Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 16:32:35 -0500 Subject: [PATCH 36/93] Deleted card components to create a custom card. --- src/components/BusinessCard/BusinessCard.jsx | 123 ++++++++----------- 1 file changed, 50 insertions(+), 73 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 7faf7dd6..0f6b6ead 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -1,24 +1,12 @@ +/* eslint-disable no-unused-vars */ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import cx from 'classnames'; +import PropTypes, { nominalTypeHack } from 'prop-types'; + +import { Box } from '@material-ui/core'; -import { - Button, - Card, - CardActionArea, - CardHeader, - CardMedia, - CardContent, - Divider, - Typography, -} from '@material-ui/core'; -import StarIcon from '@material-ui/icons/Star'; -import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder'; -import ShareIcon from '@material-ui/icons/Share'; +import { withStyles } from '@material-ui/core/styles'; import { spaceProps } from '../../types'; -import ChipList from '../ChipList'; const styles = (theme) => ({ root: { @@ -77,6 +65,32 @@ const styles = (theme) => ({ shareButton: { float: 'right', }, + businessCardContainer: { + borderRadius: '4px', + border: '1px solid black', + maxHeight: '216px', + maxWidth: '760px', + marginRight: 142, + + }, + searchContentContainer: { + display: 'flex', + padding: 24, + }, + imageContainer: { + marginRight: 24, + position: 'relative', + width: 171, + height: 171, + }, + image: { + width: '100%', + height: '100%', + }, + contentContainer: { + flexGrow: 1, + border: '1px solid black', + }, }); const BusinessCard = ({ @@ -94,62 +108,25 @@ const BusinessCard = ({ }, classes, overrideClasses, -}) => ( - - - - - - {averageRating} - - - )} - // TODO: POSTMVP feature - action={false && } - title={{name}} - subheader={{category}} - classes={{ action: classes.headerAction }} - /> - - -
-
- {address} -
-
- {distance} -
-
- -
- -
-
- - - -
- - - -); +}) => { + console.log(classes); + + return ( + + + + + alt-text + + + + Content + + + + + ); +}; BusinessCard.propTypes = { business: PropTypes.shape(spaceProps).isRequired, From 64c8fd25fc0a213aa50e9b376aaa5eabde75d693 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 16:55:58 -0500 Subject: [PATCH 37/93] Added additional css. Implemented icon + address --- src/components/BusinessCard/BusinessCard.jsx | 59 ++++++++++++++++---- 1 file changed, 49 insertions(+), 10 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 0f6b6ead..444f445b 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -2,7 +2,13 @@ import React from 'react'; import PropTypes, { nominalTypeHack } from 'prop-types'; -import { Box } from '@material-ui/core'; +import { + Box, + Icon, + Typography, +} from '@material-ui/core'; + +import LocationOnIcon from '@material-ui/icons/LocationOn'; import { withStyles } from '@material-ui/core/styles'; @@ -68,28 +74,50 @@ const styles = (theme) => ({ businessCardContainer: { borderRadius: '4px', border: '1px solid black', - maxHeight: '216px', - maxWidth: '760px', marginRight: 142, - + width: 'auto', + height: '100%', }, searchContentContainer: { + maxHeight: '216px', + maxWidth: '760px', display: 'flex', + flexDirection: 'row', padding: 24, }, imageContainer: { marginRight: 24, position: 'relative', - width: 171, - height: 171, + maxWidth: 254, + maxHeight: 184, + flexGrow: 1, + overflow: 'contain', }, image: { width: '100%', height: '100%', + objectFit: 'cover', + borderRadius: '4px', }, contentContainer: { - flexGrow: 1, + display: 'flex', + flexDirection: 'column', + flexGrow: 3, border: '1px solid black', + justifyContent: 'space-around', + }, + businessTitle: { + marginBottom: 0, + fontsize: '20px', + fontWeight: 500, + letterSpacing: '-0.4px', + lineHeight: '28px', + }, + icon: { + + }, + addressContainer: { + display: 'flex', }, }); @@ -116,12 +144,23 @@ const BusinessCard = ({ - alt-text + alt-text - Content - + +

Title

+ + + + {address} + + + Tags + + + CTAs + From 5e0f39b2bb52f4f3642915e9257d06cd9d7c2a07 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 17:08:59 -0500 Subject: [PATCH 38/93] Aligned CTAs at the bottom of the card --- src/components/BusinessCard/BusinessCard.jsx | 49 +++++++++++++++----- 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 444f445b..72053b2c 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -104,7 +104,6 @@ const styles = (theme) => ({ flexDirection: 'column', flexGrow: 3, border: '1px solid black', - justifyContent: 'space-around', }, businessTitle: { marginBottom: 0, @@ -112,6 +111,7 @@ const styles = (theme) => ({ fontWeight: 500, letterSpacing: '-0.4px', lineHeight: '28px', + height: '100%', }, icon: { @@ -119,6 +119,27 @@ const styles = (theme) => ({ addressContainer: { display: 'flex', }, + titleAddressContainer: { + display: 'flex', + flexDirection: 'column', + }, + titleContainer: { + height: '100%', + }, + CTAcontainer: { + display: 'flex', + alignItems: 'flex-end', + }, + tagContainer: { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + }, + bottomContent: { + height: '100%', + display: 'flex', + flexDirection: 'column', + }, }); const BusinessCard = ({ @@ -148,18 +169,22 @@ const BusinessCard = ({ - -

Title

- - - - {address} - - - Tags + + +

Title

+ + + + {address} + - - CTAs + + + Tags + + + CTAs + From 191bcbc69cb0350522bfe00df267fd273f758454 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 17:16:05 -0500 Subject: [PATCH 39/93] Replaced filler text with the chiplist and business titles --- src/components/BusinessCard/BusinessCard.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 72053b2c..4eec492f 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -13,6 +13,7 @@ import LocationOnIcon from '@material-ui/icons/LocationOn'; import { withStyles } from '@material-ui/core/styles'; import { spaceProps } from '../../types'; +import ChipList from '../ChipList'; const styles = (theme) => ({ root: { @@ -102,8 +103,7 @@ const styles = (theme) => ({ contentContainer: { display: 'flex', flexDirection: 'column', - flexGrow: 3, - border: '1px solid black', + flexGrow: 1, }, businessTitle: { marginBottom: 0, @@ -133,7 +133,7 @@ const styles = (theme) => ({ tagContainer: { display: 'flex', flexDirection: 'column', - flexGrow: 1, + flexGrow: 3, }, bottomContent: { height: '100%', @@ -169,9 +169,9 @@ const BusinessCard = ({ - + -

Title

+

{name}

 @@ -180,7 +180,7 @@ const BusinessCard = ({ - Tags + CTAs From 11a3061779c150bd72ecc2269d95e85f3aa01aa3 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 17:18:18 -0500 Subject: [PATCH 40/93] Changed card color and border colors --- src/components/BusinessCard/BusinessCard.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 4eec492f..af4e3e19 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -74,10 +74,11 @@ const styles = (theme) => ({ }, businessCardContainer: { borderRadius: '4px', - border: '1px solid black', + border: '1px solid #E5E5E5', marginRight: 142, width: 'auto', height: '100%', + backgroundColor: '#FFFFFF', }, searchContentContainer: { maxHeight: '216px', From f07da250a11c5667c6d9fcaf3f70ab08efc594e0 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 17:25:47 -0500 Subject: [PATCH 41/93] Added rating and 2 other filler CTAs --- src/components/BusinessCard/BusinessCard.jsx | 22 ++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index af4e3e19..a7372653 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -8,6 +8,7 @@ import { Typography, } from '@material-ui/core'; +import StarIcon from '@material-ui/icons/Star'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import { withStyles } from '@material-ui/core/styles'; @@ -130,6 +131,9 @@ const styles = (theme) => ({ CTAcontainer: { display: 'flex', alignItems: 'flex-end', + borderTop: '1px solid #E5E5E5', + textAlign: 'center', + justifyContent: 'space-between', }, tagContainer: { display: 'flex', @@ -141,6 +145,9 @@ const styles = (theme) => ({ display: 'flex', flexDirection: 'column', }, + ratingContainer: { + display: 'flex', + }, }); const BusinessCard = ({ @@ -185,6 +192,21 @@ const BusinessCard = ({ CTAs + + Rating + + {averageRating} + + + Rating + + {averageRating} + + + Rating + + {averageRating} + From 90104e21dfb33e5e93dc6258bee0a17a66fba9c5 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 17:31:34 -0500 Subject: [PATCH 42/93] Replaced CTAs with their proper text. --- src/components/BusinessCard/BusinessCard.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index a7372653..c81db212 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -134,6 +134,7 @@ const styles = (theme) => ({ borderTop: '1px solid #E5E5E5', textAlign: 'center', justifyContent: 'space-between', + paddingTop: '5px', }, tagContainer: { display: 'flex', @@ -191,21 +192,21 @@ const BusinessCard = ({ - CTAs - Rating - {averageRating} + Add Review - Rating + Rating {averageRating} - Rating + {phoneNumber} + + - {averageRating} + Visit Website From 696e13be5d9305a21e29a5e3d8bd9f60f66e504c Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 17:41:19 -0500 Subject: [PATCH 43/93] Increased the margin for the CTA border --- src/components/BusinessCard/BusinessCard.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index c81db212..c67c957b 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -10,6 +10,7 @@ import { import StarIcon from '@material-ui/icons/Star'; import LocationOnIcon from '@material-ui/icons/LocationOn'; +import RateReviewIcon from '@material-ui/icons/RateReview'; import { withStyles } from '@material-ui/core/styles'; @@ -134,7 +135,7 @@ const styles = (theme) => ({ borderTop: '1px solid #E5E5E5', textAlign: 'center', justifyContent: 'space-between', - paddingTop: '5px', + paddingTop: '12px', }, tagContainer: { display: 'flex', @@ -149,6 +150,9 @@ const styles = (theme) => ({ ratingContainer: { display: 'flex', }, + ratingScore: { + color: '#633AA3', + }, }); const BusinessCard = ({ @@ -193,13 +197,13 @@ const BusinessCard = ({ - + Add Review - Rating + Rating - {averageRating} + {averageRating} {phoneNumber} From 66ce39d2055db878e5f8945f50267e1bdae2d399 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 17:53:57 -0500 Subject: [PATCH 44/93] Increased fontWeight of title and size of location icon --- src/components/BusinessCard/BusinessCard.jsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index c67c957b..5c55ef2c 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -111,16 +111,19 @@ const styles = (theme) => ({ businessTitle: { marginBottom: 0, fontsize: '20px', - fontWeight: 500, + fontWeight: 700, letterSpacing: '-0.4px', lineHeight: '28px', height: '100%', + color: '#1E1131', }, icon: { - + height: '100%', + width: '23px', }, addressContainer: { display: 'flex', + color: '#666666', }, titleAddressContainer: { display: 'flex', @@ -184,11 +187,14 @@ const BusinessCard = ({ -

{name}

+

+ 1. + {name} +

- {address} + {address} From 01af7de49b749c956d59c9aa843b2baff67c5cbc Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 18:01:39 -0500 Subject: [PATCH 45/93] Removed minimum width and height on card dimensions --- src/components/BusinessCard/BusinessCard.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 5c55ef2c..ed71836b 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -83,8 +83,6 @@ const styles = (theme) => ({ backgroundColor: '#FFFFFF', }, searchContentContainer: { - maxHeight: '216px', - maxWidth: '760px', display: 'flex', flexDirection: 'row', padding: 24, @@ -147,6 +145,7 @@ const styles = (theme) => ({ }, bottomContent: { height: '100%', + width: 'auto', display: 'flex', flexDirection: 'column', }, From 694fd46b0c42187d8f7e2a461a7d3da2c88c83e3 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 18:25:34 -0500 Subject: [PATCH 46/93] Added a google maps link to the address --- src/components/BusinessCard/BusinessCard.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index ed71836b..7059946d 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -173,7 +173,10 @@ const BusinessCard = ({ classes, overrideClasses, }) => { - console.log(classes); + const convertAddressToGoogleMapsLink = (businessAddress) => { + const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; + return googleAPIQuery + encodeURIComponent(businessAddress.address); + }; return ( @@ -193,7 +196,9 @@ const BusinessCard = ({ - {address} + + {address} + From dc77ad603027bcba660374f82825d1f9b5280215 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 18:28:42 -0500 Subject: [PATCH 47/93] Modified chips to be gray with black text --- src/components/ChipList/ChipList.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/ChipList/ChipList.jsx b/src/components/ChipList/ChipList.jsx index b49f541c..cfa77951 100644 --- a/src/components/ChipList/ChipList.jsx +++ b/src/components/ChipList/ChipList.jsx @@ -12,6 +12,9 @@ const styles = { chip: { marginBottom: 8, marginRight: 4, + padding: '2px 4px 2px 4px', + backgroundColor: '#F2F2F2', + color: '#666666', }, }; From 7b8b0a3ad47fed663251555cda5e67e838a59464 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 18:41:20 -0500 Subject: [PATCH 48/93] Rounded chips, increased fontSize for title, icon now links to maps --- src/components/BusinessCard/BusinessCard.jsx | 13 ++++++++----- src/components/ChipList/ChipList.jsx | 1 + 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 7059946d..2730892d 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -108,8 +108,6 @@ const styles = (theme) => ({ }, businessTitle: { marginBottom: 0, - fontsize: '20px', - fontWeight: 700, letterSpacing: '-0.4px', lineHeight: '28px', height: '100%', @@ -129,6 +127,8 @@ const styles = (theme) => ({ }, titleContainer: { height: '100%', + fontSize: '18px', + fontWeight: 700, }, CTAcontainer: { display: 'flex', @@ -189,14 +189,17 @@ const BusinessCard = ({ -

+

1. {name}

- - + + {address} diff --git a/src/components/ChipList/ChipList.jsx b/src/components/ChipList/ChipList.jsx index cfa77951..23457f5b 100644 --- a/src/components/ChipList/ChipList.jsx +++ b/src/components/ChipList/ChipList.jsx @@ -15,6 +15,7 @@ const styles = { padding: '2px 4px 2px 4px', backgroundColor: '#F2F2F2', color: '#666666', + borderRadius: '4px', }, }; From f1efff1b7025cc76d5e13803f65b7fcfa16e7984 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 18:59:05 -0500 Subject: [PATCH 49/93] Added vertical menu button to card --- src/components/BusinessCard/BusinessCard.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 2730892d..14f6cae0 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -4,13 +4,13 @@ import PropTypes, { nominalTypeHack } from 'prop-types'; import { Box, - Icon, Typography, } from '@material-ui/core'; import StarIcon from '@material-ui/icons/Star'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import RateReviewIcon from '@material-ui/icons/RateReview'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; import { withStyles } from '@material-ui/core/styles'; @@ -120,6 +120,7 @@ const styles = (theme) => ({ addressContainer: { display: 'flex', color: '#666666', + marginBottom: '2px', }, titleAddressContainer: { display: 'flex', @@ -129,6 +130,7 @@ const styles = (theme) => ({ height: '100%', fontSize: '18px', fontWeight: 700, + display: 'flex', }, CTAcontainer: { display: 'flex', @@ -189,10 +191,11 @@ const BusinessCard = ({ -

+

1. {name}

+ Date: Mon, 12 Dec 2022 22:22:20 -0500 Subject: [PATCH 50/93] Added count for search result at the top of the search page --- src/routes/Search/Search.jsx | 48 +++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 0b00fc56..a4edfae4 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -28,6 +28,7 @@ const styles = (theme) => ({ display: 'flex', flexDirection: 'row', width: '100%', + backgroundColor: '#FFFFFF', }, resultsWrapper: { display: 'flex', @@ -94,6 +95,30 @@ const styles = (theme) => ({ lineHeight: '20px', color: '#1E1131', }, + headerFilterBar: { + marginBottom: 16, + marginTop: 24, + }, + searchCountHeader: { + fontWeight: 600, + fontSize: '32px', + color: '#1E1131', + lineHeight: '32px', + marginBottom: 9, + }, + filterBarContainer: { + display: 'flex', + }, + leftSideFilter: { + flex: 1, + }, + rightSideFilter: { + display: 'flex', + marginRight: 142, + }, + filterDropdown: { + marginRight: 6, + }, }); const Search = ({ @@ -135,7 +160,6 @@ const Search = ({ }; const isGeoLoading = isGeolocationEnabled && coords === null; - return (
{indicators.length > 0 && searchResults === null && !isGeoLoading && !loading && ( @@ -174,6 +198,28 @@ const Search = ({
)}
+ {!loading + ? ( +
+
+ {`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`} +
+
+
+ Showing: 10 per page +
+
+
+ Distance: 5 miles +
+
+ Sort by: Highest Rated +
+
+
+
+ ) + : null}
{searchResults !== null && searchResults.length > 0 && searchResults.map((result) => ( From 3ff247fac56fea7fe6e2d60b5ab9bc30c1a2338b Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 22:45:03 -0500 Subject: [PATCH 51/93] Made the card compontent more responsive and added coloring to the filter dropdowns --- src/routes/Search/Search.jsx | 42 ++++++++++++++++++++++++++++++------ 1 file changed, 35 insertions(+), 7 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index a4edfae4..812b6bc3 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -12,6 +12,7 @@ import Button from '@material-ui/core/Button'; import CircularProgress from '@material-ui/core/CircularProgress'; import Typography from '@material-ui/core/Typography'; import SearchIcon from '@material-ui/icons/Search'; +import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import BusinessCard from '../../components/BusinessCard'; import FilterPanel from '../../components/FilterPanel'; @@ -56,7 +57,7 @@ const styles = (theme) => ({ gridGap: 50, }, searchResult: { - width: '100%', + width: 'auto', }, emptyStateWrapper: { marginTop: 60, @@ -96,7 +97,6 @@ const styles = (theme) => ({ color: '#1E1131', }, headerFilterBar: { - marginBottom: 16, marginTop: 24, }, searchCountHeader: { @@ -104,7 +104,7 @@ const styles = (theme) => ({ fontSize: '32px', color: '#1E1131', lineHeight: '32px', - marginBottom: 9, + marginBottom: 16, }, filterBarContainer: { display: 'flex', @@ -117,8 +117,22 @@ const styles = (theme) => ({ marginRight: 142, }, filterDropdown: { + display: 'flex', + }, + boldedText: { + fontWeight: 600, + lineHeight: '17.5px', + color: '#1E1131', marginRight: 6, }, + purpleText: { + display: 'flex', + color: '#633AA3', + }, + arrowDropdown: { + marginRight: 6, + verticalAlign: 'center', + }, }); const Search = ({ @@ -206,14 +220,28 @@ const Search = ({
- Showing: 10 per page +
+ Sort by: + + Highly Rated + + +
- Distance: 5 miles + Distance: + + 5 miles + +
-
- Sort by: Highest Rated +
+ Sort by: + + Highly Rated + +
From fd11600ca2cb182ebefd7ac571c70aeaa00d7f88 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 22:51:33 -0500 Subject: [PATCH 52/93] Centered dropdown arrows with the text --- src/routes/Search/Search.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 812b6bc3..ddb549e7 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -131,7 +131,8 @@ const styles = (theme) => ({ }, arrowDropdown: { marginRight: 6, - verticalAlign: 'center', + paddingBottom: 4, + verticalAlign: 'middle', }, }); From bcf3d17edb4d805906eee89095e22c0b0911e223 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 22:56:11 -0500 Subject: [PATCH 53/93] Centered pagination relative to the card components --- src/components/Pagination/Pagination.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 6286620f..ef619936 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -13,12 +13,15 @@ const styles = (theme) => ({ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', + marginRight: 142, }, prompt: { display: 'block', flexGrow: 2, width: '100%', marginTop: '30px', + color: '#666666', + fontSize: '16px', }, button: { [theme.breakpoints.up('xs')]: { From 0af480fb3a5d6574575dcb965905d69752efa8db Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 23:17:29 -0500 Subject: [PATCH 54/93] Replaced next and back buttons with arrows --- src/components/Pagination/Pagination.jsx | 71 ++++++++++++++---------- 1 file changed, 42 insertions(+), 29 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index ef619936..7436d16f 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -2,9 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; -import useMediaQuery from '@material-ui/core/useMediaQuery'; import { withStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; import { Typography } from '@material-ui/core'; import useQuery from '../../hooks/useQuery'; @@ -16,7 +14,7 @@ const styles = (theme) => ({ marginRight: 142, }, prompt: { - display: 'block', + display: 'flex', flexGrow: 2, width: '100%', marginTop: '30px', @@ -34,6 +32,20 @@ const styles = (theme) => ({ marginBottom: 50, }, }, + showingText: { + flexGrow: 1, + justifyContent: 'center', + }, + navigationContainer: { + display: 'flex', + flexDirection: 'column', + }, + paginationContainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + whiteSpace: 'no wrap', + }, }); const Pagination = ({ @@ -42,7 +54,6 @@ const Pagination = ({ perPage, classes, }) => { - const matches = useMediaQuery('(min-width:376px)'); const query = useQuery(); const history = useHistory(); const totalPages = Math.ceil(totalCount / perPage); @@ -56,17 +67,9 @@ const Pagination = ({ query.set('page', page - 1); query.set('perPage', perPage); backButton = ( - + + {'<'} + ); } if (totalPages > 1 && page < totalPages) { @@ -75,17 +78,9 @@ const Pagination = ({ query.set('page', page + 1); query.set('perPage', perPage); nextButton = ( - + + {'>'} + ); } @@ -93,9 +88,27 @@ const Pagination = ({
{(backExists || nextExists) && ( - - {`Showing ${perPage} of ${totalCount} results`} - +
+ + {`Showing ${perPage} of ${totalCount} results`} + +
+
+
+ {backButton} +
+
+ 12345 +
+
+ {nextButton} +
+
+
+ Go to X page here +
+
+
)} {backButton} {nextButton} From fb5ce6b71d91670ac3be872a83ba468e4fd9dd8b Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Mon, 12 Dec 2022 23:44:56 -0500 Subject: [PATCH 55/93] Abstracted out pagination button logic --- src/components/Pagination/Pagination.jsx | 45 ++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 7436d16f..722c6a4e 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -12,6 +12,7 @@ const styles = (theme) => ({ flexWrap: 'wrap', justifyContent: 'center', marginRight: 142, + marginBottom: 40, }, prompt: { display: 'flex', @@ -46,6 +47,32 @@ const styles = (theme) => ({ justifyContent: 'flex-start', whiteSpace: 'no wrap', }, + paginationLinkContainers: { + display: 'flex', + alignItems: 'center', + height: '30px', + justifyContent: 'center', + minWidth: '20px', + }, + paginationLink: { + padding: '0.6px', + }, + paginationButton: { + backgroundColor: '#633AA3', + height: '28px', + width: '28px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + margin: '0 2px', + }, + activeButton: { + backgroundColor: '#633AA3', + color: '#FFFFFF', + }, + inactiveButton: { + color: '#666666', + }, }); const Pagination = ({ @@ -84,6 +111,19 @@ const Pagination = ({ ); } + const paginationButton = (link, pageNumber, isActive) => ( + +
+ + {pageNumber} + +
+ + ); + return (
{(backExists || nextExists) @@ -98,7 +138,8 @@ const Pagination = ({ {backButton}
- 12345 + {paginationButton('/', 1, true)} + {paginationButton('/', 2, false)}
{nextButton} @@ -110,8 +151,6 @@ const Pagination = ({
)} - {backButton} - {nextButton}
); }; From a198590ce1ff9cff7ef294cd754a8da74198de6e Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 13:36:44 -0500 Subject: [PATCH 56/93] Added formatting for phone numbers and phone icon --- src/components/BusinessCard/BusinessCard.jsx | 24 ++++++++++++++++---- src/routes/Search/Search.jsx | 4 ++-- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 14f6cae0..7b0a5826 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -11,6 +11,7 @@ import StarIcon from '@material-ui/icons/Star'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import RateReviewIcon from '@material-ui/icons/RateReview'; import MoreVertIcon from '@material-ui/icons/MoreVert'; +import PhoneIcon from '@material-ui/icons/Phone'; import { withStyles } from '@material-ui/core/styles'; @@ -154,9 +155,13 @@ const styles = (theme) => ({ ratingContainer: { display: 'flex', }, - ratingScore: { + purpleColor: { color: '#633AA3', }, + phoneNumberString: { + textDecoration: 'none', + color: '#666666', + }, }); const BusinessCard = ({ @@ -180,12 +185,22 @@ const BusinessCard = ({ return googleAPIQuery + encodeURIComponent(businessAddress.address); }; + const formatTenDigitPhoneNumber = (phoneNumberString) => { + const cleaned = (`'' + ${phoneNumberString}`).replace(/\D/g, ''); + const match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/); + if (match) { + const intlCode = (match[1] ? '+1 ' : ''); + return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join(''); + } + return null; + }; + return ( - alt-text + alt-text @@ -219,10 +234,11 @@ const BusinessCard = ({ Rating - {averageRating} + {averageRating} - {phoneNumber} + + {formatTenDigitPhoneNumber(phoneNumber)} diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index ddb549e7..f871b96a 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -222,9 +222,9 @@ const Search = ({
- Sort by: + Showing: - Highly Rated + 10 per page
From d94a4344e459f1c5690f94c445a3c44fb8fba6d2 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 13:43:05 -0500 Subject: [PATCH 57/93] Clicking on the card image now redirects users to the respective page --- src/components/BusinessCard/BusinessCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 7b0a5826..f9eed99b 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -199,7 +199,7 @@ const BusinessCard = ({ - + alt-text From 30b24a26f45e11f7089737a88896b90513a705bb Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 13:50:02 -0500 Subject: [PATCH 58/93] Add review button now redirects to the respective page --- src/components/BusinessCard/BusinessCard.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index f9eed99b..b95b440c 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -158,7 +158,7 @@ const styles = (theme) => ({ purpleColor: { color: '#633AA3', }, - phoneNumberString: { + blackColorNoUnderline: { textDecoration: 'none', color: '#666666', }, @@ -229,7 +229,9 @@ const BusinessCard = ({ - Add Review + + Add Review + Rating @@ -238,7 +240,7 @@ const BusinessCard = ({ - {formatTenDigitPhoneNumber(phoneNumber)} + {formatTenDigitPhoneNumber(phoneNumber)} From c5fe1f018da432303ade08f4895dbd02c62955ba Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 14:07:57 -0500 Subject: [PATCH 59/93] Added the correct icon for Visit Website --- src/components/BusinessCard/BusinessCard.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index b95b440c..51b4a798 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -12,6 +12,7 @@ import LocationOnIcon from '@material-ui/icons/LocationOn'; import RateReviewIcon from '@material-ui/icons/RateReview'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import PhoneIcon from '@material-ui/icons/Phone'; +import LanguageIcon from '@material-ui/icons/Language'; import { withStyles } from '@material-ui/core/styles'; @@ -239,11 +240,11 @@ const BusinessCard = ({ {averageRating} - + {formatTenDigitPhoneNumber(phoneNumber)} - + Visit Website From 8595719c9528dd32cae947e52389266ffeecde50 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 14:28:13 -0500 Subject: [PATCH 60/93] Search results now render the correct number next to title --- src/components/BusinessCard/BusinessCard.jsx | 6 +++++- src/routes/Search/Search.jsx | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 51b4a798..282b4ea4 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -180,6 +180,7 @@ const BusinessCard = ({ }, classes, overrideClasses, + count, }) => { const convertAddressToGoogleMapsLink = (businessAddress) => { const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; @@ -208,7 +209,10 @@ const BusinessCard = ({

- 1. + + {count} + . + {name}

diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index f871b96a..395afe5b 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -251,11 +251,12 @@ const Search = ({ : null}
{searchResults !== null && searchResults.length > 0 - && searchResults.map((result) => ( + && searchResults.map((result, index) => (
From ba498c1f90740406a400c71fffc97a9b799abf29 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 14:40:13 -0500 Subject: [PATCH 61/93] Phone number and add review href now encomapss the entire CTA --- src/components/BusinessCard/BusinessCard.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 282b4ea4..6762e737 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -155,12 +155,12 @@ const styles = (theme) => ({ }, ratingContainer: { display: 'flex', + textDecoration: 'none', }, purpleColor: { color: '#633AA3', }, - blackColorNoUnderline: { - textDecoration: 'none', + blackColor: { color: '#666666', }, }); @@ -232,21 +232,21 @@ const BusinessCard = ({ - + - - Add Review - - + Add Review + Rating {averageRating} - + - {formatTenDigitPhoneNumber(phoneNumber)} - + + {formatTenDigitPhoneNumber(phoneNumber)} + + Visit Website From 8712dc4d7c7df37fc0228014e2ca526ac5490f48 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 16:05:08 -0500 Subject: [PATCH 62/93] Fixed a error with 0 results, showing x of y results now displays properly --- src/components/Pagination/Pagination.jsx | 9 ++++++++- src/routes/Search/Search.jsx | 11 +++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 722c6a4e..02b71675 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -36,6 +36,7 @@ const styles = (theme) => ({ showingText: { flexGrow: 1, justifyContent: 'center', + fontSize: '16px', }, navigationContainer: { display: 'flex', @@ -124,13 +125,19 @@ const Pagination = ({ ); + const calculatePageRange = () => { + const startingRange = (page - 1) * perPage + 1; + const endingRange = (page) * perPage < totalCount ? (page) * perPage : totalCount; + return [startingRange, endingRange]; + }; + return (
{(backExists || nextExists) && (
- {`Showing ${perPage} of ${totalCount} results`} + {`Showing ${calculatePageRange()[0]} - ${calculatePageRange()[1]} of ${totalCount} results`}
diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 395afe5b..675d61d2 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -175,6 +175,12 @@ const Search = ({ }; const isGeoLoading = isGeolocationEnabled && coords === null; + + if (pagination) { + console.log(pagination); + console.log(pagination.totalCount); + } + return (
{indicators.length > 0 && searchResults === null && !isGeoLoading && !loading && ( @@ -213,11 +219,12 @@ const Search = ({
)}
- {!loading + {searchResults !== null && searchResults.length > 0 ? (
- {`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`} + {pagination.totalCount !== undefined ? `${pagination.total_count} + Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}` : null}
From 43a97993b5767c6027f62405cc8dd5b6b00b4b6a Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 16:06:49 -0500 Subject: [PATCH 63/93] Fixed a bug with Search Results count not displaying at the top --- src/routes/Search/Search.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 675d61d2..5ceec802 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -223,8 +223,7 @@ const Search = ({ ? (
- {pagination.totalCount !== undefined ? `${pagination.total_count} - Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}` : null} + {`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`}
From c848f694debbc44333f3bb93d935d6a758f62832 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 16:23:33 -0500 Subject: [PATCH 64/93] Showing x of y results now displays for results with 1 page --- src/components/Pagination/Pagination.jsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 02b71675..2360a0af 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -18,7 +18,7 @@ const styles = (theme) => ({ display: 'flex', flexGrow: 2, width: '100%', - marginTop: '30px', + marginTop: '40px', color: '#666666', fontSize: '16px', }, @@ -133,12 +133,16 @@ const Pagination = ({ return (
- {(backExists || nextExists) - && ( -
+
+ + {(totalCount > 0) + && ( {`Showing ${calculatePageRange()[0]} - ${calculatePageRange()[1]} of ${totalCount} results`} + )} + {(backExists || nextExists) + && (
@@ -156,8 +160,8 @@ const Pagination = ({ Go to X page here
-
- )} + )} +
); }; From c1e4a637e279459173c95e621e4ae53eb21bf6a3 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 19:07:34 -0500 Subject: [PATCH 65/93] Pagination now renders the proper logic for displaying the menu --- src/components/Pagination/Pagination.jsx | 41 ++++++++++++++++++++++-- src/routes/Search/Search.jsx | 5 --- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 2360a0af..4b787230 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -99,7 +99,14 @@ const Pagination = ({ {'<'} ); + } else { + backButton = ( +
+ {'<'} +
+ ); } + if (totalPages > 1 && page < totalPages) { const nextLink = history.location.pathname; nextExists = true; @@ -110,6 +117,12 @@ const Pagination = ({ {'>'} ); + } else { + nextButton = ( +
+ {'>'} +
+ ); } const paginationButton = (link, pageNumber, isActive) => ( @@ -131,6 +144,29 @@ const Pagination = ({ return [startingRange, endingRange]; }; + const calculatePaginationMenu = () => { + const menu = [page]; + const nextPage = page + 1; + const prevPage = page - 1; + + if ((totalPages > 1 && page > 1)) { + menu.unshift(prevPage); + } + + if ((totalPages > 1 && page < totalPages) === false) { + return menu; + } + + if (page + 2 <= totalPages) { + // This should have the ... between those two + return menu.concat([nextPage, totalPages]); + } + if (page + 2 > totalPages) { + return menu.concat([nextPage]); + } + return menu.concat([nextPage, nextPage + 1]); + }; + return (
@@ -149,8 +185,9 @@ const Pagination = ({ {backButton}
- {paginationButton('/', 1, true)} - {paginationButton('/', 2, false)} + {calculatePaginationMenu().map((pages) => ( + paginationButton('/', pages, true) + ))}
{nextButton} diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 5ceec802..440e18b7 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -176,11 +176,6 @@ const Search = ({ const isGeoLoading = isGeolocationEnabled && coords === null; - if (pagination) { - console.log(pagination); - console.log(pagination.totalCount); - } - return (
{indicators.length > 0 && searchResults === null && !isGeoLoading && !loading && ( From 116711b4c1002c3826342e4b0d1750c16fcfb6ac Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 19:48:46 -0500 Subject: [PATCH 66/93] Added input for pagination's go to page feature --- src/components/Pagination/Pagination.jsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 4b787230..d372a137 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -2,6 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; +import Input from '@material-ui/core/Input'; + import { withStyles } from '@material-ui/core/styles'; import { Typography } from '@material-ui/core'; import useQuery from '../../hooks/useQuery'; @@ -74,6 +76,13 @@ const styles = (theme) => ({ inactiveButton: { color: '#666666', }, + pageInputNavigation: { + border: '1px solid #666666', + width: '40px', + borderRadius: '4px', + height: '28px', + marginLeft: '8px', + }, }); const Pagination = ({ @@ -194,7 +203,12 @@ const Pagination = ({
- Go to X page here + Go to page +
)} From febf1bd4f592650c5a964364d0b86cdb1dd26121 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 19:54:30 -0500 Subject: [PATCH 67/93] Added gray container styling to the Go to page feature --- src/components/Pagination/Pagination.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index d372a137..76cc8f13 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -82,6 +82,18 @@ const styles = (theme) => ({ borderRadius: '4px', height: '28px', marginLeft: '8px', + backgroundColor: '#FFFFFF', + }, + pageInputContainer: { + backgroundColor: '#F2F2F2', + boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', + borderRadius: '4px', + width: '153px', + height: '60px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + color: '#000000', }, }); @@ -202,7 +214,7 @@ const Pagination = ({ {nextButton}
-
+
Go to page Date: Tue, 13 Dec 2022 20:11:50 -0500 Subject: [PATCH 68/93] Readjusted margins to fit new component, fixed a bug with pagination logic --- src/components/Pagination/Pagination.jsx | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 76cc8f13..732021eb 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -8,13 +8,13 @@ import { withStyles } from '@material-ui/core/styles'; import { Typography } from '@material-ui/core'; import useQuery from '../../hooks/useQuery'; -const styles = (theme) => ({ +const styles = () => ({ root: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center', marginRight: 142, - marginBottom: 40, + marginBottom: 100, }, prompt: { display: 'flex', @@ -24,17 +24,6 @@ const styles = (theme) => ({ color: '#666666', fontSize: '16px', }, - button: { - [theme.breakpoints.up('xs')]: { - width: '100%', - marginTop: 40, - }, - [theme.breakpoints.up('mobile')]: { - width: 250, - marginRight: 20, - marginBottom: 50, - }, - }, showingText: { flexGrow: 1, justifyContent: 'center', @@ -178,9 +167,9 @@ const Pagination = ({ return menu; } - if (page + 2 <= totalPages) { + if (page + 3 <= totalPages) { // This should have the ... between those two - return menu.concat([nextPage, totalPages]); + return menu.concat([nextPage, '...', totalPages]); } if (page + 2 > totalPages) { return menu.concat([nextPage]); From 3b01eacec85d341dc32bceb3b58b4bd037a96a2e Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 20:30:01 -0500 Subject: [PATCH 69/93] Deleted unused BusinessCard classes --- src/components/BusinessCard/BusinessCard.jsx | 48 -------------------- 1 file changed, 48 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 6762e737..e99dbfa6 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -28,54 +28,6 @@ const styles = (theme) => ({ marginTop: '8px', marginRight: '142px', }, - starIcon: { - paddingBottom: '0 !important', - }, - rating: { - display: 'block', - }, - headerAction: { - margin: '0 !important', - }, - cardMedia: { - margin: 'auto', - [theme.breakpoints.up('xs')]: { - width: 344, - height: 194, - }, - [theme.breakpoints.up('mobile')]: { - width: 436, - height: 222, - }, - }, - location: { - display: 'flex', - 'flex-direction': 'row', - marginBottom: 15, - color: 'rgba(0, 0, 0, 0.6)', - textDecorationLine: 'underline', - }, - - distance: { - textAlign: 'right', - flexGrow: 2, - }, - address: { - marginRight: 30, - flexGrow: 1, - }, - chipWrapper: { - 'margin-top': '15px', - }, - filter: { - margin: '15px 20px 15px 0', - }, - footer: { - marginTop: 30, - }, - shareButton: { - float: 'right', - }, businessCardContainer: { borderRadius: '4px', border: '1px solid #E5E5E5', From 15c42d637632bf844787aff8aeb8633defe745d1 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 20:38:08 -0500 Subject: [PATCH 70/93] Added a minimum height to card images --- src/components/BusinessCard/BusinessCard.jsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index e99dbfa6..b9876e65 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -1,6 +1,6 @@ /* eslint-disable no-unused-vars */ import React from 'react'; -import PropTypes, { nominalTypeHack } from 'prop-types'; +import PropTypes from 'prop-types'; import { Box, @@ -21,14 +21,6 @@ import ChipList from '../ChipList'; const styles = (theme) => ({ root: { - '& .MuiSvgIcon-root': { - padding: '6px 6px;', - }, - flexGrow: 1, - marginTop: '8px', - marginRight: '142px', - }, - businessCardContainer: { borderRadius: '4px', border: '1px solid #E5E5E5', marginRight: 142, @@ -38,7 +30,6 @@ const styles = (theme) => ({ }, searchContentContainer: { display: 'flex', - flexDirection: 'row', padding: 24, }, imageContainer: { @@ -46,6 +37,7 @@ const styles = (theme) => ({ position: 'relative', maxWidth: 254, maxHeight: 184, + minHeight: 184, flexGrow: 1, overflow: 'contain', }, @@ -150,7 +142,7 @@ const BusinessCard = ({ }; return ( - + From a5ef1608338131e0cbb761a6fb5f1ccb3533583e Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 20:44:20 -0500 Subject: [PATCH 71/93] Refactored some of BusinessCard classes --- src/components/BusinessCard/BusinessCard.jsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index b9876e65..be791673 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -58,6 +58,8 @@ const styles = (theme) => ({ lineHeight: '28px', height: '100%', color: '#1E1131', + margin: 0, + flex: 1, }, icon: { height: '100%', @@ -104,9 +106,12 @@ const styles = (theme) => ({ purpleColor: { color: '#633AA3', }, - blackColor: { + grayColor: { color: '#666666', }, + addressString: { + textDecoration: 'underline', + }, }); const BusinessCard = ({ @@ -152,7 +157,7 @@ const BusinessCard = ({ -

+

{count} . @@ -167,7 +172,9 @@ const BusinessCard = ({ className={classes.addressContainer} > - {address} + + {address} + @@ -178,7 +185,7 @@ const BusinessCard = ({ - Add Review + Add Review Rating @@ -187,7 +194,7 @@ const BusinessCard = ({ - + {formatTenDigitPhoneNumber(phoneNumber)} From f38883f3f6d6d43786784e5eb3ca68f7b70479bf Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Tue, 13 Dec 2022 21:08:49 -0500 Subject: [PATCH 72/93] Fixed a bug where no results page wouldn't be centered --- src/components/Pagination/Pagination.jsx | 2 -- src/routes/Search/Search.jsx | 5 +---- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 732021eb..818b389d 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -168,7 +168,6 @@ const Pagination = ({ } if (page + 3 <= totalPages) { - // This should have the ... between those two return menu.concat([nextPage, '...', totalPages]); } if (page + 2 > totalPages) { @@ -180,7 +179,6 @@ const Pagination = ({ return (

- {(totalCount > 0) && ( diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 440e18b7..0a0cfe75 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -27,9 +27,9 @@ const styles = (theme) => ({ }, content: { display: 'flex', - flexDirection: 'row', width: '100%', backgroundColor: '#FFFFFF', + flexDirection: 'column', }, resultsWrapper: { display: 'flex', @@ -75,9 +75,6 @@ const styles = (theme) => ({ marginRight: 20, }, }, - filterButtonWrapper: { - display: 'flex', - }, searchresultsText: { flexGrow: 2, }, From d94d570162675a938b7cb957b14fdc7a23f6b828 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 03:05:26 -0500 Subject: [PATCH 73/93] Aligned searchResults margins as one variable --- src/components/BusinessCard/BusinessCard.jsx | 1 - src/components/Pagination/Pagination.jsx | 1 - src/routes/Search/Search.jsx | 20 +++++++++----------- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index be791673..86ca30fd 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -23,7 +23,6 @@ const styles = (theme) => ({ root: { borderRadius: '4px', border: '1px solid #E5E5E5', - marginRight: 142, width: 'auto', height: '100%', backgroundColor: '#FFFFFF', diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 818b389d..3a9b05d7 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -13,7 +13,6 @@ const styles = () => ({ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', - marginRight: 142, marginBottom: 100, }, prompt: { diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 0a0cfe75..e599c696 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -57,7 +57,7 @@ const styles = (theme) => ({ gridGap: 50, }, searchResult: { - width: 'auto', + marginRight: 142, }, emptyStateWrapper: { marginTop: 60, @@ -103,15 +103,11 @@ const styles = (theme) => ({ lineHeight: '32px', marginBottom: 16, }, - filterBarContainer: { - display: 'flex', - }, leftSideFilter: { flex: 1, }, rightSideFilter: { display: 'flex', - marginRight: 142, }, filterDropdown: { display: 'flex', @@ -217,7 +213,7 @@ const Search = ({
{`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`}
-
+
Showing: @@ -261,11 +257,13 @@ const Search = ({ ))}
{pagination && pagination !== null && ( - +
+ +
)}
From 76f4db7ac3bf1318a960d0ff8c9bdd98c766fb66 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 03:16:21 -0500 Subject: [PATCH 74/93] Abstracted margins from filterbar to the search content --- src/routes/Search/Search.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index e599c696..3a0210fb 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -57,7 +57,7 @@ const styles = (theme) => ({ gridGap: 50, }, searchResult: { - marginRight: 142, + margin: '0 16px', }, emptyStateWrapper: { marginTop: 60, @@ -209,11 +209,11 @@ const Search = ({
{searchResults !== null && searchResults.length > 0 ? ( -
+
{`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`}
-
+
Showing: From 0e88e7f522e4a9181a1ddae321363f6bf5a05a59 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 03:16:49 -0500 Subject: [PATCH 75/93] Abstracted margins from filterbar to the search content --- src/routes/Search/Search.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 3a0210fb..8449fe34 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -48,7 +48,6 @@ const styles = (theme) => ({ height: '100%', zIndex: 999, paddingTop: '32px', - marginRight: '40px', backgroundColor: '#f2f2f2', }, list: { @@ -57,7 +56,8 @@ const styles = (theme) => ({ gridGap: 50, }, searchResult: { - margin: '0 16px', + marginRight: 142, + marginLeft: 40, }, emptyStateWrapper: { marginTop: 60, From a6b15e8a42060c7489869ff9920b3d824922a953 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 16:29:17 -0500 Subject: [PATCH 76/93] Shrunk chips and removed grid from searchResults --- src/components/BusinessCard/BusinessCard.jsx | 49 +++++++++++--------- src/components/ChipList/ChipList.jsx | 2 +- src/routes/Search/Search.jsx | 37 +++++---------- 3 files changed, 39 insertions(+), 49 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 86ca30fd..8c382fea 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -80,27 +80,30 @@ const styles = (theme) => ({ display: 'flex', }, CTAcontainer: { + borderTop: '1px solid #E5E5E5', + paddingTop: '12px', + }, + buttonContainer: { display: 'flex', alignItems: 'flex-end', - borderTop: '1px solid #E5E5E5', textAlign: 'center', - justifyContent: 'space-between', - paddingTop: '12px', + maxWidth: '800px', }, tagContainer: { display: 'flex', flexDirection: 'column', flexGrow: 3, + maxWidth: '800px', }, bottomContent: { height: '100%', - width: 'auto', display: 'flex', flexDirection: 'column', }, ratingContainer: { display: 'flex', textDecoration: 'none', + marginRight: 'auto', }, purpleColor: { color: '#633AA3', @@ -182,24 +185,26 @@ const BusinessCard = ({ - - - Add Review - - - Rating - - {averageRating} - - - - - {formatTenDigitPhoneNumber(phoneNumber)} - - - - - Visit Website + + + + Add Review + + + Rating + + {averageRating} + + + + + {formatTenDigitPhoneNumber(phoneNumber)} + + + + + Visit Website + diff --git a/src/components/ChipList/ChipList.jsx b/src/components/ChipList/ChipList.jsx index 23457f5b..5c530e00 100644 --- a/src/components/ChipList/ChipList.jsx +++ b/src/components/ChipList/ChipList.jsx @@ -12,7 +12,6 @@ const styles = { chip: { marginBottom: 8, marginRight: 4, - padding: '2px 4px 2px 4px', backgroundColor: '#F2F2F2', color: '#666666', borderRadius: '4px', @@ -41,6 +40,7 @@ const ChipList = ({ chips, classes }) => { key={chip.name.replace(/\w/, '')} className={classes.chip} ref={ref} + size="small" /> ); }) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 8449fe34..8227955a 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -1,5 +1,5 @@ /* eslint-disable no-unused-vars */ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { geolocated, geoPropTypes } from 'react-geolocated'; @@ -33,11 +33,7 @@ const styles = (theme) => ({ }, resultsWrapper: { display: 'flex', - flexDirection: 'column', - [theme.breakpoints.up('mobile')]: { - display: 'grid', - gridTemplateColumns: '1fr 8fr', - }, + flexDirection: 'row', }, filtersContainer: { display: 'flex', @@ -52,10 +48,10 @@ const styles = (theme) => ({ }, list: { display: 'grid', - gridTemplateColumns: 'repeat(1fr)', gridGap: 50, }, searchResult: { + width: '80%', marginRight: 142, marginLeft: 40, }, @@ -79,9 +75,6 @@ const styles = (theme) => ({ flexGrow: 2, }, filterButton: { - [theme.breakpoints.up('mobile')]: { - display: 'none', - }, width: '100px !important', marginBottom: '16px', height: 36, @@ -93,9 +86,6 @@ const styles = (theme) => ({ lineHeight: '20px', color: '#1E1131', }, - headerFilterBar: { - marginTop: 24, - }, searchCountHeader: { fontWeight: 600, fontSize: '32px', @@ -127,6 +117,9 @@ const styles = (theme) => ({ paddingBottom: 4, verticalAlign: 'middle', }, + hiddenElement: { + display: 'none', + }, }); const Search = ({ @@ -134,7 +127,7 @@ const Search = ({ coords, isGeolocationEnabled, }) => { - const matches = useMediaQuery('(min-width:376px)'); + const isWiderThanBreakpoint = useMediaQuery('(min-width:1376px)'); const [openFilter, setOpenFilter] = useState(false); const { @@ -182,23 +175,15 @@ const Search = ({ )}
{searchResults !== null && searchResults.length > 0 && (
- setOpenFilter(false)} - type={matches ? 'desktop' : 'mobile'} + type={isWiderThanBreakpoint ? 'desktop' : 'mobile'} allIndicators={indicators} search={search} updateSearch={updateSearch} @@ -274,13 +259,13 @@ const Search = ({ && !loading && (
- + No Results
- + We couldn’t find what you’re looking for. Please try again or add a space to Lavender Book. From 941f83740a78e59edf8d1532dc48769cf70cc734 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 16:47:02 -0500 Subject: [PATCH 77/93] Filterbar now disappears after the breakpoint --- src/routes/Search/Search.jsx | 47 ++++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 8227955a..fe2ec804 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -173,24 +173,23 @@ const Search = ({ location={userLocation.address} /> )} -
- {searchResults !== null && searchResults.length > 0 && ( -
- setOpenFilter(false)} - type={isWiderThanBreakpoint ? 'desktop' : 'mobile'} - allIndicators={indicators} - search={search} - updateSearch={updateSearch} - resultCount={searchResults.length} - /> -
- )} +
+ {searchResults !== null + && searchResults.length > 0 + && (isWiderThanBreakpoint || openFilter) + && ( +
+ setOpenFilter(false)} + type={isWiderThanBreakpoint ? 'desktop' : 'mobile'} + allIndicators={indicators} + search={search} + updateSearch={updateSearch} + resultCount={searchResults.length} + /> +
+ )}
{searchResults !== null && searchResults.length > 0 ? ( @@ -198,6 +197,18 @@ const Search = ({
{`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`}
+ {!isWiderThanBreakpoint && ( +
+ +
+ )}
From 78caeae935ae264a1e7683abcc797a0acdb36a66 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 16:59:48 -0500 Subject: [PATCH 78/93] Fixed a bug with no search results and filterBar height --- src/routes/Search/Search.jsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index fe2ec804..5c47fdeb 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -27,9 +27,7 @@ const styles = (theme) => ({ }, content: { display: 'flex', - width: '100%', backgroundColor: '#FFFFFF', - flexDirection: 'column', }, resultsWrapper: { display: 'flex', @@ -46,17 +44,14 @@ const styles = (theme) => ({ paddingTop: '32px', backgroundColor: '#f2f2f2', }, - list: { - display: 'grid', - gridGap: 50, - }, searchResult: { - width: '80%', - marginRight: 142, + width: '100%', marginLeft: 40, + marginBottom: 20, }, emptyStateWrapper: { marginTop: 60, + width: '100%', }, emptyStateIcon: { width: 55, From 806c2505891ca547bcdf80c9ba5e5152bf71d1ab Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 17:52:25 -0500 Subject: [PATCH 79/93] Searchresults is now more responsive based on screen width --- src/routes/Search/Search.jsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 5c47fdeb..849699b4 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -26,18 +26,12 @@ const styles = (theme) => ({ // This is for setting the margins of the results returned from search. }, content: { - display: 'flex', backgroundColor: '#FFFFFF', + width: '100%', }, resultsWrapper: { - display: 'flex', - flexDirection: 'row', }, filtersContainer: { - display: 'flex', - alignSelf: 'flex-start', - flexDirection: 'column', - flexShrink: 0, width: '316px', height: '100%', zIndex: 999, @@ -45,9 +39,9 @@ const styles = (theme) => ({ backgroundColor: '#f2f2f2', }, searchResult: { - width: '100%', marginLeft: 40, marginBottom: 20, + marginRight: 40, }, emptyStateWrapper: { marginTop: 60, @@ -115,6 +109,9 @@ const styles = (theme) => ({ hiddenElement: { display: 'none', }, + searchBodyContainer: { + width: '100%', + }, }); const Search = ({ @@ -185,7 +182,7 @@ const Search = ({ />
)} -
+
{searchResults !== null && searchResults.length > 0 ? (
@@ -234,7 +231,7 @@ const Search = ({
) : null} -
+
{searchResults !== null && searchResults.length > 0 && searchResults.map((result, index) => (
From 5701ea22cb77098e204e702f6f8d04df4a087ffb Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 17:59:17 -0500 Subject: [PATCH 80/93] Fixed a bug regarding filterBar height --- src/routes/Search/Search.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 849699b4..efc452db 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -30,10 +30,10 @@ const styles = (theme) => ({ width: '100%', }, resultsWrapper: { + display: 'flex', }, filtersContainer: { width: '316px', - height: '100%', zIndex: 999, paddingTop: '32px', backgroundColor: '#f2f2f2', From 41cdb87dbbe273cf33c8179f46e2f3a00166a5d3 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 18:14:11 -0500 Subject: [PATCH 81/93] Added conditional css for searchBody margins --- src/routes/Search/Search.jsx | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index efc452db..4019690e 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -41,7 +41,12 @@ const styles = (theme) => ({ searchResult: { marginLeft: 40, marginBottom: 20, - marginRight: 40, + marginRight: 142, + }, + searchResultBreakpoint: { + marginLeft: 20, + marginRight: 20, + marginBottom: 20, }, emptyStateWrapper: { marginTop: 60, @@ -185,7 +190,12 @@ const Search = ({
{searchResults !== null && searchResults.length > 0 ? ( -
+
{`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`}
@@ -234,7 +244,12 @@ const Search = ({
{searchResults !== null && searchResults.length > 0 && searchResults.map((result, index) => ( -
+
{pagination && pagination !== null && ( -
+
Date: Wed, 14 Dec 2022 20:31:52 -0500 Subject: [PATCH 82/93] Refactored businessCard components into functions --- src/components/BusinessCard/BusinessCard.jsx | 126 +++++++++++-------- 1 file changed, 73 insertions(+), 53 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 8c382fea..19ea6d29 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -38,7 +38,7 @@ const styles = (theme) => ({ maxHeight: 184, minHeight: 184, flexGrow: 1, - overflow: 'contain', + overflow: 'hidden', }, image: { width: '100%', @@ -148,65 +148,85 @@ const BusinessCard = ({ return null; }; + const ChipTags = () => ( + + + + ); + + const CTAButtons = () => ( + + + + + Add Review + + + Rating + + {averageRating} + + + + + {formatTenDigitPhoneNumber(phoneNumber)} + + + + + Visit Website + + + + ); + + const TitleAndDropdownMenu = () => ( + +

+ + {count} + . + + {name} +

+ + + ); + + const Address = () => ( + + + + + {address} + + + + ); + + const Image = () => ( + + + alt-text + + + ); + return ( - - - alt-text - - + - -

- - {count} - . - - {name} -

- - - - - - - {address} - - - + +
- - - - - - - - Add Review - - - Rating - - {averageRating} - - - - - {formatTenDigitPhoneNumber(phoneNumber)} - - - - - Visit Website - - - + + From 22b4b3944f9a9c510c5f51d11e0aed94f45bd15c Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 22:04:26 -0500 Subject: [PATCH 83/93] Business Card now has a mobile version --- src/components/BusinessCard/BusinessCard.jsx | 102 +++++++++++++++++-- src/components/ChipList/ChipList.jsx | 2 +- 2 files changed, 93 insertions(+), 11 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 19ea6d29..935b1560 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -1,5 +1,5 @@ /* eslint-disable no-unused-vars */ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { @@ -14,10 +14,12 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'; import PhoneIcon from '@material-ui/icons/Phone'; import LanguageIcon from '@material-ui/icons/Language'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; import { withStyles } from '@material-ui/core/styles'; import { spaceProps } from '../../types'; import ChipList from '../ChipList'; +import useQuery from '../../hooks/useQuery'; const styles = (theme) => ({ root: { @@ -114,6 +116,34 @@ const styles = (theme) => ({ addressString: { textDecoration: 'underline', }, + mobileImageContainer: { + marginRight: 24, + position: 'relative', + maxWidth: 127, + maxHeight: 92, + minHeight: 92, + flexGrow: 1, + overflow: 'hidden', + }, + mobileTitleContainer: { + fontSize: '16px', + fontWeight: 700, + display: 'flex', + }, + mobileTagContainer: { + display: 'flex', + flexDirection: 'column', + flexGrow: 3, + maxWidth: '800px', + }, + mobileBusinessTitle: { + marginBottom: 0, + letterSpacing: '-0.4px', + height: '100%', + color: '#1E1131', + margin: 0, + flex: 1, + }, }); const BusinessCard = ({ @@ -133,6 +163,18 @@ const BusinessCard = ({ overrideClasses, count, }) => { + const [useMobile, setUseMobile] = useState(false); + const mobileCTABreakpoint = useMediaQuery('(min-width:500px)'); + const desktopCTABreakpoint = useMediaQuery('(min-width:838px)'); + + useEffect(() => { + if (desktopCTABreakpoint) { + setUseMobile(false); + } else { + setUseMobile(true); + } + }, [desktopCTABreakpoint]); + const convertAddressToGoogleMapsLink = (businessAddress) => { const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; return googleAPIQuery + encodeURIComponent(businessAddress.address); @@ -149,11 +191,28 @@ const BusinessCard = ({ }; const ChipTags = () => ( - + ); + const hideCTAs = ((useMobile && !mobileCTABreakpoint) + || (!useMobile && !desktopCTABreakpoint)); + + const PhoneNumber = () => ( + hideCTAs ? null : ( + + {formatTenDigitPhoneNumber(phoneNumber)} + + ) + ); + + const VisitWebsite = () => ( + hideCTAs ? null : ( + Visit Website + ) + ); + const CTAButtons = () => ( @@ -168,21 +227,19 @@ const BusinessCard = ({ - - {formatTenDigitPhoneNumber(phoneNumber)} - + - Visit Website + ); const TitleAndDropdownMenu = () => ( - -

+ +

{count} . @@ -208,14 +265,14 @@ const BusinessCard = ({ ); const Image = () => ( - + alt-text ); - return ( + const DesktopCard = () => ( @@ -232,6 +289,31 @@ const BusinessCard = ({ ); + + const MobileCard = () => ( + + + + + + +

+ + + + + + + + + + ); + + return ( + + {useMobile ? MobileCard : DesktopCard} + + ); }; BusinessCard.propTypes = { diff --git a/src/components/ChipList/ChipList.jsx b/src/components/ChipList/ChipList.jsx index 5c530e00..864d2bd6 100644 --- a/src/components/ChipList/ChipList.jsx +++ b/src/components/ChipList/ChipList.jsx @@ -6,7 +6,7 @@ import { Chip, Typography } from '@material-ui/core'; const styles = { chipWrapper: { - maxHeight: 80, + maxHeight: '100%', overflow: 'hidden', }, chip: { From 6fe27ba80d2c240dd63202fac6aa2ef584e2f346 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 23:02:48 -0500 Subject: [PATCH 84/93] Refactored desktop and mobile cards into one component --- src/components/BusinessCard/BusinessCard.jsx | 100 ++++++++----------- 1 file changed, 42 insertions(+), 58 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 935b1560..cf879fe5 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -74,6 +74,8 @@ const styles = (theme) => ({ titleAddressContainer: { display: 'flex', flexDirection: 'column', + marginBottom: 8, + width: '100%', }, titleContainer: { height: '100%', @@ -130,12 +132,6 @@ const styles = (theme) => ({ fontWeight: 700, display: 'flex', }, - mobileTagContainer: { - display: 'flex', - flexDirection: 'column', - flexGrow: 3, - maxWidth: '800px', - }, mobileBusinessTitle: { marginBottom: 0, letterSpacing: '-0.4px', @@ -144,6 +140,19 @@ const styles = (theme) => ({ margin: 0, flex: 1, }, + hideElement: { + display: 'none', + }, + mobileBottomContent: { + marginBottom: 5, + marginTop: 5, + marginLeft: 5, + }, + mobileContainer: { + display: 'flex', + marginLeft: '5px', + marginTop: '5px', + }, }); const BusinessCard = ({ @@ -164,6 +173,7 @@ const BusinessCard = ({ count, }) => { const [useMobile, setUseMobile] = useState(false); + const [hideCTAs, setHideCTAs] = useState(false); const mobileCTABreakpoint = useMediaQuery('(min-width:500px)'); const desktopCTABreakpoint = useMediaQuery('(min-width:838px)'); @@ -175,6 +185,15 @@ const BusinessCard = ({ } }, [desktopCTABreakpoint]); + useEffect(() => { + if ((useMobile && !mobileCTABreakpoint) + || (!useMobile && !desktopCTABreakpoint)) { + setHideCTAs(true); + } else { + setHideCTAs(false); + } + }, [mobileCTABreakpoint, desktopCTABreakpoint]); + const convertAddressToGoogleMapsLink = (businessAddress) => { const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; return googleAPIQuery + encodeURIComponent(businessAddress.address); @@ -191,28 +210,11 @@ const BusinessCard = ({ }; const ChipTags = () => ( - + ); - const hideCTAs = ((useMobile && !mobileCTABreakpoint) - || (!useMobile && !desktopCTABreakpoint)); - - const PhoneNumber = () => ( - hideCTAs ? null : ( - - {formatTenDigitPhoneNumber(phoneNumber)} - - ) - ); - - const VisitWebsite = () => ( - hideCTAs ? null : ( - Visit Website - ) - ); - const CTAButtons = () => ( @@ -227,11 +229,15 @@ const BusinessCard = ({ - + {hideCTAs ? null : ( + + {formatTenDigitPhoneNumber(phoneNumber)} + + )} - + {hideCTAs ? null : Visit Website} @@ -272,16 +278,19 @@ const BusinessCard = ({ ); - const DesktopCard = () => ( + return ( - - + + {useMobile ? null : } - - -
+ + {useMobile ? : null} + + +
+ - + @@ -289,31 +298,6 @@ const BusinessCard = ({ ); - - const MobileCard = () => ( - - - - - - -
- - - - - - - - - - ); - - return ( - - {useMobile ? MobileCard : DesktopCard} - - ); }; BusinessCard.propTypes = { From 8b13dc09663f8f7124fe8647147c526b80272ee5 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 23:13:49 -0500 Subject: [PATCH 85/93] Refactored some redudancy and functions to improve performance --- src/components/BusinessCard/BusinessCard.jsx | 127 ++++++++----------- 1 file changed, 50 insertions(+), 77 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index cf879fe5..19a35807 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -173,8 +173,6 @@ const BusinessCard = ({ count, }) => { const [useMobile, setUseMobile] = useState(false); - const [hideCTAs, setHideCTAs] = useState(false); - const mobileCTABreakpoint = useMediaQuery('(min-width:500px)'); const desktopCTABreakpoint = useMediaQuery('(min-width:838px)'); useEffect(() => { @@ -185,15 +183,6 @@ const BusinessCard = ({ } }, [desktopCTABreakpoint]); - useEffect(() => { - if ((useMobile && !mobileCTABreakpoint) - || (!useMobile && !desktopCTABreakpoint)) { - setHideCTAs(true); - } else { - setHideCTAs(false); - } - }, [mobileCTABreakpoint, desktopCTABreakpoint]); - const convertAddressToGoogleMapsLink = (businessAddress) => { const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; return googleAPIQuery + encodeURIComponent(businessAddress.address); @@ -206,70 +195,9 @@ const BusinessCard = ({ const intlCode = (match[1] ? '+1 ' : ''); return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join(''); } - return null; + return 'No number found'; }; - const ChipTags = () => ( - - - - ); - - const CTAButtons = () => ( - - - - - Add Review - - - Rating - - {averageRating} - - - - {hideCTAs ? null : ( - - {formatTenDigitPhoneNumber(phoneNumber)} - - )} - - - - {hideCTAs ? null : Visit Website} - - - - ); - - const TitleAndDropdownMenu = () => ( - -

- - {count} - . - - {name} -

- - - ); - - const Address = () => ( - - - - - {address} - - - - ); - const Image = () => ( @@ -286,13 +214,58 @@ const BusinessCard = ({ {useMobile ? : null} - -
+ +

+ + {count} + . + + {name} +

+ + + + + + + {address} + + + - - + + + + + + + + Add Review + + + Rating + + {averageRating} + + + + {useMobile ? null : ( + + {formatTenDigitPhoneNumber(phoneNumber)} + + )} + + + + {useMobile ? null : Visit Website} + + + From 64f5359fb6ff291bfee83ca456a458b7d5ccbbba Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Wed, 14 Dec 2022 23:55:28 -0500 Subject: [PATCH 86/93] Refactored redundant state variable --- src/components/BusinessCard/BusinessCard.jsx | 41 ++++++++------------ 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 19a35807..5ab25ec9 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -144,9 +144,9 @@ const styles = (theme) => ({ display: 'none', }, mobileBottomContent: { - marginBottom: 5, - marginTop: 5, - marginLeft: 5, + marginBottom: 10, + marginTop: 10, + marginLeft: 10, }, mobileContainer: { display: 'flex', @@ -172,16 +172,7 @@ const BusinessCard = ({ overrideClasses, count, }) => { - const [useMobile, setUseMobile] = useState(false); - const desktopCTABreakpoint = useMediaQuery('(min-width:838px)'); - - useEffect(() => { - if (desktopCTABreakpoint) { - setUseMobile(false); - } else { - setUseMobile(true); - } - }, [desktopCTABreakpoint]); + const useDesktop = useMediaQuery('(min-width:838px)'); const convertAddressToGoogleMapsLink = (businessAddress) => { const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; @@ -199,7 +190,7 @@ const BusinessCard = ({ }; const Image = () => ( - + alt-text @@ -208,14 +199,14 @@ const BusinessCard = ({ return ( - - {useMobile ? null : } + + {useDesktop ? : null} - - {useMobile ? : null} + + {useDesktop ? null : } - -

+ +

{count} . @@ -237,7 +228,9 @@ const BusinessCard = ({ - + @@ -254,15 +247,15 @@ const BusinessCard = ({ - {useMobile ? null : ( + {useDesktop ? ( {formatTenDigitPhoneNumber(phoneNumber)} - )} + ) : null} - {useMobile ? null : Visit Website} + {useDesktop ? Visit Website : null} From 48041007f7ec80349d0d53347f43b719a068c707 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Thu, 15 Dec 2022 14:00:52 -0500 Subject: [PATCH 87/93] Adjusted the searchbar width --- src/routes/Search/Search.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 4019690e..71ff0aab 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -33,7 +33,6 @@ const styles = (theme) => ({ display: 'flex', }, filtersContainer: { - width: '316px', zIndex: 999, paddingTop: '32px', backgroundColor: '#f2f2f2', From 14459b7a3a502d428fba4bf8d6c6119e9270f602 Mon Sep 17 00:00:00 2001 From: Amy <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 5 Mar 2023 16:08:43 -0600 Subject: [PATCH 88/93] DEV-97.1: Finishing and Refactoring Pagination (#80) * Refactored redundant css and abstracted logic into variables * Refactored out the next and previous buttons for pagination * Refactoring more redundant classes * Abstracted out the showing page range logic * Abstracted pagination buttons into a parent function * Refactored paginationMenu logic to be more readable * Fixed a bug regarding which numbers were rendered in pagination menu * Pagination will now center during mobile sized screens * Align showing x of y results label absolute center relative to container * Removed underline and fixed a bug regarding colors for pagination buttons * Expanded the margins between each button and extended width of next and back buttons * Current page now displays with a purple highlight and white font * Added spacing between Go to page and pagination * GoToPage now has a variable that determines if it's hidden or not * Switching anchor tags to MUI links * 1, 2, 3 pagination.. etc buttons now redirect to the correct link * The ... button now opens up the Go To Page prompt * Implemented Go To Page functionality * DEV-97.2: Pagination, Card, Refactoring and Improvements (#81) * Fixed a bug where Rating wasn't inheriting the right color * Updated pagination with larger icons for the next, back buttons * Fixed a bug with Pagination where the buttons now render as gray * Fixed a bug with ToGoPageX, deleted unnecessary override * Realigned the buttons to be in the center of the purple box * Fixed bug with text overflowing the card component * Refactored out some of the CTA logic * Refactored some rendundant classes, address now links in a new tab * Added a lot of refactoring for redundant css * Added min height for CTA bar * Added additional margins to the Chips * Cleanly render images without the use of booleans * Added 16px margin around the card * DEV-97.3: Search Page Menus and Mobile Menus (#82) * Added components for search options, aligned text and icon * Renamed class names for readability, created parent component for Sort * Sort by bars now extend the length of the page on smaller dimensions * Refactoring component tree into smaller components * Header containing num of search results shrinks in smaller dimensions * Reduced the margin between cards and pagination * Sort bars now collapse at a smaller width * Added extra font weight to the rating CTA * Refactored some redudancy with props drilling * Added dropdown for share button * Fixed a bug regarding Google Maps and locations * Replaced hrefs with react router links prevent re-rendering * Added clear all button and refactored redundant component * Changed Clear All button to be the same size as filter buutton * Deleted unused css, added coloring and borders to the Clear All button * Refactored props composition with Menus * Fixed cards not extending the max length, changed some menu text * Added back the new menu labels for all the menus * Refactored components into one object to make it easier to edit * Phone number buttons no longer appear if there's no input * Align the filter and sort menus for the desktop view * Users can no longer go to the current page with pagination. * Menu now renders under the button rather than off to the side * Changed the Buttons to ListItems, it now changes and saves the current value. * Scrapped list items and implemented changing values with buttons * The selected menu item label has a bolding effect * Changed dropdown menu to gray and selected option is grayer with box shadow * Added additional line height to mobile menus * Adding initial test scaffolding * Adding initial test scaffolding * Added scaffolding for tests * Added scaffolding to business card tests. * Fixed no key in list error, fixed typo in className and fixed unused MUI element * Refactoring all class names to be camelCase * Added box shadow to apply box and removed bottom margin for mobile view * Removed unnecessary prop causing errors. * Removed empty tests, abstracted out pagination function * Added test cases for next button. * Added tests for check valid page number * Testing range of results * Added test cases for reviewCTA, addressRow, titleBar, ShareMenu, OrdinalNumber, formatPhone#, convertAdd.. * Added tests for business cards regarding CTA components * Added tests for SortByMenu * DEV-97.4: Add Report Problem Button in Results Page (#84) * Added SupportButton component from PR 74 * Opening Go To Page no longer adjusts the page height, added support button --- src/components/BusinessCard/BusinessCard.jsx | 489 ++++++++++++------ .../BusinessCard/BusinessCard.test.jsx | 207 +++++++- src/components/FilterPanel/FilterPanel.jsx | 8 +- src/components/Pagination/Pagination.jsx | 462 ++++++++++++----- src/components/Pagination/Pagination.test.jsx | 117 ++++- .../SupportButton/SupportButton.jsx | 87 ++++ src/components/SupportButton/SupportButton.md | 5 + .../SupportButton/SupportButton.test.jsx | 12 + src/components/SupportButton/index.js | 3 + src/routes/Search/Search.jsx | 482 ++++++++++++----- src/routes/Search/Search.test.jsx | 48 ++ 11 files changed, 1512 insertions(+), 408 deletions(-) create mode 100644 src/components/SupportButton/SupportButton.jsx create mode 100644 src/components/SupportButton/SupportButton.md create mode 100644 src/components/SupportButton/SupportButton.test.jsx create mode 100644 src/components/SupportButton/index.js create mode 100644 src/routes/Search/Search.test.jsx diff --git a/src/components/BusinessCard/BusinessCard.jsx b/src/components/BusinessCard/BusinessCard.jsx index 5ab25ec9..62657b79 100644 --- a/src/components/BusinessCard/BusinessCard.jsx +++ b/src/components/BusinessCard/BusinessCard.jsx @@ -1,68 +1,63 @@ /* eslint-disable no-unused-vars */ -import React, { useEffect, useState } from 'react'; +import React from 'react'; +import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import { Box, + Button, + Menu, + MenuItem, Typography, } from '@material-ui/core'; - import StarIcon from '@material-ui/icons/Star'; +import ShareIcon from '@material-ui/icons/Share'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import RateReviewIcon from '@material-ui/icons/RateReview'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import PhoneIcon from '@material-ui/icons/Phone'; import LanguageIcon from '@material-ui/icons/Language'; - import useMediaQuery from '@material-ui/core/useMediaQuery'; import { withStyles } from '@material-ui/core/styles'; import { spaceProps } from '../../types'; import ChipList from '../ChipList'; -import useQuery from '../../hooks/useQuery'; -const styles = (theme) => ({ +const styles = () => ({ root: { borderRadius: '4px', border: '1px solid #E5E5E5', - width: 'auto', + width: '100%', height: '100%', backgroundColor: '#FFFFFF', - }, - searchContentContainer: { - display: 'flex', - padding: 24, + overflow: 'hidden', }, imageContainer: { marginRight: 24, position: 'relative', + flexGrow: 1, + overflow: 'hidden', maxWidth: 254, maxHeight: 184, minHeight: 184, - flexGrow: 1, - overflow: 'hidden', }, - image: { + imageContainerMobile: { + maxWidth: 127, + maxHeight: 92, + minHeight: 92, + minWidth: 127, + }, + cardImage: { width: '100%', height: '100%', - objectFit: 'cover', borderRadius: '4px', }, - contentContainer: { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - }, - businessTitle: { - marginBottom: 0, + businessTitleContainer: { letterSpacing: '-0.4px', - lineHeight: '28px', - height: '100%', color: '#1E1131', - margin: 0, flex: 1, }, - icon: { + addressIcon: { height: '100%', width: '23px', }, @@ -71,90 +66,299 @@ const styles = (theme) => ({ color: '#666666', marginBottom: '2px', }, - titleAddressContainer: { - display: 'flex', - flexDirection: 'column', - marginBottom: 8, + topCardContainer: { + marginBottom: 10, width: '100%', + display: 'flex', }, - titleContainer: { - height: '100%', + titleBarContainer: { fontSize: '18px', fontWeight: 700, display: 'flex', + justifyContent: 'center', + alignItems: 'center', }, - CTAcontainer: { - borderTop: '1px solid #E5E5E5', - paddingTop: '12px', - }, - buttonContainer: { - display: 'flex', - alignItems: 'flex-end', - textAlign: 'center', - maxWidth: '800px', + mobileTitleBar: { + fontSize: '16px', }, - tagContainer: { + titleAddressParentContainer: { display: 'flex', flexDirection: 'column', - flexGrow: 3, - maxWidth: '800px', + flex: 1, }, - bottomContent: { - height: '100%', + ctaParentContainer: { + borderTop: '1px solid #E5E5E5', + paddingTop: '12px', + minHeight: '40px', + }, + ctaContainer: { display: 'flex', - flexDirection: 'column', + maxWidth: '800px', }, - ratingContainer: { + ctaButtonContainer: { display: 'flex', textDecoration: 'none', marginRight: 'auto', + color: '#666666', }, - purpleColor: { + purpleIcon: { color: '#633AA3', - }, - grayColor: { - color: '#666666', + fontWeight: 500, }, addressString: { textDecoration: 'underline', + color: '#666666', }, - mobileImageContainer: { - marginRight: 24, - position: 'relative', - maxWidth: 127, - maxHeight: 92, - minHeight: 92, - flexGrow: 1, - overflow: 'hidden', + ordinalNumberMargins: { + margin: '0 5px', }, - mobileTitleContainer: { - fontSize: '16px', - fontWeight: 700, + bottomCardContainer: { display: 'flex', - }, - mobileBusinessTitle: { - marginBottom: 0, - letterSpacing: '-0.4px', - height: '100%', - color: '#1E1131', - margin: 0, + flexDirection: 'column', flex: 1, }, - hideElement: { - display: 'none', + chipList: { + display: 'flex', + flex: 1, + maxWidth: '800px', }, - mobileBottomContent: { - marginBottom: 10, - marginTop: 10, - marginLeft: 10, + cardInformationContainer: { + flexGrow: 1, + display: 'flex', + flexDirection: 'column', }, - mobileContainer: { + businessCardContainer: { display: 'flex', - marginLeft: '5px', - marginTop: '5px', + margin: 16, + }, + shareButton: { + color: 'black', }, }); +const convertAddressToGoogleMapsLink = (businessAddress) => { + const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; + return googleAPIQuery + encodeURIComponent(businessAddress); +}; + +const formatPhoneNumber = (phoneNumberString) => { + const cleaned = (`'' + ${phoneNumberString}`).replace(/\D/g, ''); + const match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/); + if (match) { + const intlCode = (match[1] ? '+1 ' : ''); + return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join(''); + } + return 'No number found'; +}; + +const Image = ( + { + useDesktop, classes, id, imageUrl, showImage, + }, +) => { + if (showImage === false) { + return null; + } + const placeholderImage = 'https://as2.ftcdn.net/v2/jpg/04/70/29/97/1000_F_470299797_UD0eoVMMSUbHCcNJCdv2t8B2g1GVqYgs.jpg'; + const ImageSizing = useDesktop ? '' : classes.imageContainerMobile; + const CardImage = imageUrl || placeholderImage; + const LinkToSpace = `/spaces/${id}`; + return ( + + + business + + + ); +}; + +const TopCardContent = ( + { + classes, + count, + useDesktop, + name, + address, + imageUrl, + id, + }, +) => ( + + + + + + + +); + +const OrdinalNumber = ({ classes, count }) => { + const ordinalNumberString = `${count}.`; + return ( + + {ordinalNumberString} + + ); +}; + +const ShareMenu = ({ classes }) => { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + <> + +

+ + + Share + + + + ); +}; + +const TitleBar = ({ + classes, + useDesktop, + count, + businessName, +}) => { + const smallerFont = useDesktop ? '' : classes.mobileTitleBar; + const ContainerClasses = `${classes.titleBarContainer} ${smallerFont}`; + return ( + + + + {businessName} + + + + ); +}; + +const AddressRow = ({ classes, address }) => { + const AddressLink = convertAddressToGoogleMapsLink(address); + return ( + <> + + + + {address} + + +
+ + ); +}; + +const AddReviewCTA = ({ id, classes }) => { + const spacesUrl = `/spaces/${id}/reviews/new`; + return ( + + + Add Review + + ); +}; + +const RatingCTA = ({ classes, averageRating }) => { + const label = 'Rating'; + return ( + + {label} + + {averageRating} + + ); +}; + +const CallPhoneCTA = ({ phoneNumber, classes, useDesktop }) => { + if (phoneNumber === '' || phoneNumber === undefined) { + return null; + } + const phoneString = `tel:${phoneNumber}`; + const label = ({formatPhoneNumber(phoneNumber)}); + const displayLabelOnDesktop = useDesktop ? label : null; + return ( + + + {displayLabelOnDesktop} + + ); +}; + +const VisitWebsiteCTA = ({ classes, useDesktop }) => { + const label = useDesktop ? Visit Website : null; + return ( + + + {label} + + ); +}; + +const CTAs = ( + { + classes, id, averageRating, phoneNumber, useDesktop, + }, +) => ( + + + + + + + + +); + +const BottomCardContent = ( + { + classes, id, averageRating, phoneNumber, useDesktop, filters, + }, +) => ( + + + + + + +); + const BusinessCard = ({ business: { id, @@ -169,97 +373,38 @@ const BusinessCard = ({ url, }, classes, - overrideClasses, count, }) => { const useDesktop = useMediaQuery('(min-width:838px)'); - const convertAddressToGoogleMapsLink = (businessAddress) => { - const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; - return googleAPIQuery + encodeURIComponent(businessAddress.address); - }; - - const formatTenDigitPhoneNumber = (phoneNumberString) => { - const cleaned = (`'' + ${phoneNumberString}`).replace(/\D/g, ''); - const match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/); - if (match) { - const intlCode = (match[1] ? '+1 ' : ''); - return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join(''); - } - return 'No number found'; - }; - - const Image = () => ( - - - alt-text - - - ); - return ( - - {useDesktop ? : null} - - - {useDesktop ? null : } - - -

- - {count} - . - - {name} -

- - - - - - - {address} - - - - - - - - - - - - - - Add Review - - - Rating - - {averageRating} - - - - {useDesktop ? ( - - {formatTenDigitPhoneNumber(phoneNumber)} - - ) : null} - - - - {useDesktop ? Visit Website : null} - - - - + + + + + @@ -277,3 +422,21 @@ BusinessCard.defaultProps = { }; export default withStyles(styles)(BusinessCard); + +// eslint-disable-next-line import/no-mutable-exports +export let Tests = { + convertAddressToGoogleMapsLink, + formatPhoneNumber, + OrdinalNumber, + ShareMenu, + TitleBar, + AddressRow, + AddReviewCTA, + RatingCTA, + CallPhoneCTA, + VisitWebsiteCTA, +}; + +if (process.env.NODE_ENV !== 'test') { + Tests = undefined; +} diff --git a/src/components/BusinessCard/BusinessCard.test.jsx b/src/components/BusinessCard/BusinessCard.test.jsx index c8d59cb4..b65d24ac 100644 --- a/src/components/BusinessCard/BusinessCard.test.jsx +++ b/src/components/BusinessCard/BusinessCard.test.jsx @@ -1,10 +1,210 @@ +/* eslint-disable no-unused-vars */ + import React from 'react'; -import { render } from '@testing-library/react'; -// eslint-disable-next-line no-unused-vars +import { getByText, render, screen } from '@testing-library/react'; +import { Share } from '@material-ui/icons'; +import userEvent from '@testing-library/user-event'; +import { BrowserRouter } from 'react-router-dom'; +import BusinessCard, { Tests } from './BusinessCard'; import MockChipList from '../ChipList'; -import BusinessCard from './BusinessCard'; jest.mock('../ChipList', () => () => (<>)); + +const { + convertAddressToGoogleMapsLink, + formatPhoneNumber, + OrdinalNumber, + ShareMenu, + TitleBar, + AddressRow, + AddReviewCTA, + RatingCTA, + CallPhoneCTA, + VisitWebsiteCTA, +} = Tests; + +describe('BusinessCard', () => { + describe('convertAddressToGoogleMapsLink', () => { + const googleAPIQuery = 'https://www.google.com/maps/dir/?api=1&destination='; + it('It should return a link to Google Maps that is URL encoded', () => { + const googleMapsLink = convertAddressToGoogleMapsLink('1701 Pennsylvania Ave NW Washington, DC DC 20006'); + const stringToMatch = `${googleAPIQuery}1701%20Pennsylvania%20Ave%20NW%20Washington%2C%20DC%20DC%2020006`; + expect(googleMapsLink).toBe(stringToMatch); + }); + it('It should return a different link to Google Maps that is URL encoded', () => { + const googleMapsLink = convertAddressToGoogleMapsLink('651 Florida Ave NW Washington, DC DC 20001'); + const stringToMatch = `${googleAPIQuery}651%20Florida%20Ave%20NW%20Washington%2C%20DC%20DC%2020001`; + expect(googleMapsLink).toBe(stringToMatch); + }); + }); + describe('formatPhoneNumber', () => { + it('It should return a string saying no phone number found if no phone number is passed in', () => { + const phoneNumber = formatPhoneNumber(undefined); + expect(phoneNumber).toBe('No number found'); + }); + }); + describe('OrdinalNumber', () => { + const dummyProps = { + classes: {}, + count: 1, + }; + it('It should take an integer value and add a . in front of it', () => { + render(); + expect(screen.getByText('1.')).toBeInTheDocument(); + }); + }); + describe('ShareMenu', () => { + it('It should open up a menu item that has the label share on click', () => { + render(); + const shareButton = screen.getByTestId('share-button'); + expect(screen.queryByText('Share')).not.toBeInTheDocument(); + + userEvent.click(shareButton); + expect(screen.getByText('Share')).toBeInTheDocument(); + }); + }); + describe('TitleBar', () => { + const dummyProps = { + classes: {}, + useDesktop: true, + count: 5, + businessName: 'Free Newspapers for $10.99', + }; + it('It should render a business name', () => { + render(); + expect(screen.getByText('Free Newspapers for $10.99')).toBeInTheDocument(); + }); + it('It should render an ordinal number', () => { + render(); + expect(screen.getByText('5.')).toBeInTheDocument(); + }); + }); + describe('AddressRow', () => { + const dummyProps = { + classes: {}, + address: '1701 Pennsylvania Ave NW Washington, DC DC 20006', + }; + it('It should have an icon', () => { + render(); + const icon = screen.getByTestId('location-icon'); + expect(icon).toBeInTheDocument(); + }); + it('It should have the address label', () => { + render(); + const address = screen.getByText('1701 Pennsylvania Ave NW Washington, DC DC 20006'); + expect(address).toBeInTheDocument(); + }); + it('It should have an href value of google maps', () => { + render(); + const addressLink = screen.getByRole('link'); + expect(addressLink).toHaveAttribute('href', 'https://www.google.com/maps/dir/?api=1&destination=1701%20Pennsylvania%20Ave%20NW%20Washington%2C%20DC%20DC%2020006'); + }); + }); + describe('AddReviewCTA', () => { + const dummyProps = { + classes: {}, + id: 1, + }; + const renderReviewCTA = () => { + render( + + + , + ); + }; + it('It should have a href of /spaces/id/reviews/new', () => { + renderReviewCTA(); + expect(screen.getByRole('link')).toHaveAttribute('href', '/spaces/1/reviews/new'); + }); + it('It should have a correct label', () => { + renderReviewCTA(); + expect(screen.getByText('Add Review')).toBeInTheDocument(); + }); + it('It should have an icon', () => { + renderReviewCTA(); + expect(screen.getByTestId('review-icon')).toBeInTheDocument(); + }); + }); + describe('RatingCTA', () => { + const dummyProps = { + classes: {}, + averageRating: 4.1, + }; + it('It should have a correct label', () => { + render(); + const label = screen.getByText('Rating'); + expect(label).toBeInTheDocument(); + }); + it('It should display the average rating', () => { + render(); + expect(screen.getByText('4.1')).toBeInTheDocument(); + }); + }); + describe('CallPhoneCTA', () => { + const dummyProps = { + classes: {}, + phoneNumber: '521-742-1234', + useDesktop: true, + }; + it('It should not render if no phone number is provided', () => { + render(); + expect(screen.queryByTestId('phone-icon')).not.toBeInTheDocument(); + }); + it('It should render the phone number after formatting', () => { + render(); + expect(screen.getByText('521', { exact: false })).toBeInTheDocument(); + }); + it('It should have a icon if rendered with a phone number', () => { + render(); + expect(screen.getByTestId('phone-icon')).toBeInTheDocument(); + }); + const smallWidthProps = { + classes: {}, + phoneNumber: '521-742-1234', + useDesktop: false, + }; + it('It should not render the phone number if the screen width is too small', () => { + render(); + expect(screen.queryByText('521', { exact: false })).not.toBeInTheDocument(); + }); + it('It should render the icon even if the screen width is too small for the string phone number', () => { + render(); + expect(screen.getByTestId('phone-icon')).toBeInTheDocument(); + }); + }); + describe('VisitWebsiteCTA', () => { + const dummyProps = { + classes: {}, + useDesktop: true, + }; + it('It should have a correct label for large dimensions', () => { + render(); + const label = screen.getByText('Visit Website'); + expect(label).toBeInTheDocument(); + }); + it('It should render an icon', () => { + render(); + const icon = screen.getByTestId('visit-website-icon'); + expect(icon).toBeInTheDocument(); + }); + const smallWidthProps = { + classes: {}, + useDesktop: false, + }; + it('It should not render the label for smaller dimensions', () => { + render(); + const label = screen.queryByText('Visit Website'); + expect(label).not.toBeInTheDocument(); + }); + it('It should still render the icon for smaller dimensions', () => { + render(); + const icon = screen.getByTestId('visit-website-icon'); + expect(icon).toBeInTheDocument(); + }); + }); +}); + +/* test('renders the BusinessCardComponent', () => { const props = { id: '123', @@ -47,3 +247,4 @@ test('renders the BusinessCardComponent', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); +*/ diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index ab0163c7..fad5c21f 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -56,6 +56,7 @@ const styles = { }, alignItems: 'baseline', maxHeight: '80px', + marginTop: '5px', marginBottom: '5px', }, nameFilter: { @@ -120,6 +121,10 @@ const styles = { }, marginBottom: '188px', }, + applyMobile: { + boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)', + marginBottom: 0, + }, resultCount: { display: 'inline-block', marginBottom: '20px', @@ -294,7 +299,6 @@ const FilterPanel = ({ placeholder="Search by name" value={nameFilterVal} InputProps={{ - disableUnderline: true, padding: 5, classes: { borderRadius: 0 }, endAdornment: ( @@ -458,7 +462,7 @@ const FilterPanel = ({ {priceFilter} {indicatorFilters}
-
+
{`${resultCount} Search Result${resultCount === 1 ? '' : 's'}`} diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index 3a9b05d7..d72fe185 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -1,11 +1,14 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; import Input from '@material-ui/core/Input'; - +import useMediaQuery from '@material-ui/core/useMediaQuery'; import { withStyles } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; +import { Button, Typography, Link } from '@material-ui/core'; +import NavigateNextIcon from '@material-ui/icons/NavigateNext'; +import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; + import useQuery from '../../hooks/useQuery'; const styles = () => ({ @@ -23,47 +26,47 @@ const styles = () => ({ color: '#666666', fontSize: '16px', }, + mobilePrompt: { + display: 'flex', + flexGrow: 2, + width: '100%', + marginTop: '40px', + color: '#666666', + fontSize: '16px', + flexDirection: 'column', + }, showingText: { flexGrow: 1, justifyContent: 'center', fontSize: '16px', + height: '100%', + }, navigationContainer: { display: 'flex', flexDirection: 'column', + alignItems: 'flex-end', + flex: 1, }, - paginationContainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'flex-start', - whiteSpace: 'no wrap', - }, - paginationLinkContainers: { + mobileNavigationContainer: { display: 'flex', + flexDirection: 'column', alignItems: 'center', - height: '30px', - justifyContent: 'center', - minWidth: '20px', - }, - paginationLink: { - padding: '0.6px', + flex: 1, }, paginationButton: { - backgroundColor: '#633AA3', height: '28px', width: '28px', display: 'flex', justifyContent: 'center', - alignItems: 'center', margin: '0 2px', }, - activeButton: { - backgroundColor: '#633AA3', - color: '#FFFFFF', - }, - inactiveButton: { + activeColor: { color: '#666666', }, + inactiveColor: { + color: '#E5E5E5', + }, pageInputNavigation: { border: '1px solid #666666', width: '40px', @@ -72,7 +75,7 @@ const styles = () => ({ marginLeft: '8px', backgroundColor: '#FFFFFF', }, - pageInputContainer: { + goToPageContainer: { backgroundColor: '#F2F2F2', boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', borderRadius: '4px', @@ -82,15 +85,269 @@ const styles = () => ({ justifyContent: 'center', alignItems: 'center', color: '#000000', + marginTop: 8, + }, + paginationListContainer: { + display: 'flex', + }, + mobilePaginationListContainer: { + display: 'flex', + marginTop: 0, + justifyContent: 'center', + }, + paginationLabel: { + textDecoration: 'none', + margin: '0 2px', + }, + alignLabelAbsoluteCenter: { + flex: 1, + }, + expandNavigationButtons: { + width: '28px', + textAlign: 'center', + }, + currentPageButton: { + color: '#FFFFFF', + backgroundColor: '#633AA3', + borderRadius: '2px', + fontWeight: 500, + }, + hideDisplay: { + visibility: 'hidden', + }, + buttonOpenGoToPage: { + maxWidth: 28, + maxHeight: 28, + minWidth: 28, + minHeight: 28, + display: 'flex', + justifyContent: 'center', + margin: '0 2px', + }, + goToPageLabel: { + fontSize: 30, + fontWeight: 700, + }, + centerText: { + height: '100%', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + alignPaginationRange: { + height: '100%', + display: 'flex', + justifyContent: 'center', }, }); +const getPageLink = (history, query, perPage, page) => { + const base = history.location.pathname; + query.set('page', page); + query.set('perPage', perPage); + return `${base}?${query.toString()}`; +}; + +const NextButton = ({ pageLink, classes }) => { + const color = pageLink === undefined ? classes.inactiveColor : classes.activeColor; + const removeUnderline = classes.paginationLabel; + const nextClasses = `${color} ${removeUnderline} ${classes.expandNavigationButtons}`; + return ( + + + + ); +}; + +const BackButton = ({ pageLink, classes }) => { + const color = pageLink === undefined ? classes.inactiveColor : classes.activeColor; + const removeUnderline = classes.paginationLabel; + const backClasses = `${color} ${removeUnderline} ${classes.expandNavigationButtons}`; + return ( + + + + ); +}; + +const CheckValidPageNumber = (totalPages, input) => { + if (typeof input !== 'string' && typeof input !== 'number') { + return false; + } + const pageNum = Number(input); + const checkValidType = Number.isInteger(pageNum); + const checkValidRange = pageNum >= 1 && pageNum <= totalPages; + if (checkValidType && checkValidRange) { + return true; + } + return false; +}; + +const GoToPage = ({ + classes, + totalPages, + showButton, + navigationObject, +}) => { + const [input, setInput] = useState(''); + const label = 'Go to page'; + const ShowContent = showButton ? undefined : classes.hideDisplay; + const GoToPageClasses = `${classes.goToPageContainer} ${ShowContent}`; + const handleSubmit = (event) => { + event.preventDefault(); + if (CheckValidPageNumber(totalPages, input) === false) { + return; + } + navigationObject.history.push(getPageLink(...Object.values(navigationObject), input)); + navigationObject.history.go( + navigationObject.history.location.pathname + navigationObject.history.location.search, + ); + }; + return ( +
+
+ {label} + setInput(event.target.value)} + /> +
+
+ ); +}; + +const RangeOfResults = ( + { + classes, totalCount, calculateRange, desktopDimensions, + }, +) => { + if (desktopDimensions === false) { + return null; + } + return ( + (totalCount > 0) && (desktopDimensions) + && ( + + + {calculateRange} + + + ) + ); +}; + +const OpenGoToPageButton = ({ goToPageLabel, setShowButton, classes }) => { + const [toggle, setToggle] = useState(true); + const GoToClasses = `${classes.activeColor} ${classes.buttonOpenGoToPage}`; + return ( + + ); +}; + +const PaginationButton = ({ + pageNumber, + classes, + goToPageLabel, + currPage, + link, + setShowButton, +}) => { + if (pageNumber === goToPageLabel) { + return ( + + ); + } + const isCurrentPage = currPage === pageNumber ? classes.currentPageButton : ''; + const PaginationButtonClasses = `${classes.paginationLabel} ${classes.activeColor} ${isCurrentPage}`; + const PageNumberBox = ( +
+ {pageNumber} +
+ ); + if (currPage === pageNumber) { + return ( +
+ {PageNumberBox} +
+ ); + } + return ( + + {PageNumberBox} + + ); +}; + +const RenderPaginationButtons = ( + { + pagesToRender, + classes, + goToPageLabel, + currPage, + setShowButton, + }, +) => ( + pagesToRender.map((page) => ( + + )) +); + +const calculatePaginationMenu = (totalPages, page, labelForGoToPage, history, query, perPage) => { + let pagesToRender = { + prevPage: ((totalPages > 1 && page > 1) ? page - 1 : null), + currPage: page, + nextPage: ((page + 1 < totalPages) ? page + 1 : null), + nextNextPage: ((page + 2 < totalPages) ? page + 2 : null), + ellipsis: ((page + 2 <= totalPages) ? labelForGoToPage : null), + lastPage: ((totalPages !== page) ? totalPages : null), + }; + pagesToRender = Object.values(pagesToRender).filter((pgNum) => pgNum !== null); + const pagesWithLinks = pagesToRender.map((pg) => ( + { pageNumber: pg, link: getPageLink(history, query, perPage, pg) } + )); + return pagesWithLinks; +}; + +const CalculatePageRange = (page, perPage, totalCount) => { + const startingRange = (page - 1) * perPage + 1; + const endingRange = (page) * perPage < totalCount ? (page) * perPage : totalCount; + const resultString = endingRange <= 1 ? 'Result' : 'Results'; + return `Showing ${startingRange} - ${endingRange} of ${totalCount} ${resultString}`; +}; + const Pagination = ({ totalCount, page, perPage, classes, }) => { + const useDesktop = useMediaQuery('(min-width:838px)'); + const [showButton, setShowButton] = useState(false); const query = useQuery(); const history = useHistory(); const totalPages = Math.ceil(totalCount / perPage); @@ -98,118 +355,71 @@ const Pagination = ({ let backExists; let nextExists; let nextButton; + + const paginationListClasses = useDesktop + ? classes.paginationListContainer : classes.mobilePaginationListContainer; + const navigationContainerClasses = useDesktop + ? classes.navigationContainer : classes.mobileNavigationContainer; + const promptClasses = useDesktop ? classes.prompt : classes.mobilePrompt; + + const labelForGoToPage = '...'; if (totalPages > 1 && page > 1) { const backLink = history.location.pathname; backExists = true; query.set('page', page - 1); query.set('perPage', perPage); - backButton = ( - - {'<'} - - ); - } else { - backButton = ( -
- {'<'} -
- ); + backButton = `${backLink}?${query.toString()}`; } - if (totalPages > 1 && page < totalPages) { const nextLink = history.location.pathname; nextExists = true; query.set('page', page + 1); query.set('perPage', perPage); - nextButton = ( - - {'>'} - - ); - } else { - nextButton = ( -
- {'>'} -
- ); + nextButton = `${nextLink}?${query.toString()}`; } - const paginationButton = (link, pageNumber, isActive) => ( - -
- - {pageNumber} - -
- - ); - - const calculatePageRange = () => { - const startingRange = (page - 1) * perPage + 1; - const endingRange = (page) * perPage < totalCount ? (page) * perPage : totalCount; - return [startingRange, endingRange]; - }; - - const calculatePaginationMenu = () => { - const menu = [page]; - const nextPage = page + 1; - const prevPage = page - 1; - - if ((totalPages > 1 && page > 1)) { - menu.unshift(prevPage); - } - - if ((totalPages > 1 && page < totalPages) === false) { - return menu; - } - - if (page + 3 <= totalPages) { - return menu.concat([nextPage, '...', totalPages]); - } - if (page + 2 > totalPages) { - return menu.concat([nextPage]); - } - return menu.concat([nextPage, nextPage + 1]); + const navigationObject = { + history, query, perPage, }; return (
-
- {(totalCount > 0) - && ( - - {`Showing ${calculatePageRange()[0]} - ${calculatePageRange()[1]} of ${totalCount} results`} - - )} - {(backExists || nextExists) - && ( -
-
-
- {backButton} -
-
- {calculatePaginationMenu().map((pages) => ( - paginationButton('/', pages, true) - ))} -
-
- {nextButton} -
-
-
- Go to page - +
+
+ +
+
+ {(backExists || nextExists) && ( + <> +
+ + +
-
+ + )} +
); @@ -219,8 +429,28 @@ Pagination.propTypes = { totalCount: PropTypes.number.isRequired, page: PropTypes.number.isRequired, perPage: PropTypes.number.isRequired, + classes: PropTypes.shape({}).isRequired, }; Pagination.defaultProps = {}; export default withStyles(styles)(Pagination); + +// eslint-disable-next-line import/no-mutable-exports +export let Tests = { + getPageLink, + NextButton, + BackButton, + CheckValidPageNumber, + GoToPage, + RangeOfResults, + OpenGoToPageButton, + PaginationButton, + RenderPaginationButtons, + calculatePaginationMenu, + CalculatePageRange, +}; + +if (process.env.NODE_ENV !== 'test') { + Tests = undefined; +} diff --git a/src/components/Pagination/Pagination.test.jsx b/src/components/Pagination/Pagination.test.jsx index 083ecc8e..2fefcaed 100644 --- a/src/components/Pagination/Pagination.test.jsx +++ b/src/components/Pagination/Pagination.test.jsx @@ -1,9 +1,122 @@ +/* eslint-disable */ import React from 'react'; -import { render } from '@testing-library/react'; +import { cleanup, render, screen } from '@testing-library/react'; -import Pagination from './Pagination'; +import NavigateNextIcon from '@material-ui/icons/NavigateNext'; + +import Pagination, { Tests } from './Pagination'; +import { Check } from '@material-ui/icons'; + +const { + getPageLink, + NextButton, + BackButton, + CheckValidPageNumber, + GoToPage, + RangeOfResults, + OpenGoToPageButton, + PaginationButton, + RenderPaginationButtons, + calculatePaginationMenu, + CalculatePageRange, +} = Tests; test.skip('Pagination', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); + +describe('Pagination Component', () => { + describe('NextButton', () => { + const testProps = { + classes: {}, + pageLink: '/', + } + const { container } = render(); + const iconHtml = container.innerHTML; + cleanup(); + it('It should have a correct icon label', () => { + render(); + const nextButton = screen.getByTestId('next-button-icon'); + expect(nextButton.innerHTML).toBe(iconHtml); + }); + it('It should have an href value if passed in', () => { + render(); + const nextButton = screen.getByTestId('next-button-icon'); + expect(nextButton).toHaveAttribute('href', '/'); + }); + it('It should not have an href if pageLink was undefined', () => { + const noLinkProps = { + classes: {}, + pageLink: undefined, + }; + render(); + const nextButton = screen.getByTestId('next-button-icon'); + expect(nextButton).not.toHaveAttribute('href'); + }); + it('It should have a correct aria-label value', () => { + render(); + expect(screen.getByLabelText('Go next page')).toBeInTheDocument(); + }); + }); + + describe('CheckValidPageNumber', () => { + it('It should return false if the input was not of type string or type number', () => { + expect(CheckValidPageNumber(10, null)).toBe(false); + expect(CheckValidPageNumber(20, undefined)).toBe(false); + expect(CheckValidPageNumber(10, { input: 1 })).toBe(false); + }); + it('It should return false if the value is a string or number but is not a integer', () => { + expect(CheckValidPageNumber(10, 4.52)).toBe(false); + expect(CheckValidPageNumber(20, '11.11')).toBe(false); + }); + it('It should return false if the input is greater than totalPages', () => { + expect(CheckValidPageNumber(1, '2')).toBe(false); + expect(CheckValidPageNumber(1000000, 10000001)).toBe(false); + }); + it('It should return true if the input is of type number or string, an integer and within the range 1-totalPages', () => { + expect(CheckValidPageNumber(20, '20')).toBe(true); + expect(CheckValidPageNumber(20, 20)).toBe(true); + expect(CheckValidPageNumber(20, '15')).toBe(true); + expect(CheckValidPageNumber(20, 15)).toBe(true); + expect(CheckValidPageNumber(40, 1)).toBe(true); + expect(CheckValidPageNumber(5000000, 102460)).toBe(true); + }); + }); + + describe('RangeOfResults', () => { + it('It should not render if it is smaller than the media query, desktopDimensions is false', () => { + const noRenderProps = { + classes: {}, + totalCount: 40, + calculateRange: 'Showing', + desktopDimensions: false, + }; + render(); + const rangeOfResults = screen.queryByText('Showing', { exact: false }); + expect(rangeOfResults).not.toBeInTheDocument(); + }); + it('It should not render if the totalCount of results is 0', () => { + const noRenderProps = { + classes: {}, + totalCount: 0, + calculateRange: 'Showing', + desktopDimensions: true, + }; + render(); + const rangeOfResults = screen.queryByText('Showing', { exact: false }); + expect(rangeOfResults).not.toBeInTheDocument(); + }); + it('It should render the range of results', () => { + const dummyProps = { + classes: {}, + totalCount: 40, + calculateRange: `Showing ${5} - ${10} of ${40} results`, + desktopDimensions: true, + }; + render(); + const rangeOfResults = screen.queryByText('Showing', { exact: false }); + expect(rangeOfResults).toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/SupportButton/SupportButton.jsx b/src/components/SupportButton/SupportButton.jsx new file mode 100644 index 00000000..017adc3f --- /dev/null +++ b/src/components/SupportButton/SupportButton.jsx @@ -0,0 +1,87 @@ +import React, { useState } from 'react'; + +import { + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + withStyles, +} from '@material-ui/core/'; + +const styles = (theme) => ({ + centerContent: { + display: 'flex', + justifyContent: 'center', + }, + searchButton: { + [theme.breakpoints.up('lg')]: { + minWidth: 122.4, + minHeight: 40.8, + }, + backgroundColor: '#FCFBFE', + textTransform: 'none', + border: '1px solid #EBE5F6', + fontWeight: 600, + marginBottom: 4, + }, +}); + +const SupportButton = ({ classes }) => { + const [showSupportDialog, setShowSupportDialog] = useState(false); + + return ( + + + + + setShowSupportDialog(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + + Leave The Lavender Book? + + + + Are you sure you want to leave The Lavender Book? You will be taken + to Google Forms to contact Support. + + + + + + + + + ); +}; + +SupportButton.propTypes = {}; + +SupportButton.defaultProps = {}; + +export default withStyles(styles)(SupportButton); diff --git a/src/components/SupportButton/SupportButton.md b/src/components/SupportButton/SupportButton.md new file mode 100644 index 00000000..43da2d23 --- /dev/null +++ b/src/components/SupportButton/SupportButton.md @@ -0,0 +1,5 @@ +## SupportButton + +```jsx + +``` \ No newline at end of file diff --git a/src/components/SupportButton/SupportButton.test.jsx b/src/components/SupportButton/SupportButton.test.jsx new file mode 100644 index 00000000..007d8eda --- /dev/null +++ b/src/components/SupportButton/SupportButton.test.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; + +import SupportButton from './SupportButton'; + +describe('SupportButton', () => { + it('It should render a correct label', () => { + render(); + const button = screen.getByText('Report a Problem'); + expect(button).toBeInTheDocument(); + }); +}); diff --git a/src/components/SupportButton/index.js b/src/components/SupportButton/index.js new file mode 100644 index 00000000..75dc2130 --- /dev/null +++ b/src/components/SupportButton/index.js @@ -0,0 +1,3 @@ +import SupportButton from './SupportButton'; + +export default SupportButton; diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 71ff0aab..df1f4dab 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -1,30 +1,30 @@ /* eslint-disable no-unused-vars */ -import React, { useEffect, useState } from 'react'; - +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { geolocated, geoPropTypes } from 'react-geolocated'; import cx from 'classnames'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import { withStyles } from '@material-ui/core/styles'; - import Button from '@material-ui/core/Button'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; import CircularProgress from '@material-ui/core/CircularProgress'; import Typography from '@material-ui/core/Typography'; import SearchIcon from '@material-ui/icons/Search'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import BusinessCard from '../../components/BusinessCard'; import FilterPanel from '../../components/FilterPanel'; import Pagination from '../../components/Pagination'; - import useSearch from './hooks/useSearch'; import SearchForm from './SearchForm'; +import SupportButton from '../../components/SupportButton/SupportButton'; -const styles = (theme) => ({ - result: { - // This is for setting the margins of the results returned from search. - }, +const styles = () => ({ content: { backgroundColor: '#FFFFFF', width: '100%', @@ -37,15 +37,17 @@ const styles = (theme) => ({ paddingTop: '32px', backgroundColor: '#f2f2f2', }, - searchResult: { + desktopMargins: { marginLeft: 40, marginBottom: 20, marginRight: 142, + flex: 1, }, - searchResultBreakpoint: { + mobileMargins: { marginLeft: 20, marginRight: 20, marginBottom: 20, + flex: 1, }, emptyStateWrapper: { marginTop: 60, @@ -64,67 +66,340 @@ const styles = (theme) => ({ marginRight: 20, }, }, - searchresultsText: { - flexGrow: 2, - }, filterButton: { - width: '100px !important', + width: '76px !important', marginBottom: '16px', height: 36, border: '#EBE5F6 1px solid', + padding: 8, + gap: 10, + borderRadius: 4, + marginRight: 8, }, filterButtonText: { fontWeight: 600, fontSize: '14px', lineHeight: '20px', + textTransform: 'none', + }, + filterTextColor: { color: '#1E1131', }, - searchCountHeader: { + clearAllColor: { + border: 0, + color: '#633AA3', + }, + numOfResultsContainer: { fontWeight: 600, fontSize: '32px', color: '#1E1131', lineHeight: '32px', marginBottom: 16, }, - leftSideFilter: { + numResultsMobileFont: { + fontSize: '20px', + lineHeight: '25px', + marginBottom: 8, + }, + sortLeftContainer: { flex: 1, }, - rightSideFilter: { + sortMenuContainer: { display: 'flex', + textAlign: 'center', + alignItems: 'center', + color: '#633AA3', + textTransform: 'none', }, - filterDropdown: { + sortMobileMenuContainer: { display: 'flex', + textAlign: 'center', + alignItems: 'center', + width: '100%', + minHeight: '40px', + backgroundColor: '#F2F2F2', + marginBottom: 8, + lineHeight: '24px', + fontSize: '16px', }, - boldedText: { + searchSettingLabel: { fontWeight: 600, lineHeight: '17.5px', color: '#1E1131', marginRight: 6, }, - purpleText: { + searchSettingMobileLabel: { + fontWeight: 400, + lineHeight: '24px', + color: '#1E1131', + fontSize: '16px', + marginLeft: 32, + }, + rowContainer: { display: 'flex', - color: '#633AA3', }, - arrowDropdown: { - marginRight: 6, - paddingBottom: 4, - verticalAlign: 'middle', + columnContainer: { + display: 'flex', + flexDirection: 'column', }, - hiddenElement: { - display: 'none', + cardMargins: { + marginBottom: 40, }, - searchBodyContainer: { - width: '100%', + headerMargins: { + marginTop: 24, + }, + overrideListItem: { + backgroundColor: 'pink', + }, + selectedChoice: { + fontWeight: 600, + backgroundColor: '#E5E5E5', + boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.2)', }, }); +const ReusableMenu = ( + { + classes, menuValues, menuStrings, onMenuClick, sortLabel, currentValue = menuValues[0], mobile, + }, +) => { + const SortContainerClass = mobile ? classes.sortMobileMenuContainer : classes.sortMenuContainer; + const SearchSettingClass = mobile ? classes.searchSettingMobileLabel : classes.searchSettingLabel; + + const [anchorEl, setAnchorEl] = React.useState(null); + const [selectedIndex, setSelectedIndex] = React.useState(1); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleMenuItemClick = (event, index) => { + setSelectedIndex(index); + setAnchorEl(null); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + <> +
+ + {sortLabel} + + + + {menuValues.map((value, index) => { + const boldedText = index === selectedIndex ? classes.selectedChoice : ''; + return ( + handleMenuItemClick(event, index)} + className={boldedText} + /* eslint-disable react/no-array-index-key */ + key={index} + > + {`${value} ${menuStrings}`} + + ); + })} + +
+ + ); +}; + +const querySearch = () => ( + null +); + +const DistanceMenu = ({ classes, mobile }) => ( + +); + +const SortByMenu = ({ classes, mobile }) => ( + +); + +const ShowingPerPageMenu = ({ classes, mobile }) => ( + +); + +const TopSortRow = ({ classes, mobile }) => { + const ContainerClass = mobile ? classes.columnContainer : classes.rowContainer; + return ( +
+ {mobile ? null + : ( +
+ +
+ )} +
+ + +
+
+ ); +}; + +const SortRowMobile = ({ classes, useDesktop }) => { + if (useDesktop) { + return null; + } + return ( +
+ +
+ ); +}; + +const NumberOfResultsHeader = ({ classes, pagination, mobile }) => { + const resultString = pagination.total_count >= 2 ? 'Results' : 'Result'; + const numOfResultsString = `${pagination.total_count} Search ${resultString}`; + const applyFonts = mobile ? classes.numResultsMobileFont : ''; + return ( +
+ {numOfResultsString} +
+ ); +}; + +const OpenFilterPanelButton = ( + { + classes, openFilter, setOpenFilter, clearFilters, display, + }, +) => { + if (display === false) { + return null; + } + return ( +
+ + +
+ ); +}; + +const FilterPanelAside = ({ + openFilter, + setOpenFilter, + isWiderThanBreakpoint, + indicators, + search, + updateSearch, + searchResults, + classes, +}) => { + const ShowFilterPanel = searchResults !== null && searchResults.length > 0 + && (isWiderThanBreakpoint || openFilter); + if (ShowFilterPanel === false) { + return null; + } + return ( +
+ setOpenFilter(false)} + type={isWiderThanBreakpoint ? 'desktop' : 'mobile'} + allIndicators={indicators} + search={search} + updateSearch={updateSearch} + resultCount={searchResults.length} + /> +
+ ); +}; + +const SearchBodyHeader = ({ + classes, pagination, setOpenFilter, openFilter, useDesktop, display, +}) => { + if (display === false) { + return null; + } + return ( +
+ + + +
+ ); +}; + const Search = ({ classes, coords, isGeolocationEnabled, }) => { - const isWiderThanBreakpoint = useMediaQuery('(min-width:1376px)'); - const [openFilter, setOpenFilter] = useState(false); const { updateSearch, @@ -136,6 +411,7 @@ const Search = ({ userLocation, indicators = [], } = useSearch({ userCoords: coords, isGeolocationEnabled }); + const onSearchSubmit = async (searchTerm) => { updateSearch(searchTerm); }; @@ -156,6 +432,11 @@ const Search = ({ updateFilters('rating', changedFilters.stars); }; + const isWiderThanBreakpoint = useMediaQuery('(min-width:1376px)'); + const useDesktop = useMediaQuery('(min-width:838px)'); + const SearchPageMargins = isWiderThanBreakpoint ? classes.desktopMargins : classes.mobileMargins; + const FoundOneOrMoreResults = searchResults !== null && searchResults.length > 0; + const isGeoLoading = isGeolocationEnabled && coords === null; return ( @@ -170,109 +451,49 @@ const Search = ({ /> )}
- {searchResults !== null - && searchResults.length > 0 - && (isWiderThanBreakpoint || openFilter) - && ( -
- setOpenFilter(false)} - type={isWiderThanBreakpoint ? 'desktop' : 'mobile'} - allIndicators={indicators} - search={search} - updateSearch={updateSearch} - resultCount={searchResults.length} - /> -
- )} -
- {searchResults !== null && searchResults.length > 0 - ? ( -
-
- {`${pagination.total_count} Search ${pagination.totalCount >= 2 ? 'Result' : 'Results'}`} -
- {!isWiderThanBreakpoint && ( -
- -
- )} -
-
-
- Showing: - - 10 per page - - -
-
-
-
- Distance: - - 5 miles - - -
-
- Sort by: - - Highly Rated - - -
-
-
-
- ) - : null} + +
+
- {searchResults !== null && searchResults.length > 0 - && searchResults.map((result, index) => ( -
( +
+ - -
- ))} + count={(pagination.page - 1) * 10 + index + 1} + /> +
+ ))}
- {pagination && pagination !== null && ( -
+ {pagination && pagination !== null && !loading && ( +
+ +
)}
- {searchResults !== null && search.searchTerm !== null && searchResults.length === 0 @@ -311,3 +532,20 @@ Search.props = { Search.props = { ...Search.props, ...geoPropTypes }; export default geolocated({ positionOptions: { timeout: 5000 } })(withStyles(styles)(Search)); + +// eslint-disable-next-line import/no-mutable-exports +export let Tests = { + ReusableMenu, + DistanceMenu, + SortByMenu, + ShowingPerPageMenu, + TopSortRow, + SortRowMobile, + NumberOfResultsHeader, + OpenFilterPanelButton, + FilterPanelAside, +}; + +if (process.env.NODE_ENV !== 'test') { + Tests = undefined; +} diff --git a/src/routes/Search/Search.test.jsx b/src/routes/Search/Search.test.jsx new file mode 100644 index 00000000..15dfb161 --- /dev/null +++ b/src/routes/Search/Search.test.jsx @@ -0,0 +1,48 @@ +/* eslint-disable */ +import React from 'react'; +import { render, screen } from '@testing-library/react'; + +import Search, { Tests } from './Search'; +import userEvent from '@testing-library/user-event'; + +const { + SortByMenu, +} = Tests; + +describe('Search Page', () => { + describe('SortByMenu', () => { + const dummyProps = { + classes: {}, + mobile: false, + }; + it('It should render a button', () => { + render(); + const button = screen.getByRole('button'); + expect(button).toBeInTheDocument(); + }); + it('It should render a label', () => { + render(); + const label = screen.getByTestId('menu-dropdown-label'); + expect(label).toBeInTheDocument(); + }); + it('It should render a label that prefixes the value', () => { + render(); + const label = screen.getByTestId('menu-dropdown-label'); + expect(label.textContent).toContain('Sort by:'); + }); + it('It should render the current value on the label', () => { + render(); + const currentValue = screen.getByText('Highly Rated'); + expect(currentValue).toBeInTheDocument(); + }); + it('It should render menu items on click', () => { + render(); + const button = screen.getByRole('button'); + const menuItem = screen.queryByText('Recently Added'); + expect(menuItem).not.toBeInTheDocument(); + + userEvent.click(button); + expect(screen.getByText('Recently Added')).toBeInTheDocument(); + }); + }); +}); From 60e73384c9de160309ad1107bd9f1e18257ee4bc Mon Sep 17 00:00:00 2001 From: Amy <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 5 Mar 2023 20:32:45 -0500 Subject: [PATCH 89/93] Update Search.jsx --- src/routes/Search/Search.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 5905e38e..935729e3 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -155,7 +155,6 @@ const styles = () => ({ fontWeight: 600, backgroundColor: '#E5E5E5', boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.2)', -======= filterButton: { [theme.breakpoints.up('mobile')]: { display: 'none', From 09ddf025966b89c487705d8a80046e55f04ac831 Mon Sep 17 00:00:00 2001 From: Amy <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 5 Mar 2023 20:36:12 -0500 Subject: [PATCH 90/93] Fixed css error regarding withStyles --- src/routes/Search/Search.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 935729e3..67ea3678 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -155,6 +155,7 @@ const styles = () => ({ fontWeight: 600, backgroundColor: '#E5E5E5', boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.2)', + }, filterButton: { [theme.breakpoints.up('mobile')]: { display: 'none', From 399888c7aabbdae085e3f19c9ab254b4dd09dd42 Mon Sep 17 00:00:00 2001 From: Amy <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 5 Mar 2023 20:38:40 -0500 Subject: [PATCH 91/93] Update Search.jsx --- src/routes/Search/Search.jsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index 67ea3678..df1f4dab 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -156,21 +156,6 @@ const styles = () => ({ backgroundColor: '#E5E5E5', boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.2)', }, - filterButton: { - [theme.breakpoints.up('mobile')]: { - display: 'none', - }, - width: '100px !important', - marginBottom: '16px', - height: 36, - border: '#EBE5F6 1px solid', - }, - filterButtonText: { - fontWeight: 600, - fontSize: '14px', - lineHeight: '20px', - color: '#1E1131', - }, }); const ReusableMenu = ( From 3ad8977b9f8c8f8442551226190622612ddec652 Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 5 Mar 2023 20:58:29 -0500 Subject: [PATCH 92/93] Attempted fix of parse errors in imported module --- src/routes/Search/Search.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/routes/Search/Search.jsx b/src/routes/Search/Search.jsx index df1f4dab..0c0add92 100644 --- a/src/routes/Search/Search.jsx +++ b/src/routes/Search/Search.jsx @@ -156,6 +156,9 @@ const styles = () => ({ backgroundColor: '#E5E5E5', boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.2)', }, + emptyCSSToFixBug: { + + }, }); const ReusableMenu = ( From 0fc486fcd543496737346ce255b1198c8f3e9e5c Mon Sep 17 00:00:00 2001 From: ApplePieAngel <86702974+ApplePieAngel@users.noreply.github.com> Date: Sun, 23 Apr 2023 11:41:19 -0400 Subject: [PATCH 93/93] Added destructuring to user context --- src/components/AppBar/AppBar.jsx | 5 +++-- src/components/FilterPanel/FilterPanel.jsx | 2 +- src/components/Pagination/Pagination.jsx | 2 +- src/components/SpaceDetailsPage/SpaceDetailsCard.jsx | 2 +- src/routes/Home/Home.jsx | 5 +++-- 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/AppBar/AppBar.jsx b/src/components/AppBar/AppBar.jsx index db525557..c7e49df5 100644 --- a/src/components/AppBar/AppBar.jsx +++ b/src/components/AppBar/AppBar.jsx @@ -71,6 +71,7 @@ const AppBar = ({ const [showSearchBar, setShowSearchBar] = useState(false); const userContext = useContext(UserContext); + const { userProfile } = userContext; const location = useLocation(); const path = location.pathname; const history = useHistory(); @@ -139,7 +140,7 @@ const AppBar = ({ onClick={handleClick} data-testid="open-user-dropdown" > - {TruncateUserName(userContext.userProfile.username)} + {TruncateUserName(userProfile?.username)} } - {userContext.userProfile?.username ? : } + {userProfile?.username ? : } {!isDesktopWidth && showSearchBar diff --git a/src/components/FilterPanel/FilterPanel.jsx b/src/components/FilterPanel/FilterPanel.jsx index fad5c21f..3feceef6 100644 --- a/src/components/FilterPanel/FilterPanel.jsx +++ b/src/components/FilterPanel/FilterPanel.jsx @@ -486,7 +486,7 @@ FilterPanel.propTypes = { open: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, type: PropTypes.oneOf(['desktop', 'mobile']), - allIndicators: PropTypes.arrayOf(PropTypes.object), + allIndicators: PropTypes.arrayOf({}), search: PropTypes.shape({ searchTerm: PropTypes.string, indicators: PropTypes.arrayOf(PropTypes.string), diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index d72fe185..7150b3b9 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -283,7 +283,7 @@ const PaginationButton = ({ ); if (currPage === pageNumber) { return ( -
+
{PageNumberBox}
); diff --git a/src/components/SpaceDetailsPage/SpaceDetailsCard.jsx b/src/components/SpaceDetailsPage/SpaceDetailsCard.jsx index f4a37b54..328912b3 100644 --- a/src/components/SpaceDetailsPage/SpaceDetailsCard.jsx +++ b/src/components/SpaceDetailsPage/SpaceDetailsCard.jsx @@ -369,7 +369,7 @@ const SpaceDetailCard = ({ color="secondary" aria-label="hours of operation on yelp" > - + diff --git a/src/routes/Home/Home.jsx b/src/routes/Home/Home.jsx index f785a3fd..16efb532 100644 --- a/src/routes/Home/Home.jsx +++ b/src/routes/Home/Home.jsx @@ -197,13 +197,14 @@ const ParentRowContainer = ( }; const AddASpaceButton = (classes, breakpoint) => { + const { searchButton, searchButtonContainer, expandWidth } = classes; const baseButton = ( - ); const wideButton = ( - + {baseButton} );