Dev

client/components/App.jsx

@@ -1,9 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
 import FeatureContainer from '../containers/FeaturePageContainer';
+import Login from './Login';
+
 
 function App() {
+  const [globalUser, setGlobalUser] = useState('');
   return (
-    <FeatureContainer />
+
+    <Router>
+      <Routes>
+        <Route path="/" exact element={<Login setGlobalUser={setGlobalUser} globalUser={globalUser}/>} />
+        <Route path="/feature" exact element={ globalUser ? <FeatureContainer globalUser={globalUser} setGlobalUser={setGlobalUser}/> : null} />
+      </Routes>
+    </Router>
+
   );
 }
 

client/components/DropDown.jsx

@@ -5,7 +5,8 @@ function DropDown(props) {
   const { ailment, handleChange, handleClick } = props;
 
   return (
-    <div>
+    <div className="dropdown-container">
+    <div className="dropdown">
       <label htmlFor="ailment">
         What is your ailment?
         <select name="ailments" id="ailments" value={ailment} onChange={handleChange}>
@@ -19,6 +20,7 @@ function DropDown(props) {
         <button type="button" onClick={handleClick}>Submit</button>
       </label>
     </div>
+    </div>
   );
 }
 

client/components/Login.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Login(props) {
+  const { globalUser, setGlobalUser } = props;
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const handleChange = (event) => {
+    console.log('username before click', username);
+    if (event.target.id === 'username') setUsername(event.target.value);
+    if (event.target.id === 'password') setPassword(event.target.value);
+  };
+
+  const handleSignup = () => {
+    fetch('http://localhost:3000/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        console.log('user created:', data);
+      })
+      .catch((err) => console.log(err));
+  };
+
+  const handleLogin = () => {
+    fetch('http://localhost:3000/login', {
+      method: 'POST',
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`Error! status: ${res.status}`);
+        }
+        return res.json();
+      })
+      .then((data) => {
+        console.log('username', data);
+        setGlobalUser(data);
+        navigate('/feature');
+      })
+      .catch((err) => console.log('login error:', err));
+  };
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    e.target.reset();
+  }
+
+  return (
+    <div className="loginWrapper">
+
+
+    <form onSubmit={handleSubmit} className="loginContainer">
+      <h1>Food Remedy</h1>
+      <label htmlFor="username">
+        <b>Username</b>
+        <input id="username" type="text" onChange={handleChange} placeholder="Enter Username" name="username" required />
+      </label>
+
+        <label htmlFor="password">
+          <b>Password</b>
+          <input
+            id="password"
+            type="text"
+            onChange={handleChange}
+            placeholder="Enter Password"
+            name="password"
+            required
+          />
+        </label>
+
+      <button
+        type="submit"
+        onClick={handleSignup}
+      >
+        Sign Up
+      </button>
+      <button type="submit" onClick={handleLogin}>
+        Login
+        {/* { <Link to={
+          // if globalUser === '', link to the current page
+          // otherwise, link to /feature
+          globalUser ? {
+            pathname: '/feature',
+          } : {
+            pathname: '/',
+          }
+          }
+        >
+          Login
+        </Link> } */}
+      </button>
+
+    </form>
+    </div>
+  );
+}
+export default Login;

client/components/Table.jsx

@@ -12,18 +12,31 @@ function Table(props) {
       </tr>
     </thead>
   );
