all files are added

.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+.pnp/
+.pnp.js
+
+# testing
+coverage/
+
+# production
+build/
+
+# misc
+.eslintcache
+.DS_Store
+.env
+.env.*
+!.env.sample
+.idea/
+.vscode/
+.vercel
+.screenshots/
+.qualified-attach
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/environment.md

@@ -0,0 +1,17 @@
+# Execution Environment
+
+Two separate environments exist for this challenge. The test environment, which is remotely executed within a NodeJS runtime, and the web preview environment, which is bundled using CodeSandbox's Sandpack. The `package.json` does not control both environments.
+
+## Test Environment
+
+The code for this project is tested using Node 12 with Jest as the test framework. JSX is supported as well as ES6 imports. The code is executed in a remote environment, not within your browser. Any `console.log` statements executed while running tests will not send logs to your browser, but the output will be shown at the bottom of your tests. Jest does not support inline `console.log` statements, this is why logs come after all test output.
+
+Any package that is already loaded into the runner environment is able to be used; there is no `package.json` file that manages what is executed within tests. Candidates are not able to import any packages that are not already installed.
+
+Stylesheets and other assets can be imported. See `jest.config.js` and the `__mocks__` directory to see what is loaded in their place. By default, these imports are essentially just ignored and don't do anything, when running tests.
+
+## Web Preview Environment
+
+The web preview environment uses Sandpack to bundle assets. The `package.json` file is used to determine what gets loaded into this environment. There are no special config files, everything is inferred from `package.json`.
+
+Customization is possible here, though you need to be careful not to use different versions within the web preview environment than what is loaded within the test environment. In some cases you can load additional dependencies if it is only cosmetic (styling) or meant for building preview assets, but those dependencies may not be available within the runner environment and can cause issues with your tests.

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  verbose: false,
+  testEnvironment: "jsdom",
+  reporters: [["jest-reporter", {}]],
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/__mocks__/fileMock.js",
+    "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js",
+  },
+};

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "recipe-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1"
+  },
+  "scripts": {
+    "build": "react-scripts build",
+    "docker:build": "docker image build . -t thinkful-ed/zid-fe-react-state-management-xx-assignment",
+    "docker:run": "docker run --rm -it -p 3000:3000 thinkful-ed/zid-fe-react-state-management-xx-assignment",
+    "docker:stop": "docker stop $(docker ps -q)",
+    "docker:test": "docker run -t  thinkful-ed/zid-fe-react-state-management-xx-assignment npm test",
+    "eject": "react-scripts eject",
+    "start": "react-scripts start",
+    "start:solution": "npm run -it docker:build && npm run docker:run",
+    "test": "react-scripts test",
+    "test:solution": "npm run docker:build && npm run docker:test"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      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>React 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>

public/manifest.json

@@ -0,0 +1,8 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css

@@ -0,0 +1,60 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display+SC');
+
+.App {
+  padding: 1em;
+}
+
+label {
+  display: inline-block;
+  width: 100px;
+}
+
+header {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+/* typography */
+
+html {
+  font-family: 'helvetica neue', sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt';
+}
+
+th {
+  letter-spacing: 2px;
+  padding: 10px;
+}
+
+td {
+  letter-spacing: 1px;
+  overflow-x:hidden;
+  overflow-y:hidden;
+  font-size: 12px;
+  padding: 10px;
+  text-align: center;
+}
+
+/* table */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  overflow:hidden;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.content_td p {
+  max-width: 100%;
+  max-height: 100px;
+  overflow-y: auto;
+  text-overflow: ellipsis;
+}
+
+/* Column Size for thead */
+
+
+/* Column size for tbody */

src/App.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import "./App.css";
+import RecipeCreate from "./RecipeCreate";
+import RecipeList from "./RecipeList";
+import RecipeData from "./RecipeData"
+
+function App() {
+  const [recipes, setRecipes] = useState(RecipeData);
+  const createRecipe = (newReceipe) => {
+    setRecipes([...recipes, newReceipe])
+  }
+  const deleteRecipe = (index) => {
+    const updatedRecipes = [...recipes];
+    updatedRecipes.splice(index, 1);
+    setRecipes(updatedRecipes);
+  };
+
+  // TODO: Add the ability for the <RecipeList /> component to list and delete an existing recipe.
+  // TODO: Add the ability for the <RecipeCreate /> component to create new recipes.
+
+
+  return (
+    <div className="App">
+      <header><h1>Delicious Food Recipes</h1></header>
+      <RecipeList recipes={recipes} deleteRecipe={deleteRecipe} />
+      <RecipeCreate createRecipe={createRecipe}/>
+    </div>
+  );
+}
+
+export default App;

src/RecipeCreate.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+function RecipeCreate({createRecipe}) {
+  const initialStateForm={
+    name:"",
+    cuisine:"",
+    photo:"",
+    ingredients:"",
+    preparation:"",
+  };
+  const [formData, setFormData] = useState({...initialStateForm});
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    createRecipe(formData);
+    setFormData({...initialStateForm});
+  }
+  const handleChange = ({target}) => {
+    setFormData({...formData, [target.name]:target.value})
+  }
+
+  // TODO: When the form is submitted, a new recipe should be created, and the form contents cleared.
+  // TODO: Add the required input and textarea form elements.
+  // TODO: Add the required submit and change handlers
+
+  return (
+    <form name="create" onSubmit={handleSubmit}>
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <input
+                id="name"
+                type="text"
+                name="name"
+                required={true}
+                onChange={handleChange}
+                value={formData.name}
+                placeholder="Name"
+                />
+            </td>
+            <td>
+              <input
+                id="cuisine"
+                type="text"
+                name="cuisine"
+                required={true}
+                placeholder="Cuisine"
+                value={formData.cuisine}
+                onChange={handleChange}
+                />
+            </td>
+            <td>
+              <input
+                id="photo"
+                name="photo"
+                type="text"
+                required={true}
+                onChange={handleChange}
+                value={formData.photo}
+                placeholder="URL"
+                />
+            </td>
+            <td>
+              <textarea
+                id="ingredients"
+                type="text"
+                name="ingredients"
+                required={true}
+                rows={2}
+                placeholder="Ingredients"
+                value={formData.ingredients}
+                onChange={handleChange}
+                />
+            </td>
+            <td>
+              <textarea
+                id="preparation"
+                type="text"
+                name="preparation"
+                required={true}
+                rows={2}
+                placeholder="Preparation"
+                value={formData.preparation}
+                onChange={handleChange}
+                />
+            </td>
+            <td>
+              <button type="submit">Create</button>
+            </td> 
+          </tr>
+        </tbody>
+      </table>
+    </form>
+  );
+}
+
+export default RecipeCreate;

src/RecipeData.js

@@ -0,0 +1,23 @@
+/**
+* This is the data that is initially loaded.
+* Please do not modify this file.
+*/
+
+const RecipeData = [
+  {
+    name: "Tuna Poke with Mango",
+    cuisine: "Hawaiian",
+    photo: "https://www.foodista.com/sites/default/files/styles/recype/public/tunapokebowlwithmango22.jpg",
+    ingredients: "1 package of sushi grade tuna. 1 cup cooked quinoa ½ avocado, sliced. ½ mango, cubed. 1 shredded carrot. 1 small sliced cucumber. poke sauce.",
+    preparation: "1. Chop tuna into cubes. 2. Toss with 1 tbsp sesame oil and 1 tbsp tamari. Set aside. 3. Layer your poke bowl starting with quinoa. 4. Whisk all poke sauce ingredients in a bowl and pour over the poke bowl. 5. Garnish with sesame seeds and furikake. 6. Top with chopped scallions."
+  },
+  {
+    name: "Guacamole",
+    cuisine: "Mexican",
+    photo: "https://www.foodista.com/sites/default/files/styles/recype/public/017.jpg",
+    ingredients: "3 ripe avocados. ¾ cup finely chopped Roma tomato. 2 serrano chiles very finely chopped (seeded and deveined). 3 heaping tablespoons of finely chopped onion. 3 tablespoons of minced cilantro. Salt to taste",
+    preparation: "1. Remove the flesh of the avocados. 2. Mash the avocados with the back of a fork. 3. Add the other ingredients and incorporate evenly. 4. Add salt to taste."
+  },
+];
+
+export default RecipeData;