From 8af311dbdb8f131c5e048d74d8a2c6bf146c744b Mon Sep 17 00:00:00 2001
From: lucieo <luciecamilleory@gmail.com>
Date: Mon, 4 Mar 2024 10:44:19 +0100
Subject: [PATCH] Fix campaign tabs on place listing page

---
 .../Places/Detail/CampaignPlaceDetail.tsx     |   2 +-
 web/components/Place/PlacesCampaignTabs.tsx   | 123 ++++++++++++++++++
 web/components/Place/PlacesPage.tsx           |   7 +-
 web/components/Place/PlacesTab.tsx            | 114 ----------------
 web/pages/espaces/index.tsx                   |   4 +-
 5 files changed, 131 insertions(+), 119 deletions(-)
 create mode 100644 web/components/Place/PlacesCampaignTabs.tsx
 delete mode 100644 web/components/Place/PlacesTab.tsx

diff --git a/web/components/Campaign/Places/Detail/CampaignPlaceDetail.tsx b/web/components/Campaign/Places/Detail/CampaignPlaceDetail.tsx
index 739cec83..ffe0e223 100644
--- a/web/components/Campaign/Places/Detail/CampaignPlaceDetail.tsx
+++ b/web/components/Campaign/Places/Detail/CampaignPlaceDetail.tsx
@@ -83,7 +83,7 @@ const CampaignPlaceDetail = ({ place }: Props) => {
           <PlaceDetailCalendar place={place} />
         )}
 
