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', }; })