feat: add event card (#79)

* feat: add event card * feat: integrate real event * fix: add dummy event * fix: Update styles.js * fix: Update playground.js * fix: Update Card.jsx * fix: prettier issues * fix: Update Card.jsx * fix:minor changes * fix:minor changes --------- Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
dscnitrourkela · Oct 3, 2023 · 0f0f846 · 0f0f846
1 parent 353d54d
commit 0f0f846
Show file tree

Hide file tree

Showing 10 changed files with 297 additions and 21 deletions.
diff --git a/gatsby-browser.js b/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>
 );
diff --git a/gatsby-ssr.js b/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>
 );
diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx
@@ -0,0 +1,94 @@
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+import {
+  Back,
+  BackDescription,
+  Card,
+  CardButtonContainer,
+  CardContainer,
+  CardImage,
+  CardTextContainer,
+  CardTitleContainer,
+  Circle,
+  EventClub,
+  EventName,
+  EventRegisterButton,
+  EventTimeVenue,
+  Front,
+  KnowButton,
+} from './styles';
+import { Body2 } from '../shared';
+
+const CardComponent = ({
+  title,
+  club,
+  venue,
+  time,
+  date,
+  month,
+  prizes,
+  description,
+  contact,
+  poster,
+}) => {
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  const flipCard = () => {
+    setIsFlipped(!isFlipped);
+  };
+
+  const bringToFront = () => {
+    setIsFlipped(false);
+  };
+
+  return (
+    <CardContainer>
+      <Card style={{ transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0)' }}>
+        <Front>
+          <CardImage src={poster} alt={club} />
+          <CardTextContainer>
+            <CardTitleContainer>
+              <EventTimeVenue>
+                {date} {month}
+                <Circle />
+                {time}
+                <Circle />
+                {venue}
+              </EventTimeVenue>
+            </CardTitleContainer>
+            <CardTitleContainer>
+              <EventName>{title}</EventName>
+              <EventClub>{club}</EventClub>
+            </CardTitleContainer>
+          </CardTextContainer>
+          <CardButtonContainer>
+            <KnowButton text='Know More' onClick={flipCard} />
+            <EventRegisterButton variant='outline' text='Register For Event' />
+          </CardButtonContainer>
+        </Front>
+        <Back>
+          <CardTitleContainer>
+            <EventName style={{ marginTop: 0 }}>{title}</EventName>
+            <EventClub>{club}</EventClub>
+          </CardTitleContainer>
+          <CardTitleContainer style={{ paddingTop: '1.2rem' }}>
+            Prize - {prizes}
+            <EventTimeVenue style={{ paddingTop: '0.1rem' }}>
+              {date} {month}
+              <Circle />
+              {venue}
+            </EventTimeVenue>
+          </CardTitleContainer>
+          <BackDescription>{description}</BackDescription>
+          <Body2>Contact: {contact?.join(', ')}</Body2>
+          <CardButtonContainer>
+            <KnowButton text='Back' onClick={bringToFront} />
+            <EventRegisterButton variant='outline' text='Register For Event' />
+          </CardButtonContainer>
+        </Back>
+      </Card>
+    </CardContainer>
+  );
+};
+
+export default CardComponent;
diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js
@@ -0,0 +1,141 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+import { Heading4, Body2, CaptionText } from '../shared';
+import Button from '../shared/Button';
+
+export const CardImage = styled.img`
+  ${tw`
+    rounded-lg 
+  `};
+  width: 21.25rem;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  @media (max-width: 768px) {
+    width: 16.25;
+  }
+`;
+
+export const CardTextContainer = styled.div`
+  ${tw`
+    mt-4 
+    md:mt-3
+  `}
+`;
+
+export const CardTitleContainer = styled.div`
+  ${tw`
+    flex-col
+    items-center 
+    justify-between 
+    `}
+`;
+
+export const EventTimeVenue = styled(Body2)`
+  ${tw` flex items-center`}
+`;
+
+export const Circle = styled.div`
+  ${tw`
+    w-[5px]
+    h-[5px] 
+    mx-2
+    inline-block
+    bg-color-secondary
+    rounded-full
+  `}
+`;
+export const EventName = styled(Heading4)`
+  text-transform: none;
+  ${tw`
+    mt-4
+    truncate
+  `}
+
+  .dot {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+`;
+
+export const EventClub = styled(CaptionText)`
+  ${tw``}
+`;
+
+export const CardButtonContainer = styled.div`
+  ${tw`
+    flex 
+    mt-4
+    justify-between
+    `};
+`;
+
+export const KnowButton = styled(Button)`
+  ${tw`
+    px-0
+    py-1.5
+  `}
+`;
+
+export const EventRegisterButton = styled(Button)`
+  ${tw`
+    px-4
+    py-1.5
+  `}
+`;
+export const CardContainer = styled.div`
+  margin: auto;
+  width: 380px;
+  max-width: 400px;
+`;
+
+export const Card = styled.div`
+  width: min-content;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 0.6s;
+`;
+
+export const Front = styled.div`
+  position: absolute;
+  background-color: #2c2c2c;
+  width: 400px;
+  max-width: 328px;
+  backface-visibility: hidden;
+  ${tw`
+    h-auto
+    px-4
+    mx-auto
+    pt-4
+    pb-6
+    gap-4 
+    rounded-2xl
+    text-color-secondary
+  `};
+`;
+
+export const Back = styled.div`
+  width: 400px;
+  max-width: 328px;
+  background-color: #2c2c2c;
+  ${tw`
+    h-auto
+    px-4
+    mx-auto
+    pt-4
+    pb-6
+    gap-4 
+    rounded-2xl
+    text-color-secondary
+  `};
+  backface-visibility: hidden;
+  transform: rotateY(180deg);
+`;
+export const BackDescription = styled(Body2)`
+  color: #b9b9b9;
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 1rem 0 2rem 0;
+`;
diff --git a/src/components/Registration/RegistrationForm.jsx b/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();
 

diff --git a/src/pages/events.js b/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;
diff --git a/src/pages/playground.js b/src/pages/playground.js
@@ -1,8 +1,21 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable max-len */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { About } from '../components/shared';
-import AboutUs from '../../config/content/AboutUs';
+import CardComponent from '../components/EventCard/Card';
+
+const events = {
+  title: 'Game Of Thrones',
+  club: 'Knights Club',
+  venue: 'LA',
+  time: '10:00 AM',
+  date: '17',
+  month: 'July',
+  prizes: '7 karod',
+  description:
+    'Game of Thrones is a strategy board game created by Christian T. Petersen and released by Fantasy Flight Games in 2003. The game is based on the A Song of Ice and Fire fantasy series by George R. R. Martin. It was followed in 2004 by the expansion A Clash of Kings, and in 2006 by the expansion A Storm of Swords. A Game of Thrones allows the players to take on the roles of several of the Great Houses vying for control of the Seven Kingdoms, including House Stark, House Lannister, House Baratheon, House Greyjoy, House Tyrell, and a of the expansion A Clash of Kings, House Martell. Players maneuver armies to secure support in the various regions that comprise the Seven Kingdoms, with the goal of capturing enough support to claim the Iron Throne. The game is designed for three to six players, who each begin with control of one of the six Great Houses of Westeros. Randomly chosen neutral territories and land areas make up the remainder of the board.',
+  contact: ['Rashmi - 9848948949'],
+  poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png',
+};
 
 const Playground = () => (
   <>
@@ -11,7 +24,20 @@ const Playground = () => (
       <title>Playground</title>
       <meta name='description' content='This is playground' />
     </Helmet>
-    <About title={AboutUs.title} desc={AboutUs.desc} link={AboutUs.link} />
+    <CardComponent
+      key={events.id}
+      id={events.id}
+      title={events.title}
+      club={events.club}
+      venue={events.venue}
+      time={events.time}
+      date={events.date}
+      month={events.month}
+      prizes={events.prizes}
+      description={events.description}
+      contact={events.contact}
+      poster={events.poster}
+    />
   </>
 );
 

diff --git a/src/utils/Api.js b/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 },
     });
   }
 

diff --git a/src/utils/Auth.jsx b/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>;
 };