Justinxue/bre 21 implement dynamic routing for event descriptions (#19)

calblueprint · Nov 10, 2024 · 7d33a43 · 7d33a43
1 parent 3296bd8
commit 7d33a43
Show file tree

Hide file tree

Showing 11 changed files with 326 additions and 2 deletions.
diff --git a/api/supabase/queries/events.ts b/api/supabase/queries/events.ts
@@ -52,3 +52,17 @@ export async function fetchAllActiveEvents() {
 
   return data;
 }
+
+// fetches an event by its event_id
+export async function fetchEventById(event_id: string) {
+  const { data, error } = await supabase
+    .from('events')
+    .select('*')
+    .eq('event_id', event_id)
+    .single();
+  if (error) {
+    throw new Error(error.message);
+  }
+
+  return data;
+}
diff --git a/api/supabase/queries/facilities.ts b/api/supabase/queries/facilities.ts
@@ -0,0 +1,15 @@
+import supabase from '../createClient';
+
+// fetches an event by its event_id
+export async function fetchFacilityById(facility_id: string) {
+  const { data, error } = await supabase
+    .from('facilities')
+    .select('*')
+    .eq('facility_id', facility_id)
+    .single();
+  if (error) {
+    throw new Error(error.message);
+  }
+
+  return data;
+}
diff --git a/app/discover/[event_id]/page.tsx b/app/discover/[event_id]/page.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { fetchEventById } from '@/api/supabase/queries/events';
+import { fetchFacilityById } from '@/api/supabase/queries/facilities';
+import Back from '@/public/images/back.svg';
+import LocationPin from '@/public/images/location_pin.svg';
+import COLORS from '@/styles/colors';
+import { SMALL } from '@/styles/text';
+import { Event, Facilities } from '@/types/schema';
+import {
+  About,
+  AboutText,
+  BackButton,
+  Body,
+  Bullet,
+  Container,
+  FacilityName,
+  HostWarningTitle,
+  Image,
+  IndividualTag,
+  InterestBlock,
+  InterestTitle,
+  Location,
+  Select,
+  ShowInterest,
+  SignUp,
+  TagDiv,
+  TextWithIcon,
+  Time,
+  Title,
+} from './styles';
+
+function InterestBlockGen(title: string, about: string, icon: string) {
+  return (
+    <InterestBlock>
+      {' '}
+      <Select />
+      <TextWithIcon>
+        <div>
+          <InterestTitle $fontWeight="500"> {title}</InterestTitle>
+          <SMALL $color="#515151"> {about} </SMALL>
+        </div>
+        <Image src={icon} alt="Icon" width={0} height={0}></Image>
+      </TextWithIcon>
+    </InterestBlock>
+  );
+}
+
+export default function EventPage({
+  params,
+}: {
+  params: { event_id: string };
+}) {
+  const [event, setEvent] = useState<Event>();
+  const [facility, setFacility] = useState<Facilities>();
+
+  useEffect(() => {
+    const getEvent = async () => {
+      const fetchedEvent: Event = await fetchEventById(params.event_id);
+      setEvent(fetchedEvent);
+      const fetchedFacility: Facilities = await fetchFacilityById(
+        fetchedEvent.facility_id,
+      );
+      setFacility(fetchedFacility);
+    };
+    getEvent();
+  }, [params.event_id]);
+
+  const router = useRouter();
+  return (
+    <Container>
+      <BackButton type="button" onClick={() => router.back()}>
+        <Image src={Back} alt="Back icon" />
+      </BackButton>
+      <Body>
+        <Title> Classics for Seniors </Title>
+        <Time> September 12, 9-10 PM </Time>
+        <Location>
+          {' '}
+          <Image src={LocationPin} alt="Location"></Image> 1411 E 31st St,
+          Oakland, CA{' '}
+        </Location>
+        {event && (
+          <TagDiv>
+            {event?.needs_host && (
+              <IndividualTag $bgColor={COLORS.rose6}>Host Needed</IndividualTag>
+            )}
+            <IndividualTag $bgColor={COLORS.bread6}>
+              {event?.performance_type}
+            </IndividualTag>
+            <IndividualTag $bgColor={COLORS.lilac}>
+              {event?.genre}
+            </IndividualTag>
+          </TagDiv>
+        )}
+        <About> About </About>
+        <AboutText>
+          Lorem ipsum dolor sit amet consectetur. Arcu neque neque diam tortor
+          amet. Eget quam sit eu nisl fermentum ac ipsum morbi. Gravida
+          convallis molestie purus eros magna tempus fermentum. Habitant
+          sollicitudin fames mi parturient faucibus odio non habitant diam.
+        </AboutText>
+        <FacilityName> {facility?.name} </FacilityName>
+        <Bullet>Prefer Orchestra</Bullet>
+        {event?.needs_host ? (
+          <div>
+            <HostWarningTitle> Bread & Roses Presents </HostWarningTitle>
+            <Bullet>Host should be able to carry 15lbs of equipment</Bullet>
+          </div>
+        ) : (
+          ''
+        )}
+        <ShowInterest> Show Interest </ShowInterest>
+        {InterestBlockGen(
+          'To Perform',
+          'Be the star of the show!',
+          '/images/star.svg',
+        )}
+        {InterestBlockGen(
+          'To Host',
+          'Help setup the show!',
+          '/images/help.svg',
+        )}
+        <SignUp> Sign up</SignUp>
+      </Body>
+    </Container>
+  );
+}
diff --git a/app/discover/[event_id]/styles.ts b/app/discover/[event_id]/styles.ts
@@ -0,0 +1,138 @@
+'use client';
+
+import NextImage from 'next/image';
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+import { H3, H5, P, SMALL } from '@/styles/text';
+
+interface TagProps {
+  $bgColor?: string;
+}
+
+export const Container = styled.div`
+  margin-left: 1rem;
+  margin-right: 1rem;
+  margin-top: 1rem;
+`;
+
+export const Body = styled.div`
+  margin-left: 1rem;
+  margin-right: 1rem;
+`;
+
+export const Image = styled(NextImage)`
+  width: 20px;
+  height: 20px;
+  margin-bottom: -2px;
+`;
+
+export const BackButton = styled.button`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+`;
+
+export const Title = styled(H3)`
+  font-weight: 500;
+  margin-top: 1.5rem;
+`;
+
+export const Time = styled(P)`
+  margin-top: 0.875rem;
+`;
+
+export const Location = styled(SMALL)`
+  color: ${COLORS.gray10};
+  margin-top: 0.375rem;
+`;
+
+export const IndividualTag = styled.span<TagProps>`
+  background-color: ${({ $bgColor }) => $bgColor || 'gray'};
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  padding: 0.25rem 0.5rem;
+`;
+
+export const TagDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: 1rem;
+  gap: 0.25rem;
+`;
+
+export const About = styled(H5)`
+  margin-top: 2.375rem;
+  font-weight: 500;
+`;
+
+export const AboutText = styled(P)`
+  margin-top: 0.5rem;
+  font-weight: 400;
+`;
+
+export const HostWarningTitle = styled(P)`
+  font-weight: 500;
+  margin-top: 1.875rem;
+`;
+
+export const Bullet = styled(P)`
+  display: list-item;
+  margin-top: 0.375rem;
+  margin-left: 1.5rem;
+`;
+
+export const FacilityName = styled(P)`
+  margin-top: 2.25rem;
+  font-weight: 500;
+`;
+
+export const ShowInterest = styled(H5)`
+  margin-top: 2.5rem;
+  font-weight: 500;
+  margin-bottom: 1.5rem;
+`;
+
+export const InterestBlock = styled.div`
+  padding: 0.75rem 1rem;
+  height: 4.5rem;
+  border: 1px solid ${COLORS.gray6};
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+`;
+
+export const Select = styled.div`
+  border-radius: 4px;
+  border: 2px solid ${COLORS.rose10};
+  width: 0.875rem;
+  height: 0.875rem;
+  line-height: 4.5rem;
+`;
+
+export const InterestTitle = styled(P)`
+  font-weight: 500;
+`;
+
+export const TextWithIcon = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 17.5rem;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const SignUp = styled.div`
+  background-color: black;
+  color: white;
+  padding: 0.5rem 1rem;
+  margin-left: auto;
+  border-radius: 8px;
+  width: 5.5rem;
+  height: 2.25rem;
+  margin-bottom: 10rem;
+`;
diff --git a/app/activeEvents/page.tsx → app/discover/page.tsx b/app/activeEvents/page.tsx → app/discover/page.tsx
@@ -29,7 +29,7 @@ function MenuBar() {
     </svg>
   );
 }
-export default function Page() {
+export default function ActiveEventsPage() {
   const [events, setEvents] = useState<Event[]>([]);
 
   useEffect(() => {
@@ -55,6 +55,7 @@ export default function Page() {
         {events.map(event => (
           <EventListingCard
             key={event.event_id}
+            id={event.event_id}
             performance_type={event.performance_type}
           />
         ))}

diff --git a/app/activeEvents/styles.ts → app/discover/styles.ts b/app/activeEvents/styles.ts → app/discover/styles.ts
diff --git a/components/EventListingCard/EventListingCard.tsx b/components/EventListingCard/EventListingCard.tsx
@@ -1,11 +1,18 @@
 import React from 'react';
+import Link from 'next/link';
 import { PerformanceType } from '@/types/schema';
 import { EventListing } from './styles';
 
 export default function EventListingCard({
   performance_type,
+  id,
 }: {
   performance_type: PerformanceType;
+  id: string;
 }) {
-  return <EventListing> {performance_type} </EventListing>;
+  return (
+    <Link href={`/discover/${id}`}>
+      <EventListing> {performance_type} </EventListing>
+    </Link>
+  );
 }
diff --git a/public/images/help.svg b/public/images/help.svg
diff --git a/public/images/location_pin.svg b/public/images/location_pin.svg
diff --git a/public/images/star.svg b/public/images/star.svg
diff --git a/styles/colors.ts b/styles/colors.ts
@@ -39,6 +39,7 @@ const COLORS = {
   gray12: '#202020',
 
   pomegranate: '#342A2F',
+  lilac: '#D0D4EE',
 };
 
 export default COLORS;