adding react

rithmschool · Oct 20, 2017 · a92fd6b · a92fd6b
1 parent 888103d
commit a92fd6b
Show file tree

Hide file tree

Showing 225 changed files with 127,300 additions and 0 deletions.
diff --git a/react/recipe-redux-single-folder/README.md b/react/recipe-redux-single-folder/README.md
diff --git a/react/recipe-redux-single-folder/package-lock.json b/react/recipe-redux-single-folder/package-lock.json
diff --git a/react/recipe-redux-single-folder/package.json b/react/recipe-redux-single-folder/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "recipe-exercise",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "prop-types": "^15.5.10",
+    "react": "^16.0.0-rc.3",
+    "react-dom": "^16.0.0-rc.3",
+    "react-redux": "^5.0.6",
+    "react-scripts": "1.0.13",
+    "redux": "^3.7.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/react/recipe-redux-single-folder/public/avocado_toast.jpg b/react/recipe-redux-single-folder/public/avocado_toast.jpg
diff --git a/react/recipe-redux-single-folder/public/favicon.ico b/react/recipe-redux-single-folder/public/favicon.ico
diff --git a/react/recipe-redux-single-folder/public/index.html b/react/recipe-redux-single-folder/public/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Recipe App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/react/recipe-redux-single-folder/public/manifest.json b/react/recipe-redux-single-folder/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/react/recipe-redux-single-folder/public/milkshake.jpg b/react/recipe-redux-single-folder/public/milkshake.jpg
diff --git a/react/recipe-redux-single-folder/public/spaghetti.jpg b/react/recipe-redux-single-folder/public/spaghetti.jpg
diff --git a/react/recipe-redux-single-folder/src/Navbar.css b/react/recipe-redux-single-folder/src/Navbar.css
@@ -0,0 +1,60 @@
+header {
+  background-color: #2c3e50;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  padding: 0 15px;
+}
+
+header h1 {
+  text-align: center;
+}
+
+header li {
+  list-style: none;
+}
+
+header a {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.9;
+}
+
+header a:hover {
+  opacity: 1;
+}
+
+header nav {
+  display: flex;
+}
+
+header nav li {
+  margin: 0 15px;
+}
+
+header nav li:first-child {
+  margin-left: 0;
+}
+
+header nav li:last-child {
+  margin-right: 0;
+}
+
+@media (max-width: 1000px) {
+  header{
+    padding: 20px 50px;
+  }
+}
+
+
+@media (max-width: 700px) {
+  header{
+    flex-direction: column;
+  }
+
+  header h2{
+    margin-bottom: 15px;
+  }
+}
diff --git a/react/recipe-redux-single-folder/src/Navbar.js b/react/recipe-redux-single-folder/src/Navbar.js
@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import './Navbar.css';
+
+class Navbar extends Component {
+  static defaultProps = {
+    onNewRecipe() {}
+  }
+
+  static propTypes = {
+    onNewRecipe: PropTypes.func
+  }
+
+  render() {
+    return (
+      <header>
+        <h2><a>Recipe App</a></h2>
+        <nav>
+          <li><a onClick={this.props.onNewRecipe}>New Recipe</a></li>
+          <li><a>Home</a></li>
+          <li><a>About</a></li>
+          <li><a>Contact Us</a></li>
+        </nav>
+      </header>
+    );
+  }
+}
+
+export default Navbar;
diff --git a/react/recipe-redux-single-folder/src/Recipe.css b/react/recipe-redux-single-folder/src/Recipe.css
@@ -0,0 +1,29 @@
+.recipe-card {
+  width: 31%;
+  min-width: 240px;
+  margin: 1%;
+  border: 1px solid rgba(160,160,160,0.2);
+  background: white;
+  border-radius: 0 0 2px 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+}
+
+
+.recipe-card-content {
+  padding: 16px;
+}
+
+
+.recipe-card-image {
+  overflow: hidden;
+  height: 50%;
+}
+
+.recipe-card img {
+  width: 100%;
+  max-height: 250px;
+}
+
+.recipe-title {
+  margin: 0;
+}
diff --git a/react/recipe-redux-single-folder/src/Recipe.js b/react/recipe-redux-single-folder/src/Recipe.js
@@ -0,0 +1,40 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import './Recipe.css';
+
+class Recipe extends Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    ingredients: PropTypes.arrayOf(PropTypes.string).isRequired,
+    instructions: PropTypes.string.isRequired,
+    img: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
+    onDelete: PropTypes.func.isRequired
+  }
+
+  render() {
+    const {title, img, instructions, id, onDelete} = this.props;
+    const ingredients = this.props.ingredients.map((ing, index) => (
+      <li key={index}>{ing}</li> 
+    ));
+    return (
+      <div className="recipe-card">
+        <div className="recipe-card-img">
+          <img src={img} alt={title} />
+        </div>
+        <div className="recipe-card-content">
+          <h3 className="recipe-title">{title}</h3>
+          <h4>Ingredients:</h4>
+          <ul>
+            {ingredients}
+          </ul>
+          <h4>Instructions:</h4>
+          <p>{instructions}</p>
+          <button type="button" onClick={() => onDelete(id)}>DELETE</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Recipe;
diff --git a/react/recipe-redux-single-folder/src/RecipeApp.css b/react/recipe-redux-single-folder/src/RecipeApp.css
diff --git a/react/recipe-redux-single-folder/src/RecipeApp.js b/react/recipe-redux-single-folder/src/RecipeApp.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import {connect} from 'react-redux';
+import Navbar from './Navbar';
+import RecipeInput from './RecipeInput';
+import RecipeList from './RecipeList';
+import './RecipeApp.css';
+
+const RecipeApp = ({
+  shouldShowForm,
+  recipes,
+  saveRecipe,
+  deleteRecipe,
+  showForm,
+  hideForm
+}) => (
+  <div className="App">
+    <Navbar onNewRecipe={showForm} />
+    { shouldShowForm ?
+        <RecipeInput 
+          onSave={saveRecipe}
+          onClose={hideForm}  
+        /> :
+        null }
+    <RecipeList onDelete={deleteRecipe} recipes={recipes} />
+  </div>
+);
+
+const mapStateToProps = state => ({
+  recipes: state.recipes,
+  shouldShowForm: state.shouldShowForm
+});
+
+const mapDispatchToProps = dispatch => ({
+  saveRecipe(recipe) {
+    dispatch({
+      type: "SAVE_RECIPE",
+      recipe
+    })
+  },
+  deleteRecipe(recipeId) {
+    dispatch({
+      type: "DELETE_RECIPE",
+      recipeId
+    })
+  },
+  showForm() {
+    dispatch({
+      type: "SHOW_FORM"
+    })
+  },
+  hideForm() {
+    dispatch({
+      type: "HIDE_FORM"
+    })
+  }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(RecipeApp);
diff --git a/react/recipe-redux-single-folder/src/RecipeInput.css b/react/recipe-redux-single-folder/src/RecipeInput.css
@@ -0,0 +1,55 @@
+.recipe-form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 10px;
+  padding: 15px;
+  border-radius: 10px;
+  border: 7px solid #2c3e50;
+}
+
+.recipe-form input[type=text] {
+    padding: 5px 8px;
+    box-sizing: border-box;
+}
+
+.recipe-form-line {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 5px;
+}
+
+.recipe-form-line input {
+  margin-left: 15px;
+}
+
+.buttons {
+  color: white;
+  background-color: #2c3e50;
+  border-radius: 6px;
+  padding: 0 10px 1px 10px;
+  margin: 8px 0;
+  align-self: flex-end;
+  font-size: 1.1em;
+}
+
+.close-button {
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  font-size: 0.9em;
+  color: #777;
+  text-shadow: 0 1px 0 #fff;
+  align-self: flex-end;
+}
+
+.recipe-form-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}