From 6fb5d7afce30240234ae71a385351d23e719a1ab Mon Sep 17 00:00:00 2001 From: noud adrichem Date: Tue, 23 Mar 2021 16:34:52 +0100 Subject: [PATCH] feature: serailize filter obj map to URI --- components/Filters/index.tsx | 97 ++++++++---------------------------- components/Overview.tsx | 1 - components/SearchSets.tsx | 8 +-- pages/_app.tsx | 1 - utils/index.ts | 13 +++++ 5 files changed, 36 insertions(+), 84 deletions(-) create mode 100644 utils/index.ts diff --git a/components/Filters/index.tsx b/components/Filters/index.tsx index 5f91c12..7843920 100644 --- a/components/Filters/index.tsx +++ b/components/Filters/index.tsx @@ -1,12 +1,6 @@ import React, { useState, useEffect } from 'react'; import { SelectOption } from '../../types/interfaces'; -import { - AVAILABILITY_FILTER, - AVAILABILITY_OPTIONS, - PROFILE_OPTIONS, - MATERIAL_OPTIONS, - BRAND_OPTIONS, -} from '../../constants'; +import { AVAILABILITY_FILTER, AVAILABILITY_OPTIONS, PROFILE_OPTIONS, MATERIAL_OPTIONS, BRAND_OPTIONS } from '../../constants'; import MultiSelect from '../Multiselect'; import Select from '../Select'; import Tab from './Tab'; @@ -16,6 +10,7 @@ import FilterIcon from '../FilterIcon'; import { motion } from 'framer-motion'; import useStore from '../../context'; import { useRouter } from 'next/router'; +import { serialiseFilter } from '../../utils'; interface FiltersProps {} @@ -27,43 +22,6 @@ function Filters(props: FiltersProps): JSX.Element { const setFilters = useStore((state) => state.setFilters); const filters = useStore((state) => state.filters); - useEffect(() => { - const hasUrlQuery = Object.keys(router.query).length > 0; - console.log('router query...', hasUrlQuery); - if (hasUrlQuery) { - let routeFilter = filters; - - const brand = router.query['brand[]']; - // if (brand) { - // routeFilter.brand = typeof brand === 'string' ? [brand] : brand; - // } - const profile = router.query['type[]']; - // if (profile) { - // routeFilter.type = typeof profile === 'string' ? [profile] : profile; - // } - const material = router.query['material[]']; - // if (material) { - // routeFilter.material = typeof material === 'string' ? [material] : material; - // } - const availability = router.query['tab']; - console.log({ - brand, - profile, - material, - availability, - }); - if (availability && AVAILABILITY_OPTIONS.includes(String(availability))) { - routeFilter.availability = String(availability); - } - - console.log('router query filters...', routeFilter); - setFilters(routeFilter); - if (brand || profile || material) { - setIsExtraFilterOpen(true); - } - } - }, [router.query]); - useEffect(function handleToggleOnWindowSize() { const isBrowser = typeof window !== `undefined`; if (isBrowser) { @@ -74,20 +32,26 @@ function Filters(props: FiltersProps): JSX.Element { } }, []); + useEffect(() => { + setIsExtraFilterOpen(filters.brand.length > 0 || filters.material.length > 0 || filters.type.length > 0); + const serializedQuery = serialiseFilter(filters); + console.log('sealized query...', { serializedQuery }); + if (serializedQuery !== '') { + router.push( + { + pathname: `/`, + query: { + query: serializedQuery, + }, + }, + undefined, + { shallow: true } + ); + } + }, [filters]); + function handleSelectionFilter(values: SelectOption[], key: string) { const mappedValues = values.map(({ value }) => value); - // const query = { - // ...router.query, - // [`${key}[]`]: mappedValues, - // }; - // router.push( - // { - // pathname: `/`, - // query, - // }, - // undefined, - // { shallow: true } - // ); setFilters({ ...filters, [key]: mappedValues, @@ -104,20 +68,6 @@ function Filters(props: FiltersProps): JSX.Element { handleSelectionFilter(values, 'material'); } function handleAvailabilityFilter(availability: string) { - router.push( - { - pathname: `/`, - query: - availability !== 'none' - ? { - tab: availability, - } - : null, - }, - undefined, - { shallow: true } - ); - setFilters({ ...filters, availability, @@ -157,11 +107,7 @@ function Filters(props: FiltersProps): JSX.Element { - +
@@ -181,7 +127,6 @@ function Filters(props: FiltersProps): JSX.Element { label="Availability" name="Choose availability" onSelectChange={(val) => { - console.log('availability mobile...', val); handleAvailabilityFilter(val.value); }} values={AVAILABILITY_OPTIONS.map((t) => ({ diff --git a/components/Overview.tsx b/components/Overview.tsx index aa79bd4..9c54add 100644 --- a/components/Overview.tsx +++ b/components/Overview.tsx @@ -12,7 +12,6 @@ interface ImagesProps { } function Images(props: any): JSX.Element { - console.log('iages props...', props); const [atBottom, setIsAtBottom] = useState(false); const setUserWants = useStore((state) => state.setUserWants); const filters = useStore((state) => state.filters); diff --git a/components/SearchSets.tsx b/components/SearchSets.tsx index eff81e1..5a748ea 100644 --- a/components/SearchSets.tsx +++ b/components/SearchSets.tsx @@ -4,6 +4,7 @@ import { useRouter, NextRouter } from 'next/router'; import useStore from '../context'; import SearchIcon from './SearchIcon'; import { ALL_OPTIONS, AVAILABILITY_FILTER, BRAND_FILTER, MATERIAL_FILTER, PROFILE_FILTER } from '../constants'; +import { serialiseFilter } from '../utils'; function SearchSets() { const router: NextRouter = useRouter(); @@ -15,17 +16,11 @@ function SearchSets() { const filters = useStore((state) => state.filters); const setFilters = useStore((state) => state.setFilters); - // TODO: this supported the use of search?= query in URL... useEffect(() => { const searchQuery = router.query.search; - console.log({ searchQuery }); if (searchQuery !== undefined) { // @ts-expect-error setSearchInputValue(searchQuery); - setFilters({ - ...filters, - name: Array.isArray(searchQuery) ? searchQuery[0] : searchQuery, - }); } }, [router.query.search]); @@ -83,6 +78,7 @@ function SearchSets() { .filter((keyword: string) => !toRemove.includes(keyword)) .join(' ') .trim(); + setFilters({ ...filters, name: names, diff --git a/pages/_app.tsx b/pages/_app.tsx index 5fca49c..b6144a8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -26,7 +26,6 @@ function MyApp({ Component, pageProps }: AppProps) { }); if (data) { setUser(data.me); - console.log('user...', data.me); } } diff --git a/utils/index.ts b/utils/index.ts new file mode 100644 index 0000000..90f4630 --- /dev/null +++ b/utils/index.ts @@ -0,0 +1,13 @@ +import { Filters } from '../types/interfaces'; + +export function serialiseFilter(filters: Filters) { + // TODO challenge, make this nicer. + const brand = filters.brand.length > 0 ? filters.brand.join(' ') : null; + const profile = filters.type.length > 0 ? filters.type.join(' ') : null; + const material = filters.material.length > 0 ? filters.material.join(' ') : null; + const query = [brand, profile, material, filters.name] + .filter((t) => t !== null) + .join(' ') + .trim(); + return query; +}