From 464cf6e6c24ed8370fa7e94d35397d796ae06e37 Mon Sep 17 00:00:00 2001 From: Chris Ward Date: Mon, 30 Oct 2023 13:27:20 +0000 Subject: [PATCH 1/6] refactor: initial refactoring --- src/components/header.tsx | 0 src/components/heroSection.tsx | 0 src/components/trips.tsx | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/header.tsx create mode 100644 src/components/heroSection.tsx create mode 100644 src/components/trips.tsx diff --git a/src/components/header.tsx b/src/components/header.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/heroSection.tsx b/src/components/heroSection.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/trips.tsx b/src/components/trips.tsx new file mode 100644 index 0000000..e69de29 From 8dcc37262d36d9d6a94bffa3ef9bedb077f61a62 Mon Sep 17 00:00:00 2001 From: Chris Ward Date: Wed, 1 Nov 2023 11:10:25 +0000 Subject: [PATCH 2/6] refactor: re-rename --- src/App.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c410b9f..ed09c5a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,13 +34,13 @@ function App() { }; const renderReviewScore = (score: number) => { - const scoreRepresentationUsingACuteLilPlanetEmoji = []; + const icons = []; for (let i = 0; i < score; i++) { - scoreRepresentationUsingACuteLilPlanetEmoji.push( + icons.push( 🪐 ); } - return scoreRepresentationUsingACuteLilPlanetEmoji; + return icons; }; return ( From 609fe6e80d34e2d0bf9e2ea020f1add25bb25e66 Mon Sep 17 00:00:00 2001 From: Chris Ward Date: Wed, 1 Nov 2023 11:22:51 +0000 Subject: [PATCH 3/6] refactor: Trimmed down App.tsx --- src/App.tsx | 108 ++------------------------------ src/components/header.tsx | 25 ++++++++ src/components/heroSection.tsx | 30 +++++++++ src/components/trips.tsx | 0 src/components/tripsSection.tsx | 52 +++++++++++++++ 5 files changed, 113 insertions(+), 102 deletions(-) delete mode 100644 src/components/trips.tsx create mode 100644 src/components/tripsSection.tsx diff --git a/src/App.tsx b/src/App.tsx index ed09c5a..c7b9e0b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,9 @@ import { useFetch } from "./hooks/useFetch"; import { useHero } from "./hooks/useHero"; import { v4 as uuid } from "uuid"; import "./App.css"; +import { header } from "./components/header"; +import { heroSection } from "./components/heroSection"; +import { tripsSection } from "./components/tripsSection"; function App() { const [trips, setTrips] = useState(0); @@ -45,110 +48,11 @@ function App() { return ( <> -
-
- - eefe spaceship logo - -

Extraterrestrial Excursions for Earthlings

-
-
    - {nav.map((place) => { - return ( -
  • - {place} -
    • - ); - })} -
-
- + {header} {waitAMo &&

...getting heroics...

} - {heroics && ( -
-

We've been helping humanity traverse the universe for aeons.

-

- Now it's your turn to marvel at the wonders of the universe! But don't just take our word for it; check out - these smashing reviews from customers just like you! -

-
    - {heroics.testimonials.map(({ name, rating, spiel, social }) => { - return ( -
  • -

    {name}

    - {social} -

    {spiel}

    -

    Score / 5: {renderReviewScore(rating)}

    -
    • - ); - })} -
-
- )} - + {heroics && heroSection} {isLoading &&

Loading...

} - {data && ( -
-

We found {trips} trips for you!

{" "} -
    - {data.map( - ({ - id, - tripName, - description, - imageUrl, - cost, - lengthInDays, - isBookable, - }) => { - return ( -
  • -

    {tripName}

    -

    - {description} -

    - {`representation -

    - Duration: {lengthInDays} day - {lengthInDays > 1 && "s"} -

    -

    - Price:{" "} - {cost.toLocaleString("en-GB", { - style: "currency", - currency: "GBP", - })} -

    - -
    • - ); - } - )} -
-
- )} + {data && tripsSection} ); } diff --git a/src/components/header.tsx b/src/components/header.tsx index e69de29..5042b56 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +export const header = () => ( +
+
+ + eefe spaceship logo + +

Extraterrestrial Excursions for Earthlings

+
+
    + {nav.map((place) => { + return ( +
  • + {place} +
    • + ); + })} +
+
+ ); \ No newline at end of file diff --git a/src/components/heroSection.tsx b/src/components/heroSection.tsx index e69de29..4ed5cde 100644 --- a/src/components/heroSection.tsx +++ b/src/components/heroSection.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +export const heroSection = ({heroics}) => ( +
+

We've been helping humanity traverse the universe for aeons.

+

+ Now it's your turn to marvel at the wonders of the universe! But don't just take our word for it; check out + these smashing reviews from customers just like you! +

+
    + {heroics.testimonials.map(({ name, rating, spiel, social }) => { + return ( +
  • +

    {name}

    + {social} +

    {spiel}

    +

    Score / 5: {renderReviewScore(rating)}

    +
    • + ); + })} +
+
+ ); \ No newline at end of file diff --git a/src/components/trips.tsx b/src/components/trips.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/tripsSection.tsx b/src/components/tripsSection.tsx new file mode 100644 index 0000000..a9c35c4 --- /dev/null +++ b/src/components/tripsSection.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +export const tripsSection = () => ( +
+

We found {tripsSection} trips for you!

{" "} +
    + {data.map( + ({ + id, + tripName, + description, + imageUrl, + cost, + lengthInDays, + isBookable, + }) => { + return ( +
  • +

    {tripName}

    +

    + {description} +

    + {`representation +

    + Duration: {lengthInDays} day + {lengthInDays > 1 && "s"} +

    +

    + Price:{" "} + {cost.toLocaleString("en-GB", { + style: "currency", + currency: "GBP", + })} +

    + +
    • + ); + } + )} +
+
); \ No newline at end of file From a4ea2c9369bfb2429caaaf3a596cca9f4261237a Mon Sep 17 00:00:00 2001 From: Chris Ward Date: Wed, 1 Nov 2023 11:56:55 +0000 Subject: [PATCH 4/6] refactor: Prop passing --- src/App.tsx | 30 ++---------------------------- src/components/header.tsx | 2 +- src/components/heroSection.tsx | 17 ++++++++++++++--- src/components/tripsSection.tsx | 25 ++++++++++++++++++++----- src/hooks/useFetch.ts | 2 +- src/hooks/useHero.ts | 2 +- 6 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c7b9e0b..bfef26d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { useFetch } from "./hooks/useFetch"; import { useHero } from "./hooks/useHero"; -import { v4 as uuid } from "uuid"; import "./App.css"; import { header } from "./components/header"; import { heroSection } from "./components/heroSection"; @@ -21,38 +20,13 @@ function App() { if (heroics) if (data) setTrips(data.length); }, [data, heroics]); - const handleClick = (e: React.MouseEvent) => { - setBoughtIt(true); - if (e.currentTarget.value) { - const stuff = e.currentTarget.value.split("/"); - const experience = stuff[0]; - const cost = parseInt(stuff[1]); - alert( - `Okie dokie, so you've bought the '${experience}' excursion, at a cost of ${ - cost && - cost.toLocaleString("en-GB", { style: "currency", currency: "GBP" }) - }\rNice one 🚀` - ); - } - }; - - const renderReviewScore = (score: number) => { - const icons = []; - for (let i = 0; i < score; i++) { - icons.push( - 🪐 - ); - } - return icons; - }; - return ( <> {header} {waitAMo &&

...getting heroics...

} - {heroics && heroSection} + {heroics && heroSection(heroics)} {isLoading &&

Loading...

} - {data && tripsSection} + {data && trips && tripsSection(trips, data, setBoughtIt)} ); } diff --git a/src/components/header.tsx b/src/components/header.tsx index 5042b56..a36a343 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export const header = () => ( +export const header = (nav : string[]) => (
diff --git a/src/components/heroSection.tsx b/src/components/heroSection.tsx index 4ed5cde..68b73ed 100644 --- a/src/components/heroSection.tsx +++ b/src/components/heroSection.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import { HeroDeets } from '../hooks/useHero'; +import { v4 as uuid } from "uuid"; -export const heroSection = ({heroics}) => ( +export const heroSection = (heroics : HeroDeets) => (
( })}
- ); \ No newline at end of file + ); + + const renderReviewScore = (score: number) => { + const icons = []; + for (let i = 0; i < score; i++) { + icons.push( + 🪐 + ); + } + return icons; + }; \ No newline at end of file diff --git a/src/components/tripsSection.tsx b/src/components/tripsSection.tsx index a9c35c4..6a6fc77 100644 --- a/src/components/tripsSection.tsx +++ b/src/components/tripsSection.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import { TripDatum } from "../hooks/useFetch"; -export const tripsSection = () => ( +export const tripsSection = (trips:number, data : TripDatum[], setBoughtIt : React.Dispatch>) => (
-

We found {tripsSection} trips for you!

{" "} +

We found {trips} trips for you!

{" "}
    {data.map( ({ @@ -39,7 +39,7 @@ export const tripsSection = () => (
-
); \ No newline at end of file +
); + +const handleClick = (e: React.MouseEvent, setBoughtIt : React.Dispatch>) => { + setBoughtIt(true); + if (e.currentTarget.value) { + const stuff = e.currentTarget.value.split("/"); + const experience = stuff[0]; + const cost = parseInt(stuff[1]); + alert( + `Okie dokie, so you've bought the '${experience}' excursion, at a cost of ${ + cost && + cost.toLocaleString("en-GB", { style: "currency", currency: "GBP" }) + }\rNice one 🚀` + ); + } +}; \ No newline at end of file diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts index 220539b..f2208f7 100644 --- a/src/hooks/useFetch.ts +++ b/src/hooks/useFetch.ts @@ -16,7 +16,7 @@ export const useFetch = () => { return { data, isLoading, error }; }; -interface TripDatum { +export interface TripDatum { id: string; tripName: string; description: string; diff --git a/src/hooks/useHero.ts b/src/hooks/useHero.ts index 40604a5..e949e2b 100644 --- a/src/hooks/useHero.ts +++ b/src/hooks/useHero.ts @@ -16,7 +16,7 @@ export const useHero = () => { return { heroics, waitAMo, fail }; }; -interface HeroDeets { +export interface HeroDeets { image: "https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"; testimonials: Array; } From a40b001ad8b96b461f39d57c2db6cdd1720f304f Mon Sep 17 00:00:00 2001 From: Chris Ward Date: Wed, 1 Nov 2023 12:19:28 +0000 Subject: [PATCH 5/6] refactor: Fully functional --- src/components/tripsSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tripsSection.tsx b/src/components/tripsSection.tsx index 6a6fc77..a5bb14b 100644 --- a/src/components/tripsSection.tsx +++ b/src/components/tripsSection.tsx @@ -39,7 +39,7 @@ export const tripsSection = (trips:number, data : TripDatum[], setBoughtIt : Rea