put campaigns with status different than active at the bottom of the … (

#1304)

* put campaigns with status different than active at the bottom of the list

* remove left out `console.log`

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<CampaignResponse[]> = async ({ queryKey }) => {
+export const campaignsOrderQueryFunction: QueryFunction<CampaignResponse[]> = async ({
+  queryKey,
+}) => {
   const response = await apiClient.get(queryKey.join('/'))
-  return shuffle<CampaignResponse>(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<CampaignResponse[]>([endpoints.campaign.listCampaigns.url], shuffleQueryFn, {
-    // Add 15 minutes of cache time
-    staleTime: 1000 * 60 * 15,
-  })
+  return useQuery<CampaignResponse[]>(
+    [endpoints.campaign.listCampaigns.url],
+    campaignsOrderQueryFunction,
+    {
+      // Add 15 minutes of cache time
+      staleTime: 1000 * 60 * 15,
+    },
+  )
 }
 
 export function useCampaignAdminList() {

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<string>('ALL')
-
   // TODO: add filters&sorting of campaigns so people can select based on personal preferences
   const campaignToShow = useMemo<CampaignResponse[]>(() => {
     const filteredCampaigns =

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')
-
   if (data === undefined) {
     return null
   } else {

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<CampaignResponse[]>(
     [endpoints.campaign.listCampaigns.url],
-    queryFnFactory<CampaignResponse[]>(),
+    campaignsOrderQueryFunction,
   )
   await prefetchCampaignTypesList(client)
   return {

src/pages/index.tsx

@@ -3,20 +3,20 @@ 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
 }> = async (ctx) => {
   const client = new QueryClient()
   await client.prefetchQuery<CampaignResponse[]>(
     [endpoints.campaign.listCampaigns.url],
-    queryFnFactory<CampaignResponse[]>(),
+    campaignsOrderQueryFunction,
   )
 
   //For getting session on server side the docs recommend using unstable_getServerSession as per