Skip to content

feature: serailize filter obj map to URI #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
noudadrichem wants to merge 1 commit into
base: development
Choose a base branch
from
Draft

feature: serailize filter obj map to URI #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 21 additions & 76 deletions components/Filters/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {}

Expand All @@ -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) {
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -157,11 +107,7 @@ function Filters(props: FiltersProps): JSX.Element {
<Arrow color="#566073" size={16} direction={isOpen ? 'top' : 'bottom'} />
</div>

<motion.div
className={`filters-container`}
animate={isOpen ? 'open' : 'closed'}
variants={extraFilterAnimationVariants}
>
<motion.div className={`filters-container`} animate={isOpen ? 'open' : 'closed'} variants={extraFilterAnimationVariants}>
<div className={`filters ${isOpen ? 'open' : 'closed'}`}>
<div className="left-side">
<div className="more-filters open">
Expand All @@ -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) => ({
Expand Down
1 change: 0 additions & 1 deletion components/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ interface ImagesProps {
}

function Images(props: any): JSX.Element {
console.log('iages props...', props);
const [atBottom, setIsAtBottom] = useState<boolean>(false);
const setUserWants = useStore((state) => state.setUserWants);
const filters = useStore((state) => state.filters);
Expand Down
8 changes: 2 additions & 6 deletions components/SearchSets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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]);

Expand Down Expand Up @@ -83,6 +78,7 @@ function SearchSets() {
.filter((keyword: string) => !toRemove.includes(keyword))
.join(' ')
.trim();

setFilters({
...filters,
name: names,
Expand Down
1 change: 0 additions & 1 deletion pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ function MyApp({ Component, pageProps }: AppProps) {
});
if (data) {
setUser(data.me);
console.log('user...', data.me);
}
}

Expand Down
13 changes: 13 additions & 0 deletions utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}