Add input field Relates #1

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import FlowerPile from './components/FlowerPile';
 import Avatar from './components/Avatar';
 import TimeBar from './components/TimeBar';
+import SearchBar from './components/SearchBar';
 
 function App() {
   const [userData1, setUserData1] = React.useState(null);
@@ -16,6 +17,10 @@ function App() {
 
   return (
     <div className="App">
+       <SearchBar 
+        setUserData={setUserData1}
+        position='left'
+      />
       <FlowerPile
         flowerCount={flowerCount1}
         setFlowerCount={setFlowerCount1}
@@ -29,15 +34,15 @@ function App() {
         />
       <Avatar 
         userData={userData1}
-        setUserData={setUserData1}
-        username='tloth'
         position='left'
       />
-
+
+     <SearchBar 
+        setUserData={setUserData2}
+        position='right'
+      />
       <Avatar 
         userData={userData2}
-        setUserData={setUserData2}
-        username='samhstn'
         position='right'
       />
       <TimeBar

src/components/Avatar.js

@@ -1,22 +1,15 @@
 import React from 'react';
-import { getUserData } from '../utils/getUser';
 
 import { ReactComponent as AvatarLeft } from '../assets/avatar1.svg';
 import { ReactComponent as AvatarRight } from '../assets/avatar2.svg';
-import { ReactComponent as Flower1 } from '../assets/flowerHead1.svg';
-import { ReactComponent as Flower2 } from '../assets/flowerHead2.svg';
 
-const Avatar = ({ userData, setUserData, username, position }) => {
-
-    React.useEffect(() => {
-        getUserData(username).then(response => setUserData(response));
-    }, []);
+const Avatar = ({ userData, position }) => {
 
     if (!userData) {
         return <h3>...WAIT FOR IT</h3>;
     }
 
-    const { avatar_url, login, followers } = userData;
+    const { avatar_url, login } = userData;
 
     return (
         <div className="avatar">

src/components/FlowerPile.js

@@ -16,7 +16,7 @@ const FlowerPile = ({ flowerCount, setFlowerCount, position, time}) => {
     } else {
         alert('TIME\'S UP BITCH');
     }
-    }, [time]);
+    }, [time, position, setFlowerCount]);
     return (
     <div>
         {position === 'left' ? <Flower1 /> : <Flower2 />}

src/components/SearchBar.js

@@ -1,4 +1,29 @@
-// import React from 'react';
-// import getUser from '../utils/getUser';
+import React from 'react';
+import { getUserData } from '../utils/getUser';
 
-// const SearchBar = 
+const SearchBar = ({position, setUserData}) => {
+
+    const [username, setUsername] = React.useState('');
+
+    const handleChange = e => setUsername(e.target.value);
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        if (position === 'left') getUserData(username).then(response => setUserData(response));
+        if (position === 'right') getUserData(username).then(response => setUserData(response))
+    }
+
+    return (
+    <form onSubmit={handleSubmit}>
+        <label htmlFor="username">Choose your flower friend</label>
+        <input
+        id="username"
+        className="searchbar_input"
+        value={username}
+        onChange={handleChange}
+        />
+    </form>
+    )
+}
+
+export default SearchBar;

src/components/TimeBar.js

@@ -10,7 +10,7 @@ const TimeBar = ({ userData, time, setTime }) => {
         if (userData && userData.followers > 10) {
             setTime(userData.followers);
         }
-    }, [userData]);
+    }, [userData, setTime]);
 
     React.useEffect(() => {
         if (userData) setBarHeight(time/userData.followers*100);