Making code readable

Author: DanDaManTran

exercises/react-vite/09-making-http-requests/01-problem/src/pages/RestaurantList/RestaurantList.tsx

@@ -1,7 +1,7 @@
 import type { State } from "../../services/pmo/restaurant"
 import CheeseThumbnail from "place-my-order-assets/images/2-thumbnail.jpg"
 import PoutineThumbnail from "place-my-order-assets/images/4-thumbnail.jpg"
-import { useState } from "react"
+import { useState, useCallback } from "react"
 import ListItem from "./ListItem"
 import { useCities, useStates } from "../../services/pmo/restaurant"
 
@@ -58,6 +58,18 @@ const RestaurantList: React.FC = () => {
     setCity(cityName)
   }
 
+  const chooseStatePlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a state";
+
+    if(statesResponse.isPending) {
+      placeholderText = "Loading states…";
+    } else if (statesResponse.error) {
+      placeholderText = statesResponse.error.message
+    }
+
+    return placeholderText;
+  }, [statesResponse])
+
   return (
     <>
       <div className="restaurants">
@@ -75,11 +87,7 @@ const RestaurantList: React.FC = () => {
               value={state}
             >
               <option key="choose_state" value="">
-                {statesResponse.isPending
-                  ? "Loading states…"
-                  : statesResponse.error
-                    ? statesResponse.error.message
-                    : "Choose a state"}
+                {chooseStatePlaceholder()}
               </option>
               {statesResponse.data?.map(({ short, name }) => (
                 <option key={short} value={short}>

exercises/react-vite/09-making-http-requests/01-solution/src/pages/RestaurantList/RestaurantList.tsx

@@ -1,6 +1,6 @@
 import CheeseThumbnail from "place-my-order-assets/images/2-thumbnail.jpg"
 import PoutineThumbnail from "place-my-order-assets/images/4-thumbnail.jpg"
-import { useState } from "react"
+import { useState, useCallback } from "react"
 import ListItem from "./ListItem"
 import { useCities, useStates } from "../../services/pmo/restaurant"
 
@@ -54,6 +54,19 @@ const RestaurantList: React.FC = () => {
     setCity(cityName)
   }
 
+  const chooseStatePlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a state";
+
+    if(statesResponse.isPending) {
+      placeholderText = "Loading states…";
+    } else if (statesResponse.error) {
+      placeholderText = statesResponse.error.message
+    }
+
+    return placeholderText;
+  }, [statesResponse])
+
+
   return (
     <>
       <div className="restaurants">
@@ -71,11 +84,7 @@ const RestaurantList: React.FC = () => {
               value={state}
             >
               <option key="choose_state" value="">
-                {statesResponse.isPending
-                  ? "Loading states…"
-                  : statesResponse.error
-                    ? statesResponse.error.message
-                    : "Choose a state"}
+                {chooseStatePlaceholder()}
               </option>
               {statesResponse.data?.map(({ short, name }) => (
                 <option key={short} value={short}>

exercises/react-vite/09-making-http-requests/02-problem/src/pages/RestaurantList/RestaurantList.tsx

@@ -1,6 +1,6 @@
 import CheeseThumbnail from "place-my-order-assets/images/2-thumbnail.jpg"
 import PoutineThumbnail from "place-my-order-assets/images/4-thumbnail.jpg"
-import { useState } from "react"
+import { useState, useCallback } from "react"
 import { useCities, useStates } from "../../services/pmo/restaurant"
 import ListItem from "./ListItem"
 
@@ -54,6 +54,32 @@ const RestaurantList: React.FC = () => {
     setCity(cityName)
   }
 
+  const chooseStatePlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a state";
+
+    if(statesResponse.isPending) {
+      placeholderText = "Loading states…";
+    } else if (statesResponse.error) {
+      placeholderText = statesResponse.error.message
+    }
+
+    return placeholderText;
+  }, [statesResponse])
+
+  const chooseCityPlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a city";
+
+    if(!state) {
+      placeholderText = "Choose a state before selecting a city";
+    } else if (citiesResponse.isPending) {
+      placeholderText = "Loading cities…";
+    } else if (citiesResponse.error) {
+      placeholderText = citiesResponse.error.message;
+    } 
+
+    return placeholderText;
+  }, [state, citiesResponse])
+
   return (
     <>
       <div className="restaurants">
@@ -71,11 +97,7 @@ const RestaurantList: React.FC = () => {
               value={state}
             >
               <option key="choose_state" value="">
-                {statesResponse.isPending
-                  ? "Loading states…"
-                  : statesResponse.error
-                    ? statesResponse.error.message
-                    : "Choose a state"}
+                {chooseStatePlaceholder()}
               </option>
               {statesResponse.data?.map(({ short, name }) => (
                 <option key={short} value={short}>
@@ -96,13 +118,7 @@ const RestaurantList: React.FC = () => {
               value={city}
             >
               <option key="choose_city" value="">
-                {state
-                  ? citiesResponse.isPending
-                    ? "Loading cities…"
-                    : citiesResponse.error
-                      ? citiesResponse.error.message
-                      : "Choose a city"
-                  : "Choose a state before selecting a city"}
+                {chooseCityPlaceholder()}
               </option>
               {state &&
                 citiesResponse.data?.map(({ name }) => (

exercises/react-vite/09-making-http-requests/02-solution/src/pages/RestaurantList/RestaurantList.tsx

@@ -1,6 +1,6 @@
 import CheeseThumbnail from "place-my-order-assets/images/2-thumbnail.jpg"
 import PoutineThumbnail from "place-my-order-assets/images/4-thumbnail.jpg"
-import { useState } from "react"
+import { useState, useCallback } from "react"
 import { useCities, useStates } from "../../services/pmo/restaurant"
 import ListItem from "./ListItem"
 
@@ -54,6 +54,32 @@ const RestaurantList: React.FC = () => {
     setCity(cityName)
   }
 
+  const chooseStatePlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a state";
+
+    if(statesResponse.isPending) {
+      placeholderText = "Loading states…";
+    } else if (statesResponse.error) {
+      placeholderText = statesResponse.error.message
+    }
+
+    return placeholderText;
+  }, [statesResponse])
+
+  const chooseCityPlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a city";
+
+    if(!state) {
+      placeholderText = "Choose a state before selecting a city";
+    } else if (citiesResponse.isPending) {
+      placeholderText = "Loading cities…";
+    } else if (citiesResponse.error) {
+      placeholderText = citiesResponse.error.message;
+    } 
+
+    return placeholderText;
+  }, [state, citiesResponse])
+
   return (
     <>
       <div className="restaurants">
@@ -71,11 +97,7 @@ const RestaurantList: React.FC = () => {
               value={state}
             >
               <option key="choose_state" value="">
-                {statesResponse.isPending
-                  ? "Loading states…"
-                  : statesResponse.error
-                    ? statesResponse.error.message
-                    : "Choose a state"}
+                {chooseStatePlaceholder()}
               </option>
               {statesResponse.data?.map(({ short, name }) => (
                 <option key={short} value={short}>
@@ -96,13 +118,7 @@ const RestaurantList: React.FC = () => {
               value={city}
             >
               <option key="choose_city" value="">
-                {state
-                  ? citiesResponse.isPending
-                    ? "Loading cities…"
-                    : citiesResponse.error
-                      ? citiesResponse.error.message
-                      : "Choose a city"
-                  : "Choose a state before selecting a city"}
+                {chooseCityPlaceholder()}
               </option>
               {state &&
                 citiesResponse.data?.map(({ name }) => (

exercises/react-vite/09-making-http-requests/03-problem/src/pages/RestaurantList/RestaurantList.tsx

@@ -1,6 +1,6 @@
 import CheeseThumbnail from "place-my-order-assets/images/2-thumbnail.jpg"
 import PoutineThumbnail from "place-my-order-assets/images/4-thumbnail.jpg"
-import { useState } from "react"
+import { useState, useCallback } from "react"
 import { useCities, useStates } from "../../services/pmo/restaurant"
 import ListItem from "./ListItem"
 
@@ -54,6 +54,32 @@ const RestaurantList: React.FC = () => {
     setCity(cityName)
   }
 
+  const chooseStatePlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a state";
+
+    if(statesResponse.isPending) {
+      placeholderText = "Loading states…";
+    } else if (statesResponse.error) {
+      placeholderText = statesResponse.error.message
+    }
+
+    return placeholderText;
+  }, [statesResponse])
+
+  const chooseCityPlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a city";
+
+    if(!state) {
+      placeholderText = "Choose a state before selecting a city";
+    } else if (citiesResponse.isPending) {
+      placeholderText = "Loading cities…";
+    } else if (citiesResponse.error) {
+      placeholderText = citiesResponse.error.message;
+    } 
+
+    return placeholderText;
+  }, [state, citiesResponse])
+
   return (
     <>
       <div className="restaurants">
@@ -71,11 +97,7 @@ const RestaurantList: React.FC = () => {
               value={state}
             >
               <option key="choose_state" value="">
-                {statesResponse.isPending
-                  ? "Loading states…"
-                  : statesResponse.error
-                    ? statesResponse.error.message
-                    : "Choose a state"}
+                {chooseStatePlaceholder()}
               </option>
               {statesResponse.data?.map(({ short, name }) => (
                 <option key={short} value={short}>
@@ -96,13 +118,7 @@ const RestaurantList: React.FC = () => {
               value={city}
             >
               <option key="choose_city" value="">
-                {state
-                  ? citiesResponse.isPending
-                    ? "Loading cities…"
-                    : citiesResponse.error
-                      ? citiesResponse.error.message
-                      : "Choose a city"
-                  : "Choose a state before selecting a city"}
+                {chooseCityPlaceholder()}
               </option>
               {state &&
                 citiesResponse.data?.map(({ name }) => (

exercises/react-vite/09-making-http-requests/03-solution/src/pages/RestaurantList/RestaurantList.tsx

@@ -1,6 +1,6 @@
 import CheeseThumbnail from "place-my-order-assets/images/2-thumbnail.jpg"
 import PoutineThumbnail from "place-my-order-assets/images/4-thumbnail.jpg"
-import { useState } from "react"
+import { useState, useCallback } from "react"
 import { useCities, useStates } from "../../services/pmo/restaurant"
 import ListItem from "./ListItem"
 
@@ -54,6 +54,32 @@ const RestaurantList: React.FC = () => {
     setCity(cityName)
   }
 
+  const chooseStatePlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a state";
+
+    if(statesResponse.isPending) {
+      placeholderText = "Loading states…";
+    } else if (statesResponse.error) {
+      placeholderText = statesResponse.error.message
+    }
+
+    return placeholderText;
+  }, [statesResponse])
+
+  const chooseCityPlaceholder = useCallback(()=>{
+    let placeholderText = "Choose a city";
+
+    if(!state) {
+      placeholderText = "Choose a state before selecting a city";
+    } else if (citiesResponse.isPending) {
+      placeholderText = "Loading cities…";
+    } else if (citiesResponse.error) {
+      placeholderText = citiesResponse.error.message;
+    } 
+
+    return placeholderText;
+  }, [state, citiesResponse])
+
   return (
     <>
       <div className="restaurants">
@@ -71,11 +97,7 @@ const RestaurantList: React.FC = () => {
               value={state}
             >
               <option key="choose_state" value="">
-                {statesResponse.isPending
-                  ? "Loading states…"
-                  : statesResponse.error
-                    ? statesResponse.error.message
-                    : "Choose a state"}
+                {chooseStatePlaceholder()}
               </option>
               {statesResponse.data?.map(({ short, name }) => (
                 <option key={short} value={short}>
@@ -96,13 +118,7 @@ const RestaurantList: React.FC = () => {
               value={city}
             >
               <option key="choose_city" value="">
-                {state
-                  ? citiesResponse.isPending
-                    ? "Loading cities…"
-                    : citiesResponse.error
-                      ? citiesResponse.error.message
-                      : "Choose a city"
-                  : "Choose a state before selecting a city"}
+                {chooseCityPlaceholder()}
               </option>
               {state &&
                 citiesResponse.data?.map(({ name }) => (