feching API

.env.mock

+VITE_DATA_MODE=mock
+VITE_API_ENDPOINT=
\ No newline at end of file

.env.production

+VITE_DATA_MODE=api
+VITE_API_ENDPOINT=https://loyalty-points-bank-data-service-prod.apps.cfcommerce.prod.azeus.gaptech.com/summary/pre-screen

.env.stage

+VITE_DATA_MODE=api
+VITE_API_ENDPOINT=

.env.test

+VITE_DATA_MODE=api
+VITE_API_ENDPOINT=
\ No newline at end of file

src/App.css

@@ -4,28 +4,20 @@
 
 @layer components {
   /* This won't be included in your compiled CSS unless you actually use it */
-  h3{
+  h3 {
     @apply font-bold text-lg;
   }
 
-  /*
-  .dashboard-body{
-    @apply flex flex-wrap items-stretch;
-    >div{
-        @apply mr-2 mb-2 flex-grow;
+  #findings-section {
+    @apply mt-4 max-h-96 overflow-scroll;
+    div {
+      @apply mb-8 border rounded-lg h-16;
+      @apply flex flex-col justify-center;
     }
-  }
-  .legend-row {
-    @apply flex justify-center pl-14 mb-1.5;
-    > div {
-      @apply flex mr-2 w-24 text-gray;
-      > div {
-        @apply w-4 h-4 mr-2 rounded-sm;
-      }
+    div:last-child {
+      @apply mb-0
     }
   }
-*/
-
 }
 
 #root {
@@ -55,19 +47,19 @@
 }
 
 .speaking {
-	background: linear-gradient(-45deg, #ee7752, #4caf50, #23a6d5, #23d5ab);
-	background-size: 400% 400%;
-	animation: gradient 2s ease infinite;
+  background: linear-gradient(-45deg, #ee7752, #4caf50, #23a6d5, #23d5ab);
+  background-size: 400% 400%;
+  animation: gradient 2s ease infinite;
 }
 
 @keyframes gradient {
-	0% {
-		background-position: 0% 50%;
-	}
-	50% {
-		background-position: 100% 50%;
-	}
-	100% {
-		background-position: 0% 50%;
-	}
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }

src/App.tsx

@@ -2,6 +2,8 @@ import "./App.css";
 // https://socket.dev/npm/package/react-hook-speech-to-text
 import useSpeechToText from "react-hook-speech-to-text";
 import micIcon from "./assets/1608550_microphone_icon.png";
+import useFetch from "./hooks/useFetch";
+import { useEffect } from "react";
 
 function App() {
   const {
@@ -9,6 +11,7 @@ function App() {
     interimResult,
     isRecording,
     results,
+    setResults,
     startSpeechToText,
     stopSpeechToText,
   } = useSpeechToText({
@@ -16,12 +19,30 @@ function App() {
     useLegacyResults: false,
   });
 
+  const {
+    get,
+    loading,
+    error: responseError,
+    response,
+  } = useFetch(`${import.meta.env.VITE_API_ENDPOINT}/todos`);
+
+  useEffect(() => {
+    if (results.length > 0) {
+      (async () => {
+        await get();
+      })();
+    }
+  }, [results]);
+
   // display: flex;
   // flex-direction: column;
   // align-items: center;
 
-  console.log(interimResult);
   if (error) return <p>Web Speech API is not available in this browser 🤷‍</p>;
+  console.log("response: ", response);
+  console.log("responseError: ", responseError);
+
+  const text = results.length > 0 && results[results.length - 1].transcript;
 
   return (
     <>
@@ -32,7 +53,9 @@ function App() {
       </div>
       <div className={`mt-5 flex flex-col items-center`}>
         <div
-          onMouseDown={startSpeechToText}
+          onMouseDown={() => {
+            startSpeechToText();
+          }}
           onMouseUp={stopSpeechToText}
           className={`w-16 border border-solid rounded-full cursor-pointer p-2.5  ${
             isRecording && "speaking"
@@ -42,11 +65,24 @@ function App() {
         </div>
         {isRecording && <span className="text-sm">Listening...</span>}
         <ul className="mt-5 italic">
-          {results.map((result) => (
-            <li key={result.timestamp}>{`Looking for: "${result.transcript}"`}</li>
-          ))}
+          {text && `Showing results for: ${text}`}
+          {/* {results.map(result => {
+            return (
+              <li key={result.timestamp}>{`Looking for: "${result.transcript}"`}</li>
+            )
+          })} */}
           {/* {interimResult && <li>{interimResult}</li>} */}
         </ul>
+
+        {loading && `Hold on a bit please!`}
+
+        {!loading && !responseError && response && response.length > 0 && (
+          <div id="findings-section">
+            {response.map((content) => {
+              return <div>{content.title}</div>;
+            })}
+          </div>
+        )}
       </div>
     </>
   );

src/hooks/useFetch.ts

+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+
+interface IUseFecth {
+  get: (params?: string) => Promise<void>;
+  error: any;
+  response: any;
+  loading: boolean;
+}
+
+const getFullUrl = (apiHost: string, params?: string) => {
+  return params ? `${apiHost}?${params}` : apiHost;
+};
+
+const useFecth = function (apiUrl: string): IUseFecth {
+  const [error, setError] = useState<any>(null);
+  const [response, setResponse] = useState<any | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const get = async (params?: string) => {
+    setLoading(true);
+
+    fetch(new Request(getFullUrl(apiUrl, params)))
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((response) => {
+      setResponse(response);
+      setError(null);
+      setLoading(false);
+    }).catch((error)=>{
+      setError(error);
+      console.log(error)
+    });
+
+  };
+  return { get, error, loading, response };
+};
+
+export default useFecth;