-
+  // row is the particular food object
+    // add name
+    // iterate over nutrients
+  // add a cell for each nutrient
+  // wrap quantity+unit in a td tag
   const tableBody = rows.map((row) => (
     <tr>
-      {dataProperties.map((property) =>
-      // if (column === 'linkedinValue') {
-      //   return <td><a href={row[column]} target="_blank" rel="noreferrer">{row[column]}</a></td>;
-      // }
-      // if (column === 'lastConnectionValue' || column === 'nextConnectionValue') {
-      //   const date = new Date(row[column]);
-      //   return <td>{date.toDateString()}</td>;
-      // }
-        <td>{row[property]}</td>)}
+
+      {[<td>{row.name}</td>, ...row.nutrients.map((property) => {
+        console.log('property', property);
+        if (!property) {
+          return <td>N/A</td>;
+        }
+        return <td>{`${property.quantity ? property.quantity.toFixed(2) : 0} ${property.unit}`}</td>;
+      },
+
+        // if (column === 'linkedinValue') {
+        //   return <td><a href={row[column]} target="_blank" rel="noreferrer">{row[column]}</a></td>;
+        // }
+        // if (column === 'lastConnectionValue' || column === 'nextConnectionValue') {
+        //   const date = new Date(row[column]);
+        //   return <td>{date.toDateString()}</td>;
+        // }
+      ),
+      ]}
     </tr>
   ));
 

client/containers/FeaturePageContainer.jsx

@@ -1,34 +1,99 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Table from '../components/Table';
 import DropDown from '../components/DropDown';
 
-function FeatureContainer() {
-  const tableHeaders = ['Insert', 'food', 'headers'];
-  const tableProperties = ['Insert', 'food', 'properties'];
+function FeatureContainer(props) {
+  // const tableProperties = ['Insert', 'food', 'properties'];
   const [ailment, setAilment] = React.useState('headache');
+  const navigate = useNavigate();
+
+  const tableProperties = [
+    'CA',
+    'K',
+    'FE',
+    'ZN',
+    'VITA_RAE',
+    'VITC',
+    'VITB12',
+    'VITD',
+    'TOCPHA',
+    'NIA',
+  ];
+  const tableHeaders = [
+    'Name',
+    'Calcium',
+    'Potassium',
+    'Iron',
+    'Zinc',
+    'Vitamin A',
+    'Vitamin C',
+    'Vitamin B-12',
+    'Vitamin D',
+    'Vitamin E',
+    'Niacin',
+  ];
 
   const [foodEntries, setFoodEntries] = useState([]);
 
   const handleChange = (event) => {
     setAilment(event.target.value);
   };
 
+  const handleLogout = () => {
+    props.setGlobalUser('');
+    navigate('/');
+  }
+
   const handleClick = () => {
+    console.log('ailment', ailment);
     fetch('http://localhost:3000/search', {
       method: 'POST',
+      body: JSON.stringify({ ailment }),
+      headers: { 'Content-Type': 'application/json' },
     })
       .then((res) => res.json())
       .then((data) => {
-        setFoodEntries(data);
+        // parse the data that has been sent back
+        const parsedData = [];
+        data.forEach((food) => {
+          const foodRow = {
+            name: food.ingredients[0].text,
+            nutrients: [],
+          };
+          tableProperties.forEach((prop) => {
+            foodRow.nutrients.push(food.totalNutrients[prop]);
+          });
+          parsedData.push(foodRow);
+        });
+        console.log('parsedData', parsedData);
+        setFoodEntries(parsedData);
       })
       .catch((err) => console.log(err));
   };
 
   return (
     <>
-      <h1>Placeholder</h1>
-      <DropDown handleChange={handleChange} handleClick={handleClick} ailment={ailment} />
-      <Table columns={tableHeaders} rows={foodEntries} dataProperties={tableProperties} />
+      <nav>
+        <h1>Food Remedy</h1>
+        <div className="logoutContainer">
+          <p>{props.globalUser}</p>
+          <button 
+            onClick={handleLogout}
+            className="logout">Logout</button>
+        </div>
+      </nav>
+
+      <DropDown
+        handleChange={handleChange}
+        handleClick={handleClick}
+        ailment={ailment}
+      />
+      <Table
+        columns={tableHeaders}
+        rows={foodEntries}
+        dataProperties={tableProperties}
+      />
     </>
   );
 }

client/index.js

@@ -1,14 +1,9 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './components/App.jsx';
 
-// import styles from './scss/application.scss';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import App from './components/App';
 
-const domNode = document.getElementById('app');
-const root = createRoot(domNode);
-root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
-);
+import styles from './scss/application.scss';
+
+ReactDOM.createRoot(document.getElementById('app')).render(<App />);