Fixed my garden rendering database twice

MarcosG119 · Dec 28, 2023 · 795e1c1 · 795e1c1
1 parent b56f72c
commit 795e1c1
Show file tree

Hide file tree

Showing 11 changed files with 225 additions and 214 deletions.
diff --git a/dist/assets/index-fhKAWtKY.js → dist/assets/index-uWifWcxZ.js b/dist/assets/index-fhKAWtKY.js → dist/assets/index-uWifWcxZ.js
diff --git a/dist/index.html b/dist/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/assets/index-fhKAWtKY.js"></script>
+    <title>Plant Papa</title>
+    <script type="module" crossorigin src="/assets/index-uWifWcxZ.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-lCkA_MAP.css">
   </head>
   <body>

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Plant Papa</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/compounds/PlantRecognition/PlantRecognition.tsx b/src/components/compounds/PlantRecognition/PlantRecognition.tsx
@@ -13,78 +13,78 @@ const ImageUpload: React.FC = () => {
   useEffect(() => {
     console.log(uploadedImage)
     if (selectedFile) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setUploadedImage(reader.result as string);
-      };
-      reader.readAsDataURL(selectedFile);
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setUploadedImage(reader.result as string);
+        };
+        reader.readAsDataURL(selectedFile);
     }
   }, [selectedFile]);
 
   const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
-      setSelectedFile(event.target.files[0]);
+        setSelectedFile(event.target.files[0]);
     }
   };
 
   const handleUpload = async () => {
     try {
-      setLoading(true);
+        setLoading(true);
 
-      // Compress the selected image with specified dimensions and quality
-      const compressedImage = await compressImage(selectedFile, 800, 1280, 0.9);
+        // Compress the selected image with specified dimensions and quality
+        const compressedImage = await compressImage(selectedFile, 800, 1280, 0.9);
 
-      // Create FormData with the compressed image
-      const formData = new FormData();
-      formData.append('organs', 'flower');
-      formData.append('images', compressedImage, 'compressed.jpg');
+        // Create FormData with the compressed image
+        const formData = new FormData();
+        formData.append('organs', 'flower');
+        formData.append('images', compressedImage, 'compressed.jpg');
 
-      const { status, data } = await axios.post('http://localhost:3000/api/plantnet/upload', formData);
+        const { status, data } = await axios.post('http://localhost:3000/api/plantnet/upload', formData);
 
-      console.log('Response status:', status);
-      console.log('Response data:', data);
+        console.log('Response status:', status);
+        console.log('Response data:', data);
 
-      setBestMatch(data.bestMatch);
+        setBestMatch(data.bestMatch);
     } catch (error) {
-      console.error('Frontend error uploading image:', error);
+        console.error('Frontend error uploading image:', error);
     } finally {
-      setLoading(false);
+        setLoading(false);
     }
   };
 
   const compressImage = (file: File | null, smallSide: number, largeSide: number, quality: number): Promise<Blob> => {
     return new Promise((resolve, reject) => {
-      if (!file) {
-        reject(new Error('No file provided'));
-        return;
-      }
+        if (!file) {
+            reject(new Error('No file provided'));
+            return;
+        }
 
-      new Compressor(file, {
-        maxWidth: largeSide,
-        maxHeight: smallSide,
-        quality,
-        success(result) {
-          resolve(result);
-        },
-        error(err) {
-          reject(err);
-        },
-      });
+        new Compressor(file, {
+            maxWidth: largeSide,
+            maxHeight: smallSide,
+            quality,
+            success(result) {
+            resolve(result);
+            },
+            error(err) {
+            reject(err);
+            },
+        });
     });
   };
 