-        {Boolean(solidarityDisposNum && campaignDispos) && (
+        {Boolean(solidarityDisposNum && campaignDisposNum) && (
           <CampaignDetailSwitcher isCampaignTab={isCampaignTab} />
         )}
 
diff --git a/web/components/Place/PlacesCampaignTabs.tsx b/web/components/Place/PlacesCampaignTabs.tsx
new file mode 100644
index 00000000..be46fcb0
--- /dev/null
+++ b/web/components/Place/PlacesCampaignTabs.tsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Tabs,
+  TabPanels,
+  TabPanel,
+  TabList,
+  Tab,
+  HStack,
+  Text,
+  Box,
+} from '@chakra-ui/react'
+import { format } from '~utils/date'
+import Tag from '~components/Tag'
+import { useTranslation } from 'next-i18next'
+import PlacesPage from '~components/Place/PlacesPage'
+import useCampaignContext from '~components/Campaign/useCampaignContext'
+import { useRouter } from 'next/router'
+
+const PlacesCampaignTabs = () => {
+  const router = useRouter()
+  const { currentCampaign } = useCampaignContext()
+  const { t } = useTranslation('common')
+  const [selectedTab, setSelectedTab] = useState<number>(0)
+
+  useEffect(() => {
+    if (router.query.tab) {
+      setSelectedTab(parseInt(router.query.tab as string, 10) || 0)
+    }
+  }, [router.query.tab])
+
+  return (
+    <Tabs
+      isLazy
+      marginTop={6}
+      onChange={(index) => {
+        setSelectedTab(index)
+        router.push({
+          pathname: router.pathname,
+          query: { ...router.query, tab: index },
+        })
+      }}
+      variant="enclosed"
+      index={selectedTab}
+    >
+      <HStack width="100%" spacing={4}>
+        <Box flex={{ base: 'none', xl: 1 }}>
+          <TabList
+            border="1px solid #E3E5F0"
+            borderTopRadius="18px"
+            display="inline-flex"
+          >
+            <Tab
+              borderRadius="18px 0px 0px 0px"
+              borderColor="transparent"
+              _selected={{
+                backgroundColor: 'blue.100',
+                borderRadius: '18px 18px 0px 0px',
+                borderColor: 'blue.100',
+              }}
+              boxShadow="none!important"
+            >
+              <Text
+                backgroundColor={selectedTab === 0 && 'blue.500'}
+                color={selectedTab === 0 && 'white'}
+                paddingX={4}
+                paddingY={2}
+                borderRadius="12px"
+              >
+                {t('solidarity.title')}
+              </Text>
+            </Tab>
+            <Tab
+              borderRadius="0px 18px 0px 0px"
+              borderColor="transparent"
+              _selected={{
+                backgroundColor: 'campaign.light',
+                borderRadius: '18px 18px 0px 0px',
+                borderColor: 'campaign.light',
+              }}
+              boxShadow="none!important"
+            >
+              <HStack space={0}>
+                <Text
+                  backgroundColor={selectedTab === 1 && 'campaign.primary'}
+                  color={selectedTab === 1 && 'white'}
+                  paddingX={4}
+                  paddingY={2}
+                  borderRadius="12px"
+                >
+                  {currentCampaign?.title}
+                </Text>
+
+                <Tag status="campaign" display={{ base: 'none', md: 'block' }}>
+                  {t('campaign.open', {
+                    date: format(
+                      new Date(currentCampaign?.limitDate),
+                      'd MMMM yyyy',
+                    ),
+                  })}
+                </Tag>
+              </HStack>
+            </Tab>
+          </TabList>
+        </Box>
+        <Box
+          flex={{ base: 'none', xl: 1 }}
+          display={{ base: 'none', xl: 'inherit' }}
+        />
+      </HStack>
+
+      <TabPanels>
+        <TabPanel padding={0}>
+          <PlacesPage />
+        </TabPanel>
+        <TabPanel padding={0}>
+          <PlacesPage />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  )
+}
+
+export default PlacesCampaignTabs
diff --git a/web/components/Place/PlacesPage.tsx b/web/components/Place/PlacesPage.tsx
index f6f65d7b..59e7dae5 100644
--- a/web/components/Place/PlacesPage.tsx
+++ b/web/components/Place/PlacesPage.tsx
@@ -66,7 +66,7 @@ const PlacesPage = () => {
 
   useEffect(() => {
     setSearchParams({ ...initialFilters, ...formatSearch(router.query) })
-  }, [])
+  }, [hasActiveCampaign, isCampaignTab])
   const queryClient = useQueryClient()
 
   const {
@@ -83,7 +83,10 @@ const PlacesPage = () => {
     isCampaignTab ? 'campaignPlaces' : 'solidarityPlaces',
     !campaignLoading,
   )
-  const nbPlaces = useMemo(() => places?.pages?.flat().length, [places?.pages])
+  const nbPlaces = useMemo(() => places?.pages?.flat().length, [
+    places?.pages,
+    searchParams,
+  ])
   const isPlural = useMemo(() => nbPlaces > 1, [nbPlaces])
 
   useEffect(() => {
diff --git a/web/components/Place/PlacesTab.tsx b/web/components/Place/PlacesTab.tsx
deleted file mode 100644
index a538cddc..00000000
--- a/web/components/Place/PlacesTab.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import {
-  Tabs,
-  TabPanels,
-  TabPanel,
-  TabList,
-  Tab,
-  HStack,
-  Text,
-} from '@chakra-ui/react'
-import { format } from '~utils/date'
-import Tag from '~components/Tag'
-import { useTranslation } from 'next-i18next'
-import PlacesPage from '~components/Place/PlacesPage'
-import useCampaignContext from '~components/Campaign/useCampaignContext'
-import { useRouter } from 'next/router'
-
-const PlacesTabs = () => {
-  const router = useRouter()
-  const { currentCampaign } = useCampaignContext()
-  const { t } = useTranslation('common')
-  const [selectedTab, setSelectedTab] = useState<number>(0)
-
-  useEffect(() => {
-    if (router.query.tab) {
-      setSelectedTab(parseInt(router.query.tab as string, 10) || 0)
-    }
-  }, [router.query.tab])
-
-  return (
-    <Tabs
-      isLazy
-      marginTop={6}
-      onChange={(index) => {
-        setSelectedTab(index)
-        router.push({
-          pathname: router.pathname,
-          query: { ...router.query, tab: index },
-        })
-      }}
-      variant="enclosed"
-      index={selectedTab}
-    >
-      <TabList
-        border="1px solid #E3E5F0"
-        borderTopRadius="18px"
-        display="inline-flex"
-      >
-        <Tab
-          borderRadius="18px 0px 0px 0px"
-          borderColor="transparent"
-          _selected={{
-            backgroundColor: 'blue.100',
-            borderRadius: '18px 18px 0px 0px',
-            borderColor: 'blue.100',
-          }}
-          boxShadow="none!important"
-        >
-          <Text
-            backgroundColor={selectedTab === 0 && 'blue.500'}
-            color={selectedTab === 0 && 'white'}
-            paddingX={4}
-            paddingY={2}
-            borderRadius="12px"
-          >
-            {t('solidarity.title')}
-          </Text>
-        </Tab>
-        <Tab
-          borderRadius="0px 18px 0px 0px"
-          borderColor="transparent"
-          _selected={{
-            backgroundColor: 'campaign.light',
-            borderRadius: '18px 18px 0px 0px',
-            borderColor: 'campaign.light',
-          }}
-          boxShadow="none!important"
-        >
-          <HStack space={0}>
-            <Text
-              backgroundColor={selectedTab === 1 && 'campaign.primary'}
-              color={selectedTab === 1 && 'white'}
-              paddingX={4}
-              paddingY={2}
-              borderRadius="12px"
-            >
-              {currentCampaign?.title}
-            </Text>
-
-            <Tag status="campaign" display={{ base: 'none', md: 'block' }}>
-              {t('campaign.open', {
-                date: format(
-                  new Date(currentCampaign?.limitDate),
-                  'd MMMM yyyy',
-                ),
-              })}
-            </Tag>
-          </HStack>
-        </Tab>
-      </TabList>
-
-      <TabPanels>
-        <TabPanel padding={0}>
-          <PlacesPage />
-        </TabPanel>
-        <TabPanel padding={0}>
-          <PlacesPage />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  )
-}
-
-export default PlacesTabs
diff --git a/web/pages/espaces/index.tsx b/web/pages/espaces/index.tsx
index 09c1700c..22722d6a 100644
--- a/web/pages/espaces/index.tsx
+++ b/web/pages/espaces/index.tsx
@@ -6,7 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
 import PlacesPage from '~components/Place/PlacesPage'
 
-import PlacesTabs from '~components/Place/PlacesTab'
+import PlacesCampaignTabs from '~components/Place/PlacesCampaignTabs'
 
 const Places = () => {
   const { currentCampaign } = useCampaignContext()
@@ -14,7 +14,7 @@ const Places = () => {
   if (!currentCampaign || currentCampaign?.mode !== 'applications')
     return <PlacesPage />
 
-  return <PlacesTabs />
+  return <PlacesCampaignTabs />
 }
 
 export const getServerSideProps: GetServerSideProps<SSRConfig> = async ({