diff --git a/index.html b/index.html index 9fd09439..e3b22be2 100644 --- a/index.html +++ b/index.html @@ -14,63 +14,63 @@ - - - + + + { +
+

{location.name}

+

+ {location.city}, {location.region} +

+
+
+ + ); +} diff --git a/src/components/LocationPage/LocationOverview.tsx b/src/components/LocationPage/LocationOverview.tsx new file mode 100644 index 00000000..771b5dc1 --- /dev/null +++ b/src/components/LocationPage/LocationOverview.tsx @@ -0,0 +1,41 @@ +import { Location } from '../../types/sparkeats'; + +function LocationAddress({ location }: { location: Location }) { + return ( + <> +
+

{location?.address}

+
+ {location?.phone && ( +

+ + {location?.phone} + +

+ )} + {location?.url && ( +

+ + Visit Site + +

+ )} + + ); +} + +export function LocationOverview({ location }: { location: Location }) { + return ( +
+
+

+ {location?.reviews.length !== 1 + ? `${location.reviewCount} Reviews` + : `${location.reviewCount} Review`} +

+
Average Stars
+
+ +
+ ); +} diff --git a/src/components/LocationPage/LocationReviews.tsx b/src/components/LocationPage/LocationReviews.tsx new file mode 100644 index 00000000..d6dac5c8 --- /dev/null +++ b/src/components/LocationPage/LocationReviews.tsx @@ -0,0 +1,48 @@ +import { Link } from 'react-router-dom'; +import { Location, Review } from '../../types/sparkeats'; + +export function LocationReviews({ + location, + reviews = [], +}: { + location: Location; + reviews: Review[]; +}) { + return ( +
+ + Add a review + + + {reviews.map((review: Review) => ( +
+

{review.reviewerName}

+
+ {/* Created year/month/day*/} +
+
+ Stars +
+

Comments

+

{review.text}

+ {review.imageURL && ( +
+ {review.imageDescription} +
+ )} +
+ ))} +
+ ); +} diff --git a/src/components/LocationPage/index.tsx b/src/components/LocationPage/index.tsx new file mode 100644 index 00000000..ffb78edc --- /dev/null +++ b/src/components/LocationPage/index.tsx @@ -0,0 +1,26 @@ +import { useLocation as useWindowLocation } from 'react-router-dom'; +import { Link } from 'react-router-dom'; +import { LocationHeader } from './LocationHeader'; +import { LocationOverview } from './LocationOverview'; +import { LocationReviews } from './LocationReviews'; + +export function LocationPage() { + const { + state: { location }, + } = useWindowLocation(); + + return ( +
+
+ + + Back to home + +
+ + + {/* TODO rename to LocationDetails */} + +
+ ); +} diff --git a/src/locations.ts b/src/locations.ts index 3f243991..f8524c85 100644 --- a/src/locations.ts +++ b/src/locations.ts @@ -47,7 +47,19 @@ type LegacyReview = { placeId: number; }; -function getImageURL( +function getReviewImageURL( + imagePath: string, + imageID: string, + legacyImages: LegacyImage[] +) { + const imageName = legacyImages.find( + (image) => image.id.toString() === imageID + )?.fd; + console.log('debug review image name', imageName); + return imageName ? `${imagePath}${imageName}` : null; +} + +function getLocationImageURL( imagePath: string, imageID: string, legacyImages: LegacyImage[] @@ -81,7 +93,7 @@ function transformReview({ id, reviewerName, text, - imageURL: getImageURL('img/reviews/', imageID, legacyReviewImages), + imageURL: getReviewImageURL('img/reviews/', imageID, legacyReviewImages), imageDescription: getImageDescription(reviewImageAlt), starRating, placeID, @@ -107,6 +119,8 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Location[] { placeImage: imageID, placeImageAlt, }) => { + const reviews = getReviews(id); + return { id, name, @@ -117,9 +131,14 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Location[] { phone, url, locationURL: getLocationURL(id), - imageURL: getImageURL('img/locations/', imageID, legacyPlaceImages), + imageURL: getLocationImageURL( + 'img/locations/', + imageID, + legacyPlaceImages + ), imageDescription: getImageDescription(placeImageAlt), - reviews: getReviews(id), + reviews, + reviewCount: reviews.length, }; } ); diff --git a/src/main.tsx b/src/main.tsx index 04e44a9f..4a3772b2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,8 @@ import React from 'react'; 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 { HomePage } from './components/HomePage'; +import { LocationPage } from './components/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( }> } /> - Location Page} /> + } /> New Location Page} /> New Review Page} /> diff --git a/src/scss/components/_review-header.scss b/src/scss/components/_review-header.scss index e55ae735..7848c0dc 100644 --- a/src/scss/components/_review-header.scss +++ b/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; diff --git a/src/scss/components/_review-nav.scss b/src/scss/components/_review-nav.scss index 85c57d08..1b63dc33 100644 --- a/src/scss/components/_review-nav.scss +++ b/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; } diff --git a/src/scss/components/_review-overview.scss b/src/scss/components/_review-overview.scss index 3f757eff..e856bcce 100644 --- a/src/scss/components/_review-overview.scss +++ b/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; diff --git a/src/scss/elements/_body.scss b/src/scss/elements/_body.scss index 2e0bd5bc..5ad51946 100644 --- a/src/scss/elements/_body.scss +++ b/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; } diff --git a/src/scss/objects/_review-page.scss b/src/scss/objects/_review-page.scss index 5ba8d2de..435f51ae 100644 --- a/src/scss/objects/_review-page.scss +++ b/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) { diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 84e70867..d7339193 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -4,4 +4,6 @@ declare global { interface Window { __SPARKEATS_VERSION__: string; } + + type WindowLocation = Location; } diff --git a/src/types/sparkeats.ts b/src/types/sparkeats.ts index 3835af27..30229ad0 100644 --- a/src/types/sparkeats.ts +++ b/src/types/sparkeats.ts @@ -11,13 +11,14 @@ export type Location = { imageURL: string; imageDescription: string; reviews: Review[]; + reviewCount: number; }; export type Review = { id: number; reviewerName: string; text: string; - imageURL: string; + imageURL: string | null; imageDescription: string; starRating: number; placeID: number;