28-handle-display-errors

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 }) {

src/components/Error.tsx

@@ -0,0 +1,20 @@
+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>
+      )}
+    </>
+  )
+}

src/components/LoginPage.tsx

@@ -1,24 +1,27 @@
 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,
       password,
     })
 
     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' }}

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>