add error alert ui

Author: whatrocks

package.json

@@ -11,7 +11,7 @@
     "dev": "npx lerna run dev",
     "test": "npx lerna run test",
     "lint": "npx lerna run lint",
-    "format": "npx lerna run format"
+    "fix": "npx lerna run format"
   },
   "repository": {
     "type": "git",

packages/client/src/App.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Button } from '@/components/ui/button'
 import LoadingSkeleton from './components/LoadingSkeleton'
+import AlertMsg from './components/AlertMsg'
 import Mapper from './components/Mapper'
 import TruckCard from './components/TruckCard'
 
@@ -29,6 +30,7 @@ function App() {
   })
   const [foodTrucks, setFoodTrucks] = useState<FoodTruck[]>([])
   const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
   const [selectedTruckId, setSelectedTruckId] = useState<string>('')
 
   const getLocation = () => {
@@ -54,9 +56,8 @@ function App() {
   }, [])
 
   const handleClick = async () => {
-    // handle location not there
     if (!location.latitude || !location.longitude) {
-      // show error on screen!
+      setError(`Unable to get your location.`)
       return
     }
     setIsLoading(true)
@@ -72,23 +73,25 @@ function App() {
         lon: location.longitude?.toString() || ''
       })
       const paramsString = newParams.toString()
-      // adjust proxy to get rid of localhost
+      // TODO: Adjust proxy to get rid of localhost
       const response = await fetch(`http://localhost:8080/api/trucks?${paramsString}`)
       const json = await response.json()
       const data: FoodTruck[] = json.data
       setFoodTrucks(data)
+      if (data.length === 0) {
+        setError(`Nothing nearby or open right now! Get moving!`)
+      }
       setIsLoading(false)
     } catch (error) {
-      // show error on screen!
-      console.log('error', error)
+      setError(`Unable to get any trucks right now.`)
+      // TODO: Show error to user on screen
       setIsLoading(false)
     }
   }
 
   const handleTruckClick = (id: string) => {
     const truck = foodTrucks.find((truck) => truck.id === id)
     if (truck) {
-      // console.log("truck is ", truck.id)
       setSelectedTruckId(truck.id)
     }
   }
@@ -114,6 +117,7 @@ function App() {
         />
         <div style={{ zIndex: 10000 }}>
           <div className="flex flex-col items-center justify-center space-y-4">
+            {error && <AlertMsg error={error} />}
             <Button onClick={handleClick}>Find Food Trucks Open Now</Button>
             {isLoading ? (
               <div className="flex flex-col align-left space-y-4">

packages/client/src/components/AlertMsg.tsx

@@ -0,0 +1,17 @@
+import { Terminal } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+
+interface AlertMsgProps {
+  error: string
+}
+
+export default function AlertMsg({ error }: AlertMsgProps) {
+  return (
+    <Alert>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>{error}</AlertDescription>
+    </Alert>
+  )
+}

packages/client/src/components/ui/alert.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+  )
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  )
+)
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }