Merge pull request #1663 from geyserfund/sajal/gys-8706-updates-banner

feat: add info banner from airtable data
geyserfund · Oct 9, 2024 · d574050 · d574050
2 parents 4ff44c4 + 29f7f96
commit d574050
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 0 deletions.
diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
@@ -8,6 +8,7 @@ import { useMatchRoutes } from './config/routes/hooks/useMatchRoutes'
 import { useAuthContext } from './context'
 import { useActivityHook } from './modules/discovery/hooks/useActivityHook'
 import { PlatformNavBar } from './modules/navigation/platformNavBar/PlatformNavBar'
+import { InfoBanner } from './modules/notification/InfoBanner'
 import { LoadingPage } from './pages/loading'
 import { dimensions, ID } from './shared/constants'
 import { useLayoutAnimation } from './shared/hooks'
@@ -66,6 +67,7 @@ export const AppLayout = () => {
             >
               <Outlet />
             </Box>
+            <InfoBanner />
           </Box>
         </Box>
       </PullToRefresh>

diff --git a/src/api/airtable.ts b/src/api/airtable.ts
@@ -11,3 +11,13 @@ export const fetchFeaturedProject = async () => {
     },
   }).then((response) => response.json())
 }
+
+export const fetchInfoBannerData = async () => {
+  return fetch(`${AIRTABLE_API}/Info%20Banner?view=Grid%20view`, {
+    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${VITE_APP_AIR_TABLE_KEY}`,
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.json())
+}
diff --git a/src/modules/notification/InfoBanner.tsx b/src/modules/notification/InfoBanner.tsx
@@ -0,0 +1,105 @@
+import { Box, HStack, IconButton, Link, VStack } from '@chakra-ui/react'
+import { useAtom } from 'jotai'
+import { useEffect, useState } from 'react'
+import { PiX } from 'react-icons/pi'
+
+import { fetchInfoBannerData } from '@/api/airtable'
+import { GeyserLogoIcon } from '@/components/icons/svg/GeyserLogoIcon'
+import { CardLayout } from '@/shared/components/layouts'
+import { Body } from '@/shared/components/typography'
+import { lightModeColors } from '@/shared/styles'
+
+import { InfoBannerHistoryDataAtom } from './InfoBannerAtom'
+
+type AirtableInfoBannerData = {
+  id: string
+  title: string
+  description: string
+  link: string
+  linkText: string
+}
+
+export const InfoBanner = () => {
+  const [infoBannerHistoryData, setInfoBannerHistoryData] = useAtom(InfoBannerHistoryDataAtom)
+
+  const [loading, setLoading] = useState(true)
+
+  const [data, setData] = useState<AirtableInfoBannerData>()
+
+  useEffect(() => {
+    const fetchFeatured = async () => {
+      try {
+        const response = await fetchInfoBannerData()
+
+        const records = response?.records || []
+
+        if (records.length > 0) {
+          const recordLength = records.length
+          const data = records[recordLength - 1]?.fields
+          if (data) {
+            setData(data)
+          }
+        }
+      } catch (error) {}
+
+      setLoading(false)
+    }
+
+    fetchFeatured()
+  }, [])
+
+  const available = data && !infoBannerHistoryData.includes(data.id)
+
+  if (loading || !available) {
+    return null
+  }
+
+  const handleInfoBannerHistoryData = () => {
+    if (data) {
+      setInfoBannerHistoryData((current) => {
+        return [...current, data.id]
+      })
+    }
+  }
+
+  return (
+    <Box position="fixed" bottom={20} left={{ base: 0, lg: 10 }} zIndex={10} paddingX={{ base: '10px', lg: 'unset' }}>
+      <CardLayout
+        background={'linear-gradient(85deg, #C4FFF4 0%, #FFFBE7 100%), var(--Colors-Default-White, #FFF)'}
+        padding={5}
+        position={'relative'}
+        width={{ base: '100%', lg: '320px' }}
+        borderRadius={'12px'}
+      >
+        <IconButton
+          position="absolute"
+          top={2}
+          right={2}
+          variant="ghost"
+          aria-label="close"
+          icon={<PiX />}
+          color={lightModeColors.neutral1[11]}
+          _hover={{ background: lightModeColors.neutral1[3] }}
+          onClick={handleInfoBannerHistoryData}
+        />
+
+        <VStack w="full">
+          <HStack w="full" alignItems={'center'}>
+            <GeyserLogoIcon color={lightModeColors.neutral1[11]} />
+            <Body size="lg" medium color={lightModeColors.neutral1[11]}>
+              {data?.title}
+            </Body>
+          </HStack>
+          <Body size="sm" color={lightModeColors.utils.text}>
+            {data?.description}{' '}
+            <Body as="span" color={lightModeColors.primary1[11]} onClick={handleInfoBannerHistoryData}>
+              <Link isExternal href={data?.link} textDecoration={'underline'}>
+                {data?.linkText}
+              </Link>
+            </Body>
+          </Body>
+        </VStack>
+      </CardLayout>
+    </Box>
+  )
+}
diff --git a/src/modules/notification/InfoBannerAtom.ts b/src/modules/notification/InfoBannerAtom.ts
@@ -0,0 +1,7 @@
+import { atomWithStorage } from 'jotai/utils'
+
+export const InfoBannerLocalStorageKey = 'infoBannerData'
+
+export type InfoBannerHistoryDataType = string[]
+
+export const InfoBannerHistoryDataAtom = atomWithStorage<InfoBannerHistoryDataType>(InfoBannerLocalStorageKey, [])