Fix campaign tabs on place listing page

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} />
         )}
 

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

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(() => {

web/pages/espaces/index.tsx

@@ -6,15 +6,15 @@ 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()
 
   if (!currentCampaign || currentCampaign?.mode !== 'applications')
     return <PlacesPage />
 
-  return <PlacesTabs />
+  return <PlacesCampaignTabs />
 }
 
 export const getServerSideProps: GetServerSideProps<SSRConfig> = async ({