From ddc1ac5a811c1a070a3b5e1a798c0ce1d8d38806 Mon Sep 17 00:00:00 2001
From: Sumedha Pramod <sumedha.pramod@gmail.com>
Date: Thu, 12 Mar 2020 23:17:32 -0700
Subject: [PATCH] Refactor

---
 public/index.html                             |  2 +-
 src/App.tsx                                   | 16 ++++-------
 .../ToppingCard.css => ItemCard/ItemCard.css} |  8 +++---
 .../ToppingCard.tsx => ItemCard/ItemCard.tsx} | 24 ++++++++--------
 .../ItemList.css}                             |  2 +-
 src/components/ItemList/ItemList.tsx          | 17 +++++++++++
 src/components/ToppingsList/ToppingsList.tsx  | 16 -----------
 src/routes/Homepage.tsx                       | 20 ++++++++-----
 ...ingDetailsPage.tsx => ItemDetailsPage.tsx} | 24 +++++++---------
 src/routes/ItemPage.tsx                       | 26 +++++++++++++++++
 src/routes/Toppings.tsx                       | 28 -------------------
 src/utils/globals.ts                          |  5 ++++
 12 files changed, 95 insertions(+), 93 deletions(-)
 rename src/components/{ToppingCard/ToppingCard.css => ItemCard/ItemCard.css} (62%)
 rename src/components/{ToppingCard/ToppingCard.tsx => ItemCard/ItemCard.tsx} (51%)
 rename src/components/{ToppingsList/ToppingsList.css => ItemList/ItemList.css} (69%)
 create mode 100644 src/components/ItemList/ItemList.tsx
 delete mode 100644 src/components/ToppingsList/ToppingsList.tsx
 rename src/routes/{ToppingDetailsPage.tsx => ItemDetailsPage.tsx} (73%)
 create mode 100644 src/routes/ItemPage.tsx
 delete mode 100644 src/routes/Toppings.tsx

diff --git a/public/index.html b/public/index.html
index 01a9524..667fba8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/tacopundit/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Taco Topping Rating App" />
+    <meta name="description" content="Taco Item Rating App" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/tacopundit/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.tsx b/src/App.tsx
index 7002fec..aa6a4eb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,13 @@
 import React from "react";
 import "typeface-roboto";
 
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect
-} from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 import NotFoundPage from "./routes/NotFoundPage";
-import Homepage from "./routes/Homepage";
-import ToppingDetailsPage from "./routes/ToppingDetailsPage";
+import ItemPage from "./routes/ItemPage";
 
 import initializeFirebase from "./utils/firebase/init";
