From da9b7de400cd6a735526200b3e9aee7b3b5cd86b Mon Sep 17 00:00:00 2001
From: Breno Tostes <tostes@pop-os.localdomain>
Date: Sat, 18 Nov 2023 14:30:14 -0300
Subject: [PATCH] Implemented submit form functionality. TODO: Send axios
 client POST request to REST API.

---
 .../src/components/MultipleTunnelForms.js     | 17 -------
 frontend/src/components/NewTunnelForm.js      | 44 +++++++++++++++--
 frontend/src/pages/AddTunnelPage.js           | 49 ++++++++++++++++---
 3 files changed, 81 insertions(+), 29 deletions(-)
 delete mode 100644 frontend/src/components/MultipleTunnelForms.js

diff --git a/frontend/src/components/MultipleTunnelForms.js b/frontend/src/components/MultipleTunnelForms.js
deleted file mode 100644
index 5d126ae..0000000
--- a/frontend/src/components/MultipleTunnelForms.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import NewTunnelForm from './NewTunnelForm';
-
-const MultipleTunnelForms = ({tickerList, onChange}) => {
-  const tickers = tickerList
-  const litsTunnels = tickers.map(
-    ticker => <NewTunnelForm
-      ticker={ticker} key={ticker}
-      onChange={onChange}
-    />
-  );
-
-  return (<div>{litsTunnels}</div>)
-}
-
-export default MultipleTunnelForms
\ No newline at end of file
diff --git a/frontend/src/components/NewTunnelForm.js b/frontend/src/components/NewTunnelForm.js
index 909fa9e..63971ed 100644
--- a/frontend/src/components/NewTunnelForm.js
+++ b/frontend/src/components/NewTunnelForm.js
@@ -1,20 +1,56 @@
+// REST API "/api/tunnels/tunnel/" endpoint expects
+// POST form data as:
+//
+// {
+//   "userId": "user@example.com",
+//   "assetId": "SYMBOL.NAME",
+//   "lowerVal": 0.00,
+//   "upperVal": 0.00,
+//   "interval": 0
+// }
+//
+// Check "/api/docs/" endpoint for more details.
+// ########################################################
+
 import React from 'react';
 
 import Form from 'react-bootstrap/Form';
 import InputGroup from 'react-bootstrap/InputGroup';
 
-const NewTunnelForm = ({ticker, onChange}) => {
+const NewTunnelForm = ({ticker, index, formData, setFormData}) => {
+
+  function handleChange(index, field, value) {
+    const updatedFormData = [...formData];
+    updatedFormData[index][field] = value;
+    setFormData(updatedFormData);
+  }
+
   return (
     <>
       <Form.Label>{ticker}</Form.Label>
       <InputGroup className="mb-3">
         <InputGroup.Text>Lower Threshold</InputGroup.Text>
-        <Form.Control aria-label="Lower Threshold" type='number'/>
+        <Form.Control
+          aria-label="Lower Threshold"
+          placeholder='0.00'
+          type='number'
+          onChange={e => handleChange(index, 'lowerVal', e.target.value)}
+        />
         <InputGroup.Text>Upper Threshold</InputGroup.Text>
-        <Form.Control aria-label="Upper Threshold" type='number'/>
+        <Form.Control
+          aria-label="Upper Threshold"
+          placeholder='0.00'
+          type='number'
+          onChange={e => handleChange(index, 'upperVal', e.target.value)}
+        />
         <br/>
         <InputGroup.Text>Periodicity</InputGroup.Text>
-        <Form.Control aria-label='Periodicity' type='number' max={720}/>
+        <Form.Control
+          aria-label='Periodicity'
+          type='number'
+          max={720}
+          onChange={e => handleChange(index, 'interval', e.target.value)}
+        />
       </InputGroup>
     </>
   )
diff --git a/frontend/src/pages/AddTunnelPage.js b/frontend/src/pages/AddTunnelPage.js
index 5dca802..7e9e09d 100644
--- a/frontend/src/pages/AddTunnelPage.js
+++ b/frontend/src/pages/AddTunnelPage.js
@@ -5,32 +5,51 @@ import { useLocation } from 'react-router-dom';
 import client from '../api/api';
 
 import CustomNavbar from '../components/CustomNavbar';
-import MultipleTunnelForms from '../components/MultipleTunnelForms';
+import NewTunnelForm from '../components/NewTunnelForm';
 
 import Button from 'react-bootstrap/esm/Button';
 import Form from 'react-bootstrap/Form';
 
 
 const AddTunnelPage = () => {
-  const [tunnels, setTunnels] = useState([]);
-  const [userTickers, setUserTickers] = useState([]);
-  const [currentUser, setCurrentUser] = useState();
   const location = useLocation();
+  const [currentUser, setCurrentUser] = useState();
+  const [userTickers, setUserTickers] = useState([]);
+  const [tunnelData, setTunnelData] = useState([]);
 
   useEffect(() => {
     client.get("/api/user/me/")
     .then(function(res) {
-      setCurrentUser(true);
+      setCurrentUser(res.data.email);
       setUserTickers(location.state.symbols);
+      initializeForm();
     })
     .catch(function(error) {
       setCurrentUser(false);
     })
-  }, []);
+  }, [currentUser]);
+
+  // Creates a json response for each asset selected
+  // and initializes its values accordingly.
+  function initializeForm() {
+    userTickers.forEach(tickerName => {
+      setTunnelData(currentTunnelData => [
+        ...currentTunnelData,
+        {
+          userId: currentUser,
+          assetId: tickerName,
+          lowerVal: '',
+          upperVal: '',
+          interval: '',
+        }
+      ])
+    })
+  }
 
   function submitTunnel(e) {
     e.preventDefault();
     // client.postForm
+    console.log(tunnelData)
   }
 
   if(currentUser){
@@ -39,11 +58,25 @@ const AddTunnelPage = () => {
         <CustomNavbar />
         <div className='tunnel-form-container'>
           <Form className='tunnel-form' onSubmit={submitTunnel}>
-            <MultipleTunnelForms tickerList={userTickers}
-            onChange={() => setTunnels}/>
+            {
+              userTickers.map((ticker, index) => {
+                return(
+                  <NewTunnelForm
+                    key={index}
+                    index={index}
+                    ticker={ticker}
+                    formData={tunnelData}
+                    setFormData={setTunnelData}
+                  />
+                )
+              })
+            }
             <br/>
             <Button className='submit-button' variant='primary'
               type='submit' value='Submit'>Submit</Button>
+            {/* <div>
+            {JSON.stringify(tunnelData, null, 2)}
+            </div> */}
           </Form>
         </div>
       </div>