make community page dynamic, reduce repitition

MetaFam · Oct 23, 2023 · c001ec3 · c001ec3
1 parent ce37975
commit c001ec3
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 67 deletions.
diff --git a/packages/web/components/Landing/WhoAreWe.tsx b/packages/web/components/Landing/WhoAreWe.tsx
@@ -81,6 +81,7 @@ export const WhoAreWe: React.FC<
   const { players } = usePlayerFilter();
 
   const topPlayers = useMemo(() => players.slice(0, 7), [players]);
+  const topPatrons = useMemo(() => patrons.slice(0, 7), [patrons]);
 
   return (
     <FullPageContainer
@@ -197,26 +198,26 @@ export const WhoAreWe: React.FC<
                 <Text as="span">01</Text>Players (Builders)
               </Text>
               {topPlayers && (
-                <UserGrid players={topPlayers} link={'/players'} />
+                <UserGrid players={topPlayers} link={'/community/?tab=Players'} />
               )}
             </ListItem>
             <ListItem gridArea="second">
               <Text as="h3" pb={{ base: 4, lg: 0 }}>
                 <Text as="span">02</Text>Patrons (Funders)
               </Text>
-              {patrons && <UserGrid players={patrons} link={'/patrons'} />}
+              {topPatrons && <UserGrid players={topPatrons} link={'/community/?tab=Patrons'} />}
             </ListItem>
             <ListItem gridArea="third" justifySelf="end">
               <Text as="h3" pb={{ base: 4, lg: 0 }}>
                 <Text as="span">03</Text>Elders (Advisors)
               </Text>
-              {patrons && <UserGrid elders={elders} link={'/players'} />}
+              {players && <UserGrid elders={elders} link={'/community/?tab=Players'} />}
             </ListItem>
             <ListItem gridArea="fourth" justifySelf="end">
               <Text as="h3" pb={{ base: 4, lg: 0 }}>
                 <Text as="span">04</Text>MetaAlliance (Member projects)
               </Text>
-              {guilds && <UserGrid guilds={guilds} link={'/guilds'} />}
+              {guilds && <UserGrid guilds={guilds} link={'/community/?tab=Guilds'} />}
             </ListItem>
           </UnorderedList>
         </Box>

diff --git a/packages/web/pages/community/index.tsx b/packages/web/pages/community/index.tsx
@@ -1,8 +1,5 @@
 import {
   Box,
-  Button,
-  Flex,
-  HStack,
   MetaHeading,
   Tab,
   TabList,
@@ -19,16 +16,19 @@ import GuildsPage from 'pages/guilds';
 import PatronsPage from 'pages/patrons';
 import Players from 'pages/players';
 import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
 export const getStaticProps = async () => {
   const patronsLimit = 150;
   const patrons = await getPatrons(patronsLimit);
+
   const pSeedPrice = await getPSeedPrice().catch((error) => {
     console.error('Error fetching pSeed price', error);
     return null;
   });
+
   return {
     props: {
       guilds: await getGuilds(),
@@ -43,64 +43,84 @@ const UnifiedCommunityPage: React.FC<Props> = ({
   guilds,
   patrons,
   pSeedPrice,
-}) => (
-  <PageContainer>
-    <VStack>
-      <MetaHeading>Community</MetaHeading>
-      <Box>
-        <Tabs
-          mt="2em"
-          w={{
-            lg: '100%',
-          }}
-        >
-          <TabList ml={{ sm: '0em', lg: '4em' }} mr={{ sm: '0em', lg: '4em' }}>
-            <Tab
-              _selected={{
-                color: 'teal.200',
-                borderBottom: '2px solid #81E6D9',
-              }}
-              w="100%"
-            >
-              Players
-            </Tab>
-            <Tab
-              _selected={{
-                color: 'teal.200',
-                borderBottom: '2px solid #81E6D9',
-              }}
-              w="100%"
-            >
-              Guilds
-            </Tab>
-            <Tab
-              _selected={{
-                color: 'teal.200',
-                borderBottom: '2px solid #81E6D9',
-              }}
-              w="100%"
-            >
-              Patrons
-            </Tab>
-            {/* <Tab _selected={{ color: 'teal.200' }} w='100%'>Elders</Tab> */}
-          </TabList>
-          <TabPanels w="100%" p="0">
-            <TabPanel>
-              <Players />
-            </TabPanel>
-            <TabPanel>
-              <GuildsPage guilds={guilds} />
-            </TabPanel>
-            <TabPanel>
-              <PatronsPage patrons={patrons} pSeedPrice={pSeedPrice} />
-            </TabPanel>
-            {/* <TabPanel>
-                Elders
-              </TabPanel> */}
-          </TabPanels>
-        </Tabs>
-      </Box>
-    </VStack>
-  </PageContainer>
-);
+}) => {
+
+  const router = useRouter();
+  const [activeTab, setActiveTab] = useState<{ link: string, index: number }>({ link: 'Players', index: 0 });
+
+  const communityTabs = [
+    { link: 'Players', component: <Players /> },
+    { link: 'Guilds', component: <GuildsPage guilds={guilds} />},
+    { link: 'Patrons', component: <PatronsPage patrons={patrons} pSeedPrice={pSeedPrice} /> }
+  ]
+
+  useEffect(() => {
+    const { query } = router;
+    if (query.tab) {
+      const index = communityTabs.findIndex(tab => tab.link === query.tab);
+      setActiveTab({ link: query.tab as string, index });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.query]);
+
+  const handleTabChange = (index: number) => {
+    const tab = communityTabs[index];
+    setActiveTab({ link: tab.link, index });
+    router.push(`/community/?tab=${tab.link}`, undefined, { shallow: true });
+  };
+
+  return (
+    <PageContainer>
+      <VStack>
+        <MetaHeading>Community</MetaHeading>
+        <Box>
+          <Tabs
+            mt="2em"
+            w={{
+              lg: '100%',
+            }}
+            index={activeTab.index}
+            onChange={handleTabChange}
+          >
+            <TabList ml={{ sm: '0em', lg: '4em' }} mr={{ sm: '0em', lg: '4em' }}>
+              <>
+                {
+                  communityTabs.map(({ link }) => {
+                    return(
+                      <Tab
+                        key={`tab-${link}`}
+                        _selected={{
+                          color: 'teal.200',
+                          borderBottom: '2px solid #81E6D9',
+                        }}
+                        w="100%"
+                      >
+                        {link}
+                      </Tab>
+                    )
+                  })
+                }
+              </>
+            </TabList>
+            <TabPanels w="100%" p="0">
+
+                {
+                  communityTabs.map(({ link, component }) => {
+                    return (
+                      <TabPanel key={`panel-${link}`}>
+                        {component}
+                      </TabPanel>
+                    )
+                  })
+                }
+
+            </TabPanels>
+          </Tabs>
+        </Box>
+      </VStack>
+    </PageContainer>
+  )
+
+};
+
 export default UnifiedCommunityPage;