diff --git a/pages/[username].tsx b/pages/[username].tsx index e0626e04..5bf6eb8e 100644 --- a/pages/[username].tsx +++ b/pages/[username].tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react' import InfiniteScroll from 'react-infinite-scroll-component' +import { getCookie } from 'cookies-next' import { queryTypes, useQueryState } from 'next-usequerystate' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' @@ -12,6 +13,7 @@ import organizeRaids from '~utils/organizeRaids' import { setHeaders } from '~utils/userToken' import useDidMountEffect from '~utils/useDidMountEffect' import { appState } from '~utils/appState' +import { defaultFilterset } from '~utils/defaultFilters' import { elements, allElement } from '~data/elements' import { emptyPaginationObject } from '~utils/emptyStates' @@ -82,6 +84,8 @@ const ProfileRoute: React.FC = ({ parse: (query: string) => parseInt(query), serialize: (value) => `${value}`, }) + const [advancedFilters, setAdvancedFilters] = + useState(defaultFilterset) // Define transformers for element function parseElement(query: string) { @@ -120,6 +124,16 @@ const ProfileRoute: React.FC = ({ return () => window.removeEventListener('scroll', handleScroll) }, []) + // Fetch the user's advanced filters + useEffect(() => { + const filtersCookie = getCookie('filters') + const filters = filtersCookie + ? JSON.parse(filtersCookie as string) + : defaultFilterset + + setAdvancedFilters(filters) + }, []) + // Handle errors const handleError = useCallback((error: any) => { if (error.response != null) { @@ -138,6 +152,7 @@ const ProfileRoute: React.FC = ({ raid: raid ? raid.id : undefined, recency: recency != -1 ? recency : undefined, page: currentPage, + ...advancedFilters, }, } @@ -194,7 +209,7 @@ const ProfileRoute: React.FC = ({ useDidMountEffect(() => { setCurrentPage(1) fetchProfile({ replace: true }) - }, [username, element, raid, recency]) + }, [username, element, raid, recency, advancedFilters]) // When the page changes, fetch all teams again. useDidMountEffect(() => { @@ -204,25 +219,23 @@ const ProfileRoute: React.FC = ({ }, [currentPage]) // Receive filters from the filter bar - function receiveFilters({ - element, - raidSlug, - recency, - }: { - element?: number - raidSlug?: string - recency?: number - }) { - if (element == 0) setElement(0, { shallow: true }) - else if (element) setElement(element, { shallow: true }) + function receiveFilters(filters: FilterSet) { + if (filters.element == 0) setElement(0, { shallow: true }) + else if (filters.element) setElement(filters.element, { shallow: true }) - if (raids && raidSlug) { - const raid = raids.find((raid) => raid.slug === raidSlug) + if (raids && filters.raidSlug) { + const raid = raids.find((raid) => raid.slug === filters.raidSlug) setRaid(raid) - setRaidSlug(raidSlug, { shallow: true }) + setRaidSlug(filters.raidSlug, { shallow: true }) } - if (recency) setRecency(recency, { shallow: true }) + if (filters.recency) setRecency(filters.recency, { shallow: true }) + + delete filters.element + delete filters.raidSlug + delete filters.recency + + setAdvancedFilters(filters) } // Methods: Navigation @@ -334,6 +347,12 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex // Fetch latest version const version = await fetchLatestVersion() + // Fetch user's advanced filters + const filtersCookie = getCookie('filters', { req: req, res: res }) + const advancedFilters = filtersCookie + ? JSON.parse(filtersCookie as string) + : undefined + try { // Fetch and organize raids let { raids, sortedRaids } = await api.endpoints.raids @@ -343,7 +362,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex // Create filter object const filters: FilterObject = extractFilters(query, raids) const params = { - params: { ...filters }, + params: { ...filters, ...advancedFilters }, } // Set up empty variables diff --git a/pages/saved.tsx b/pages/saved.tsx index 01670556..f548e3b5 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react' import InfiniteScroll from 'react-infinite-scroll-component' +import { getCookie } from 'cookies-next' import { queryTypes, useQueryState } from 'next-usequerystate' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' @@ -13,6 +14,7 @@ import fetchLatestVersion from '~utils/fetchLatestVersion' import organizeRaids from '~utils/organizeRaids' import useDidMountEffect from '~utils/useDidMountEffect' import { appState } from '~utils/appState' +import { defaultFilterset } from '~utils/defaultFilters' import { elements, allElement } from '~data/elements' import { emptyPaginationObject } from '~utils/emptyStates' @@ -82,6 +84,8 @@ const SavedRoute: React.FC = ({ parse: (query: string) => parseInt(query), serialize: (value) => `${value}`, }) + const [advancedFilters, setAdvancedFilters] = + useState(defaultFilterset) // Define transformers for element function parseElement(query: string) { @@ -120,6 +124,16 @@ const SavedRoute: React.FC = ({ return () => window.removeEventListener('scroll', handleScroll) }, []) + // Fetch the user's advanced filters + useEffect(() => { + const filtersCookie = getCookie('filters') + const filters = filtersCookie + ? JSON.parse(filtersCookie as string) + : defaultFilterset + + setAdvancedFilters(filters) + }, []) + // Handle errors const handleError = useCallback((error: any) => { if (error.response != null) { @@ -138,6 +152,7 @@ const SavedRoute: React.FC = ({ raid: raid ? raid.id : undefined, recency: recency !== -1 ? recency : undefined, page: currentPage, + ...advancedFilters, } Object.keys(filters).forEach( @@ -198,7 +213,7 @@ const SavedRoute: React.FC = ({ useDidMountEffect(() => { setCurrentPage(1) fetchTeams({ replace: true }) - }, [element, raid, recency]) + }, [element, raid, recency, advancedFilters]) // When the page changes, fetch all teams again. useDidMountEffect(() => { @@ -208,25 +223,23 @@ const SavedRoute: React.FC = ({ }, [currentPage]) // Receive filters from the filter bar - function receiveFilters({ - element, - raidSlug, - recency, - }: { - element?: number - raidSlug?: string - recency?: number - }) { - if (element == 0) setElement(0, { shallow: true }) - else if (element) setElement(element, { shallow: true }) + function receiveFilters(filters: FilterSet) { + if (filters.element == 0) setElement(0, { shallow: true }) + else if (filters.element) setElement(filters.element, { shallow: true }) - if (raids && raidSlug) { - const raid = raids.find((raid) => raid.slug === raidSlug) + if (raids && filters.raidSlug) { + const raid = raids.find((raid) => raid.slug === filters.raidSlug) setRaid(raid) - setRaidSlug(raidSlug, { shallow: true }) + setRaidSlug(filters.raidSlug, { shallow: true }) } - if (recency) setRecency(recency, { shallow: true }) + if (filters.recency) setRecency(filters.recency, { shallow: true }) + + delete filters.element + delete filters.raidSlug + delete filters.recency + + setAdvancedFilters(filters) } // Methods: Favorites @@ -368,6 +381,12 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex // Fetch latest version const version = await fetchLatestVersion() + // Fetch user's advanced filters + const filtersCookie = getCookie('filters', { req: req, res: res }) + const advancedFilters = filtersCookie + ? JSON.parse(filtersCookie as string) + : undefined + try { // Fetch and organize raids let { raids, sortedRaids } = await api.endpoints.raids @@ -377,7 +396,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex // Create filter object const filters: FilterObject = extractFilters(query, raids) const params = { - params: { ...filters }, + params: { ...filters, ...advancedFilters }, } // Set up empty variables diff --git a/pages/teams.tsx b/pages/teams.tsx index d65e6a44..fa25bb13 100644 --- a/pages/teams.tsx +++ b/pages/teams.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react' import InfiniteScroll from 'react-infinite-scroll-component' +import { getCookie } from 'cookies-next' import { queryTypes, useQueryState } from 'next-usequerystate' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' @@ -31,7 +32,6 @@ import type { PaginationObject, ResponseStatus, } from '~types' -import { getCookie } from 'cookies-next' interface Props { context?: PageContextObj @@ -239,7 +239,6 @@ const TeamsRoute: React.FC = ({ delete filters.raidSlug delete filters.recency - console.log('Setting advanced filters in receiveFilters') setAdvancedFilters(filters) }