+import ItemDetailsPage from "./routes/ItemDetailsPage";
 
 const App: React.FC = () => {
   initializeFirebase();
@@ -20,9 +15,8 @@ const App: React.FC = () => {
   return (
     <Router basename="/tacopundit">
       <Switch>
-        <Redirect exact path="/" to="/toppings" />
-        <Route exact path="/toppings" component={Homepage} />
-        <Route path={`/toppings/:slug`} component={ToppingDetailsPage} />
+        <Route exact path="/" component={ItemPage} />
+        <Route path="/:slug" component={ItemDetailsPage} />
         <Route path="*" component={NotFoundPage} />
       </Switch>
     </Router>
diff --git a/src/components/ToppingCard/ToppingCard.css b/src/components/ItemCard/ItemCard.css
similarity index 62%
rename from src/components/ToppingCard/ToppingCard.css
rename to src/components/ItemCard/ItemCard.css
index 2dde2e1..16b3c37 100644
--- a/src/components/ToppingCard/ToppingCard.css
+++ b/src/components/ItemCard/ItemCard.css
@@ -1,17 +1,17 @@
-.topping-card {
+.item-card {
   width: 240px;
   margin: 10px;
 }
 
-.topping-card:hover {
+.item-card:hover {
   background: lightgreen;
 }
 
-.topping-card h1 {
+.item-card h1 {
   font-size: 24px;
   text-transform: capitalize;
 }
 
-.topping-card-link-wrapper {
+.item-card-link-wrapper {
   text-decoration: none;
 }
diff --git a/src/components/ToppingCard/ToppingCard.tsx b/src/components/ItemCard/ItemCard.tsx
similarity index 51%
rename from src/components/ToppingCard/ToppingCard.tsx
rename to src/components/ItemCard/ItemCard.tsx
index 685ae39..caa3503 100644
--- a/src/components/ToppingCard/ToppingCard.tsx
+++ b/src/components/ItemCard/ItemCard.tsx
@@ -2,15 +2,15 @@ import React from "react";
 import { Card, CardContent } from "@material-ui/core";
 import ReactMarkdown from "react-markdown";
 
-import "./ToppingCard.css";
+import "./ItemCard.css";
 import { Link } from "react-router-dom";
 
-export type Topping = {
+export type Item = {
   name: string;
   slug: string;
-  recipe: string;
-  url: string;
-  uuid: string;
+  recipe?: string;
+  url?: string;
+  uuid?: string;
 };
 
 const shortenString = (str: string, maxLen: number, separator = " ") => {
@@ -18,15 +18,17 @@ const shortenString = (str: string, maxLen: number, separator = " ") => {
   return str.substr(0, str.lastIndexOf(separator, maxLen));
 };
 
-const ToppingCard: React.FC<{ topping: Topping }> = ({ topping }) => (
-  <Link to={`/toppings/${topping.slug}`} className="topping-card-link-wrapper">
-    <Card className="topping-card">
+const ItemCard: React.FC<{ item: Item }> = ({ item }) => (
+  <Link to={`/${item.slug}`} className="item-card-link-wrapper">
+    <Card className="item-card">
       <CardContent>
-        <h2>{topping.name}</h2>
-        <ReactMarkdown source={`${shortenString(topping.recipe, 200)}...`} />
+        <h2>{item.name}</h2>
+        {item.recipe && (
+          <ReactMarkdown source={`${shortenString(item.recipe, 200)}...`} />
+        )}
       </CardContent>
     </Card>
   </Link>
 );
 
-export default ToppingCard;
+export default ItemCard;
diff --git a/src/components/ToppingsList/ToppingsList.css b/src/components/ItemList/ItemList.css
similarity index 69%
rename from src/components/ToppingsList/ToppingsList.css
rename to src/components/ItemList/ItemList.css
index 0eb04d8..1673b57 100644
--- a/src/components/ToppingsList/ToppingsList.css
+++ b/src/components/ItemList/ItemList.css
@@ -1,4 +1,4 @@
-.toppings-list {
+.items-list {
   display: flex;
   flex-wrap: wrap;
 }
diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx
new file mode 100644
index 0000000..e57798d
--- /dev/null
+++ b/src/components/ItemList/ItemList.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { List } from "@material-ui/core";
+
+import "./ItemList.css";
+import ItemCard, { Item } from "../ItemCard/ItemCard";
+
+const ItemList: React.FC<{ items: Array<Item> }> = ({ items }) => {
+  return (
+    <List className="items-list">
+      {items.map(item => (
+        <ItemCard item={item} />
+      ))}
+    </List>
+  );
+};
+
+export default ItemList;
diff --git a/src/components/ToppingsList/ToppingsList.tsx b/src/components/ToppingsList/ToppingsList.tsx
deleted file mode 100644
index 78a167b..0000000
--- a/src/components/ToppingsList/ToppingsList.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import "./ToppingsList.css";
-import ToppingCard, { Topping } from "../ToppingCard/ToppingCard";
-import { List } from "@material-ui/core";
-
-const ToppingsList: React.FC<{ toppings: Array<Topping> }> = ({ toppings }) => (
-  <List className="toppings-list">
-    {toppings.map(topping => (
-      <ToppingCard topping={topping} />
-    ))}
-  </List>
-);
-//<pre>{JSON.stringify(toppings, null, 2)}</pre>;
-
-export default ToppingsList;
diff --git a/src/routes/Homepage.tsx b/src/routes/Homepage.tsx
index 46de3e2..50b0da2 100644
--- a/src/routes/Homepage.tsx
+++ b/src/routes/Homepage.tsx
@@ -3,24 +3,30 @@ import "typeface-roboto";
 import { Typography } from "@material-ui/core";
 
 import Layout from "../components/Layout/Layout";
-import ToppingsList from "../components/ToppingsList/ToppingsList";
-import { Topping } from "../components/ToppingCard/ToppingCard";
-
 import { TACO_API_BASE } from "../utils/globals";
 
+type Category = {
+  name: string;
+  slug: string;
+};
+
 const Homepage: React.FC = () => {
-  const [toppings, setToppings] = React.useState<Array<Topping>>([]);
+  const [categories, setCategories] = React.useState<Array<Category>>([]);
 
   React.useEffect(() => {
     fetch(`${TACO_API_BASE}/toppings`)
       .then(response => response.json())
-      .then(setToppings);
+      .then(setCategories);
   }, []);
 
   return (
     <Layout>
-      <Typography variant="h3">Taco Toppings</Typography>
-      <ToppingsList toppings={toppings} />
+      <Typography variant="h3">Categories</Typography>
+      {categories.map(({ name, slug }: Category) => (
+        <p>
+          <a href={`/tacopundit/${slug}`}>{name}</a>
+        </p>
+      ))}
     </Layout>
   );
 };
diff --git a/src/routes/ToppingDetailsPage.tsx b/src/routes/ItemDetailsPage.tsx
similarity index 73%
rename from src/routes/ToppingDetailsPage.tsx
rename to src/routes/ItemDetailsPage.tsx
index 9cf6451..2bddb23 100644
--- a/src/routes/ToppingDetailsPage.tsx
+++ b/src/routes/ItemDetailsPage.tsx
@@ -4,37 +4,33 @@ import ReactMarkdown from "react-markdown";
 import { TextField, Box, Typography, Button } from "@material-ui/core";
 
 import Layout from "../components/Layout/Layout";
-import { TACO_API_BASE } from "../utils/globals";
+import { TACO_API_BASE, RouteParams } from "../utils/globals";
 
-type ToppingDetails = {
+type ItemDetails = {
   name: string;
   slug: string;
   recipe: string;
   url: string;
 };
 
-type RouteParams = {
-  slug: string;
-};
-
-const ToppingDetailsPage: React.FC<RouteComponentProps> = ({ match }) => {
+const ItemDetailsPage: React.FC<RouteComponentProps> = ({ match }) => {
   const { slug } = match.params as RouteParams;
-  const [toppingDetails, setToppingDetails] = React.useState<ToppingDetails>();
+  const [ItemDetails, setItemDetails] = React.useState<ItemDetails>();
 
   React.useEffect(() => {
     fetch(`${TACO_API_BASE}/toppings/${slug}.json`)
       .then(response => response.json())
-      .then(setToppingDetails);
+      .then(setItemDetails);
   }, [slug]);
 
   const [review, updateReview] = React.useState<string>();
 
   return (
     <Layout>
-      {toppingDetails && (
+      {ItemDetails && (
         <>
-          <h1>{toppingDetails.name}</h1>
-          <ReactMarkdown source={toppingDetails.recipe} />
+          <h1>{ItemDetails.name}</h1>
+          <ReactMarkdown source={ItemDetails.recipe} />
         </>
       )}
       <Box>
@@ -44,7 +40,7 @@ const ToppingDetailsPage: React.FC<RouteComponentProps> = ({ match }) => {
             variant="outlined"
             fullWidth
             multiline
-            placeholder="Review this taco topping"
+            placeholder="Review this taco Item"
             style={{ marginRight: "10px" }}
             value={review}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -68,4 +64,4 @@ const ToppingDetailsPage: React.FC<RouteComponentProps> = ({ match }) => {
   );
 };
 
-export default ToppingDetailsPage;
+export default ItemDetailsPage;
diff --git a/src/routes/ItemPage.tsx b/src/routes/ItemPage.tsx
new file mode 100644
index 0000000..929c117
--- /dev/null
+++ b/src/routes/ItemPage.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import "typeface-roboto";
+
+import Layout from "../components/Layout/Layout";
+import ItemList from "../components/ItemList/ItemList";
+import { Item } from "../components/ItemCard/ItemCard";
+
+import { TACO_API_BASE } from "../utils/globals";
+
+const ItemPage: React.FC = () => {
+  const [items, setItem] = React.useState<Array<Item>>([]);
+
+  React.useEffect(() => {
+    fetch(`${TACO_API_BASE}/toppings`)
+      .then(response => response.json())
+      .then(setItem);
+  }, []);
+
+  return (
+    <Layout>
+      <ItemList items={items} />
+    </Layout>
+  );
+};
+
+export default ItemPage;
diff --git a/src/routes/Toppings.tsx b/src/routes/Toppings.tsx
deleted file mode 100644
index 9c00c59..0000000
--- a/src/routes/Toppings.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import "typeface-roboto";
-import { Typography } from "@material-ui/core";
-
-import Layout from "../components/Layout/Layout";
-import ToppingsList from "../components/ToppingsList/ToppingsList";
-import { Topping } from "../components/ToppingCard/ToppingCard";
-
-import { TACO_API_BASE } from "../utils/globals";
-
-const ToppingsPage: React.FC = () => {
-  const [toppings, setToppings] = React.useState<Array<Topping>>([]);
-
-  React.useEffect(() => {
-    fetch(`${TACO_API_BASE}/toppings`)
-      .then(response => response.json())
-      .then(setToppings);
-  }, []);
-
-  return (
-    <Layout>
-      <Typography variant="h3">Taco Toppings</Typography>
-      <ToppingsList toppings={toppings} />
-    </Layout>
-  );
-};
-
-export default ToppingsPage;
diff --git a/src/utils/globals.ts b/src/utils/globals.ts
index b265c89..45d00b6 100644
--- a/src/utils/globals.ts
+++ b/src/utils/globals.ts
@@ -1 +1,6 @@
 export const TACO_API_BASE = "https://pramodsum.github.io/taco-pundit-api";
+
+export type RouteParams = {
+  slug?: string;
+  category?: string;
+};