Skip to content

Commit

Permalink
feat: rebuild Location page
Browse files Browse the repository at this point in the history
Resolves #414
  • Loading branch information
yosevu committed Oct 30, 2022
1 parent b61635e commit 7b01ec1
Show file tree
Hide file tree
Showing 17 changed files with 168 additions and 27 deletions.
28 changes: 14 additions & 14 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,63 +14,63 @@
<link
rel="apple-touch-icon-precomposed"
sizes="57x57"
href="apple-touch-icon-57x57.png"
href="/apple-touch-icon-57x57.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="60x60"
href="apple-touch-icon-60x60.png"
href="/apple-touch-icon-60x60.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="72x72"
href="apple-touch-icon-72x72.png"
href="/apple-touch-icon-72x72.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="76x76"
href="apple-touch-icon-76x76.png"
href="/apple-touch-icon-76x76.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="114x114"
href="apple-touch-icon-114x114.png"
href="/apple-touch-icon-114x114.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="120x120"
href="apple-touch-icon-120x120.png"
href="/apple-touch-icon-120x120.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="apple-touch-icon-144x144.png"
href="/apple-touch-icon-144x144.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="152x152"
href="apple-touch-icon-152x152.png"
href="/apple-touch-icon-152x152.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="180x180"
href="apple-touch-icon-180x180.png"
href="/apple-touch-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="196x196"
href="favicon-196x196.png"
href="/favicon-196x196.png"
/>
<link
rel="icon"
type="image/png"
sizes="128x128"
href="favicon-128x128.png"
href="/favicon-128x128.png"
/>
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Oswald:400,700|Roboto+Condensed:300,400,700|Roboto:400,700,900&amp;display=swap"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
File renamed without changes.
File renamed without changes.
15 changes: 15 additions & 0 deletions src/components/LocationPage/LocationHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Location } from '../../types/sparkeats';

export 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>
);
}
41 changes: 41 additions & 0 deletions src/components/LocationPage/LocationOverview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Location } 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>
)}
</>
);
}

export 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>
);
}
50 changes: 50 additions & 0 deletions src/components/LocationPage/LocationReviews.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Link } from 'react-router-dom';
import { Location, Review } from '../../types/sparkeats';

export 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>
);
}
26 changes: 26 additions & 0 deletions src/components/LocationPage/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<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>
);
}
5 changes: 4 additions & 1 deletion src/locations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Location[] {
placeImage: imageID,
placeImageAlt,
}) => {
const reviews = getReviews(id);

return {
id,
name,
Expand All @@ -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,
};
}
);
Expand Down
5 changes: 3 additions & 2 deletions src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/scss/components/_review-header.scss
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/scss/components/_review-nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion src/scss/components/_review-overview.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/scss/elements/_body.scss
Original file line number Diff line number Diff line change
@@ -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;
}
11 changes: 6 additions & 5 deletions src/scss/objects/_review-page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 2 additions & 0 deletions src/types/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@ declare global {
interface Window {
__SPARKEATS_VERSION__: string;
}

type WindowLocation = Location;
}
1 change: 1 addition & 0 deletions src/types/sparkeats.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export type Location = {
imageURL: string;
imageDescription: string;
reviews: Review[];
reviewCount: number;
};

export type Review = {
Expand Down

0 comments on commit 7b01ec1

Please sign in to comment.