Implemented basic layout and functionalities for Recipe Search Results page and Recipe Detail page

debug.log

@@ -0,0 +1 @@
+[1110/201713.186:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

package.json

@@ -6,16 +6,19 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material/menu": "^7.0.0",
+    "axios": "^0.21.0",
     "bootstrap": "4.5.0",
     "classnames": "2.2.6",
+    "concurrently": "5.2.0",
     "flask-cors": "^0.0.1",
     "fontsource-roboto": "^3.0.3",
     "fs-extra": "9.0.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "5.2.0",
     "react-scripts": "^4.0.0",
-    "concurrently": "5.2.0"
+    "redux": "^4.0.5"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.jsx

@@ -1,40 +1,31 @@
 import React from 'react';
-
 import { Switch, Route } from 'react-router-dom';
 import './App.css';
 import NavBar from './pages/NavBar';
-
-import Footer from './pages/Footer';
-
-import AddRecipes from './pages/AddRecipes/AddRecipes';
-
+import AddIngredients from './pages/AddIngredients/AddIngredients';
 import RecipeSearchResults from './pages/RecipeSearchResults/RecipeSearchResults';
-
 import RecipeDetail from './pages/RecipeDetail/RecipeDetail';
-
 import FavouriteRecipes from './pages/FavouriteRecipes/FavouriteRecipes';
-
 import ShoppingList from './pages/ShoppingList/ShoppingList';
-
 import CalorieTracker from './pages/CalorieTracker/CalorieTracker';
-
 import RecipeCart from './pages/RecipeCart/RecipeCart';
+import ScrollIntoView from './components/common/ScrollIntoView';
 
-//TODO Web Template Studio: Add routes for your new pages here.
 const App = () => {
   return (
     <React.Fragment>
-      <NavBar />
-      <Switch>
-        <Route exact path='/' component={AddRecipes} />
-        <Route path='/RecipeSearchResults' component={RecipeSearchResults} />
-        <Route path='/RecipeDetail/:recipe_id' component={RecipeDetail} />
-        <Route path='/FavouriteRecipes' component={FavouriteRecipes} />
-        <Route path='/ShoppingList' component={ShoppingList} />
-        <Route path='/CalorieTracker' component={CalorieTracker} />
-        <Route path='/RecipeCart' component={RecipeCart} />
-      </Switch>
-      <Footer />
+      <ScrollIntoView>
+        <NavBar />
+        <Switch>
+          <Route exact path='/' component={AddIngredients} />
+          <Route exact path='/favourite-recipes' component={FavouriteRecipes} />
+          <Route exact path='/shopping-list' component={ShoppingList} />
+          <Route exact path='/calorie-tracker' component={CalorieTracker} />
+          <Route exact path='/recipe-cart' component={RecipeCart} />
+          <Route exact path='/recipe-search-results/:recipe_id' component={RecipeDetail} />
+          <Route exact path='/recipe-search-results' component={RecipeSearchResults} />
+        </Switch>
+        </ScrollIntoView>
     </React.Fragment>
   );
 }

src/components/RecipeDetail/Ingredients.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Ingredients = () => {
+
+    return (
+      <div>
+        Ingredients
+      </div>
+    );
+  }
+
+  export default Ingredients;

src/components/RecipeDetail/NutritionFacts.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const NutritionFacts = () => {
+
+    return (
+      <div>
+        Nutrition
+      </div>
+    );
+  }
+
+  export default NutritionFacts;

src/components/RecipeDetail/RecipeInstruction.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const RecipeInstruction = () => {
+
+    return (
+      <div>
+          <ul>
+              <li>Step 1</li>
+              <li>Step 2</li>
+              <li>Step 3</li>
+          </ul>
+      </div>
+    );
+  }
+
+  export default RecipeInstruction;

src/components/RecipeDetail/RecipeRating.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const RecipeRating = () => {
+
+    return (
+      <div>
+        5.0/5.0
+      </div>
+    );
+  }
+
+  export default RecipeRating;

src/components/RecipeDetail/RecipeUserNotes.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const RecipeUserNotes = () => {
+
+    return (
+      <div>
+          <p>Some User Notes Here</p>
+      </div>
+    );
+  }
+
+  export default RecipeUserNotes;

src/components/common/RecipeCard.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+      flexGrow: 1,
+      marginTop: 50
+    },
+    grid: {
+      width: '100%',
+      margin: '0px'
+    },
+    leftColumn: {
+      marginLeft: 50
+    },
+    recipePaper: {
+      padding: theme.spacing.unit * 2,
+      textAlign: 'center',
+      color: 'black',
+      marginBottom: 20,
+    }
+  }));
+
+const RecipeCard = (props) => {
+    const classes = useStyles();
+    const imgStyle = {
+        height: 'auto',
+        maxWidth: '20%'
+    };
+
+  return (
+    <div className={classes.root}> 
+       <Grid container spacing={7} className={classes.grid} direction="row">         
+          <Grid item xs={8} md={8}  className={classes.leftColumn}>
+            <Paper className={classes.recipePaper}>
+              <img src={props.imageUrl} alt="" style={imgStyle}></img>
+              <p> Recipe ID: {props.recipeId} </p>
+              <p> Recipe Name: {props.recipeName} </p>
+              <p> Time to Cook: {props.timeToCookInMinutes} </p>
+              <p> Calories: {props.calories} </p>
+              <p> Servings: {props.servings} </p>
+            </Paper>
+          </Grid>
+        </Grid>
+    </div>
+  );
+}
+
+RecipeCard.propTypes = {
+    imageUrl: PropTypes.string,
+    recipeName: PropTypes.string,
+    recipeId: PropTypes.number,
+    timeToCookInMinutes: PropTypes.number,
+    calories: PropTypes.number,
+    servings: PropTypes.number
+};
+
+export default RecipeCard;

