package-lock.json

@@ -15,14 +15,11 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "@t3-oss/env-nextjs": "^0.10.1",
-        "@types/react": "npm:types-react@rc",
-        "@types/react-dom": "npm:types-react-dom@rc",
         "@vercel/postgres": "^0.8.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "drizzle-orm": "^0.29.4",
         "geist": "^1.3.0",
-        "immer": "^10.1.1",
         "lucide-react": "^0.379.0",
         "next": "^15.0.0-rc.0",
         "postgres": "^3.4.3",
@@ -30,14 +27,13 @@
         "react-dom": "^19.0.0-rc-935180c7e0-20240524",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
-        "zod": "^3.23.8",
-        "zustand": "^4.5.2"
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@types/eslint": "^8.56.2",
         "@types/node": "^20.11.20",
-        "@types/react": "npm:types-react@rc",
-        "@types/react-dom": "npm:types-react-dom@rc",
+        "@types/react": "^18.2.57",
+        "@types/react-dom": "^18.2.19",
         "@typescript-eslint/eslint-plugin": "^7.1.1",
         "@typescript-eslint/parser": "^7.1.1",
         "drizzle-kit": "^0.21.0",
@@ -5230,15 +5226,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8040,14 +8027,6 @@
         }
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/utf-8-validate": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.3.tgz",
@@ -8334,33 +8313,6 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
-    },
-    "node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
     }
   }
 }

package.json

@@ -19,14 +19,11 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@t3-oss/env-nextjs": "^0.10.1",
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
     "@vercel/postgres": "^0.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.29.4",
     "geist": "^1.3.0",
-    "immer": "^10.1.1",
     "lucide-react": "^0.379.0",
     "next": "^15.0.0-rc.0",
     "postgres": "^3.4.3",
@@ -34,18 +31,13 @@
     "react-dom": "^19.0.0-rc-935180c7e0-20240524",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8",
