feat: integrate real event

gatsby-browser.js

@@ -71,6 +71,6 @@ export const wrapPageElement = ({ element, props }) => (
 export const wrapRootElement = ({ element }) => (
   <QueryClientProvider client={queryClient}>
     <AuthContextProvider>{element}</AuthContextProvider>
-    <ToastContainer />
+    <ToastContainer position='bottom-right' autoClose={5000} />
   </QueryClientProvider>
 );

gatsby-ssr.js

@@ -70,6 +70,6 @@ export const wrapPageElement = ({ element, props }) => (
 export const wrapRootElement = ({ element }) => (
   <QueryClientProvider client={queryClient}>
     <AuthContextProvider>{element}</AuthContextProvider>
-    <ToastContainer />
+    <ToastContainer position='bottom-right' autoClose={3000} />
   </QueryClientProvider>
 );

src/components/EventCard/Card.jsx

@@ -23,7 +23,7 @@ const CardComponent = ({
   title,
   club,
   venue,
-  // time,
+  time,
   date,
   month,
   // prizes,
@@ -51,6 +51,8 @@ const CardComponent = ({
               <EventTimeVenue>
                 {date} {month}
                 <Circle />
+                {time}
+                <Circle />
                 {venue}
               </EventTimeVenue>
             </CardTitleContainer>
@@ -77,10 +79,14 @@ const CardComponent = ({
               {venue}
             </EventTimeVenue>
           </CardTitleContainer>
-          <BackDescription style={{ marginTop: '3rem', marginBottom: '2rem', fontSize: '12px' }}>
-            {description}
-          </BackDescription>
-          <Body2>Contact: {contact.join(', ')}</Body2>
+          <ul className='list-none p-0 flex flex-col gap-2'>
+            {description?.map((desc) => (
+              <li key={desc.id}>
+                <BackDescription>{desc.desc}</BackDescription>
+              </li>
+            ))}
+          </ul>
+          <Body2>Contact: {contact?.join(', ')}</Body2>
           <CardButtonContainer>
             <KnowButton text='Back' onClick={bringToFront} />
             <EventRegisterButton variant='outline' text='Register For Event' />

src/components/EventCard/styles.js

@@ -26,7 +26,7 @@ export const CardTitleContainer = styled.div`
 `;
 
 export const EventTimeVenue = styled(Body2)`
-  ${tw`mr-2`}
+  ${tw` flex items-center`}
 `;
 
 export const Circle = styled.div`

src/components/Registration/RegistrationForm.jsx

@@ -13,10 +13,7 @@ export const RegistrationForm = () => {
   const { inputData, setInputValue, isNITR, setErrorMessage, verified, setIsNITR } =
     useContext(RegistrationContext);
 
-  const {
-    token,
-    userData: { uid },
-  } = useContext(AuthContext);
+  const { token, uid } = useContext(AuthContext);
 
   const api = Api.getInstance();
 

src/pages/events.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import useEvents from '../utils/useEvents';
+
+const EventPage = () => {
+  const { events } = useEvents('Technical');
+  console.log(events);
+
+  return (
+    <div>
+      <h1>Events</h1>
+    </div>
+  );
+};
+
+export default EventPage;

src/pages/playground.js

@@ -1,42 +1,34 @@
-/* eslint-disable max-len */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import CardComponent from '../components/EventCard/Card';
+import useEvents from '../utils/useEvents';
 
-const cardData = {
-  title: 'Game Of Thrones',
-  club: 'Knights Club',
-  venue: 'LA',
-  time: '10:00 AM',
-  date: '17',
-  month: 'July',
-  prizes: 'Cash prizes and trophies',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in rutrum metus. Pellentesque commodo ante neque, eu hendrerit lorem gravida et. Aliquam scelerisque...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in rutrum metus. Pellentesque commodo ante neque, eu hendrerit lorem gravida et. Aliquam scelerisque...',
-  contact: ['Rashmi - 9848948949'],
-  poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png',
+const Playground = () => {
+  const { events } = useEvents('technical');
+
+  return (
+    <>
+      <Helmet>
+        <meta charset='utf-8' />
+        <title>Playground</title>
+        <meta name='description' content='This is playground' />
+      </Helmet>
+      <CardComponent
+        key={events[0]?.id}
+        id={events[0]?.id}
+        title={events[0]?.title}
+        club={events[0]?.club}
+        venue={events[0]?.venue}
+        time={events[0]?.time}
+        date={events[0]?.date}
+        month={events[0]?.month}
+        prizes={events[0]?.prizes}
+        description={events[0]?.description}
+        contact={events[0]?.contact}
+        poster={events[0]?.poster}
+      />
+    </>
+  );
 };
-const Playground = () => (
-  <>
-    <Helmet>
-      <meta charset='utf-8' />
-      <title>Playground</title>
-      <meta name='description' content='This is playground' />
-    </Helmet>
-    <CardComponent
-      title={cardData.title}
-      club={cardData.club}
-      venue={cardData.venue}
-      time={cardData.time}
-      date={cardData.date}
-      month={cardData.month}
-      prizes={cardData.prizes}
-      description={cardData.description}
-      contact={cardData.contact}
-      poster={cardData.poster}
-    />
-  </>
-);
 
 export default Playground;

src/utils/Api.js

@@ -27,7 +27,7 @@ class Api {
 
   async getEvents(event) {
     return this.avenueApi.get('/events', {
-      params: { type: event, orgID: '65133eb72c5708eb84bf53d6' },
+      params: { type: event, orgID: process.env.GATSBY_ORG_ID },
     });
   }
 

src/utils/Auth.jsx

@@ -17,6 +17,7 @@ const defaultValues = {
   token: '',
   login: () => {},
   logout: () => {},
+  uid: '',
 };
 
 export const AuthContext = createContext(defaultValues);
@@ -26,6 +27,7 @@ const AuthContextProvider = ({ children }) => {
   const [userData, setUserData] = useState({});
   const [token, setToken] = useState('');
   const [loading, setLoading] = useState(true);
+  const [uid, setUid] = useState('');
 
   // Get the singleton instance of the API
   const api = Api.getInstance();
@@ -38,6 +40,7 @@ const AuthContextProvider = ({ children }) => {
         console.log(user.accessToken);
         setAuthenticated(true);
         setToken(user.accessToken);
+        setUid(user.uid);
 
         const avenueUser = await api.fetchUserDetails({
           uid: user.uid,
@@ -111,8 +114,9 @@ const AuthContextProvider = ({ children }) => {
       logout,
       setUserData,
       loading,
+      uid,
     };
-  }, [authenticated, token, userData, loading]);
+  }, [authenticated, token, userData, loading, uid]);
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };

src/utils/useEvents.js

@@ -1,37 +1,36 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { avenueApi } from './Api';
-
-const fetchEvents = (event) =>
-  avenueApi.get('/events', { params: { type: event, orgID: '640892e9f785cdd0afcd8ccf' } });
+import Api from './Api';
 
 const useEvents = (eventName) => {
+  const api = Api.getInstance();
+
   const { data, isLoading } = useQuery({
     queryKey: ['events', eventName],
-    queryFn: () => fetchEvents(eventName),
+    queryFn: () => api.getEvents(eventName),
   });
 
   const events = useMemo(
     () =>
       data?.data
         ?.map((event) => {
-          const name = JSON.parse(event.name);
           const description = JSON.parse(event.description);
           const date = new Date(event.startDate);
 
           return {
             id: event.id,
-            title: name.heading,
-            club: name.subHeading,
+            title: event.name,
+            club: event.subHeading,
             date: date.getDate(),
             month: date.toDateString().split(' ')[1],
             time: `${date.getHours().toString().padStart(2, '0')}:${date
               .getMinutes()
               .toString()
               .padStart(2, '0')}`,
             description,
+            contact: event.contact,
             venue: 'LA',
-            prizes: name.prizeAmount,
+            prizes: event.prizeMoney,
             poster: event.poster ? event.poster : 'TODO://link',
           };
         })