From 7df28911c00b3b2d8ef231d47cbdb4b87174c7ec Mon Sep 17 00:00:00 2001
From: Alexander Petkov <sashko506@gmail.com>
Date: Tue, 1 Aug 2023 17:29:44 +0300
Subject: [PATCH] ViewCampaignPage: Show page not found, on wrong slug

---
 src/common/hooks/campaigns.ts                        | 11 ++++++++++-
 src/components/client/campaigns/ViewCampaignPage.tsx | 11 +++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/common/hooks/campaigns.ts b/src/common/hooks/campaigns.ts
index 1ff396d21..4ac118bc3 100644
--- a/src/common/hooks/campaigns.ts
+++ b/src/common/hooks/campaigns.ts
@@ -14,6 +14,7 @@ import { DonationStatus } from 'gql/donations.enums'
 import { apiClient } from 'service/apiClient'
 import { useCurrentPerson } from 'common/util/useCurrentPerson'
 import { isAdmin } from 'common/util/roles'
+import { AxiosError, AxiosResponse } from 'axios'
 
 // NOTE: shuffling the campaigns so that each gets its fair chance to be on top row
 export const campaignsOrderQueryFunction: QueryFunction<CampaignResponse[]> = async ({
@@ -77,7 +78,15 @@ export function useCampaignTypesList() {
 }
 
 export function useViewCampaign(slug: string) {
-  return useQuery<{ campaign: CampaignResponse }>([endpoints.campaign.viewCampaign(slug).url])
+  return useQuery<{ campaign: CampaignResponse }, AxiosError>(
+    [endpoints.campaign.viewCampaign(slug).url],
+    {
+      retry(failureCount, error) {
+        if (error.isAxiosError && error.response?.status === 404) return false
+        return true
+      },
+    },
+  )
 }
 
 export function useViewCampaignById(id: string) {
diff --git a/src/components/client/campaigns/ViewCampaignPage.tsx b/src/components/client/campaigns/ViewCampaignPage.tsx
index 247dad14d..f51e05470 100644
--- a/src/components/client/campaigns/ViewCampaignPage.tsx
+++ b/src/components/client/campaigns/ViewCampaignPage.tsx
@@ -12,14 +12,21 @@ import CenteredSpinner from 'components/common/CenteredSpinner'
 import InlineDonation from './InlineDonation'
 import CampaignDetails from './CampaignDetails'
 import dynamic from 'next/dynamic'
+import NotFoundPage from 'pages/404'
 
 type Props = { slug: string }
 const HotJar = dynamic(() => import('common/hotjar/HotJar'), { ssr: false })
 
 export default function ViewCampaignPage({ slug }: Props) {
-  const { data, isLoading } = useViewCampaign(slug)
+  const { data, isLoading, isError } = useViewCampaign(slug)
   const { mobile, small } = useMobile()
-  if (isLoading || !data) return <CenteredSpinner size="2rem" />
+  if (isLoading || !data)
+    return (
+      <>
+        {isLoading && <CenteredSpinner size={'2rem'} />}
+        {isError && <NotFoundPage />}
+      </>
+    )
   const { campaign } = data
   const ogImageUrl = campaignListPictureUrl(campaign)
   const ShouldIncludeHotJar = slug === 'petar-v-cambridge' ? HotJar : () => null