Angela engel

src/components/BubblePage.js

@@ -13,9 +13,37 @@ const BubblePage = () => {
   };
 
   const saveEdit = (editColor) => {
+    axiosWithAuth()
+    .put(`/api/colors/${editColor.id}`, editColor)
+    .then((res) => {
+      console.log(res)
+
+      let index = colors.findIndex((color) => color.id === editColor.id);
+      colors[index] = editColor
+      setColors([
+        ...colors
+      ])
+    })
+    .catch((err) => {
+      console.log(err)
+    })
   };
 
+  useEffect(() => {
+    fetchColorService().then((res) => {
+    setColors(res)
+    })
+  }, []);
+
   const deleteColor = (colorToDelete) => {
+    axiosWithAuth()
+    .delete(`/api/colors/${colorToDelete.id}`)
+    .then((res) => {
+      setColors(colors.filter(color => color.id !== colorToDelete.id))
+    })
+    .catch((err) => {
+      console.log(err)
+    })
   };
 
   return (

src/components/BubblePage.test.js

@@ -3,11 +3,26 @@ import MutationObserver from 'mutationobserver-shim';
 
 import { render, screen} from "@testing-library/react";
 import BubblePage from './BubblePage';
+jest.mock('../services/fetchColorService');
+
+const testColor = {
+    color: "blue",
+    code: { hex: "#7fffd4" },
+    id: 1
+}
 
 test("Renders without errors", ()=> {
-
+    render(<BubblePage />)
 });
 
 test("Renders appropriate number of colors passed in through mock", async ()=> {
     //Keep in mind that our service is called on mount for this component.
+    fetchColorServices.mockResolvedValueOnce(testColor);
+
+    render(<BubblePage />);
+    const colors = screen.getAllByTestId("color");
+
+    await waitFor(() => {
+        expect(colors).toHaveLength(1);
+    })
 });

src/components/Color.test.js

@@ -5,15 +5,38 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import Color from './Color';
 
+const testColor = {
+    color: "blue",
+    code: { hex: "#7fffd4" },
+    id: 1
+}
+
 test("Renders without errors with blank color passed into component", () => {
+    render(<Color color={testColor} />);
 });
 
 test("Renders the color passed into component", () => {
+    render(<Color color={testColor} />);
+    const color = screen.queryAllByTestId("color");
+    expect(color).toBeInTheDocument();
 });
 
 test("Executes handleDelete and toggleEdit property when the 'x' icon is clicked", () => {
+    const handleDelete = jest.fn();
+    const toggleEdit = jest.fn();
+    render(<Color color={testColor} />)
+    const deleteKey = screen.getByTestId("delete")
+    userEvent.click(deleteKey)
+    expect(handleDelete).toBeCalled()
+    expect(toggleEdit).toBeCalled();
 });
 
 test("Executes setEditColor and toggleEdit property when color div is clicked", () => {
-
+    const setEditColor = jest.fn();
+    const toggleEdit = jest.fn();
+    render(<Color color={testColor} />)
+    const colorKey = screen.getByTestId("color")
+    userEvent.click(colorKey)
+    expect(setEditColor).toBeCalled()
+    expect(toggleEdit).toBeCalled();
 });

src/components/ColorList.test.js

@@ -4,11 +4,24 @@ import MutationObserver from 'mutationobserver-shim';
 import { render, screen} from "@testing-library/react";
 import ColorList from './ColorList';
 
+const testColor = {
+    color: "blue",
+    code: { hex: "#7fffd4" },
+    id: 1
+}
+
 test("Renders an empty list of colors without errors", () => {
+    render(<ColorList color={noColor} />)
 });
 
 test("Renders a list of colors without errors", () => {
+    render(<ColorList color={testColor} />)
 });
 
 test("Renders the EditForm when editing = true and does not render EditForm when editing = false", () => {
+    const toggleEdit = jest.fn()
+    render(<ColorList color={testColor} />);
+    let editing = screen.queryByTestId("color");
+    userEvent.click(editing);
+    expect(toggleEdit).toBeCalled();
 });

src/components/Login.js

@@ -1,18 +1,82 @@
-import React from "react";
+import React, {useState} from "react";
+import { useHistory } from "react-router-dom";
+import axiosWithAuth from "../helpers/axiosWithAuth";
+
+const initialValues = {
+  username: '',
+  password: ''
+}
 
 const Login = () => {
   // make a post request to retrieve a token from the api
   // when you have handled the token, navigate to the BubblePage route
+  const { push } = useHistory
+  const [formValues, setFormValues] = useState(initialValues)
+  const [error, setError] = useState()
+
+  const handleChange = (e) => {
+    setFormValues({
+      ...formValues,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (formValues.username !== 'Lambda' || formValues.password !== 'School') {
+      setError('Username or Password incorrect')
+    }
+
+    axiosWithAuth()
+    .post('/api/login', formValues)
+    .then((res) => {
+      console.log("Axios Login Post", res)
+      localStorage.setItem('token', res.data.payload)
+      push('/bubblepage')
+    })
+    .catch((err) => {
+      console.log({ err })
+    })
+  }
+
 
-  const error = "";
-  //replace with error state
+
+
 
   return (
     <div>
       <h1>Welcome to the Bubble App!</h1>
       <div data-testid="loginForm" className="login-form">
         <h2>Build login form here</h2>
       </div>
+      <div>
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="username">
+            Username
+          </label><br/>
+          <input
+            id="username"
+            data-testid="username"
+            name="username"
+            value={formValues.username}
+            onChange={handleChange}
+          /><br/><br/>
+
+          <label htmlFor="password">
+            Password
+          </label><br/>
+          <input
+            id="password"
+            data-testid="password"
+            name="password"
+            value={formValues.password}
+            onChange={handleChange}
+          /><br/>
+
+          <button>Login</button>
+
+        </form>
+        </div>
 
       <p id="error" className="error">{error}</p>
     </div>

src/components/PrivateRoute.js

@@ -1,2 +1,17 @@
 //Task List:
-//1. Build a PrivateRoute component that redirects if user is not logged in
+//1. Build a PrivateRoute component that redirects if user is not logged in
+
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+
+const PrivateRoute = ({component: Component, ...rest}) => {
+    return <Route {...rest} render={(props) => {
+        if (localStorage.getItem("token")) {
+            return(<Component {...props}/>)
+        } else {
+            return <Redirect to='/login' />
+        }
+    }} />
+}
+
+export default PrivateRoute;

src/helpers/axiosWithAuth.js

@@ -1,4 +1,16 @@
 import axios from "axios";
 
 //Task List:
-//Build and export a function used to send in our authorization token
+//Build and export a function used to send in our authorization token
+const axiosWithAuth = () => {
+    const token = localStorage.getItem('token');
+
+    return axios.create({
+        headers: {
+            Authorization: token
+        },
+        baseURL: 'http://localhost:5000'
+    })
+}
+
+export default axiosWithAuth;

src/services/fetchColorService.js

@@ -1,7 +1,15 @@
 import axiosWithAuth from '../helpers/axiosWithAuth';
 
 const fetchColorService = () => {
-
+    return axiosWithAuth()
+        .get('/api/colors')
+        .then((res) => {
+            console.log("fetchColorService ", res);
+            return (res.data)
+        })
+        .catch((err) => {
+            console.log(err);
+        }) 
 }
 
 export default fetchColorService;