src/components/common/ScrollIntoView.jsx

@@ -0,0 +1,20 @@
+import { PureComponent } from "react";
+import { withRouter } from "react-router-dom";
+import PropTypes from 'prop-types';
+
+class ScrollIntoView extends PureComponent {
+  componentDidMount = () => window.scrollTo(0, 0);
+
+  componentDidUpdate = prevProps => {
+    if (this.props.location !== prevProps.location) window.scrollTo(0, 0);
+  };
+
+  render = () => this.props.children;
+}
+
+ScrollIntoView.propTypes = {
+  location: PropTypes.string,
+  children: PropTypes.string,
+};
+
+export default withRouter(ScrollIntoView);

src/constants.js

@@ -2,6 +2,10 @@
 
 CONSTANTS.APP_NAME = 'ChefCoPilot';
 
+// Used for deployment
+// CONSTANTS.BACKEND_URL = 'https://chefcopilotbackend.herokuapp.com';
+
+CONSTANTS.LOCAL_HOST_BACKEND_URL = "http://localhost:3001";
 CONSTANTS.BACKEND_URL = 'http://localhost:3001'//'https://chefcopilotbackend.herokuapp.com';
 
 CONSTANTS.ERROR_MESSAGE = {};
@@ -20,6 +24,7 @@ CONSTANTS.ENDPOINT.MASTERDETAIL = `${CONSTANTS.BACKEND_URL}/api/masterdetail`;
 CONSTANTS.ENDPOINT.REMOVE_SHOPPING_LIST_ITEM = `${CONSTANTS.BACKEND_URL}/api/remove_item_from_shopping_list`;
 CONSTANTS.ENDPOINT.ADD_SHOPPING_LIST_ITEM = `${CONSTANTS.BACKEND_URL}/api/add_item_to_shopping_list`;
 CONSTANTS.ENDPOINT.GET_SHOPPING_LIST = `${CONSTANTS.BACKEND_URL}/api/shopping_list`;
+CONSTANTS.ENDPOINT.GET_ALL_RECIPES = `${CONSTANTS.LOCAL_HOST_BACKEND_URL}/api/recipes`
 CONSTANTS.ENDPOINT.FAVOURITES_LIST = `${CONSTANTS.BACKEND_URL}/api/favourites_list`;
 
 export default CONSTANTS;

src/pages/AddRecipes/AddRecipes.jsx → src/pages/AddIngredients/AddIngredients.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Button from '@material-ui/core/Button';
 
-const AddRecipes = () => {
+const AddIngredients = () => {
   return <main id="mainContent">
     <div className="container">
       <div className="row justify-content-center mt-5 p-0">
@@ -13,4 +13,4 @@ const AddRecipes = () => {
     </div>
   </main>;
 }
-export default AddRecipes;
+export default AddIngredients;

src/pages/NavBar/index.jsx

@@ -57,24 +57,21 @@ const NavBar = () => {
         </Link>
         <div className="navbar-nav">
           <Link className="nav-item nav-link active" to="/">
-            Add Recipes
+            Add Ingredients
           </Link>
-          <Link className="nav-item nav-link active" to="RecipeSearchResults">
+          <Link className="nav-item nav-link active" to="/recipe-search-results">
             Recipe Search Results
           </Link>
-          <Link className="nav-item nav-link active" to="RecipeDetail">
-            Recipe Detail
-          </Link>
-          <Link className="nav-item nav-link active" to="FavouriteRecipes">
+          <Link className="nav-item nav-link active" to="/favourite-recipes">
             Favourite Recipes
           </Link>
-          <Link className="nav-item nav-link active" to="CalorieTracker">
-            Calorie Tracker
+          <Link className="nav-item nav-link active" to="/calorie-tracker">
+            Nutrition Tracker
           </Link>
-          <Link className="nav-item nav-link active" to="ShoppingList">
+          <Link className="nav-item nav-link active" to="/shopping-list">
             Shopping List
           </Link>
-          <Link className="nav-item nav-link active" to="RecipeCart">
+          <Link className="nav-item nav-link active" to="/recipe-cart">
             Recipe Cart
           </Link>
           <SimpleMenu></SimpleMenu>