Implemented submit form functionality. TODO: Send axios client POST r…

…equest to REST API.
B-Trindade · Nov 18, 2023 · da9b7de · da9b7de
1 parent 0a44381
commit da9b7de
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 29 deletions.
diff --git a/frontend/src/components/MultipleTunnelForms.js b/frontend/src/components/MultipleTunnelForms.js
diff --git 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": "[email protected]",
+//   "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
@@ -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>