thaiq8nguyen · thaiq8nguyen · Aug 23, 2019 · Aug 23, 2019 · Aug 23, 2019
diff --git a/README.md b/README.md
@@ -29,9 +29,13 @@ 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.
+*Token is used for authentication when a user logins a web page*
 - [ ] What steps can you take in your web apps to keep your data secure?
+*Implement front-end validation using token assigned by a back-end server. And strictly implement back-end authorization*
 - [ ] Describe how web servers work.
+*Web servers are groups of interconnected computers spreading across the globes using underwater cables or sattelites connection*
 - [ ] Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.
+*POST, GET, PUT, and DELETE*
 
 
 ## Project Set Up

diff --git a/client/.prettierrc b/client/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -8,13 +8,17 @@
     "@potion/element": "1.0.0-next.0",
     "@potion/layout": "1.0.0-next.0",
     "axios": "^0.19.0",
+    "formik": "^1.5.8",
     "node-sass": "^4.12.0",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^0.88.0"
   },
   "devDependencies": {
+    "prettier": "^1.18.2",
     "typescript": "3.3.3"
   },
   "scripts": {

diff --git a/client/public/index.html b/client/public/index.html
@@ -1,17 +1,19 @@
 <!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">
-	<!--
+  <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 rel="manifest" href="%PUBLIC_URL%/manifest.json">
-	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<!--
+    <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.
@@ -20,15 +22,15 @@
       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>
+    <title>ReactBubble</title>
+  </head>
 
-<body>
-	<noscript>
-		You need to enable JavaScript to run this app.
-	</noscript>
-	<div id="root"></div>
-	<!--
+  <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.
 
@@ -38,6 +40,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,19 +1,18 @@
 import React, { useState } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 
+import BubblePage from "./components/BubblePage";
 import Login from "./components/Login";
-import "./styles.scss";
+import PrivateRoute from "./routes/PrivateRoute";
+// import "./styles.scss";
 
 function App() {
   const [colorList, setColorList] = useState([]);
   return (
     <Router>
       <div className="App">
         <Route exact path="/" component={Login} />
-        {/* 
-          Build a PrivateRoute component that will 
-          display BubblePage when you're authenticated 
-        */}
+        <PrivateRoute path="/bubble" component={BubblePage} />
       </div>
     </Router>
   );

diff --git a/client/src/components/BubblePage.js b/client/src/components/BubblePage.js
@@ -1,18 +1,37 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
+
+import { Grid } from "semantic-ui-react";
+import APIServices from "../utils/apiServices";
 
 import Bubbles from "./Bubbles";
 import ColorList from "./ColorList";
 
+const api = new APIServices();
+
 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(() => {
+    api
+      .getColors()
+      .then(response => {
+        setColorList(response.data);
+      })
+      .catch(errors => {
+        console.log(errors.response);
+      });
+  }, []);
+
   return (
     <>
       <ColorList colors={colorList} updateColors={setColorList} />
-      <Bubbles colors={colorList} />
+      <Grid textAlign="center">
+        <Grid.Column>
+          <Bubbles colors={colorList} />
+        </Grid.Column>
+      </Grid>
     </>
   );
 };

diff --git a/client/src/components/Bubbles.js b/client/src/components/Bubbles.js
@@ -14,7 +14,6 @@ const Bubbles = ({ colors }) => {
 
   return (
     <div className="bubble-wrap">
-      <p>bubbles</p>
       <Svg width={400} height={400}>
         <Pack
           data={{

diff --git a/client/src/components/ColorForm.js b/client/src/components/ColorForm.js
@@ -0,0 +1,53 @@
+import React from "react";
+import { Button, Form, Grid, Header } from "semantic-ui-react";
+
+const ColorForm = ({ props, getRandomColor, setEditing }) => {
+  return (
+    <Form onSubmit={props.handleSubmit}>
+      <Grid columns={2}>
+        <Grid.Row verticalAlign="middle">
+          <Grid.Column>
+            <Header>Edit Color</Header>
+          </Grid.Column>
+          <Grid.Column textAlign="right">
+            <Button
+              onClick={getRandomColor}
+              size="small"
+              style={{ backgroundColor: props.values.code }}
+              type="button"
+            >
+              Random Color
+            </Button>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+
+      <Form.Field>
+        <label htmlFor="color">Color Name</label>
+        <input
+          name="color"
+          onChange={props.handleChange}
+          type="text"
+          value={props.values.color}
+        />
+      </Form.Field>
+      <Form.Field>
+        <label htmlFor="code">Hex Code</label>
+        <input
+          name="code"
+          onChange={props.handleChange}
+          type="text"
+          value={props.values.code}
+        />
+      </Form.Field>
+      <Button loading={props.isSubmitting} primary type="submit">
+        Save
+      </Button>
+      <Button secondary onClick={() => setEditing(false)} type="button">
+        Cancel
+      </Button>
+    </Form>
+  );
+};
+
+export default ColorForm;