Atk technical

src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import ContentContainer from "./ContentContainer";
 import { Trending, getTrending } from "./api";
+import TrendingList from "./TrendingList";
 
 export type Name = {first: string, last: string}
 
@@ -9,33 +10,39 @@ function App() {
     first: "",
     last: "",
   });
-  const [trendingRecipes, setTrendingRecipes] = useState<Trending>()
+  const [trendingRecipes, setTrendingRecipes] = useState<Trending[]>()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
   const handleNameUpdate=(field: keyof typeof name, newName: string) => {
-    setName((prevState) => {
-      prevState[field] = newName
-      return prevState
-    })
+    setName(prevState => ({
+      ...prevState,
+      [field]: newName
+    }))
   }
 
   useEffect(() => {
     const fetchTrending = async () => {
-      const trending = await getTrending()
-      setTrendingRecipes(trending)
+      try {
+        const trending = await getTrending()
+        setTrendingRecipes(trending)
+        setErrorMessage(null)
+      } catch (error) {
+        console.error('Error in fetching trending data: ', error)
+        setErrorMessage('Failed to fetch trending data')
+      }
     } 
     fetchTrending()
-   }, [])
+  }, [])
 
   return (
       <div className="container">
         <h5>App</h5>
         <ContentContainer handleNameUpdate={handleNameUpdate} name={name} />
-        {/* Render a component here that renders a list of trending items from the getTrending api function.
-         Display the title and userRatingsCount (Default the userRatingsCount to 0 if the field is null or missing in the api response) 
-         */}
+        {errorMessage && <p>{errorMessage}</p>}
+        {trendingRecipes && <TrendingList trendingRecipes={trendingRecipes}/>}
       </div>
- 
+
   );
 }
 
-export default App;
+export default App;

src/ContentContainer.tsx

@@ -2,25 +2,24 @@ import { Name } from "./App";
 import DisplayContainer from "./DisplayContainer";
 import FormContainer from "./FormContainer";
 import primeFactorize from "./utils";
+import { useMemo } from "react";
 
 export type Field = "first" | "last"
 
 
 const ContentContainer = ({name, handleNameUpdate}: { name: Name, handleNameUpdate:(field: Field , newName: string) => void }) => {
 
-  const numOfFactors =() => {
-    // This takes a long time to run
+  const numOfFactors = useMemo(() => {
     return primeFactorize().length
-  }
-
+  }, [])
 
   return (
     <div className="container">
-      <h5>{`Important Number: ${numOfFactors()}`}</h5>
+      <h5>Important Number: {numOfFactors}</h5>
       <FormContainer handleNameUpdate={handleNameUpdate} name={name} />
       <DisplayContainer name={name} />
     </div>
   );
 };
 
-export default ContentContainer
+export default ContentContainer

src/DisplayContainer.tsx

@@ -14,4 +14,4 @@ const DisplayContainer = ({name}: {name: Name}) => {
 }
 
 
-export default DisplayContainer
+export default DisplayContainer

src/TrendingList.tsx

@@ -0,0 +1,22 @@
+import { Trending } from "./api";
+
+interface TrendingListProps {
+    trendingRecipes: Trending[];
+}
+
+const TrendingList: React.FC<TrendingListProps> = ({ trendingRecipes }) => {
+    return (
+        <ul>
+            {trendingRecipes.map((trendingRecipe) => {
+                return(
+                    <li key={trendingRecipe.document_id}>
+                        <p>Title: {trendingRecipe.title}</p>
+                        <p>User Rating: {trendingRecipe.rating.attributes.userRatingsCount ?? 0}</p>
+                    </li>
+                )
+            })}
+        </ul>
+    )
+}
+
+export default TrendingList;

src/api.ts

@@ -26,9 +26,19 @@ type CompleteRating = {
 }
 
 
-export const getTrending = async (): Promise<Trending> => {
-  const response = await fetch('https://speak-easy-staging.herokuapp.com/api/analytics/trending/atk')
-  const trending = await response.json()
-  return trending
-
+export const getTrending = async (): Promise<Trending[]> => {
+  try {
+    const response = await fetch('https://speak-easy-staging.herokuapp.com/api/analytics/trending/atk')
+
+    if(!response.ok) {
+      const errorMessage = `${response.status} (${response.statusText})`
+      const error = new Error(errorMessage)
+      throw(error)
+    }
+    const trending = await response.json()
+    return trending
+  } catch (error) {
+    console.error('Error in fetching trending data:', error)
+    throw(error)
+  }
 }

src/main.tsx

@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+)