@rileybathurst/paddle 1.2.4 → 1.2.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.2.4",
+  "version": "1.2.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,6 +20,7 @@
     "react": "^18.3.1",
     "react-aria-components": "^1.10.0",
     "react-dom": "^18.3.1",
+    "react-inlinesvg": "^4.2.0",
     "react-markdown": "^10.1.0"
   },
   "devDependencies": {

package/src/PaddleBrandList.tsx

@@ -1,29 +1,27 @@
 import * as React from "react"
 import { Link } from 'gatsby';
+import SVG from 'react-inlinesvg';
 
 // * additional work is done here to split kayak and paddleboard
 
-type BrandListTypes = {
-  nodes: {
-    id: string;
+type BrandType = {
+  id: string;
+  slug: string;
+  svg: string;
+  name: string;
+  retail: {
+    title: string;
     slug: string;
-    svg: string;
-    name: string;
-    retail: {
-      title: string;
+    sport: {
       slug: string;
-      sport: {
-        slug: string;
-      }
-    }[]
+    }
   }[];
-  sport?: string;
-}
+};
 
-const PaddleBrandList = ({ nodes, sport }: BrandListTypes) => {
+const PaddleBrandList = ({ nodes, sport }: { nodes: BrandType[]; sport?: string }) => {
 
-  const BrandSet = new Set();
-  let BrandArray = [];
+  const BrandSet = new Set<BrandType>();
+  let BrandArray: BrandType[] = [];
 
   if (sport) {
     nodes.map((brand) => {
@@ -45,12 +43,12 @@ const PaddleBrandList = ({ nodes, sport }: BrandListTypes) => {
 
   return (
     <ul className='brand_list'>
-      {BrandArray.map((brand: any) => (
+      {BrandArray.map((brand: BrandType) => (
         <li key={brand.id}>
           <Link to={`/retail/${sport}/${brand.slug}`}>
             {brand.svg ?
-              <div
-                dangerouslySetInnerHTML={{ __html: brand.svg }}
+              <SVG
+                src={brand.svg}
               />
               : null}
             {brand.name}

package/src/PaddleLocationCard.tsx

@@ -5,6 +5,7 @@ import Markdown from "react-markdown";
 import HourMin from "./hour-min";
 import Phone from "./phone";
 import type { PaddleLocationCardTypes } from "./types/location-card-types";
+import SVG from 'react-inlinesvg';
 
 // merged types are possible to dry this up but its also a lot
 // type UpdatedUser = Merge<User, Updates>;
@@ -101,12 +102,6 @@ interface ContentTypes {
   svg: string;
   name: string;
 
-  address: {
-    data: {
-      address: string;
-    };
-  };
-
   description: {
     data: {
       description: string;
@@ -156,12 +151,12 @@ const PhoneContent = ({
           rel="noopener noreferrer"
           title={name}
         >
-          <div dangerouslySetInnerHTML={{ __html: svg }} />
+          <SVG src={svg} />
         </a>
       ) : (
         link && (
           <Link to={link} className="svg">
-            <div dangerouslySetInnerHTML={{ __html: svg }} />
+            <SVG src={svg} />
           </Link>
         )
       )}
@@ -263,7 +258,9 @@ const Content = ({
 }: ContentTypes) => {
   return (
     <>
-      <div className="svg" dangerouslySetInnerHTML={{ __html: svg }} />
+      <div className="svg">
+        <SVG src={svg} />
+      </div>
 
       <div className="location_details">
         <div className="multi_button">
@@ -308,7 +305,6 @@ export const PaddleLocationCard = ({
   svg,
   name,
   link,
-  address,
   description,
   opening_time,
   closing_time,
@@ -334,7 +330,6 @@ export const PaddleLocationCard = ({
           link={link}
           svg={svg}
           name={name}
-          address={address}
           description={description}
           opening_time={opening_time}
           closing_time={closing_time}
@@ -365,7 +360,6 @@ export const PaddleLocationCard = ({
         <Content
           svg={svg}
           name={name}
-          address={address}
           description={description}
           opening_time={opening_time}
           closing_time={closing_time}
@@ -387,7 +381,6 @@ export const PaddleLocationCard = ({
       <Content
         svg={svg}
         name={name}
-        address={address}
         description={description}
         opening_time={opening_time}
         closing_time={closing_time}

package/src/PaddleLocationDeck.tsx

@@ -2,19 +2,12 @@ import * as React from "react";
 import { PaddleLocationCard } from "./PaddleLocationCard";
 import type { PaddleLocationCardTypes } from "./types/location-card-types";
 
-interface LocationDeckTypes {
-  background?: string;
-  season_start?: string; // ? should this be optional? it created a problem with tours
-  season_end?: string;
-  phone?: string;
-  nodes: PaddleLocationCardTypes[];
-}
 export const PaddleLocationDeck = ({
   nodes,
   season_start,
   season_end,
   phone
-}: LocationDeckTypes) => {
+}: PaddleLocationDeckTypes) => {
   return (
     <section className="location-deck">
       {nodes.map((location: PaddleLocationCardTypes) => (

package/src/index.tsx

@@ -31,4 +31,5 @@ export * from "./PaddleSEO";
 // Types
 export * from "./types/ticket-types";
 export * from "./types/location-card-types";
+export * from "./types/paddle-location-deck-types";
 export * from "./types/gatsby-image-type";

package/src/testimonial-fragment.tsx

@@ -1,3 +1,5 @@
+// ? I dont think I can plug fragments but using types does enough
+
 import { graphql } from "gatsby"
 
 export const query = graphql`

package/src/types/paddle-location-deck-types.ts

@@ -0,0 +1,9 @@
+import type { PaddleLocationCardTypes } from "./location-card-types";
+
+export type PaddleLocationDeckTypes = {
+  background?: string;
+  season_start?: string; // ? should this be optional? it created a problem with tours
+  season_end?: string;
+  phone?: string;
+  nodes: PaddleLocationCardTypes[];
+};