@rileybathurst/paddle 1.9.32 → 1.9.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.32",
+  "version": "1.9.33",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",

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 { 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;
@@ -43,6 +44,7 @@ type CompareDetailsProps = {
 
 const CompareDetails = ({
   title,
+  onTourChange,
   link,
   sport,
   // duration,
@@ -58,7 +60,7 @@ const CompareDetails = ({
   peek_base,
   strapiBranchName,
   tours
-}: CompareDetailsProps) => {
+}: CompareDetailsTypes) => {
   return (
     <section>
       <select
@@ -66,6 +68,8 @@ const CompareDetails = ({
         id={title}
         className="comparesheet_select"
         aria-label="Select first tour or lesson"
+        value={title}
+        onChange={(e) => onTourChange(e.target.value)}
       >
         {tours.map((tour) => (
           <option
@@ -76,6 +80,7 @@ const CompareDetails = ({
           </option>
         ))}
       </select>
+      
       <h2 className="kilimanjaro">
         <a href={link}>{title}</a>
       </h2>
@@ -128,30 +133,70 @@ 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 (
     <>
@@ -175,13 +220,14 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
         <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}
@@ -196,13 +242,14 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
         <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}