From d50db62cb80a76ef6ee7aded86ed7d0f799d637b Mon Sep 17 00:00:00 2001 From: "dimitar.nizamov" Date: Wed, 25 Jan 2023 19:28:59 +0100 Subject: [PATCH 1/2] put campaigns with status different than active at the bottom of the list --- src/common/hooks/campaigns.ts | 33 +++++++++++++++---- src/components/campaigns/CampaignFilter.tsx | 1 - .../CampaignsSection/CampaignsSection.tsx | 2 +- src/pages/campaigns/index.tsx | 4 +-- src/pages/index.tsx | 6 ++-- 5 files changed, 33 insertions(+), 13 deletions(-) diff --git a/src/common/hooks/campaigns.ts b/src/common/hooks/campaigns.ts index 9535a89fa..f855e438f 100644 --- a/src/common/hooks/campaigns.ts +++ b/src/common/hooks/campaigns.ts @@ -14,16 +14,37 @@ import { DonationStatus } from 'gql/donations.enums' import { apiClient } from 'service/apiClient' // NOTE: shuffling the campaigns so that each gets its fair chance to be on top row -const shuffleQueryFn: QueryFunction = async ({ queryKey }) => { +export const campaignsOrderQueryFunction: QueryFunction = async ({ + queryKey, +}) => { const response = await apiClient.get(queryKey.join('/')) - return shuffle(response.data) + // Put the campaigns in 2 arrays, one for active and one for inactive + const activeCampaigns: CampaignResponse[] = [] + const inactiveCampaigns: CampaignResponse[] = [] + response.data.forEach((campaign: CampaignResponse) => { + if (campaign.state === 'active') { + activeCampaigns.push(campaign) + } else { + inactiveCampaigns.push(campaign) + } + }) + // Shuffle the active campaigns + const shuffledActiveCampaigns = shuffle(activeCampaigns) + // Shuffle the inactive campaigns + const shuffledInactiveCampaigns = shuffle(inactiveCampaigns) + // Concatenate the two arrays + return shuffledActiveCampaigns.concat(shuffledInactiveCampaigns) } export function useCampaignList() { - return useQuery([endpoints.campaign.listCampaigns.url], shuffleQueryFn, { - // Add 15 minutes of cache time - staleTime: 1000 * 60 * 15, - }) + return useQuery( + [endpoints.campaign.listCampaigns.url], + campaignsOrderQueryFunction, + { + // Add 15 minutes of cache time + staleTime: 1000 * 60 * 15, + }, + ) } export function useCampaignAdminList() { diff --git a/src/components/campaigns/CampaignFilter.tsx b/src/components/campaigns/CampaignFilter.tsx index 632abb21e..62bef7ed5 100644 --- a/src/components/campaigns/CampaignFilter.tsx +++ b/src/components/campaigns/CampaignFilter.tsx @@ -76,7 +76,6 @@ export default function CampaignFilter() { const { mobile } = useMobile() const { data: campaigns, isLoading } = useCampaignList() const [selectedCategory, setSelectedCategory] = useState('ALL') - // TODO: add filters&sorting of campaigns so people can select based on personal preferences const campaignToShow = useMemo(() => { const filteredCampaigns = diff --git a/src/components/index/sections/CampaignsSection/CampaignsSection.tsx b/src/components/index/sections/CampaignsSection/CampaignsSection.tsx index ccc97b89a..919ddd0ab 100644 --- a/src/components/index/sections/CampaignsSection/CampaignsSection.tsx +++ b/src/components/index/sections/CampaignsSection/CampaignsSection.tsx @@ -12,7 +12,7 @@ import { Root, UrgentCampaignsHeading } from './CampaignsSection.styled' export default function CampaignsSection() { const { data } = useCampaignList() const { t } = useTranslation('index') - + console.log(data) if (data === undefined) { return null } else { diff --git a/src/pages/campaigns/index.tsx b/src/pages/campaigns/index.tsx index a5f7db58d..cb4470f98 100644 --- a/src/pages/campaigns/index.tsx +++ b/src/pages/campaigns/index.tsx @@ -3,16 +3,16 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { dehydrate, QueryClient } from '@tanstack/react-query' import CampaignsPage from 'components/campaigns/CampaignsPage' +import { campaignsOrderQueryFunction } from 'common/hooks/campaigns' import { prefetchCampaignTypesList } from 'service/campaignTypes' import { endpoints } from 'service/apiEndpoints' -import { queryFnFactory } from 'service/restRequests' import { CampaignResponse } from 'gql/campaigns' export const getServerSideProps: GetServerSideProps = async (params) => { const client = new QueryClient() await client.prefetchQuery( [endpoints.campaign.listCampaigns.url], - queryFnFactory(), + campaignsOrderQueryFunction, ) await prefetchCampaignTypesList(client) return { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6d5490005..890272eed 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,12 +3,12 @@ import { GetServerSideProps } from 'next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { QueryClient } from '@tanstack/react-query' +import IndexPage from 'components/index/IndexPage' +import { campaignsOrderQueryFunction } from 'common/hooks/campaigns' import { CampaignResponse } from 'gql/campaigns' import { endpoints } from 'service/apiEndpoints' -import IndexPage from 'components/index/IndexPage' import { authOptions } from './api/auth/[...nextauth]' -import { queryFnFactory } from 'service/restRequests' export const getServerSideProps: GetServerSideProps<{ session: Session | null @@ -16,7 +16,7 @@ export const getServerSideProps: GetServerSideProps<{ const client = new QueryClient() await client.prefetchQuery( [endpoints.campaign.listCampaigns.url], - queryFnFactory(), + campaignsOrderQueryFunction, ) //For getting session on server side the docs recommend using unstable_getServerSession as per From 96918bb011b931d3dd527320da0d8f72f53556bc Mon Sep 17 00:00:00 2001 From: "dimitar.nizamov" Date: Wed, 25 Jan 2023 19:32:40 +0100 Subject: [PATCH 2/2] remove left out `console.log` --- .../index/sections/CampaignsSection/CampaignsSection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/index/sections/CampaignsSection/CampaignsSection.tsx b/src/components/index/sections/CampaignsSection/CampaignsSection.tsx index 919ddd0ab..83069f5d6 100644 --- a/src/components/index/sections/CampaignsSection/CampaignsSection.tsx +++ b/src/components/index/sections/CampaignsSection/CampaignsSection.tsx @@ -12,7 +12,6 @@ import { Root, UrgentCampaignsHeading } from './CampaignsSection.styled' export default function CampaignsSection() { const { data } = useCampaignList() const { t } = useTranslation('index') - console.log(data) if (data === undefined) { return null } else {