-  return (
-    <Container borderRadius='30px'>
-    <div className='flex-box'>
-      <input  type="file" onChange={handleFileChange} />
-
-      {loading && <p style={{padding:'2%'}}>Uploading and processing image...</p>}
-      {bestMatch && <p style={{padding:'2%'}}>{bestMatch}</p>}
-      {uploadedImage && <img src={uploadedImage} alt="Uploaded" style={{ padding:'2%', maxWidth: '100%', maxHeight: '400px' }} />}
-      <button style={{padding:'2%'}} onClick={handleUpload}>Upload</button>
-      </div>
-    </Container>
-  );
+    return (
+            <Container borderRadius='30px'>
+            <div className='flex-box'>
+                <input  type="file" onChange={handleFileChange} />
+            
+                {loading && <p style={{padding:'2%'}}>Uploading and processing image...</p>}
+                {bestMatch && <p style={{padding:'2%'}}>{bestMatch}</p>}
+                {uploadedImage && <img src={uploadedImage} alt="Uploaded" style={{ padding:'2%', maxWidth: '100%', maxHeight: '400px' }} />}
+                <button style={{padding:'2%'}} onClick={handleUpload}>Upload</button>
+                </div>
+            </Container>
+    );
 };
 
 export default ImageUpload;
diff --git a/src/components/elements/button/Button.tsx b/src/components/elements/button/Button.tsx
@@ -2,20 +2,18 @@ import React from 'react';
 import './button.css';
 
 interface ButtonProps {
-  text: string;
-  onClick: () => void;
+    text: string;
+    onClick: () => void;
 }
 
 const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
   return (
     <>
-    <button 
-      className = 'button'
-      onClick={onClick}
-
-    >
-      {text}
-    </button>
+        <button 
+        className = 'button'
+        onClick={onClick}>
+            {text}
+        </button>
     </>
   );
 }

