feat: rebuild Location page

Resolves #414

src/components/home/LocationCard.tsx

@@ -7,6 +7,7 @@ const LocationCardImage = ({ location }: { location: Location }) => {
       <Link
         to={location.locationURL}
         aria-label={`review page for ${location.name}`}
+        state={{ location }}
       >
         <img
           className="location-card__image"

src/components/location/LocationPage.tsx

@@ -0,0 +1,131 @@
+import { useLocation as useWindowLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import type { Location, Review } from '../../types/sparkeats';
+
+function LocationAddress({ location }: { location: Location }) {
+  return (
+    <>
+      <address className="review-overview__address">
+        <p>{location?.address}</p>
+      </address>
+      {location?.phone && (
+        <p>
+          <a className="review-overview__phone" href={`tel:${location?.phone}`}>
+            {location?.phone}
+          </a>
+        </p>
+      )}
+      {location?.url && (
+        <p>
+          <a className="location-card__url" href={`${location?.url}`}>
+            Visit Site
+          </a>
+        </p>
+      )}
+    </>
+  );
+}
+
+function LocationOverview({ location }: { location: Location }) {
+  return (
+    <section className="review-overview">
+      <header>
+        <h1 className="review-overview__title">
+          {location?.reviews.length !== 1
+            ? `${location.reviewCount} Reviews`
+            : `${location.reviewCount} Review`}
+        </h1>
+        <div className="review-overview__stars">Average Stars</div>
+      </header>
+      <LocationAddress location={location} />
+    </section>
+  );
+}
+function LocationReviews({
+  location,
+  reviews = [],
+}: {
+  location: Location;
+  reviews: Review[];
+}) {
+  return (
+    <div className="review-container">
+      {/* TODO Only add location if review matches account */}
+      <Link
+        className="button__full-width"
+        to={'/reviews/new'}
+        state={{ location }}
+      >
+        Add a review
+      </Link>
+
+      {reviews.map((review: Review) => (
+        <article key={review.id} className="review-submission">
+          <h3 className="review-submission__reviewer">{review.reviewerName}</h3>
+          <div className="review-submission__date">
+            {/* Created year/month/day*/}
+          </div>
+          <div
+            className="location-card__star-rating"
+            aria-label={`${review.starRating}`}
+          >
+            Stars
+          </div>
+          <h4 className="review-submission__title">Comments</h4>
+          <p className="review-submission__review">{review.text}</p>
+          {/* Refactor to not render a placeholder if there is no review image */}
+          {/* {review.imageURL && (
+            <div className="review-submission__image-container">
+              <img
+                className="review-submission__image"
+                src={review.imageURL}
+                alt={review.imageDescription}
+              />
+            </div>
+          )} */}
+        </article>
+      ))}
+    </div>
+  );
+}
+
+function LocationHeader({ location }: { location: Location }) {
+  return (
+    <div className="review-header">
+      <div className="review-header__title">
+        <h2 className="review-header__name">{location.name}</h2>
+        <p className="review-header__city">
+          {location.city}, {location.region}
+        </p>
+      </div>
+      <div className="review-header__backdrop"></div>
+    </div>
+  );
+}
+
+type LocationState = {
+  state: {
+    location: Location;
+  };
+};
+
+export function LocationPage() {
+  const {
+    state: { location },
+  } = useWindowLocation() as LocationState;
+
+  return (
+    <main className="review-page">
+      <div className="review-nav">
+        <Link className="review-nav__link" to={'/'}>
+          <span className="review-nav__svg"></span>
+          Back to home
+        </Link>
+      </div>
+      <LocationHeader location={location} />
+      <LocationReviews location={location} reviews={location.reviews} />
+      {/* TODO rename to LocationDetails */}
+      <LocationOverview location={location} />
+    </main>
+  );
+}

src/locations.ts

@@ -107,6 +107,8 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Location[] {
       placeImage: imageID,
       placeImageAlt,
     }) => {
+      const reviews = getReviews(id);
+
       return {
         id,
         name,
@@ -119,7 +121,8 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Location[] {
         locationURL: getLocationURL(id),
         imageURL: getImageURL('img/locations/', imageID, legacyPlaceImages),
         imageDescription: getImageDescription(placeImageAlt),
-        reviews: getReviews(id),
+        reviews,
+        reviewCount: reviews.length,
       };
     }
   );

src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { App } from './App';
 import { HomePage } from './components/home/HomePage';
+import { LocationPage } from './components/location/LocationPage';
 import { locations } from './locations';
 
 window.__SPARKEATS_VERSION__ = import.meta.env['VITE_SPARKEATS_VERSION'];
@@ -13,7 +14,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <Routes>
         <Route path="/" element={<App />}>
           <Route path="/" element={<HomePage locations={locations} />} />
-          <Route path="/locations/:id" element={<div>Location Page</div>} />
+          <Route path="/locations/:id" element={<LocationPage />} />
           <Route path="/locations/new" element={<div>New Location Page</div>} />
           <Route path="/reviews/new" element={<div>New Review Page</div>} />
         </Route>

src/scss/components/_review-header.scss

@@ -1,6 +1,6 @@
 .review-header {
   height: 22.25rem;
-  background: url('./img/review-header_bg.svg') no-repeat;
+  background: url('/img/review-header_bg.svg') no-repeat;
   background-size: cover;
   position: relative;
 
@@ -26,7 +26,7 @@
     padding: 1rem;
     position: absolute;
     background: $secondary-color;
-    background: url('./img/background-img.png');
+    background: url('/img/background-img.png');
     border: 0.0625rem solid $primary-color;
     bottom: 1rem;
     left: 1rem;

src/scss/components/_review-nav.scss

@@ -5,7 +5,7 @@
   &__svg {
     height: 0.9375rem;
     width: 1rem;
-    background: url('./img/review-header_home-arrow.svg') no-repeat;
+    background: url('/img/review-header_home-arrow.svg') no-repeat;
     display: inline-block;
   }
 

src/scss/components/_review-overview.scss

@@ -6,7 +6,7 @@
   justify-content: space-between;
   flex-direction: column;
   background: $secondary-color;
-  background: url('./img/background-img.png');
+  background: url('/img/background-img.png');
   border: 1px solid $primary-color;
   box-shadow: 2px 4px 28px rgba(0 0 0 / 8%);
   padding: 3rem 3rem 1rem;

src/scss/elements/_body.scss

@@ -1,6 +1,6 @@
 body {
   font-family: $roboto-condensed-stack;
   color: $primary-color;
-  background: url('./img/background-img.png');
+  background: url('/img/background-img.png');
   background-blend-mode: darken;
 }

src/scss/objects/_review-page.scss

@@ -14,11 +14,12 @@
     @supports (display: grid) {
       display: grid;
       grid-column-gap: 2rem;
-      grid-template:
-        'nav . .' auto
-        'header header header' auto
-        'review review overview' auto
-        / repeat(3, 1fr);
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: auto;
+      grid-template-areas:
+        'nav . .'
+        'header header header'
+        'review review overview';
     }
 
     @media (min-width: $bp-full-size-desktop) {

src/types/global.d.ts

@@ -4,4 +4,6 @@ declare global {
   interface Window {
     __SPARKEATS_VERSION__: string;
   }
+
+  type WindowLocation = Location;
 }

src/types/sparkeats.ts

@@ -11,6 +11,7 @@ export type Location = {
   imageURL: string;
   imageDescription: string;
   reviews: Review[];
+  reviewCount: number;
 };
 
 export type Review = {