Alaa Houerbi

.gitignore

@@ -0,0 +1,25 @@
+
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.prettierrc
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "front",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "serve": "^12.0.0",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

src/App.css

@@ -0,0 +1,55 @@
+.App {
+  text-align: center;
+}
+.wrapperOfAll{
+  height: 90vh;
+  margin: 2rem;
+  display: grid;
+  grid-template-areas:   
+    "nav main add";  
+  grid-template-columns: 5% 1fr 15%;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+}
+.main{
+  background-color:#fafafa;
+  grid-area: "main";
+}
+
+.add{
+  grid-area: "add";
+}
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,136 @@
+//import logo from './logo.svg';
+import './App.css';
+import Items from './items/items.jsx'
+import AddItem from './items/addItem'
+import React, { useState } from "react";
+import SideList from './sideList/sideList';
+import { ContextClickOnItem } from "./ItemClickContext";
+function SideListView(props){
+  return(
+  <div key="sideListViewGroupConditional">
+
+    <SideList   handleChildEdit={props.handleChildEdit}
+     key="list" list={props.sideList}  setViewToAddItem={props.setViewToAddItem}/>    
+    <button  onClick={props.setViewToAddItem}>Add an Item Instead</button>
+  </div>)
+}
+
+
+function manageList(oldState,category,name){
+  //recieves list and item to add
+  //returns new list
+  //adds item if item doesnt exist
+  //incr quantity if item exists
+  let newList=[...oldState];
+ const index=newList.findIndex((elem)=>elem.category===category);
+ if(index===-1){
+
+   throw new Error('unexistant category');
+ }else{
+   let elemsArray=[...newList[index].elems]
+   let i=elemsArray.findIndex((item)=>item.name===name);
+    if(elemsArray.length===0||i===-1){
+      elemsArray.push({name:name,qt:1});
+    }else{
+      elemsArray[i].qt=parseInt(elemsArray[i].qt)+1
+      //if i dont do this parseInt it treats like a string lol its weird
+    }
+    newList[index].elems=elemsArray;
+
+ }
+ return newList;
+}
+
+function App() {
+  function setViewToAddItem() {
+  setCurView("addItem");
+}
+function handleChildEdit(arrayOfChanges){
+  setSideList(arrayOfChanges);
+
+}
+  const [sideList,setSideList]=useState([
+    {category:"Fruits",elems:[]},
+    {category:"Veggie",elems:[]},
+    {category:"Meat",elems:[]}
+  ]);
+  const [curView,setCurView]=useState("addItem")//hold the state of which view we want to show
+  //possible Views are addView , itemView, sideListView
+
+  function addItemToSideList(category,item) {
+    setCurView("sideListView")
+    setSideList(manageList(sideList,category,item.name))
+    }
+
+
+ let array= 
+ [
+   {category:"Fruits",
+    elems:[
+      {name:"watermelon"},{name:"orange"},
+      {name:"apple"},{name:"kiwi"},{name:"banana"},
+      {name:"strawberry"},{name:"grape"},{name:"mango"}
+    ]
+    },
+    {category:"Veggie",
+    elems:[
+      {name:"garlic"},{name:"lettuce"},
+      {name:"Leek"},{name:"kale"},
+      {name:"corn"},{name:"tomato"},
+      {name:"carrot"},{name:"potato"}
+    ]
+    }
+  ]
+  const[itemList,setItemList]=useState(array)
+
+
+   function addItemToList(itemToAdd) {
+     console.log(itemToAdd.category);
+     let temp=[...itemList];
+     let index=temp.findIndex((elem)=>elem.category===itemToAdd.category);
+     if(index===-1){
+       temp.push({category:itemToAdd.category,elems:[{name:itemToAdd.name}]});
+     }else{
+       temp[index].elems.push({name:itemToAdd.name});
+     }
+     setItemList(temp);
+   }
+  function clickOnItem(item){
+    setCurView(item);
+  }
+  return (
+
+
+        <div className="wrapperOfAll">
+        <div className="nav">
+
+        </div>
+       <div className="main">
+       <ContextClickOnItem.Provider value={{clickOnItem,addItemToSideList}}>
+        <Items addItemToSideList={addItemToSideList} itemList={itemList} key="1"/> 
+        </ContextClickOnItem.Provider>
+        </div>
+        {
+        curView==="addItem"?
+        <AddItem addItemToList={addItemToList} 
+        className="add" 
+        setViewToSideList={()=>setCurView("sideListView")}/>:
+        (
+          curView==="sideListView"?
+        <SideListView sideList={sideList} setViewToAddItem={setViewToAddItem} handleChildEdit={handleChildEdit}/>
+        :<ItemView item={curView}/>)
+        }
+        </div>
+
+
+  );
+}
+function ItemView(props){
+  //this would show info about the the item
+  //doesnt work now since info about the items are not represented for simplicity
+  return(<div>{props.item.name}
+  {props.item?.note}
+  {props.item?.image}
+  </div>)
+}
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/ItemClickContext.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const ContextClickOnItem = React.createContext({
+    clickOnItem:(item)=>{},
+    addItemToSideList:(cateogry,item)=>{}
+});

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/items/addItem.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import './item.css'
+export default function AddItem(props) {
+  const [input, setInput] = useState({
+    name: "",
+    note: "",
+    image: "",
+    category: "",
+  });
+
+  function handleSubmit(e) {
+    let newState = {
+      name: e.target.name.value,
+      note: e.target.note.value,
+      image: e.target.image.value,
+      category:e.target.category.value
+    };
+    e.preventDefault();
+    console.log("i was also clicked");
+    setInput(newState);
+    e.target.reset();
+    props.addItemToList(newState);
+
+  }
+  return (
+    <form className="formWrapper" onSubmit={handleSubmit}>
+      <div className="form-group">
+        <label htmlFor="Name" className="formbuilder-text-label">
+          Name
+          <br />
+          <input id="name" type="text" required="required" />
+        </label>
+
+        <label htmlFor="Note">
+          Note
+          <br />
+          <input id="note" type="text" name="Note" />
+        </label>
+
+        <label htmlFor="Image">
+          Image
+          <br />
+          <input id="image" type="text"/>
+        </label>
+
+        <label htmlFor="Category">
+          Category
+          <br />
+          <select id="category"  type="select">
+            <option value="Fruits">Fruits</option>
+            <option value="Veggie">Veggie</option>
+            <option value="Meat">Meat</option>
+          </select>
+        </label>
+        <br />
+        <div id="button-group">
+        <button type="reset" onClick={()=>props.setViewToSideList()}>Cancel</button>
+        <button type="submit">Add</button>
+        </div>
+      </div>
+    </form>
+
+  );
+}