Josh hill

README.md

@@ -29,10 +29,23 @@ In this project you will create a login page and request a token from the server
 Demonstrate your understanding of this Sprint's concepts by answering the following free-form questions. Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager.
 
 - [ ] Explain what a token is used for.
+
+a token is needed to use a privateroute, it is obtained by entering the correct login/password and is stored in local storage.
+
 - [ ] What steps can you take in your web apps to keep your data secure?
+
+use https, use complex passwords, keep software up to date.
+
 - [ ] Describe how web servers work.
+
+browsers do a http request to the server, if the server accepts the request then the browser user can have access to the page if not, 404
+
 - [ ] Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.
 
+create = post
+read = get
+update = put
+delete = delete
 
 ## Project Set Up
 

client/package.json

@@ -8,11 +8,14 @@
     "@potion/element": "1.0.0-next.0",
     "@potion/layout": "1.0.0-next.0",
     "axios": "^0.19.0",
+    "bootstrap": "^4.4.1",
     "node-sass": "^4.12.0",
     "react": "16.8.6",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "16.8.6",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "reactstrap": "^8.2.0"
   },
   "devDependencies": {
     "typescript": "3.3.3"

client/src/App.js

@@ -1,14 +1,27 @@
 import React, { useState } from "react";
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Route,
+  NavLink,
+  Switch
+} from "react-router-dom";
 
 import Login from "./components/Login";
 import "./styles.scss";
+import PrivateRoute from "./components/PrivateRoute";
+import BubblesPage from "./components/BubblePage"
 
 function App() {
   return (
     <Router>
       <div className="App">
-        <Route exact path="/" component={Login} />
+        <NavLink to = "/">Login</NavLink>
+        <NavLink to = "/bubbles-page">Bubbles</NavLink>
+        <Switch>
+          <PrivateRoute path = "/bubbles-page" component = {BubblesPage} />
+          <Route exact path="/" component={Login} />
+        </Switch>
+
         {/* 
           Build a PrivateRoute component that will 
           display BubblePage when you're authenticated 

client/src/components/AddColor.js

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { axiosWithAuth } from "../utils/axiosWithAuth";
+import Modal from "react-bootstrap/Modal";
+import { Button, ButtonToolbar } from "reactstrap";
+import "../styles.scss"
+
+
+
+const initialColor = {
+  color: "",
+  code: { hex: "" }
+};
+
+function MyVerticallyCenteredModal(props) {
+
+  function onSave(e){
+    props.submit(e)
+    props.onHide()
+  }
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Add a New Color
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <form onSubmit={props.submit}>
+          <label>
+            Add Color!
+            <input
+              type="text"
+              placeholder="color..."
+              onChange={e => props.setValues({ ...props.values, color: e.target.value })}
+              value={props.values.color}
+            />
+          </label>
+          <label>
+            Add Hex!
+            <input
+              type="text"
+              placeholder="hex..."
+              onChange={e =>
+                props.setValues({
+                  ...props.values,
+                  code: { ...props.values.code, hex: e.target.value }
+                })
+              }
+              value={props.values.code.hex}
+            />
+          </label>
+        </form>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick = {onSave} >Save Color</Button>
+        <Button onClick={props.onHide}>Close</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+
+
+function AddColor(props) {
+  const [values, setValues] = useState(initialColor);
+  const [modalShow, setModalShow] = useState(false);
+
+  // console.log(props.colors, "props colors add color")
+
+  function submit(e) {
+    e.preventDefault();
+    axiosWithAuth()
+      .post("/colors", values)
+      .then(res => {
+        console.log(res);
+        props.updateColors([...props.colors, values]);
+      })
+      .catch(err => console.log("err", err))
+      .finally(() => {
+        setValues({
+          ...values,
+          color: "",
+          code: {
+            ...values.code,
+            hex: ""
+          }
+        });
+      });
+  }
+
+  return (
+    <div>
+      <ButtonToolbar>
+        <Button className = "add" variant="primary" onClick={() => setModalShow(true)}>
+          Add New Color!
+        </Button>
+
+        <MyVerticallyCenteredModal
+          show={modalShow}
+          onHide={() => setModalShow(false)}
+          submit={submit}
+          values={values}
+          setValues={setValues}
+        />
+      </ButtonToolbar>
+
+      {/* <form onSubmit={submit}>
+        <label>
+          Add Color!
+          <input
+            type="text"
+            placeholder="color..."
+            onChange={e => setValues({ ...values, color: e.target.value })}
+            value={values.color}
+          />
+        </label>
+        <label>
+          Add Hex!
+          <input
+            type="text"
+            placeholder="hex..."
+            onChange={e =>
+              setValues({
+                ...values,
+                code: { ...values.code, hex: e.target.value }
+              })
+            }
+            value={values.code.hex}
+          />
+        </label>
+        <button type="submit">Add Color!</button>
+      </form> */}
+    </div>
+  );
+}
+
+export default AddColor;