diff --git a/src/components/elements/notesPopup/NotesContainer.tsx b/src/components/elements/notesPopup/NotesContainer.tsx
@@ -16,62 +16,62 @@ const NotesComponent: React.FC<NotesComponentProps> = ({ uniquePlantId }) => {
     useEffect(() => {
       const fetchNotes = async () => {
         try {
-          if (!userId) {
-            console.error('User ID is not available.');
-            return;
-          }
-
-          const plantDocRef = doc(db, 'myGarden', userId);
-          const plantDocSnapshot = await getDoc(plantDocRef);
-
-          if (plantDocSnapshot.exists()) {
-            const plantData = plantDocSnapshot.data();
-            const plantMap = plantData?.[uniquePlantId];
-            setNotes(plantMap?.notes || []);
-          }
-        } catch (error) {
-          console.error('Error fetching notes:', error);
-        }
+            if (!userId) {
+                console.error('User ID is not available.');
+                return;
+            }
+    
+            const plantDocRef = doc(db, 'myGarden', userId);
+            const plantDocSnapshot = await getDoc(plantDocRef);
+    
+            if (plantDocSnapshot.exists()) {
+                const plantData = plantDocSnapshot.data();
+                const plantMap = plantData?.[uniquePlantId];
+                setNotes(plantMap?.notes || []);
+            }
+            } catch (error) {
+            console.error('Error fetching notes:', error);
+            }
       };
 
-      fetchNotes();
+        fetchNotes();
     }, [userId, uniquePlantId]);
 
     // Add a new note
     const addNote = async () => {
         try {
-          if (!userId) {
-            console.error('User ID is not available.');
-            return;
-          }
-
-          const plantDocRef = doc(db, 'myGarden', userId);
-          const plantDocSnapshot = await getDoc(plantDocRef);
-
-          if (plantDocSnapshot.exists()) {
-            const currentData = plantDocSnapshot.data();
-            const currentPlantMap = currentData?.[uniquePlantId];
-
-            // Get the current date
-            const currentDate = new Date().toLocaleDateString();
-
-            // Create the new note with the current date
-            const newNoteWithDate = `${currentDate}: ${newNote}`;
-
-            // Merge existing fields with the new 'notes' including the new note
-            const updatedPlantMap = {
-              ...currentPlantMap,
-              notes: [...notes, newNoteWithDate],
-            };
-
-            // Update the document with the merged data
-            await updateDoc(plantDocRef, {
-              [uniquePlantId]: updatedPlantMap,
-            });
-
-            setNotes(updatedPlantMap?.notes || []);
-            setNewNote('');
-          }
+            if (!userId) {
+                console.error('User ID is not available.');
+                return;
+            }
+        
+            const plantDocRef = doc(db, 'myGarden', userId);
+            const plantDocSnapshot = await getDoc(plantDocRef);
+        
+            if (plantDocSnapshot.exists()) {
+                const currentData = plantDocSnapshot.data();
+                const currentPlantMap = currentData?.[uniquePlantId];
+        
+                // Get the current date
+                const currentDate = new Date().toLocaleDateString();
+        
+                // Create the new note with the current date
+                const newNoteWithDate = `${currentDate}: ${newNote}`;
+        
+                // Merge existing fields with the new 'notes' including the new note
+                const updatedPlantMap = {
+                ...currentPlantMap,
+                notes: [...notes, newNoteWithDate],
+                };
+        
+                // Update the document with the merged data
+                await updateDoc(plantDocRef, {
+                [uniquePlantId]: updatedPlantMap,
+                });
+        
+                setNotes(updatedPlantMap?.notes || []);
+                setNewNote('');
+            }
         } catch (error) {
           console.error('Error adding note:', error);
         }
@@ -81,30 +81,30 @@ const NotesComponent: React.FC<NotesComponentProps> = ({ uniquePlantId }) => {
     const removeNote = async (index: number) => {
       try {
         if (!userId) {
-          console.error('User ID is not available.');
-          return;
+            console.error('User ID is not available.');
+            return;
         }
 
         const plantDocRef = doc(db, 'myGarden', userId);
         const plantDocSnapshot = await getDoc(plantDocRef);
 
         if (plantDocSnapshot.exists()) {
-          const currentData = plantDocSnapshot.data();
-          const currentPlantMap = currentData?.[uniquePlantId];
-
-          // Merge existing fields with the updated 'notes'
-          const updatedPlantMap = {
-            ...currentPlantMap,
-            notes: [...notes.slice(0, index), ...notes.slice(index + 1)],
-          };
-
-          // Update the document with the merged data
-          await updateDoc(plantDocRef, {
-            [uniquePlantId]: updatedPlantMap,
-          });
-
-          setNotes(updatedPlantMap?.notes || []);
-        }
+            const currentData = plantDocSnapshot.data();
+            const currentPlantMap = currentData?.[uniquePlantId];
+    
+            // Merge existing fields with the updated 'notes'
+            const updatedPlantMap = {
+                ...currentPlantMap,
+                notes: [...notes.slice(0, index), ...notes.slice(index + 1)],
+            };
+    
+            // Update the document with the merged data
+            await updateDoc(plantDocRef, {
+                [uniquePlantId]: updatedPlantMap,
+            });
+    
+            setNotes(updatedPlantMap?.notes || []);
+            }
       } catch (error) {
         console.error('Error removing note:', error);
       }
@@ -114,21 +114,21 @@ const NotesComponent: React.FC<NotesComponentProps> = ({ uniquePlantId }) => {
       <div>
         <h3>Notes</h3>
         <ul>
-          {notes.map((note, index) => (
-            <li key={index}>
-              {note}
-              <button onClick={() => removeNote(index)}>Remove</button>
-            </li>
-          ))}
+            {notes.map((note, index) => (
+                <li key={index}>
+                    {note}
+                    <button onClick={() => removeNote(index)}>Remove</button>
+                </li>
+            ))}
         </ul>
         <div>
-          <input
-            type="text"
-            value={newNote}
-            onChange={(e) => setNewNote(e.target.value)}
-            placeholder="Add a new note"
-          />
-          <button onClick={addNote}>Add Note</button>
+            <input
+                type="text"
+                value={newNote}
+                onChange={(e) => setNewNote(e.target.value)}
+                placeholder="Add a new note"
+            />
+            <button onClick={addNote}>Add Note</button>
         </div>
       </div>
     );