From e1916aa1e6e30f300178624a3239a91fcf9b84d5 Mon Sep 17 00:00:00 2001
From: softwarebyze <zackebenfeld@gmail.com>
Date: Tue, 6 Jun 2023 17:18:39 -0400
Subject: [PATCH 1/4] handling login page errors

---
 src/components/Error.tsx     | 27 +++++++++++++++++++++++++++
 src/components/LoginPage.tsx | 10 +++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Error.tsx

diff --git a/src/components/Error.tsx b/src/components/Error.tsx
new file mode 100644
index 0000000..34d684d
--- /dev/null
+++ b/src/components/Error.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react'
+
+export default function Error({ message }: { message: string }) {
+  const [isVisible, setIsVisible] = useState(true)
+
+  const handleClose = () => {
+    setIsVisible(false)
+  }
+
+  return (
+    <>
+      {isVisible && (
+        <div className="notification is-danger">
+          <button className="delete" onClick={handleClose} />
+          {message}
+        </div>
+      )}
+    </>
+  )
+}
+//   return (
+//     <div className="notification is-danger">
+//       <button className="delete" />
+//       {message}
+//     </div>
+//   )
+// }
diff --git a/src/components/LoginPage.tsx b/src/components/LoginPage.tsx
index 9aa57ac..6fc3c42 100644
--- a/src/components/LoginPage.tsx
+++ b/src/components/LoginPage.tsx
@@ -1,16 +1,19 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { supabase } from '../supabaseClient'
+import Error from './Error'
 
 export default function LoginPage() {
   const [loading, setLoading] = useState(false)
-  const [email, setEmail] = useState('test@test')
-  const [password, setPassword] = useState('test')
+  const [error, setError] = useState<string | null>(null)
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
   const navigate = useNavigate()
 
   const handleLogin = async (event: any) => {
     event.preventDefault()
 
+    setError(null)
     setLoading(true)
     const { error } = await supabase.auth.signInWithPassword({
       email,
@@ -18,7 +21,7 @@ export default function LoginPage() {
     })
 
     if (error) {
-      alert(error.message)
+      setError(`Error logging in: ${error.message}`)
     } else {
       navigate('/')
     }
@@ -73,6 +76,7 @@ export default function LoginPage() {
                   </p>
                 </form>
               </div>
+              {error && <Error message={error} />}
               <h4
                 className="is-4 subtitle is-centered"
                 style={{ textAlign: 'center' }}

From 96f8ed098409f16380948156d00e3659850f6d4e Mon Sep 17 00:00:00 2001
From: softwarebyze <zackebenfeld@gmail.com>
Date: Tue, 6 Jun 2023 17:21:00 -0400
Subject: [PATCH 2/4] formatting

---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2100a0a..40bcfc9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import 'bulma/css/bulma.min.css'
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import './animation.css'
 import Home from './components/Home'
 import LoginPage from './components/LoginPage'
 import Nav from './components/Nav'
@@ -12,7 +13,6 @@ import { fetchFoodRatings, useUserData } from './contexts/UserDataContext'
 import { images } from './data/images.json'
 import { tasks } from './data/tasks.json'
 import './main.css'
-import './animation.css'
 import { TaskInfo } from './types/Task'
 
 function PrivateRoute({ children }: { children: JSX.Element }) {

From 7b184d0413c227f1f1d87639350d57b5127dde7d Mon Sep 17 00:00:00 2001
From: softwarebyze <zackebenfeld@gmail.com>
Date: Sun, 11 Jun 2023 04:21:22 -0400
Subject: [PATCH 3/4] added error to rate food page

---
 src/components/RateFoodPage.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/RateFoodPage.tsx b/src/components/RateFoodPage.tsx
index d1eb95f..ef8f3ae 100644
--- a/src/components/RateFoodPage.tsx
+++ b/src/components/RateFoodPage.tsx
@@ -5,6 +5,7 @@ import { useAuth } from '../contexts/AuthContext'
 import { fetchFoodRatings, useUserData } from '../contexts/UserDataContext'
 import { supabase } from '../supabaseClient'
 import { FoodRatingData } from '../types/Task'
+import Error from './Error'
 
 export default function RateFoodPage() {
   const queryClient = useQueryClient()
@@ -14,10 +15,15 @@ export default function RateFoodPage() {
   const {
     data: foodRatings,
     isLoading,
-    isError,
+    isError: isFetchFoodRatingsError,
+    error: fetchFoodRatingsError,
     isFetching,
   } = useQuery({ queryKey: ['foodRatings'], queryFn: fetchFoodRatings })
-  const { mutate: recordRating } = useMutation({
+  const {
+    mutate: recordRating,
+    isError: isRecordRatingError,
+    error: recordRatingError,
+  } = useMutation({
     mutationFn: async (foodRating: FoodRatingData) => {
       return await supabase.from('food_ratings').insert(foodRating)
     },
@@ -102,6 +108,10 @@ export default function RateFoodPage() {
               </div>
             )}
           </div>
+          {isFetchFoodRatingsError && (
+            <Error message="Error fetching food ratings" />
+          )}
+          {isRecordRatingError && <Error message="Error recording rating" />}
         </>
       )}
     </div>

From bb681e8b36028d8a6b647575da0682fd64494e73 Mon Sep 17 00:00:00 2001
From: softwarebyze <zackebenfeld@gmail.com>
Date: Sun, 11 Jun 2023 04:55:03 -0400
Subject: [PATCH 4/4] remove commented code

---
 src/components/Error.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/Error.tsx b/src/components/Error.tsx
index 34d684d..1a86836 100644
--- a/src/components/Error.tsx
+++ b/src/components/Error.tsx
@@ -18,10 +18,3 @@ export default function Error({ message }: { message: string }) {
     </>
   )
 }
-//   return (
-//     <div className="notification is-danger">
-//       <button className="delete" />
-//       {message}
-//     </div>
-//   )
-// }