client/src/components/BubblePage.js

@@ -1,18 +1,39 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
-
+import { axiosWithAuth } from "../utils/axiosWithAuth";
 import Bubbles from "./Bubbles";
 import ColorList from "./ColorList";
-
+import { Route } from "react-router-dom";
 const BubblePage = () => {
   const [colorList, setColorList] = useState([]);
   // fetch your colors data from the server when the component mounts
   // set that data to the colorList state property
 
+  useEffect(() => {
+    axiosWithAuth()
+      .get(`/colors`)
+      .then(res => {
+        // console.log(res.data);
+        setColorList(res.data);
+      })
+      .catch(err => console.log("fat err", err));
+  }, []);
+
   return (
     <>
-      <ColorList colors={colorList} updateColors={setColorList} />
-      <Bubbles colors={colorList} />
+      <Route
+        path="/bubbles-page"
+        render={props => (
+          <ColorList
+            {...props}
+            colors={colorList}
+            updateColors={setColorList}
+          />
+        )}
+      />
+      <Route
+        path="/bubbles-page"
+        render={props => <Bubbles {...props} colors={colorList} />}
+      />
     </>
   );
 };

client/src/components/ColorList.js

@@ -1,16 +1,32 @@
-import React, { useState } from "react";
-import axios from "axios";
+import React, { useState, useEffect } from "react";
+import { axiosWithAuth } from "../utils/axiosWithAuth";
+import AddColor from "./AddColor";
 
 const initialColor = {
   color: "",
   code: { hex: "" }
 };
 
-const ColorList = ({ colors, updateColors }) => {
-  console.log(colors);
+
+
+const ColorList = props => {
+  const { colors, updateColors } = props;
+  // console.log("colors list", colors);
   const [editing, setEditing] = useState(false);
   const [colorToEdit, setColorToEdit] = useState(initialColor);
 
+  console.log("colors list props", props);
+  useEffect(() => {
+    if (props.colors) {
+      const itemToEdit = props.colors.find(e => e.id === props.match.params.id);
+
+      if (itemToEdit) {
+        setColorToEdit(itemToEdit);
+      }
+    }
+  }, [props.colors]);
+  console.log(colorToEdit, "color to edit");
+
   const editColor = color => {
     setEditing(true);
     setColorToEdit(color);
@@ -21,25 +37,44 @@ const ColorList = ({ colors, updateColors }) => {
     // Make a put request to save your updated color
     // think about where will you get the id from...
     // where is is saved right now?
+    // console.log("save color id", colors.id)
+    axiosWithAuth()
+      .put(`/colors/${colorToEdit.id}`, colorToEdit)
+      .then(res => {
+        console.log("edit", res);
+        setEditing(false);
+        updateColors(colors.filter(cv => cv.id !== colorToEdit.id))
+      })
+      .catch(err => console.log("fat put err", err));
   };
 
   const deleteColor = color => {
     // make a delete request to delete this color
+    // console.log("delete color id", color.id)
+    axiosWithAuth()
+      .delete(`/colors/${color.id}`)
+      .then(res => {
+        updateColors(colors.filter(cv => cv.id !== color.id))
+      })
+      .catch(err => console.log("fat delete err", err));
   };
 
   return (
     <div className="colors-wrap">
       <p>colors</p>
+      <AddColor colors = {colors} updateColors = {updateColors}/>
       <ul>
         {colors.map(color => (
           <li key={color.color} onClick={() => editColor(color)}>
             <span>
-              <span className="delete" onClick={e => {
-                    e.stopPropagation();
-                    deleteColor(color)
-                  }
-                }>
-                  x
+              <span
+                className="delete"
+                onClick={e => {
+                  e.stopPropagation();
+                  deleteColor(color);
+                }}
+              >
+                x
               </span>{" "}
               {color.color}
             </span>