Refactor

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

src/App.tsx

@@ -1,28 +1,22 @@
 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();
 
   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>

src/components/ToppingCard/ToppingCard.css → 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;
 }

src/components/ToppingCard/ToppingCard.tsx → src/components/ItemCard/ItemCard.tsx

@@ -2,31 +2,33 @@ 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 = " ") => {
   if (str.length <= maxLen) return str;
   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;

src/components/ToppingsList/ToppingsList.css → src/components/ItemList/ItemList.css

@@ -1,4 +1,4 @@
-.toppings-list {
+.items-list {
   display: flex;
   flex-wrap: wrap;
 }

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;

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>
   );
 };

src/routes/ToppingDetailsPage.tsx → 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;

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;

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;
+};