create an add rest page.

src/components/ApplicationViews.js

@@ -12,6 +12,7 @@ import { SingleReview } from "./review/SingleReview";
 import { ReviewRestaurants } from "./review/ReviewRestaurants";
 import { ReviewMenuItems } from "./review/ReviewMenuItems";
 import { Review } from "./review/Review";
+import { AddRest } from "./review/AddRest"
 
 export const ApplicationViews = () => {
   return (
@@ -34,6 +35,7 @@ export const ApplicationViews = () => {
         />
 
         <ReviewProvider>
+
           <Route
             exact
             path="/review/menuitem/:menuitemId"
@@ -57,14 +59,14 @@ export const ApplicationViews = () => {
             }}
           />
 
-          <Route
+
+<Route
             exact
-            path="/review/restaurants/:restaurantId"
+            path="/review/restaurants/create"
             render={(props) => {
-              return <ReviewMenuItems {...props} />;
+              return <AddRest {...props} />;
             }}
           />
-
           <Route
             exact
             path="/reviews"
@@ -79,6 +81,13 @@ export const ApplicationViews = () => {
               return <SingleReview {...props} />;
             }}
           />
+          <Route
+            exact
+            path="/review/menuItems/:restaurantId"
+            render={(props) => {
+              return <ReviewMenuItems {...props} />;
+            }}
+          />
         </ReviewProvider>
       </ProfileProvider>
     </>

src/components/review/AddRest.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const AddRest = () => {
+  return (
+   <div>
+     <h1>hello</h1>
+   </div>
+  );
+}

src/components/review/ReviewRestaurants.js

@@ -32,7 +32,9 @@ export const ReviewRestaurants = (props) => {
   }, []);
   console.log("these are rests", restaurants);
   return (
+
     <div className="restaurant-list text-center justify-center align-items-center ">
+
       <h1>Please select a restaurant:</h1>
       <Tooltip title="back" aria-label="back">
         <Fab size="small" href="/reviews" color="primary" aria-label="back">
@@ -52,7 +54,7 @@ export const ReviewRestaurants = (props) => {
       {restaurants && restaurants.length > 0
         ? restaurants.map((restaurant) => (
             <Button
-              href={`/review/restaurants/${restaurant.id}`}
+              href={`/review/menuItems/${restaurant.id}`}
               variant="outlined"
               className="button-menu-item"
             >

src/components/review/Reviews.js

@@ -1,4 +1,4 @@
-import { React, useContext, useEffect } from "react";
+import { React, useContext, useEffect, useState } from "react";
 import { ReviewContext } from "./ReviewProvider";
 
 import { Card, Button } from "react-bootstrap";
@@ -15,6 +15,10 @@ import "./review.css";
 
 export const Reviews = (props) => {
   const { reviews, getReviewsByUserId } = useContext(ReviewContext);
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
 
   useEffect(() => {
     const userId = localStorage.getItem("user_id");
@@ -38,7 +42,7 @@ export const Reviews = (props) => {
               color="primary"
               aria-label="add"
             >
-              <AddIcon />
+              <AddIcon/>
             </Fab>
           </Tooltip>
           <Tooltip title="back" aria-label="back">