Feature

package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-particles-js": "^2.1.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-tilt": "^0.1.4",
+    "reactstrap": "^9.1.1",
     "tachyons": "^4.12.0"
   },
   "scripts": {

public/index.html

@@ -26,6 +26,7 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/App.js

@@ -7,8 +7,11 @@ import Register from './components/Register/Register';
 import Logo from './components/Logo/Logo';
 import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
 import Rank from './components/Rank/Rank';
+import Modal from './components/Modal/Modal';
+import Profile from './components/Profile/Profile';
+
 import './App.css';
- 
+
 const particlesOptions = {
   //customize this to your liking
   particles: {
@@ -25,15 +28,18 @@ const particlesOptions = {
 const initialState = {
   input: '',
   imageUrl: '',
-  box: {},
+  boxes: [],
   route: 'signin',
-  isSignedIn: false,
+  isSignedIn: true,
+  isProfileOpen: false,
   user: {
     id: '',
     name: '',
     email: '',
     entries: 0,
-    joined: ''
+    joined: '',
+    pet:'',
+    age: ''
   }
 }
 
@@ -54,20 +60,45 @@ class App extends Component {
   }
 
   calculateFaceLocation = (data) => {
-    const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
     const image = document.getElementById('inputimage');
     const width = Number(image.width);
     const height = Number(image.height);
-    return {
-      leftCol: clarifaiFace.left_col * width,
-      topRow: clarifaiFace.top_row * height,
-      rightCol: width - (clarifaiFace.right_col * width),
-      bottomRow: height - (clarifaiFace.bottom_row * height)
-    }
+    return data.outputs[0].data.regions.map((region)=>{
+        const clarifaiFace = region.region_info.bounding_box;
+        return{
+          leftCol: clarifaiFace.left_col * width,
+          topRow: clarifaiFace.top_row * height,
+          rightCol: width - (clarifaiFace.right_col * width),
+          bottomRow: height - (clarifaiFace.bottom_row * height)
+        }
+      })
+
+      // region.region_info.bounding_box;
+      // const image = document.getElementById('inputimage');
+      // const width = Number(image.width);
+      // const height = Number(image.height);
+      // boxesResult.push({
+      //   leftCol: clarifaiFace.left_col * width,
+      //   topRow: clarifaiFace.top_row * height,
+      //   rightCol: width - (clarifaiFace.right_col * width),
+      //   bottomRow: height - (clarifaiFace.bottom_row * height)
+      // })
+
+    // return boxesResult;
+    // const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
+    // const image = document.getElementById('inputimage');
+    // const width = Number(image.width);
+    // const height = Number(image.height);
+    // return {
+    //   leftCol: clarifaiFace.left_col * width,
+    //   topRow: clarifaiFace.top_row * height,
+    //   rightCol: width - (clarifaiFace.right_col * width),
+    //   bottomRow: height - (clarifaiFace.bottom_row * height)
+    // }
   }
 
-  displayFaceBox = (box) => {
-    this.setState({box: box});
+  displayFaceBox = (boxes) => {
+    this.setState({boxes:boxes});
   }
 
   onInputChange = (event) => {
@@ -107,21 +138,39 @@ class App extends Component {
 
   onRouteChange = (route) => {
     if (route === 'signout') {
-      this.setState(initialState)
+      return this.setState(initialState)
     } else if (route === 'home') {
       this.setState({isSignedIn: true})
     }
     this.setState({route: route});
   }
 
+  toggleModal = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      isProfileOpen: !prevState.isProfileOpen
+    }))
+  }
+
   render() {
-    const { isSignedIn, imageUrl, route, box } = this.state;
+    const { isSignedIn, imageUrl, route, boxes, isProfileOpen, user } = this.state;
     return (
       <div className="App">
-         <Particles className='particles'
+          <Particles className='particles'
           params={particlesOptions}
         />
-        <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange} />
+        <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}
+        toggleModal={this.toggleModal}
+        />
+        {isProfileOpen &&
+          <Modal>
+            <Profile 
+            isProfileOpen={isProfileOpen} 
+            toggleModal={this.toggleModal} 
+            user={user}
+            loadUser = {this.loadUser}
+            />
+          </Modal>}
         { route === 'home'
           ? <div>
               <Logo />
@@ -133,12 +182,12 @@ class App extends Component {
                 onInputChange={this.onInputChange}
                 onButtonSubmit={this.onButtonSubmit}
               />
-              <FaceRecognition box={box} imageUrl={imageUrl} />
+              <FaceRecognition boxes={boxes} imageUrl={imageUrl} />
             </div>
           : (
-             route === 'signin'
-             ? <Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
-             : <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
+              route === 'signin'
+              ? <Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
+              : <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
             )
         }
       </div>

src/components/FaceRecognition/FaceRecognition.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import './FaceRecognition.css';
 
-const FaceRecognition = ({ imageUrl, box }) => {
+const FaceRecognition = ({ imageUrl, boxes }) => {
   return (
     <div className='center ma'>
       <div className='absolute mt2'>
         <img id='inputimage' alt='' src={imageUrl} width='500px' heigh='auto'/>
-        <div className='bounding-box' style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}></div>
+        {
+        boxes.map((box)=><div key={boxes.indexOf(box)} className='bounding-box' style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}></div>
+        )}
+
       </div>
     </div>
   );

src/components/Modal/Modal.css

@@ -0,0 +1,5 @@
+#modal-root {
+    position: absolute;
+    z-index: 999;
+
+}

src/components/Modal/Modal.js

@@ -0,0 +1,27 @@
+import React from "react";
+import reactDom from "react-dom";
+
+import './Modal.css';
+
+const modalRoot = document.getElementById('modal-root');
+
+class Modal extends React.Component {
+    constructor(props){
+        super(props);
+        this.el = document.createElement('div');
+    }
+
+    componentDidMount(){
+        modalRoot.appendChild(this.el);
+    }
+
+    componentWillUnmount(){
+        modalRoot.removeChild(this.el);
+    }
+
+    render(){
+        return reactDom.createPortal(this.props.children, this.el)
+    }
+}
+
+export default Modal;

src/components/Navigation/Navigation.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import ProfileIcon from '../Profile/ProfileIcon';
 
-const Navigation = ({ onRouteChange, isSignedIn }) => {
+const Navigation = ({ onRouteChange, isSignedIn, toggleModal }) => {
     if (isSignedIn) {
       return (
         <nav style={{display: 'flex', justifyContent: 'flex-end'}}>
-          <p onClick={() => onRouteChange('signout')} className='f3 link dim black underline pa3 pointer'>Sign Out</p>
+          <ProfileIcon onRouteChange={onRouteChange} toggleModal={toggleModal} />
         </nav>
       );
     } else {

src/components/Profile/Profile.css

@@ -0,0 +1,23 @@
+.profile-modal{
+    background-color: rgba(255, 255, 255, .8) ;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-close{
+    padding-right: 10px;
+    font-size: 3rem;
+    font-style: bold;
+    cursor: pointer;
+}
+
+.modal-close:hover{
+    color: grey;
+    cursor: pointer;
+}

src/components/Profile/Profile.js

@@ -0,0 +1,96 @@
+import react from "react";
+import './Profile.css'
+
+class  Profile extends react.Component  {
+    constructor(props) {
+        super(props);
+        this.state ={
+            name: this.props.user.name,
+            age: this.props.user.age,
+            pet: this.props.user.pet
+        }
+
+    }
+
+    onFormChange = (event) => {
+        switch(event.target.name){
+            case 'user-name':
+                this.setState({name: event.target.value})
+                break;
+            case 'user-age':
+                this.setState({age: event.target.value})
+                break;
+            case 'user-pet':
+                this.setState({pet: event.target.value})
+                break;
+            default:
+                return;
+        }
+    }
+
+    onProfileUpdate = (data) => {
+        fetch(`http://localhost:3000/profile/${this.props.user.id}`, {
+            method: 'post',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({formInput: data})
+        }).then(resp => {
+            this.props.toggleModal();
+            this.props.loadUser({...this.props.user, ...data});
+
+        }).catch(console.log)
+    }
+
+    render() {
+        const {user} = this.props;
+        const {name, age, pet} = this.state;
+        return (
+            <div className="profile-modal">
+                <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center bg-white">
+
+                <main className="pa4 black-80">
+                    <img
+                        src="http://tachyons.io/img/logo.jpg"
+                    className="br-100 ba h3 w3 dib" alt="avatar" />
+                    <h1>{this.state.name}</h1>
+                    <h4>{`Images Submitted: ${user.entries} `}</h4>
+                    <p>{`Member since : ${new Date(user.joined).toLocaleDateString()}`}
+                    </p>
+                    <label>Name: </label>
+                    <input
+                    onChange={this.onFormChange}
+                    className="pa2 ba w-100"
+                    placeholder={user.name}
+                    name="user-name"
+                    id="name"
+                    />
+                    <label>Age: </label>
+                    <input
+                    onChange={this.onFormChange}
+                    className="pa2 ba w-100"
+                    placeholder={user.age}
+                    name="user-age"
+                    id="age"
+                    />
+                    <label>Pet: </label>
+                    <input
+                    onChange={this.onFormChange}
+                    className="pa2 ba w-100"
+                    placeholder={user.pet}
+                    name="user-pet"
+                    id="pet"
+                    />
+
+                    <div className="mt4" style={{display:'flex', justifyContent: 'space-evenly'}}> 
+                        <button className='b pa2 grow pointer hover-white w-40 bg-light-blue b--black-20' onClick={() => this.onProfileUpdate({name, age, pet})} > Save</button>
+                        <button className='b pa2 grow pointer hover-white w-40 bg-light-red b--black-20' onClick={this.props.toggleModal}> Cancel</button>
+                    </div>    
+                 </main>
+                 <div className="modal-close" onClick={this.props.toggleModal}>&times;</div>
+              </article>
+
+            </div>)
+    }
+
+}
+
+export default Profile;