Update buildspace#2

Gif submit added

Author: LiquidityPanic

src/App.js

@@ -23,6 +23,8 @@ const App = () => {
    */
 
   const [walletAddress, setWalletAddress] = useState(null);
+  const [inputValue, setInputValue] = useState('');
+  const [gifList, setGifList] = useState([]);
 
   const checkIfWalletIsConnected = async () => {
   // We're using optional chaining (question mark) to check if the object is null
@@ -52,6 +54,21 @@ const App = () => {
     }
   };
 
+  const sendGif = async () => {
+    if (inputValue.length > 0) {
+      console.log('Gif link', inputValue);
+      setGifList([...gifList, inputValue]);
+      setInputValue('');
+      } else {
+        console.log('Empty input. Try again.');
+    }
+  };
+
+  const onInputChange = (event) => {
+    const { value } = event.target;
+    setInputValue(value);
+  };
+
   const renderNotConnectedContainer = () => {
     return <button
       className="cta-button connect-wallet-button"
@@ -62,15 +79,30 @@ const App = () => {
 
   const renderConnectedContainer = () => (
     <div className="connected-container">
+      <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        sendGif();
+      }}>
+        <input 
+        type="text" 
+        placeholder="Enter gif link!" 
+        value={inputValue}
+        onChange={onInputChange}  
+      />
+        <button type="submit" className="cta-button submit-gif-button">
+          Submit
+        </button>
+      </form>
       <div className="gif-grid">
-        {TEST_GIFS.map(gif => (
+        {gifList.map((gif) => (
           <div className="gif-item" key={gif}>
             <img src={gif} alt={gif}/>
         </div>
         ))}
       </div>
     </div>
-  )
+  );
 
   /*
    * When our component first mounts, let's check to see if we have a connected
@@ -84,6 +116,14 @@ const App = () => {
     return () => window.removeEventListener('load', onLoad);
   }, []);
 
+  useEffect(() => {
+    if (walletAddress) {
+      console.log('Fetching GIF list....');
+
+      setGifList(TEST_GIFS);
+    }
+  }, [walletAddress]);
+
   return (
     <div className="App">