@rileybathurst/paddle 1.9.32 → 1.9.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.32",
+  "version": "1.9.34",
   "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: 120,
+            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: 180,
+            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: 240,
+            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,54 +1,40 @@
-// ! this is the next fix
+import React, { useState } from "react";
 
-import React 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 = {
-  title: string;
-  link: string;
-  sport: string;
-  duration?: string;
-  timeframe?: string;
-  start?: string;
-  finish?: string;
-  fitness?: string;
-  location: string;
-  excerpt: string;
-  minimum: number;
-  price: number;
-  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;
-  }[];
+type TourType = PaddleCompareTypes["tours"][number];
+
+type CompareDetailsTypes = {
+  name: TourType["name"];
+  onTourChange: (value: TourType["name"]) => void;
+  link: TourType["slug"];
+  sport: TourType["sport"];
+  duration?: TourType["duration"];
+  timeframe?: TourType["timeframe"];
+  start?: TourType["start"];
+  finish?: TourType["finish"];
+  fitness?: TourType["fitness"];
+  location: TourType["location"];
+  excerpt: TourType["excerpt"];
+  minimum: TourType["minimum"];
+  price: TourType["price"];
+  peeks?: TourType["peek"];
+  peek_base: PaddleCompareTypes["peek_base"];
+  strapiBranchName: PaddleCompareTypes["strapiBranchName"];
+  tours: PaddleCompareTypes["tours"];
 };
 
 const CompareDetails = ({
-  title,
+  name,
+  onTourChange,
   link,
   sport,
-  // duration,
-  // timeframe,
-  // start,
-  // finish,
+  duration,
+  timeframe,
+  start,
+  finish,
   fitness,
   location,
   excerpt,
@@ -58,14 +44,29 @@ const CompareDetails = ({
   peek_base,
   strapiBranchName,
   tours
-}: CompareDetailsProps) => {
+}: CompareDetailsTypes) => {
+
+  const time = PaddleTime({
+    start: start,
+    finish: finish,
+    duration: duration,
+    timeframe: timeframe,
+  });
+
+  // TODO: testing
+  console.log("time", time);
+  console.log(time.entry);
+  console.log(time.value);
+
   return (
     <section>
       <select
         name="tour1"
-        id={title}
+        id={name}
         className="comparesheet_select"
         aria-label="Select first tour or lesson"
+        value={name}
+        onChange={(e) => onTourChange(e.target.value)}
       >
         {tours.map((tour) => (
           <option
@@ -76,21 +77,16 @@ const CompareDetails = ({
           </option>
         ))}
       </select>
+
       <h2 className="kilimanjaro">
-        <a href={link}>{title}</a>
+        <a href={link}>{name}</a>
       </h2>
 
       <h4 className="capitalize">{sport}</h4>
 
-      {/* // TODO: time is more complex so just get it running first */}
-      {/* <p>
-        <PaddleTime
-          start={start}
-          finish={finish}
-          duration={duration}
-          timeframe={timeframe}
-        />
-      </p> */}
+      <p>
+        {time.value}
+      </p>
 
       <p className="capitalize">
         {fitness} <span className="show-below__vulture">&nbsp;fitness</span>
@@ -128,35 +124,75 @@ 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 || 0);
+  let [duration2, setDuration2] = useState(tours[1].duration || 0);
+  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 || 0);
+    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 || 0);
+    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 (
     <>
       <div className='comparesheet'>
-        <div className='comparesheet_titles'>
+        <div className='comparesheet_names'>
           <div className="comparesheet__transparent">Compare</div>
           <h3 className='kilimanjaro comparesheet_freeze'>
             Tour or<br />
@@ -174,14 +210,15 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
 
         <CompareDetails
           key={id1}
-          title={tour1}
+          name={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}
@@ -195,14 +232,15 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
         />
         <CompareDetails
           key={id2}
-          title={tour2}
+          name={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}

package/src/paddle-ticket.tsx

@@ -22,6 +22,7 @@ export const PaddleTicket = ({
   allStrapiSunsetTourTime,
   strapiBranchName,
 }: PaddleTicketTypes) => {
+  
   const time = PaddleTime({
     start: start,
     finish: finish,

package/src/types/paddle-compare-types.tsx

@@ -4,7 +4,7 @@ export type PaddleCompareTypes = {
     name: string;
     slug: string;
     sport: string;
-    duration?: string;
+    duration?: number;
     timeframe?: string;
     start?: string;
     finish?: string;