From c2722b31046d7749dd36e561ac5748c54fc8793c Mon Sep 17 00:00:00 2001
From: Adam Patni <adampatni27@gmail.com>
Date: Thu, 14 Mar 2024 13:48:32 -0700
Subject: [PATCH] photo url fix

---
 src/app/src/components/Search.js    |  1 -
 src/app/src/components/WatchCard.js | 23 +++++++++++++++--------
 src/app/src/components/WatchGrid.js |  4 ----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/app/src/components/Search.js b/src/app/src/components/Search.js
index 1d23024..a90aa89 100644
--- a/src/app/src/components/Search.js
+++ b/src/app/src/components/Search.js
@@ -141,7 +141,6 @@ function PriceFilter( ) {
     const [isInvalid, setIsInvalid] = useState(false);
   useEffect(() => {
     setIsInvalid(filterMinPrice < 0 || filterMinPrice > filterMaxPrice);
-    console.log(filterMinPrice, filterMaxPrice);
   }, [filterMinPrice, filterMaxPrice]);
   return (
     <Box sx={{ display: "flex", gap: 2 }}>
diff --git a/src/app/src/components/WatchCard.js b/src/app/src/components/WatchCard.js
index ebe7a8d..95eb4d8 100644
--- a/src/app/src/components/WatchCard.js
+++ b/src/app/src/components/WatchCard.js
@@ -1,15 +1,27 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React from "react";
 import {
   Card,
   CardMedia,
   CardContent,
   Typography,
-  Box,
   Chip,
 } from "@mui/material";
 import watchImage from "../assets/watch.webp";
 
 function WatchCard({ watch, onClick }) {
+  const getImageUrl = () => {
+    if (!watch["Photo_URL"] || watch["Photo_URL"] === "") {
+      return watchImage; // Default image when Photo_URL is null or empty
+    }
+    if (watch["Photo_URL"].includes("i.redd.it")) {
+      return watch["Photo_URL"];
+    } else if (watch["Photo_URL"].includes("preview.redd.it")) {
+      return watch["Photo_URL"];
+    } else {
+      return watchImage;
+    }
+  };
+
   return (
     <Card
       className="watch-card"
@@ -29,11 +41,7 @@ function WatchCard({ watch, onClick }) {
           maxWidth: "100%",
           margin: "auto",
         }}
-        image={
-          watch["Photo_URL"].includes("i.redd.it")
-            ? watch["Photo_URL"]
-            : watchImage
-        }
+        image={getImageUrl()}
         alt={watch.Model}
       />
       <Chip
@@ -48,7 +56,6 @@ function WatchCard({ watch, onClick }) {
           display: "flex",
           flexDirection: "column",
           alignItems: "start",
-        //   justifyContent: "space-",
           padding: "8px 12px !important"
         }}
       >
diff --git a/src/app/src/components/WatchGrid.js b/src/app/src/components/WatchGrid.js
index 78a04d6..7f977f8 100644
--- a/src/app/src/components/WatchGrid.js
+++ b/src/app/src/components/WatchGrid.js
@@ -9,14 +9,11 @@ function WatchGrid({ supabase }) {
   const [selectedWatch, setSelectedWatch] = useState(null);
 
   const handleOpenModal = useCallback((watch) => {
-    console.log("opening shit")
     setModalOpen(true);
     setSelectedWatch(watch);
   }, []);
 
   const handleCloseModal = useCallback(() => {
-    console.log("closing shit")
-
     setModalOpen(false);
     setSelectedWatch(null);
   }, []);
@@ -34,7 +31,6 @@ function WatchGrid({ supabase }) {
 
   useEffect(() => {
     const fetchWatchesToRender = async () => {
-      console.log("entered fetch");
       let { data, error } = await supabase.rpc("get_filtered_watches", {
         p_brand: filterBrand,
         p_min_diameter: filterMinDiameter,