Refactoring props

pramodsum · Mar 31, 2020 · 0990d74 · 0990d74
1 parent b33adfd
commit 0990d74
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 58 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}
diff --git a/src/routes/ItemDetailsPage.tsx b/src/routes/ItemDetailsPage.tsx
@@ -1,69 +1,35 @@
 import React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
-import {
-  TextField,
-  Box,
-  Typography,
-  Button,
-} from "@material-ui/core";
-import Rating from '@material-ui/lab/Rating';
+import { TextField, Box, Typography, Button } from "@material-ui/core";
+import Rating from "@material-ui/lab/Rating";
 
-import * as firebase from 'firebase/app';
+import * as firebase from "firebase/app";
 
 import ReviewsList from "../components/ReviewsList";
 import Layout from "../components/Layout/Layout";
 import { TACO_API_BASE, RouteParams } from "../utils/globals";
 
-type ItemDetails = {
-  name: string;
-  slug: string;
-  recipe: string;
-  url: string;
-};
-
-export type Review = {
-  recipeName: string;
-  commenterName: string;
-  text: string;
-  stars: number;
-}
-
 const ItemDetailsPage: React.FC<RouteComponentProps> = ({ match }) => {
   const { slug } = match.params as RouteParams;
-  const [ItemDetails, setItemDetails] = React.useState<ItemDetails>();
+  const [itemDetails, setItemDetails] = React.useState<ItemDetails>();
   const [reviews, setReviews] = React.useState<Array<Review>>([]);
-  const reviewsTable: firebase.database.Reference = firebase.database().ref('reviews');
-
-  const loadReviews = async (recipeName: string): Promise<void> => {
-    let reviews: Array<Review> = [];
-    await reviewsTable
-      .orderByChild('recipe_name')
-      .equalTo(recipeName)
-      .once("value")
-      .then((data) => {
-        data.forEach((childNode) => {
-          const row = childNode.val();
-          const review: Review = {
-            recipeName: row['recipe_name'],
-            commenterName: row['commenter_name'],
-            text: row['text'],
-            stars: row['stars'],
-          };
-          reviews.unshift(review);
-        });
-      });
-    setReviews(reviews);
-  }
+  const reviewsTable: firebase.database.Reference = firebase
+    .database()
+    .ref("reviews");
 
-  const saveReview = async (commenterName: string, stars: number, review: string): Promise<void> => {
+  const saveReview = async (
+    commenterName: string,
+    stars: number,
+    review: string
+  ): Promise<void> => {
     await reviewsTable.push({
       commenter_name: commenterName,
       stars: stars,
       text: review,
-      recipe_name: ItemDetails?.name,
+      recipe_name: itemDetails?.name
     });
-  }
+  };
 
   React.useEffect(() => {
     fetch(`${TACO_API_BASE}/toppings/${slug}.json`)
@@ -72,22 +38,42 @@ const ItemDetailsPage: React.FC<RouteComponentProps> = ({ match }) => {
   }, [slug]);
 
   React.useEffect(() => {
-    ItemDetails && loadReviews(ItemDetails.name);
-  }, [ItemDetails])
+    if (!itemDetails) return;
+
+    let reviews: Array<Review> = [];
+    reviewsTable
+      .orderByChild("recipe_name")
+      .equalTo(itemDetails.name)
+      .once("value")
+      .then(data => {
+        data.forEach(childNode => {
+          const row = childNode.val();
+          const review: Review = {
+            recipeName: row["recipe_name"],
+            commenterName: row["commenter_name"],
+            text: row["text"],
+            stars: row["stars"]
+          };
+          reviews.unshift(review);
+        });
+
+        setReviews(reviews);
+      });
+  }, [itemDetails, itemDetails?.name, saveReview]);
 
   const [review, updateReview] = React.useState<string>();
   const [name, updateName] = React.useState<string>();
   const [stars, updateStars] = React.useState<number>(0);
 
   return (
     <Layout>
-      {ItemDetails && (
+      {itemDetails && (
         <>
-          <h1>{ItemDetails.name}</h1>
-          <ReactMarkdown source={ItemDetails.recipe} />
+          <h1>{itemDetails.name}</h1>
+          <ReactMarkdown source={itemDetails.recipe} />
         </>
       )}
-      <Box style={{ paddingTop: "20px"}}>
+      <Box style={{ paddingTop: "20px" }}>
         <Typography variant="h6">Leave a review</Typography>
         <Box display="inline">
           <Rating
@@ -128,17 +114,14 @@ const ItemDetailsPage: React.FC<RouteComponentProps> = ({ match }) => {
                 updateReview("");
                 if (review) {
                   saveReview(name || "Anonymous", stars, review);
-                  ItemDetails && loadReviews(ItemDetails.name);
                 }
               }}
             >
               Submit Review
             </Button>
           </Box>
         </Box>
-        <ReviewsList
-          reviews={reviews}
-        />
+        <ReviewsList reviews={reviews} />
       </Box>
     </Layout>
   );