chore: ingread copy improvements and yeast alert

micksabox · Mar 31, 2024 · 20aa7f2 · 20aa7f2
1 parent 4e9e3f8
commit 20aa7f2
Showing 1 changed file with 27 additions and 7 deletions.
diff --git a/app/routes/ingread/route.tsx b/app/routes/ingread/route.tsx
@@ -2,14 +2,15 @@ import { ScanLine, Trash2, VideoIcon, VideoOff } from 'lucide-react'
 import { useRef, useState, useCallback, useEffect } from 'react'
 import Webcam from 'react-webcam'
 import { Button } from 'src/components/ui/button'
-import { useFetcher, useLoaderData } from '@remix-run/react'
+import { useFetcher, useRouteError } from '@remix-run/react'
 import { ActionFunctionArgs, LoaderFunctionArgs, json } from '@remix-run/node'
 import { invariantResponse } from 'src/utils/misc'
 import { openai } from 'src/lib/openai.server'
 import { clsx } from 'clsx'
 import { toast } from 'react-hot-toast'
 import { load, Schema, Type } from 'js-yaml'
 import { z } from 'zod'
+import { Alert, AlertDescription, AlertTitle } from 'src/components/ui/alert'
 
 // OpenAI Vision API expects a 512x512 image at least
 // and is the cheapest option
@@ -106,7 +107,9 @@ const CameraCapture: React.FC = () => {
 
   const captureFetcher = useFetcher<typeof action>()
 
-  const loaderData = useLoaderData<typeof loader>()
+  const yeastIngredients = captureFetcher.data?.ingredients
+    ? captureFetcher.data.ingredients.filter((ingredient: string) => /yeast/i.test(ingredient))
+    : []
 
   const isScanning = captureFetcher.state !== 'idle'
 
@@ -146,7 +149,7 @@ const CameraCapture: React.FC = () => {
   }, [])
 
   return (
-    <div ref={rootDivRef}>
+    <div ref={rootDivRef} className="mx-auto md:max-w-xl">
       {!isCaptureEnable && (
         <div
           style={{ height: rootWidth }}
@@ -221,16 +224,22 @@ const CameraCapture: React.FC = () => {
           </div>
         </>
       )}
+
+      {!isScanning && isCaptureEnable && captureFetcher.data && yeastIngredients.length > 0 && (
+        <Alert variant={'destructive'}>
+          <AlertTitle>Yeast Ingredients Found</AlertTitle>
+          <AlertDescription>{yeastIngredients.length} ingredients with yeast found.</AlertDescription>
+        </Alert>
+      )}
+
       <div className="p-4 pt-0">
         {isScanning && (
           <>
             <div className="w-full animate-pulse bg-slate-400 p-3"></div>
             <div className="mt-2 w-full animate-pulse bg-slate-400 p-3"></div>
           </>
         )}
-        {!isScanning && !captureFetcher.data && (
-          <p>Quickly check for {loaderData.entrypoint || 'NAC Protocol'} with the snap of a photo.</p>
-        )}
+        {!isScanning && !captureFetcher.data && <p>Quickly check ingredient lists for yeast.</p>}
         {!isScanning && isCaptureEnable && captureFetcher.data?.ingredients && (
           <div className="prose">
             <h3>
@@ -243,7 +252,7 @@ const CameraCapture: React.FC = () => {
                   <tr key={ing}>
                     <td>
                       <small>
-                        {/yeast|citric acid/i.test(ing) && '😱'}
+                        {/yeast/i.test(ing) && '😱'}
                         {ing}
                       </small>
                     </td>
@@ -258,4 +267,15 @@ const CameraCapture: React.FC = () => {
   )
 }
 
+export const ErrorBoundary = () => {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <div className="error-container">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+    </div>
+  )
+}
+
 export default CameraCapture