From 7d33a4324a60f3ebff0eb86322eedda2e05ffc0d Mon Sep 17 00:00:00 2001
From: Justin Xue <67207128+jxmoose@users.noreply.github.com>
Date: Sat, 9 Nov 2024 20:13:08 -0800
Subject: [PATCH] Justinxue/bre 21 implement dynamic routing for event
 descriptions (#19)

---
 api/supabase/queries/events.ts                |  14 ++
 api/supabase/queries/facilities.ts            |  15 ++
 app/discover/[event_id]/page.tsx              | 130 +++++++++++++++++
 app/discover/[event_id]/styles.ts             | 138 ++++++++++++++++++
 app/{activeEvents => discover}/page.tsx       |   3 +-
 app/{activeEvents => discover}/styles.ts      |   0
 .../EventListingCard/EventListingCard.tsx     |   9 +-
 public/images/help.svg                        |   5 +
 public/images/location_pin.svg                |   8 +
 public/images/star.svg                        |   5 +
 styles/colors.ts                              |   1 +
 11 files changed, 326 insertions(+), 2 deletions(-)
 create mode 100644 api/supabase/queries/facilities.ts
 create mode 100644 app/discover/[event_id]/page.tsx
 create mode 100644 app/discover/[event_id]/styles.ts
 rename app/{activeEvents => discover}/page.tsx (95%)
 rename app/{activeEvents => discover}/styles.ts (100%)
 create mode 100644 public/images/help.svg
 create mode 100644 public/images/location_pin.svg
 create mode 100644 public/images/star.svg

diff --git a/api/supabase/queries/events.ts b/api/supabase/queries/events.ts
index adad031..c2dafef 100644
--- 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
new file mode 100644
index 0000000..5a279c2
--- /dev/null
+++ 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
new file mode 100644
index 0000000..2546e86
--- /dev/null
+++ 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
new file mode 100644
index 0000000..64f654f
--- /dev/null
+++ 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 b/app/discover/page.tsx
similarity index 95%
rename from app/activeEvents/page.tsx
rename to app/discover/page.tsx
index 3f8f6d3..e8db2a8 100644
--- a/app/activeEvents/page.tsx
+++ b/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 b/app/discover/styles.ts
similarity index 100%
rename from app/activeEvents/styles.ts
rename to app/discover/styles.ts
diff --git a/components/EventListingCard/EventListingCard.tsx b/components/EventListingCard/EventListingCard.tsx
index 7a6445d..e00349e 100644
--- 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
new file mode 100644
index 0000000..3fa36b6
--- /dev/null
+++ b/public/images/help.svg
@@ -0,0 +1,5 @@
+<svg width="34" height="35" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<path id="Vector" d="M18.948 31.4189C19.2077 31.4898 19.509 31.5195 19.8518 31.5082C20.1947 31.4968 20.4837 31.4435 20.7188 31.3481L31.1667 27.4168C31.1667 26.6141 30.8834 25.9411 30.3167 25.3981C29.7501 24.855 29.089 24.5835 28.3334 24.5835H18.6292C18.5584 24.5835 18.4758 24.5778 18.3813 24.5665C18.2869 24.5552 18.2161 24.5372 18.1688 24.5127L16.0792 23.7689C15.8904 23.6981 15.7605 23.58 15.6897 23.4147C15.6188 23.2495 15.607 23.0724 15.6542 22.8835C15.7015 22.7182 15.8195 22.5884 16.0084 22.4939C16.1973 22.3995 16.3862 22.3877 16.5751 22.4585L18.1688 23.0606C18.2633 23.1078 18.3402 23.1376 18.3997 23.1498C18.4592 23.1621 18.5476 23.1678 18.6647 23.1668H22.3834C22.832 23.1668 23.2273 23.0134 23.5692 22.7064C23.9111 22.3995 24.0825 21.9981 24.0834 21.5022C24.0834 21.1717 23.9828 20.8529 23.7817 20.546C23.5805 20.2391 23.3151 20.0266 22.9855 19.9085L13.1751 16.2606C13.0098 16.2134 12.8445 16.1718 12.6792 16.1359C12.514 16.1 12.3487 16.0826 12.1834 16.0835H9.91675V28.8689L18.948 31.4189ZM1.41675 28.8335C1.41675 29.6127 1.69441 30.2799 2.24975 30.8353C2.80508 31.3906 3.47186 31.6678 4.25008 31.6668C5.0283 31.6659 5.69555 31.3887 6.25183 30.8353C6.80811 30.2818 7.0853 29.6146 7.08342 28.8335V18.9168C7.08342 18.1377 6.80622 17.4709 6.25183 16.9165C5.69744 16.3621 5.03019 16.0844 4.25008 16.0835C3.46997 16.0826 2.80319 16.3602 2.24975 16.9165C1.6963 17.4728 1.41864 18.1396 1.41675 18.9168V28.8335ZM22.6667 17.7835C22.3126 17.7835 21.9646 17.7188 21.6227 17.5894C21.2808 17.46 20.9677 17.265 20.6834 17.0043L16.7876 13.1793C16.0556 12.471 15.4361 11.6862 14.9289 10.8248C14.4217 9.9635 14.1677 9.02472 14.1667 8.0085C14.1667 6.70989 14.6215 5.60631 15.531 4.69775C16.4405 3.78919 17.5441 3.33444 18.8417 3.3335C19.5973 3.3335 20.3056 3.49311 20.9667 3.81233C21.6279 4.13156 22.1945 4.56222 22.6667 5.10433C23.139 4.56128 23.7056 4.13014 24.3668 3.81092C25.0279 3.49169 25.7362 3.33256 26.4918 3.3335C27.7904 3.3335 28.8944 3.78825 29.8039 4.69775C30.7134 5.60725 31.1677 6.71083 31.1667 8.0085C31.1667 9.02378 30.9188 9.96256 30.423 10.8248C29.9272 11.6871 29.3133 12.4719 28.5813 13.1793L24.6501 17.0043C24.3667 17.2641 24.0541 17.4591 23.7122 17.5894C23.3704 17.7197 23.0219 17.7844 22.6667 17.7835Z" fill="black"/>
+</g>
+</svg>
diff --git a/public/images/location_pin.svg b/public/images/location_pin.svg
new file mode 100644
index 0000000..031656b
--- /dev/null
+++ b/public/images/location_pin.svg
@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="gg:pin">
+<g id="Group">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M8.13599 5.13599C8.13599 5.66642 7.92527 6.17513 7.5502 6.5502C7.17513 6.92527 6.66642 7.13599 6.13599 7.13599C5.60555 7.13599 5.09685 6.92527 4.72177 6.5502C4.3467 6.17513 4.13599 5.66642 4.13599 5.13599C4.13599 4.60555 4.3467 4.09685 4.72177 3.72177C5.09685 3.3467 5.60555 3.13599 6.13599 3.13599C6.66642 3.13599 7.17513 3.3467 7.5502 3.72177C7.92527 4.09685 8.13599 4.60555 8.13599 5.13599ZM7.13599 5.13599C7.13599 5.4012 7.03063 5.65556 6.84309 5.84309C6.65556 6.03063 6.4012 6.13599 6.13599 6.13599C5.87077 6.13599 5.61642 6.03063 5.42888 5.84309C5.24134 5.65556 5.13599 5.4012 5.13599 5.13599C5.13599 4.87077 5.24134 4.61642 5.42888 4.42888C5.61642 4.24134 5.87077 4.13599 6.13599 4.13599C6.4012 4.13599 6.65556 4.24134 6.84309 4.42888C7.03063 4.61642 7.13599 4.87077 7.13599 5.13599Z" fill="#6D6D6D"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M2.897 8.25905C2.25242 7.64533 1.8043 6.85426 1.60932 5.98586C1.41433 5.11746 1.48124 4.21074 1.80157 3.38037C2.12191 2.55 2.68128 1.83326 3.40896 1.3208C4.13664 0.80834 4.99994 0.52317 5.88969 0.501353C6.77944 0.479535 7.65568 0.722051 8.4076 1.19823C9.15953 1.67441 9.75336 2.36287 10.114 3.17655C10.4746 3.99022 10.5859 4.89257 10.4337 5.76948C10.2815 6.64639 9.87273 7.45848 9.259 8.10305L6.156 11.3621L2.897 8.25905ZM8.535 7.41355L6.1215 9.94855L3.5865 7.53505C3.08519 7.05771 2.73667 6.44244 2.58503 5.76704C2.43338 5.09163 2.48542 4.38643 2.73456 3.74059C2.9837 3.09476 3.41875 2.53731 3.9847 2.13873C4.55065 1.74015 5.22209 1.51834 5.9141 1.50135C6.60611 1.48436 7.28762 1.67295 7.87245 2.04327C8.45728 2.4136 8.91917 2.94903 9.1997 3.58186C9.48024 4.21468 9.56682 4.91648 9.4485 5.59852C9.33019 6.28055 9.01229 6.91219 8.535 7.41355Z" fill="#6D6D6D"/>
+</g>
+</g>
+</svg>
diff --git a/public/images/star.svg b/public/images/star.svg
new file mode 100644
index 0000000..fc8af3f
--- /dev/null
+++ b/public/images/star.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<path id="Vector" d="M12.9668 8.1615C14.7617 4.94283 15.6584 3.3335 17 3.3335C18.3416 3.3335 19.2383 4.94283 21.0333 8.1615L21.4979 8.9945C22.0079 9.90966 22.2629 10.3672 22.6596 10.669C23.0563 10.9707 23.5521 11.0827 24.5438 11.3065L25.4448 11.5105C28.9298 12.2996 30.6708 12.6934 31.0859 14.0265C31.4996 15.3582 30.3124 16.7479 27.9367 19.526L27.3218 20.2442C26.6475 21.0333 26.3089 21.4286 26.1573 21.9159C26.0058 22.4047 26.0568 22.9317 26.1588 23.9842L26.2523 24.9433C26.6107 28.6507 26.7906 30.5037 25.7054 31.3268C24.6203 32.1499 22.9883 31.3991 19.7271 29.8974L18.8813 29.5092C17.9548 29.0814 17.4916 28.8689 17 28.8689C16.5084 28.8689 16.0452 29.0814 15.1187 29.5092L14.2743 29.8974C11.0118 31.3991 9.37976 32.1499 8.29601 31.3282C7.20942 30.5037 7.38934 28.6507 7.74776 24.9433L7.84126 23.9857C7.94326 22.9317 7.99426 22.4047 7.84126 21.9173C7.69109 21.4286 7.35251 21.0333 6.67817 20.2457L6.06334 19.526C3.68759 16.7493 2.50042 15.3596 2.91409 14.0265C3.32776 12.6934 5.07167 12.2982 8.55667 11.5105L9.45767 11.3065C10.4479 11.0827 10.9423 10.9707 11.3404 10.669C11.7385 10.3672 11.9921 9.90966 12.5021 8.9945L12.9668 8.1615Z" fill="black"/>
+</g>
+</svg>
diff --git a/styles/colors.ts b/styles/colors.ts
index 0ff646a..2db355e 100644
--- a/styles/colors.ts
+++ b/styles/colors.ts
@@ -39,6 +39,7 @@ const COLORS = {
   gray12: '#202020',
 
   pomegranate: '#342A2F',
+  lilac: '#D0D4EE',
 };
 
 export default COLORS;