New features

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,9 +28,10 @@ const particlesOptions = {
 const initialState = {
   input: '',
   imageUrl: '',
-  box: {},
+  boxes: [],
   route: 'signin',
-  isSignedIn: false,
+  isSignedIn: true,
+  isProfileOpen: false,
   user: {
     id: '',
     name: '',
@@ -54,20 +58,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 +136,34 @@ 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 } = 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}/>
+          </Modal>}
         { route === 'home'
           ? <div>
               <Logo />
@@ -133,12 +175,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,11 @@
+.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;
+}

src/components/Profile/Profile.js

@@ -0,0 +1,11 @@
+import react from "react";
+import './Profile.css'
+
+const Profile = ({isProfileOpen, toggleModal}) => {
+    return (
+    <div className="profile-modal">
+        <button onClick={toggleModal}> Click</button>
+    </div>)
+}
+
+export default Profile;

src/components/Profile/ProfileIcon.js

@@ -0,0 +1,55 @@
+import react from "react";
+import { 
+    Dropdown, 
+    DropdownToggle, 
+    DropdownMenu, 
+    DropdownItem 
+} from 'reactstrap';
+
+class ProfileIcon extends react.Component {
+    constructor(props){
+        super(props);
+        this.toggle = this.toggle.bind(this);
+        this.state = {
+            dropdownOpen: false
+        }
+    }
+
+    toggle() {
+        this.setState(prevState => ({
+            dropdownOpen: !prevState.dropdownOpen
+        }));
+    }
+    render(){
+        return(
+            <div className="pa4 tc">
+                <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+                    <DropdownToggle
+                        tag="span"
+                        data-toggle="dropdown"
+                        aria-expanded={this.state.dropdownOpen}
+                    >
+                        <img
+                            src="http://tachyons.io/img/logo.jpg"
+                            className="br-100 ba h3 w3 dib" alt="avatar" />
+                    </DropdownToggle>
+                    <DropdownMenu className="b--transparent shadow-5" style={{marginTop: '20px', backgroundColor: "rgba(255, 255, 255, 0.5)"}}>
+                        <DropdownItem onClick={() => this.props.toggleModal()} >
+                        View Profile
+                        </DropdownItem>
+                        <DropdownItem onClick={() => this.props.onRouteChange('signout')}>
+                        Signout
+                        </DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+
+
+
+            </div>
+            )
+
+    }  
+
+}
+
+export default ProfileIcon;

src/components/Signin/Signin.css

@@ -0,0 +1,3 @@
+.hover-black:hover{
+    background-color: #000 !important;
+}

src/components/Signin/Signin.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import './Signin.css';
+
 
 class Signin extends React.Component {
   constructor(props) {
@@ -46,7 +48,7 @@ class Signin extends React.Component {
               <div className="mt3">
                 <label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
                 <input
-                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100 hover-black"
                   type="email"
                   name="email-address"
                   id="email-address"
@@ -56,7 +58,7 @@ class Signin extends React.Component {
               <div className="mv3">
                 <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
                 <input
-                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100 hover-black"
                   type="password"
                   name="password"
                   id="password"

src/index.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 // import registerServiceWorker from './registerServiceWorker';
+
+
+import 'bootstrap/dist/css/bootstrap.min.css';
 import 'tachyons';
+import './index.css';
+
+
 
 ReactDOM.render(<App />, document.getElementById('root'));
 // registerServiceWorker();