@rileybathurst/paddle 1.9.31 → 1.9.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.31",
+  "version": "1.9.33",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",
@@ -10,6 +10,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "tsc --noEmit && stay-gold && storybook dev -p 6006",
+    "storybook-dirty": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "release": "npm version patch && npm login && npm publish",
     "stay-gold": "stay-gold"

package/src/App.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import { PaddlePricingChart } from './paddle-pricing-chart'
+import { PaddleCompare } from './paddle-compare'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -31,7 +32,7 @@ function App() {
         Click on the Vite and React logos to learn more
       </p>
 
-      {/* testing */}
+      {/* // TODO: testing */}
       <PaddlePricingChart
         rentalRates={{
           nodes: [
@@ -94,6 +95,61 @@ function App() {
           slug: 'tahoe-city'
         }}
       />
+
+      <PaddleCompare
+        peek_base="123"
+        strapiBranchName="south-tahoe"
+        tours={[
+          {
+            id: 1,
+            name: "Tour 1",
+            slug: "tour-1",
+            sport: "Paddleboarding",
+            duration: "2 hours",
+            timeframe: "Morning",
+            start: "9:00 AM",
+            finish: "11:00 AM",
+            fitness: "Easy",
+            location: "Lake Tahoe",
+            excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            minimum: 2,
+            price: 100,
+            peek: "456"
+          },
+          {
+            id: 2,
+            name: "Tour 2",
+            slug: "tour-2",
+            sport: "Paddleboarding",
+            duration: "3 hours",
+            timeframe: "Afternoon",
+            start: "1:00 PM",
+            finish: "4:00 PM",
+            fitness: "Moderate",
+            location: "Lake Tahoe",
+            excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            minimum: 2,
+            price: 150,
+            peek: "789"
+          },
+          {
+            id: 3,
+            name: "Tour 3",
+            slug: "tour-3",
+            sport: "Paddleboarding",
+            duration: "4 hours",
+            timeframe: "Evening",
+            start: "5:00 PM",
+            finish: "9:00 PM",
+            fitness: "Hard",
+            location: "Lake Tahoe",
+            excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            minimum: 2,
+            price: 200,
+            peek: "101112"
+          }
+        ]}
+      />
     </>
   )
 }

package/src/paddle-compare.tsx

@@ -1,13 +1,14 @@
 // ! this is the next fix
 
-import React from 'react';
+import React, { useState } from "react";
 
-import { PaddleTime } from './paddle-time';
+// import { PaddleTime } from './paddle-time';
 import { PaddleBookNow } from './paddle-book-now';
 import type { PaddleCompareTypes } from './types/paddle-compare-types';
 
-type CompareDetailsProps = {
+type CompareDetailsTypes = {
   title: string;
+  onTourChange: (value: string) => void;
   link: string;
   sport: string;
   duration?: string;
@@ -22,10 +23,28 @@ type CompareDetailsProps = {
   peeks?: string;
   peek_base: string;
   strapiBranchName: string;
+
+  // ? this can maybe loop from itself?
+  tours: {
+    id: React.Key;
+    name: string;
+    slug: string;
+    sport: string;
+    duration?: string;
+    timeframe?: string;
+    start?: string;
+    finish?: string;
+    excerpt?: string;
+    minimum?: number;
+    price?: number;
+    peek?: string;
+    fitness?: string;
+  }[];
 };
 
-const CompareDetails = ({ 
+const CompareDetails = ({
   title,
+  onTourChange,
   link,
   sport,
   // duration,
@@ -39,30 +58,36 @@ const CompareDetails = ({
   price,
   peeks,
   peek_base,
-  strapiBranchName }: CompareDetailsProps) => {
+  strapiBranchName,
+  tours
+}: CompareDetailsTypes) => {
   return (
     <section>
-      {/* <select
+      <select
         name="tour1"
         id={title}
         className="comparesheet_select"
         aria-label="Select first tour or lesson"
+        value={title}
+        onChange={(e) => onTourChange(e.target.value)}
       >
-        {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
+        {tours.map((tour) => (
           <option
-            key={faker.string.uuid()}
-            value={faker.food.dish()}
+            key={tour.id}
+            value={tour.name}
           >
-            {faker.food.dish()}
+            {tour.name}
           </option>
         ))}
-      </select> */}
+      </select>
+      
       <h2 className="kilimanjaro">
         <a href={link}>{title}</a>
       </h2>
 
       <h4 className="capitalize">{sport}</h4>
 
+      {/* // TODO: time is more complex so just get it running first */}
       {/* <p>
         <PaddleTime
           start={start}
@@ -107,31 +132,71 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
 
   let id1 = tours[0].id;
   let id2 = tours[1].id;
-  
-  let tour1 = tours[0].name;
-  let tour2 = tours[1].name;
-  let link1 = tours[0].slug;
-  let link2 = tours[1].slug;
-  let sport1 = tours[0].sport;
-  let sport2 = tours[1].sport;
-  let duration1 = tours[0].duration || 'not set';
-  let duration2 = tours[1].duration || 'not set';
-  let timeframe1 = tours[0].timeframe || 'not set';
-  let timeframe2 = tours[1].timeframe || 'not set';
-  let start1 = tours[0].start || 'not set';
-  let start2 = tours[1].start || 'not set';
-  let finish1 = tours[0].finish || 'not set';
-  let finish2 = tours[1].finish || 'not set';
-  let excerpt1 = tours[0].excerpt || 'not set';
-  let excerpt2 = tours[1].excerpt || 'not set';
-  let minimum1 = tours[0].minimum || 0;
-  let minimum2 = tours[1].minimum || 0;
-  let price1 = tours[0].price || 0;
-  let price2 = tours[1].price || 0;
-  let peeks1 = tours[0].peek || 'not set';
-  let peeks2 = tours[1].peek || 'not set';
-  let fitness1 = tours[0].fitness || 'fitness';
-  let fitness2 = tours[1].fitness || 'fitness';
+
+  let [tour1, setTour1] = useState(tours[0].name || "Tour 1");
+  let [tour2, setTour2] = useState(tours[1].name || "Tour 2");
+  let [link1, setLink1] = useState(tours[0].slug || "not set");
+  let [link2, setLink2] = useState(tours[1].slug || "not set");
+  let [sport1, setSport1] = useState(tours[0].sport || "not set");
+  let [sport2, setSport2] = useState(tours[1].sport || "not set");
+  let [duration1, setDuration1] = useState(tours[0].duration || "not set");
+  let [duration2, setDuration2] = useState(tours[1].duration || "not set");
+  let [timeframe1, setTimeframe1] = useState(tours[0].timeframe || "not set");
+  let [timeframe2, setTimeframe2] = useState(tours[1].timeframe || "not set");
+  let [start1, setStart1] = useState(tours[0].start || "not set");
+  let [start2, setStart2] = useState(tours[1].start || "not set");
+  let [finish1, setFinish1] = useState(tours[0].finish || "not set");
+  let [finish2, setFinish2] = useState(tours[1].finish || "not set");
+  let [location1, setLocation1] = useState(tours[0].location || strapiBranchName);
+  let [location2, setLocation2] = useState(tours[1].location || strapiBranchName);
+  let [excerpt1, setExcerpt1] = useState(tours[0].excerpt || "not set");
+  let [excerpt2, setExcerpt2] = useState(tours[1].excerpt || "not set");
+  let [minimum1, setMinimum1] = useState(tours[0].minimum || 0);
+  let [minimum2, setMinimum2] = useState(tours[1].minimum || 0);
+  let [price1, setPrice1] = useState(tours[0].price || 0);
+  let [price2, setPrice2] = useState(tours[1].price || 0);
+  let [peeks1, setPeeks1] = useState(tours[0].peek || "not set");
+  let [peeks2, setPeeks2] = useState(tours[1].peek || "not set");
+  let [fitness1, setFitness1] = useState(tours[0].fitness || "fitness");
+  let [fitness2, setFitness2] = useState(tours[1].fitness || "fitness");
+
+  const updateTour1 = (selectedName: string) => {
+    const selectedTour = tours.find((tour) => tour.name === selectedName);
+    if (!selectedTour) return;
+
+    setTour1(selectedTour.name);
+    setLink1(selectedTour.slug || "not set");
+    setSport1(selectedTour.sport || "not set");
+    setDuration1(selectedTour.duration || "not set");
+    setTimeframe1(selectedTour.timeframe || "not set");
+    setStart1(selectedTour.start || "not set");
+    setFinish1(selectedTour.finish || "not set");
+    setLocation1(selectedTour.location || strapiBranchName);
+    setExcerpt1(selectedTour.excerpt || "not set");
+    setMinimum1(selectedTour.minimum || 0);
+    setPrice1(selectedTour.price || 0);
+    setPeeks1(selectedTour.peek || "not set");
+    setFitness1(selectedTour.fitness || "fitness");
+  };
+
+  const updateTour2 = (selectedName: string) => {
+    const selectedTour = tours.find((tour) => tour.name === selectedName);
+    if (!selectedTour) return;
+
+    setTour2(selectedTour.name);
+    setLink2(selectedTour.slug || "not set");
+    setSport2(selectedTour.sport || "not set");
+    setDuration2(selectedTour.duration || "not set");
+    setTimeframe2(selectedTour.timeframe || "not set");
+    setStart2(selectedTour.start || "not set");
+    setFinish2(selectedTour.finish || "not set");
+    setLocation2(selectedTour.location || strapiBranchName);
+    setExcerpt2(selectedTour.excerpt || "not set");
+    setMinimum2(selectedTour.minimum || 0);
+    setPrice2(selectedTour.price || 0);
+    setPeeks2(selectedTour.peek || "not set");
+    setFitness2(selectedTour.fitness || "fitness");
+  };
 
   return (
     <>
@@ -152,57 +217,50 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
           <p className='button-drop'>Book Now</p>
         </div>
 
-        <select
-          name="tour1"
-          // id={id1}
-          className="comparesheet_select"
-          aria-label="Select first tour or lesson"
-        >
-          {tours.map((tour) => (
-            <option
-              key={tour.id}
-              value={tour.id}
-            >
-              {tour.name}
-            </option>
-          ))}
-        </select>
-
         <CompareDetails
           key={id1}
           title={tour1}
+          onTourChange={updateTour1}
           link={link1}
           sport={sport1}
           duration={duration1}
           timeframe={timeframe1}
           start={start1}
           finish={finish1}
-          location={strapiBranchName}
+          location={location1}
           excerpt={excerpt1}
           minimum={minimum1}
           price={price1}
           peeks={peeks1}
           fitness={fitness1}
+
           strapiBranchName={strapiBranchName}
           peek_base={peek_base}
+
+          tours={tours}
         />
         <CompareDetails
           key={id2}
           title={tour2}
+          onTourChange={updateTour2}
           link={link2}
           sport={sport2}
           duration={duration2}
           timeframe={timeframe2}
           start={start2}
           finish={finish2}
-          location={strapiBranchName}
+          location={location2}
           excerpt={excerpt2}
           minimum={minimum2}
           price={price2}
           peeks={peeks2}
           fitness={fitness2}
+
           strapiBranchName={strapiBranchName}
           peek_base={peek_base}
+
+          tours={tours}
+
         />
 
       </div>