From 0f0f846a22d02ba05057ed448b6644e85f5b26ee Mon Sep 17 00:00:00 2001 From: Ashutosh Rath Date: Tue, 3 Oct 2023 22:27:03 +0530 Subject: [PATCH] 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> --- gatsby-browser.js | 2 +- gatsby-ssr.js | 2 +- src/components/EventCard/Card.jsx | 94 ++++++++++++ src/components/EventCard/styles.js | 141 ++++++++++++++++++ .../Registration/RegistrationForm.jsx | 5 +- src/pages/events.js | 15 ++ src/pages/playground.js | 34 ++++- src/utils/Api.js | 2 +- src/utils/Auth.jsx | 6 +- src/utils/useEvents.js | 17 +-- 10 files changed, 297 insertions(+), 21 deletions(-) create mode 100644 src/components/EventCard/Card.jsx create mode 100644 src/components/EventCard/styles.js create mode 100644 src/pages/events.js diff --git a/gatsby-browser.js b/gatsby-browser.js index 04e85ae..6e917ac 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -71,6 +71,6 @@ export const wrapPageElement = ({ element, props }) => ( export const wrapRootElement = ({ element }) => ( {element} - + ); diff --git a/gatsby-ssr.js b/gatsby-ssr.js index 608c0f5..1811dcf 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -70,6 +70,6 @@ export const wrapPageElement = ({ element, props }) => ( export const wrapRootElement = ({ element }) => ( {element} - + ); diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx new file mode 100644 index 0000000..5e0b1c1 --- /dev/null +++ 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 ( + + + + + + + + {date} {month} + + {time} + + {venue} + + + + {title} + {club} + + + + + + + + + + {title} + {club} + + + Prize - {prizes} + + {date} {month} + + {venue} + + + {description} + Contact: {contact?.join(', ')} + + + + + + + + ); +}; + +export default CardComponent; diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js new file mode 100644 index 0000000..1f50a55 --- /dev/null +++ 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 index fd129c0..f728d6f 100644 --- 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 new file mode 100644 index 0000000..54639eb --- /dev/null +++ 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 ( +
+

Events

+
+ ); +}; + +export default EventPage; diff --git a/src/pages/playground.js b/src/pages/playground.js index 62709a9..c4b9317 100644 --- 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 = () => ( Playground - + ); diff --git a/src/utils/Api.js b/src/utils/Api.js index 741ef40..83b5c05 100644 --- 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 index 8d8af02..86053c8 100644 --- 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 {children}; }; diff --git a/src/utils/useEvents.js b/src/utils/useEvents.js index c92f009..8bf2d6a 100644 --- a/src/utils/useEvents.js +++ b/src/utils/useEvents.js @@ -1,28 +1,26 @@ 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 @@ -30,8 +28,9 @@ const useEvents = (eventName) => { .toString() .padStart(2, '0')}`, description, + contact: event.contact, venue: 'LA', - prizes: name.prizeAmount, + prizes: event.prizeMoney, poster: event.poster ? event.poster : 'TODO://link', }; })