-    "zustand": "^4.5.2"
-  },
-  "overrides": {
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.2",
     "@types/node": "^20.11.20",
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "drizzle-kit": "^0.21.0",

src/app/App.tsx

@@ -1,38 +1,9 @@
-"use client";
-import { Button } from "~/components/ui/button";
 import FormCard from "./_components/FormCard";
-import useFilterStore from "./store";
-
-const AddRegionButton: React.FC = () => {
-  const addRegion = useFilterStore((state) => state.addRegion);
-
-  const handleClick = () => {
-    addRegion("sverige");
-  };
-
-  return <Button onClick={handleClick}>Add Region "Sverige"</Button>;
-};
-
-const ResetFilters: React.FC = () => {
-  const resetFilters = useFilterStore((state) => state.resetFilters);
-
-  const handleClick = () => {
-    resetFilters();
-  };
-
-  return <Button onClick={handleClick}>Reset filters</Button>;
-};
 
 export default function App() {
-  const filters = useFilterStore((state) => state.filters);
-
   return (
     <div className="container flex w-full flex-col justify-center">
       <FormCard />
-      <h1 className="text-2xl">Filter state:</h1>
-      {JSON.stringify(filters)}
-      <AddRegionButton />
-      <ResetFilters />
     </div>
   );
 }

src/app/_components/FilterMenu.tsx

@@ -10,33 +10,28 @@ import {
 import { Input } from "~/components/ui/input";
 import { Slider } from "~/components/ui/slider";
 import { ChangeEvent, useState } from "react";
-import useFilterStore from "../store";
 
 export default function Filtermenu() {
   const [minPrice, setMinPrice] = useState<number>(0);
   const [maxPrice, setMaxPrice] = useState<number>(9999);
   const [sliderValues, setSliderValues] = useState<[number, number]>([0, 9999]);
-  const setStorePrice = useFilterStore((state) => state.setPrice);
 
   const handleMinPriceChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const value = Math.min(Number(e.target.value), maxPrice - 1);
     setMinPrice(value);
     setSliderValues([value, sliderValues[1]]);
-    setStorePrice(minPrice, maxPrice);
   };
 
   const handleMaxPriceChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = Math.max(Number(e.target.value), minPrice + 1);
     setMaxPrice(value);
     setSliderValues([sliderValues[0], value]);
-    setStorePrice(minPrice, maxPrice);
   };
 
   const handleSliderChange = (values: [number, number]) => {
     setSliderValues(values);
     setMinPrice(values[0]);
     setMaxPrice(values[1]);
-    setStorePrice(minPrice, maxPrice);
   };
 
   return (

src/app/_components/SearchBar.tsx

@@ -1,5 +0,0 @@
-import { Input } from "~/components/ui/input";
-
-export default function SearchBar() {
-  return <Input className="mx-auto max-w-xl focus-visible:ring-0" />;
-}

src/app/_components/WineName.tsx

@@ -0,0 +1,3 @@
+export default function WineName(props: { name: string }) {
+  return <p>{props.name}</p>;
+}

src/app/_components/WineProducer.tsx

@@ -0,0 +1,25 @@
+import getProducer from "~/server/actions/getProducer";
+
+export default async function WineProducer(props: { id: string }) {
+  const { id } = props;
+
+  // Validate the id before making the database call
+  if (!id) {
+    return <p>Invalid producer ID</p>;
+  }
+
+  try {
+    const result = await getProducer(id);
+    return !result ? <p>Unable to retrieve producer</p> : <p>{result?.name}</p>;
+  } catch (error) {
+    console.error("Error fetching producer:", error);
+    return <p>Error fetching producer</p>;
+  }
+}
+
+// Utility function to validate UUID
+function isValidUUID(uuid: string) {
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  return uuidRegex.test(uuid);
+}

src/app/layout.tsx

@@ -4,7 +4,6 @@ import { Inter as FontSans } from "next/font/google";
 import { cn } from "~/lib/utils";
 import TopNav from "./_components/FilterMenu";
 import Filtermenu from "./_components/FilterMenu";
-import SearchBar from "./_components/SearchBar";
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -30,10 +29,7 @@ export default function RootLayout({
           fontSans.variable,
         )}
       >
-        <div className="container pt-12">
-          <SearchBar />
-          <Filtermenu />
-        </div>
+        <Filtermenu />
         {children}
       </body>
     </html>

src/app/store.ts

@@ -1,156 +0,0 @@
-import { create } from "zustand";
-import { produce } from "immer";
-import { persist, createJSONStorage } from "zustand/middleware";
-
-interface FilterState {
-  filters: Filters;
-}
-
-interface Filters {
-  searchQuery: string;
-  regions: string[];
-  countries: string[];
-  producers: string[];
-  price: Price;
-  type: WineType;
-}
-
-interface Price {
-  min: number;
-  max: number;
-}
-
-interface WineType {
-  sparkling: boolean;
-  white: boolean;
-  red: boolean;
-  sweet: boolean;
-  other: boolean;
-}
-
-type FilterActions = {
-  addRegion: (region: string) => void;
-  removeRegion: (region: string) => void;
-  addCountry: (country: string) => void;
-  removeCountry: (country: string) => void;
-  addProducer: (producer: string) => void;
-  removeProducer: (producer: string) => void;
-  setPrice: (min: number, max: number) => void;
-  setType: (type: keyof WineType, value: boolean) => void;
-  resetFilters: () => void;
-};
-
-const initialFilters: Filters = {
-  searchQuery: "",
-  regions: [],
-  countries: [],
-  producers: [],
-  price: {
-    min: 0,
-    max: 9999,
-  },
-  type: {
-    sparkling: false,
-    white: false,
-    red: false,
-    sweet: false,
-    other: false,
-  },
-};
-
-const useFilterStore = create<FilterState & FilterActions>()(
-  persist(
-    (set) => ({
-      filters: {
-        searchQuery: "",
-        regions: [],
-        countries: [],
-        producers: [],
-        price: {
-          min: 0,
-          max: 9999,
-        },
-        type: {
-          sparkling: false,
-          white: false,
-          red: false,
-          sweet: false,
-          other: false,
-        },
-      },
-      addRegion: (region) =>
-        set(
-          produce((state: FilterState) => {
-            if (!state.filters.regions.includes(region)) {
-              state.filters.regions.push(region);
-            }
-          }),
-        ),
-      removeRegion: (region) =>
-        set(
-          produce((state: FilterState) => {
-            state.filters.regions = state.filters.regions.filter(
-              (r) => r !== region,
-            );
-          }),
-        ),
-      addCountry: (country) =>
-        set(
-          produce((state: FilterState) => {
-            if (!state.filters.countries.includes(country)) {
-              state.filters.countries.push(country);
-            }
-          }),
-        ),
-      removeCountry: (country) =>
-        set(
-          produce((state: FilterState) => {
-            state.filters.countries = state.filters.countries.filter(
-              (c) => c !== country,
-            );
-          }),
-        ),
-      addProducer: (producer) =>
-        set(
-          produce((state: FilterState) => {
-            if (!state.filters.producers.includes(producer)) {
-              state.filters.producers.push(producer);
-            }
-          }),
-        ),
-      removeProducer: (producer) =>
-        set(
-          produce((state: FilterState) => {
-            state.filters.producers = state.filters.producers.filter(
-              (p) => p !== producer,
-            );
-          }),
-        ),
-      setPrice: (min, max) =>
-        set(
-          produce((state: FilterState) => {
-            state.filters.price.min = min;
-            state.filters.price.max = max;
-          }),
-        ),
-      setType: (type, value) =>
-        set(
-          produce((state: FilterState) => {
-            state.filters.type[type] = value;
-          }),
-        ),
-      resetFilters: () =>
-        set(
-          produce((state: FilterState) => {
-            state.filters = initialFilters;
-          }),
-        ),
-    }),
-    {
-      name: "filter-storage", // name of the item in the storage (must be unique)
-      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
-    },
-  ),
-);
-
-export default useFilterStore;

src/types/types.ts

@@ -0,0 +1,8 @@
+export interface Producer {
+    id: string;
+    name: string;
+    createdAt: Date;
+    country: string;
+    region: string;
+    email: string;
+  }