Fetch event types

src/contexts/database/DatabaseContext.ts

@@ -1,22 +1,28 @@
 import { createContext } from 'react'
-import { AttendedEvents, Event, IdToEventMap } from './types'
+import { AttendedEvents, Event, IdToEventMap, Requirement } from './types'
 
 interface DatabaseContextValue {
   attendedEvents: AttendedEvents[]
   events: IdToEventMap
+  allEvents: Event[]
+  requirements: Requirement[]
   jwt: string | null
   onAttendEvent: (eventId: string) => void
   onCreateUser: (name: string, email: string) => void
   onLogInUser: () => void
+  onFetchAllEvents: () => void
 }
 
 const DatabaseContext = createContext<DatabaseContextValue>({
   attendedEvents: [],
   events: {},
+  allEvents: [],
+  requirements: [],
   jwt: '',
   onAttendEvent: () => {},
   onCreateUser: () => {},
   onLogInUser: () => {},
+  onFetchAllEvents: () => {},
 })
 
 export default DatabaseContext

src/contexts/database/DatabaseProvider.tsx

@@ -1,17 +1,18 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { useAccount, useSignMessage } from 'wagmi'
 import { useNavigate } from 'react-router-dom'
+import { useAccount, useSignMessage } from 'wagmi'
 
+import { useToast } from '@chakra-ui/react'
 import DatabaseContext from './DatabaseContext'
 import {
   AttendedEvents,
   AttendEventRequest,
   CreateUserRequest,
   Event,
   IdToEventMap,
+  Requirement,
 } from './types'
-import { useToast } from '@chakra-ui/react'
 
 interface Props {
   children: React.ReactNode
@@ -24,6 +25,9 @@ const DatabaseProvider: React.FC<Props> = ({ children }) => {
   const navigate = useNavigate()
   const [attendedEvents, setAttendedEvents] = useState<AttendedEvents[]>([])
   const [events, setEvents] = useState<IdToEventMap>({})
+  const [allEvents, setAllEvents] = useState<Event[]>([])
+  const [requirements, setRequirements] = useState<Requirement[]>([])
+
   const [jwt, setJWT] = useState('')
   const [nonce, setNonce] = useState(-1)
   const [message, setMessage] = useState('')
@@ -135,7 +139,7 @@ const DatabaseProvider: React.FC<Props> = ({ children }) => {
     } catch (err: any) {
       setError(err.message as string)
     }
-  }, [address, signMessageAsync, message])
+  }, [nonce, signMessageAsync, address])
 
   const handleFetchAttendedEvents = useCallback(async () => {
     const res = await fetch(`${BASE_URL}/user/events?address=${address}`).then(
@@ -157,6 +161,24 @@ const DatabaseProvider: React.FC<Props> = ({ children }) => {
     setEvents(res)
   }, [])
 
+  const handleFetchAllEvents = useCallback(async () => {
+    const res = await fetch(`${BASE_URL}/event`)
+      .then((res) => res.json())
+      .then((res) => res as Event[])
+    setAllEvents(res)
+  }, [])
+
+  const handleFetchRequirements = useCallback(async () => {
+    const res = await fetch(`${BASE_URL}/requirement`)
+      .then((res) => res.json())
+      .then((res) => res as Requirement[])
+    setRequirements(res)
+  }, [])
+
+  useEffect(() => {
+    handleFetchAllEvents()
+  }, [handleFetchAllEvents])
+
   useEffect(() => {
     handleFetchAttendedEvents()
   }, [handleFetchAttendedEvents])
@@ -169,6 +191,10 @@ const DatabaseProvider: React.FC<Props> = ({ children }) => {
     handleLogInUser()
   }, [handleLogInUser, nonce])
 
+  useEffect(() => {
+    handleFetchRequirements()
+  }, [handleFetchRequirements])
+
   useEffect(() => {
     setMessage(`I am signing my one-time nonce: ${nonce}`)
   }, [nonce])
@@ -189,10 +215,13 @@ const DatabaseProvider: React.FC<Props> = ({ children }) => {
       value={{
         attendedEvents,
         events,
+        allEvents,
+        requirements,
         jwt,
         onAttendEvent: handleAttendEvent,
         onCreateUser: handleCreateUser,
         onLogInUser: handleLogInUser,
+        onFetchAllEvents: handleFetchAllEvents,
       }}
     >
       {children}

src/contexts/database/types.ts

@@ -1,3 +1,9 @@
+export interface Requirement {
+  _id: string
+  type: 'clubcensus' | 'external' | 'allhands'
+  amount: string
+}
+
 export interface AttendedEvents {
   endTimestamp: number
   imageUrl: string

src/views/Dashboard/components/NftGallery.tsx

@@ -62,7 +62,11 @@ const NftGallery: React.FC<Props> = ({ account }) => {
     <Box overflowX="auto" whiteSpace="nowrap">
       <HStack spacing="25px">
         {Object.values(metadata).map((metadata) => (
-          <Image src={metadata.image || fallbackUrl} alt={metadata.name} />
+          <Image
+            key={metadata.image}
+            src={metadata.image || fallbackUrl}
+            alt={metadata.name}
+          />
         ))}
       </HStack>
     </Box>

src/views/Dashboard/components/ProgressBox.tsx

@@ -24,7 +24,9 @@ const ProgressBox: React.FC<Props> = ({ current, max, title }) => {
       width="168px"
       flex={1}
     >
-      <Text fontWeight="bold">{title}</Text>
+      <Text fontWeight="bold" textTransform="capitalize">
+        {title}
+      </Text>
       <CircularProgress
         capIsRound
         color="merkleMango.200"

src/views/Dashboard/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Progress, Stack, Text } from '@chakra-ui/react'
+import { Box, Flex, Text } from '@chakra-ui/react'
 
 import useDatabase from 'contexts/database/useDatabase'
 import { useAccount } from 'wagmi'
@@ -7,42 +7,24 @@ import ProgressBox from './components/ProgressBox'
 
 const Dashboard = () => {
   const { address } = useAccount()
-  const { attendedEvents, events } = useDatabase()
-
-  const attendedEventsNames: string[] = []
-  // for (let i = 0; i < attendedEvents.length; i++) {
-  //   for (let j = 0; j < events.length; j++) {
-  //     if (attendedEvents[i]['_id'] === events[j]['_id']) {
-  //       attendedEventsNames.push(events[j]['name'])
-  //     }
-  //   }
-  // }
+  // TODO: need attended events
+  const {} = useDatabase()
+  const { requirements } = useDatabase()
 
   return (
-    <Flex
-      flexDirection="column"
-      left="16px"
-      position="absolute"
-      right="16px"
-      sx={
-        {
-          // 'max-width': '100%',
-          // 'overflow-x': 'hidden',
-        }
-      }
-    >
+    <Flex flexDirection="column" left="16px" position="absolute" right="16px">
       <Box height="44px" />
       <Text fontSize="50px" fontWeight="bold">
         Membership
       </Text>
       <Flex flexWrap="wrap" gap="12px">
-        <ProgressBox current={3} max={10} title="Clubcensus" />
-        <ProgressBox current={3} max={5} title="Dept Meetings" />
-        <ProgressBox current={12} max={15} title="Socials" />
-      </Flex>
-      <Flex flexWrap="wrap" gap="12px">
-        {attendedEventsNames.map((event, id) => (
-          <ProgressBox current={3} max={10} title={event} />
+        {requirements.map((requirement) => (
+          <ProgressBox
+            current={3}
+            key={requirement._id}
+            max={10}
+            title={requirement.type}
+          />
         ))}
       </Flex>
       <Box height="72px" />