Merge pull request #5 from ColinMcKechney/yourPlan

Your plan

db_app/package-lock.json

@@ -21655,6 +21655,26 @@
         "deep-equal": "^2.0.5"
       }
     },
+    "babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
+        }
+      }
+    },
     "babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -23262,6 +23282,11 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
+      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA=="
+    },
     "eslint-config-react-app": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
@@ -23413,6 +23438,14 @@
         }
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.32.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
@@ -23716,6 +23749,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -26629,6 +26667,18 @@
         "tmpl": "1.0.5"
       }
     },
+    "material-ui-numeric-input": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/material-ui-numeric-input/-/material-ui-numeric-input-3.2.0.tgz",
+      "integrity": "sha512-y9C2AdupPI5bXsSFDDrh+S20D/loiyG89NmhOUfZHPScfGznLbh6P1MfcZJonFgjtphdVUlipWNA2HH/IQGF8Q==",
+      "requires": {
+        "babel-eslint": "^10.1.0",
+        "eslint": "^8.9.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.28.0"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -27921,6 +27971,14 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -28111,8 +28169,7 @@
     "react-client-session": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/react-client-session/-/react-client-session-0.0.8.tgz",
-      "integrity": "sha512-wHCTD4lEE8mzl6kxL8viL4q5kGx2TJJNaWdvzmx3KeiMgP+Yv5/Bx476jCpPD0pKc5VvdVuhkH4EM20XqtT/sQ==",
+      "integrity": "sha512-wHCTD4lEE8mzl6kxL8viL4q5kGx2TJJNaWdvzmx3KeiMgP+Yv5/Bx476jCpPD0pKc5VvdVuhkH4EM20XqtT/sQ=="
-      "requires": {}
     },
     "react-dev-utils": {
       "version": "12.0.1",

db_app/package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "material-ui-numeric-input": "^3.2.0",
     "react": "^18.2.0",
     "react-client-session": "^0.0.8",
     "react-dom": "^18.2.0",

db_app/src/components/Login.js

@@ -52,8 +52,6 @@ const [data,setData] = useState({
   
   const submitHandler = e => {
     e.preventDefault();
-    console.log(data);
-    console.log(net_id[0])
     login();
     
   }
@@ -106,7 +104,6 @@ const login = () => {
           sx={{ width: 300, height:100}}
           alt="logo"
 
-
         />
         </Card>
         </div>

db_app/src/components/MenuExpansion.js

@@ -23,6 +23,7 @@ import MenuItem from '@mui/material/MenuItem';
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
 
 
 const theme = createTheme({
@@ -57,8 +58,14 @@ const navigateLogin = () => {
     navigate('/');
 }
 
+const makeEateryUrl = (eatery) => `http://3.219.93.142:8000/eatery/${eatery}`;
 
-
+const getMenu = () => {
+  const eatery_to_query = getEatery();
+  Axios.get(makeEateryUrl(eatery_to_query)).then((response) => {
+     console.log(response.data);
+  });
+};
 
 
 return(
@@ -84,6 +91,9 @@ return(
     </Button>
   </Toolbar>
 </AppBar>
+
+<Button onClick={getMenu}>Test get menu</Button>
+
 </ThemeProvider>
 )
 

db_app/src/components/Menus.js

@@ -23,6 +23,7 @@ import MenuItem from '@mui/material/MenuItem';
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
 
 
 const theme = createTheme({
@@ -56,47 +57,47 @@ const menuExpansion = () => {
 }
 
   const setStarbucks = () => {
-    ReactSession.set("eatery", "Starbucks");
+    ReactSession.set("eatery", 6);
     menuExpansion();
   }
 
   const setChick = () => {
-    ReactSession.set("eatery", "Chick-fil-a");
+    ReactSession.set("eatery", 2);
     menuExpansion();
   }
 
   const setABP = () => {
-    ReactSession.set("eatery", "Au Bon Pain");
+    ReactSession.set("eatery", 5);
     menuExpansion();
   }
 
   const setMoma = () => {
-    ReactSession.set("eatery", "Modern Market");
+    ReactSession.set("eatery", 7);
+   
     menuExpansion();
   }
 
   const setTaco = () => {
-    ReactSession.set("eatery", "Taco Bell");
+    ReactSession.set("eatery", 8);
     menuExpansion();
   }
 
   const setDH = () => {
-    ReactSession.set("eatery", "Dining Hall");
+    ReactSession.set("eatery", 1);
     menuExpansion();
   }
 
   const setFlip = () => {
-    ReactSession.set("eatery", "Flip Kitchen");
+    ReactSession.set("eatery", 4);
     menuExpansion();
   }
 
   const setSmash = () => {
-    ReactSession.set("eatery", "Smashburger");
+    ReactSession.set("eatery", 3);
     menuExpansion();
   }
 
   
-
   return (
 
     <ThemeProvider theme={theme}>

db_app/src/components/Plan.js

@@ -2,28 +2,16 @@ import React,{useState} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import './Login.css';
 import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
 import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import Link from "@mui/material/Link";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Avatar from '@mui/material/Avatar';
-import Tooltip from '@mui/material/Tooltip';
-import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/material/Menu'
-import MenuItem from '@mui/material/MenuItem';
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { ReactSession } from 'react-client-session';
-
+import Axios from 'axios';
-
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
 
 
 const theme = createTheme({
@@ -58,17 +46,163 @@ const logout = () => {
     navigateLogin();
 
 }
+//get the start of each week and reformat to Oracle date type
+function weekStart(){
+  var date_str = new Date();
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekday = days[date_str.getDay()]
+
+  if (weekday != 'Sunday'){
+    return;
+  }
+
+  var date_str = new Date();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
+  var curr_month = months[date_str.getMonth()];
+  var curr_year = String(date_str.getFullYear());
+  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
+
+  return db_date;
+}
+
+const net_id = ReactSession.get("net_id");
+
+//to set nutritional goal for the week
+const [goalInput, setGoalInput] = useState({
+      total_cal: 0,
+      total_fat: 0,
+      total_sat_fat: 0,
+      total_trans_fat: 0,
+      total_carbs: 0,
+      total_fiber: 0,
+      total_sugar: 0,
+      total_protein: 0,
+      total_sodium: 0,
+      total_potassium: 0,
+      total_cholesterol: 0,
+    }
+);
+
+const{total_cal, total_fat, total_sat_fat, total_trans_fat, total_carbs, total_fiber, 
+  total_sugar, total_protein, total_sodium, total_potassium, total_cholesterol} = goalInput
+
+const changeGoalHandler = evt =>{
+  setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] })
+}
+
+const submitGoalHandler = evt => {
+  evt.preventDefault();
+  console.log(goalInput)
+  console.log(net_id)
+  console.log(weekStart())
+  Axios.post("http://3.219.93.142:8000/api/goal",
+    {
+      net_id: net_id,
+      week_date: weekStart(),
+      total_cal: Number(total_cal[0]),
+      total_fat: Number(total_fat[0]),
+      total_sat_fat: Number(total_sat_fat[0]),
+      total_trans_fat: Number(total_trans_fat[0]),
+      total_carbs: Number(total_carbs[0]),
+      total_fiber: Number(total_fiber[0]),
+      total_sugar: Number(total_sugar[0]),
+      total_protein: Number(total_protein[0]),
+      total_sodium: Number(total_sodium[0]),
+      total_potassium: Number(total_potassium[0]),
+      total_cholesterol: Number(total_cholesterol[0])
+    }).then((response) => {
+      console.log(response);
+      console.log(response.status);
+    })
+};
+
+//to find a food item from an on campus location to your weekly journal
+const [keyword, setKeyword] = useState({
+  search_term:""
+})
+
+const{search_term} = keyword
+
+const changeSearchHandler = evt => {
+  setKeyword({ ...keyword, [evt.target.name]: [evt.target.value] })
+}
+
+const submitSearchHandler = evt => {
+  evt.preventDefault();
+  console.log(search_term)
+  console.log(net_id)
+  Axios.post("http://3.219.93.142:8000/api/menu_search",
+    {
+      search_term:search_term[0]
+    }).then((response) => {
+      console.log(response);
+      console.log(response.status);
+      console.log(response.data);
+    })
+};
+
+
+//to add an off campus food item or meal to your weekly journal
+  const [offCampusInput, setOffCampusInput] = useState({
+    item_name:"",
+    amount: 0,
+    calories: 0,
+    fat_g: 0,
+    sat_fat_g: 0,
+    trans_fat_g: 0,
+    carbs_g: 0,
+    fiber_g: 0,
+    sugar_g: 0,
+    protein_g: 0,
+    sodium_mg: 0,
+    potassium_mg: 0,
+    cholesterol_mg: 0,
+  }
+  );
+
+  const {item_name, amount, calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
+    sodium_mg, potassium_mg, cholesterol_mg} = offCampusInput
+
+  const changeOffCampusHandler = evt => {
+    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
+  }
+
+  const submitOffCampusHandler = evt => {
+    evt.preventDefault();
+    console.log(offCampusInput)
+    console.log(net_id)
+    Axios.post("http://3.219.93.142:8000/api/week_plan",
+      {
+        net_id: net_id,
+        item_name: item_name[0],
+        amount: Number(amount[0]),
+        calories: Number(calories[0]),
+        fat_g: Number(fat_g[0]),
+        sat_fat_g: Number(sat_fat_g[0]),
+        trans_fat_g: Number(trans_fat_g[0]),
+        carbs_g: Number(carbs_g[0]),
+        fiber_g: Number(fiber_g[0]),
+        sugar_g: Number(sugar_g[0]),
+        protein_g: Number(protein_g[0]),
+        sodium_mg: Number(sodium_mg[0]),
+        potassium_mg: Number(potassium_mg[0]),
+        cholesterol_mg: Number(cholesterol_mg[0])
+      }).then((response) => {
+        console.log(response);
+        console.log(response.status);
+      })
+  };
   
     return (
-
-    
-
     <ThemeProvider theme={theme}>  
     <div>
       <AppBar position="static">
         <Toolbar variant="dense">
           <Button  variant="h6" color="main" position="right" onClick={Home}>
-   Home</Button> 
+            Home
+          </Button> 
           <Button variant="h6" color="main" component="div" onClick={Menus}>
             Menus
           </Button>
@@ -82,10 +216,391 @@ const logout = () => {
           }}>
             Log out
           </Button>
-   
         </Toolbar>
       </AppBar>
     </div>
+
+    <div>
+      <h1>&nbsp; Your Plan</h1>
+      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
+
+      <form onSubmit={submitGoalHandler}>
+      &nbsp; &nbsp;
+      <TextField
+        sx={{ paddingBottom: 1 }}
+        id="total_cal"
+        label="Calories"
+        name="total_cal"
+        size="small"
+        type="number"
+        value={total_cal}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fat"
+        label="Fat (g)"
+        size="small"
+        name="total_fat"
+        type="number"
+        value={total_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sat_fat"
+        label="Saturated Fat (g)"
+        size="small"
+        name="total_sat_fat"
+        type="number"
+        value={total_sat_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_trans_fat"
+        label="Trans Fat (g)"
+        size="small"
+        name="total_trans_fat"
+        type="number"
+        value={total_trans_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_carbs"
+        label="Carbs (g)"
+        size="small"
+        name="total_carbs"
+        type="number"
+        value={total_carbs} 
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fiber"
+        label="Fiber (g)"
+        size="small"
+        name="total_fiber"
+        type="number"
+        value={total_fiber}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sugar"
+        label="Sugar (g)"
+        size="small"
+        name="total_sugar"
+        type="number"
+        value={total_sugar}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_protein"
+        label="Protein (g)"
+        size="small"
+        name="total_protein"
+        type="number"
+        value={total_protein}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sodium"
+        label="Sodium (mg)"
+        size="small"
+        name="total_sodium"
+        type="number"
+        value={total_sodium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_potassium"
+        label="Potassium (mg)"
+        size="small"
+        name="total_potassium"
+        type="number"
+        value={total_potassium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_cholesterol"
+        label="Cholesterol (mg)"
+        size="small"
+        name="total_cholesterol"
+        type="number"
+        value={total_cholesterol}
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      <br></br>
+      &nbsp; &nbsp;
+
+      <Button 
+      type="submit" 
+      variant="contained"
+      size = "large">
+      Submit</Button>
+      </form>
+    </div>
+    <br></br>
+    
+    <div>
+      <h2>
+        &nbsp; &nbsp;
+        So Far This Week:
+      </h2>
+
+      <h3>
+        &nbsp; &nbsp;
+        Foods Eaten
+      </h3>
+
+      <TableContainer component={Paper}>
+          <Table stickyHeader>
+          <TableHead>
+            <TableRow>
+              <TableCell style={{ width: 90 }}  align="left">Food</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ width: 90 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            <TableRow>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+              <TableCell> </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    
+      <br></br>
+      <Stack direction="row" spacing={2}>
+        &nbsp; &nbsp;
+        <Chip label="Calories" variant="outlined"/>
+        <Chip label="Fat" variant="outlined"/>
+        &nbsp; &nbsp;
+        <Chip label="Saturated Fat" variant="outlined"/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Trans Fat" variant="outlined"/>
+        &nbsp; &nbsp;
+        <Chip label="Carbs" variant="outlined"/>
+        &nbsp; &nbsp;
+        <Chip label="Fiber" variant="outlined"/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Sugar" variant="outlined"/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Protein" variant="outlined"/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Sodium" variant="outlined"/>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Potassium" variant="outlined"/>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Cholesterol" variant="outlined"/>
+      </Stack>
+    </div>
+
+    <div>
+      <h2>
+        &nbsp; &nbsp;
+        Add to Food Journal
+      </h2>
+      <h3> &nbsp; &nbsp;
+        On-Campus
+      </h3>
+      <form onSubmit={submitSearchHandler}>
+          &nbsp; &nbsp;
+          <TextField
+            id="search_term"
+            label="Keyword"
+            size="medium"
+            name="search_term"
+            value={search_term}
+            onChange={changeSearchHandler}
+          />
+
+          &nbsp; &nbsp;
+          <Button sx={{ m: 1}}
+            type="search"
+            variant="contained"
+            size="medium">
+          Search</Button>
+      </form>
+
+      <h3> &nbsp; &nbsp;
+        Off-Campus
+      </h3>
+        <form onSubmit={submitOffCampusHandler}>
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="item_name"
+            label="Food Item"
+            size="small"
+            name="item_name"
+            value={item_name}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="amount"
+            label="Number of Servings"
+            size="small"
+            name="amount"
+            type="number"
+            value={amount}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="calories"
+            label="Calories"
+            size="small"
+            name="calories"
+            type="number"
+            value={calories}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="fat"
+            label="Fat (g)"
+            size="small"
+            name="fat_g"
+            type="number"
+            value={fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sat_fat"
+            label="Saturated Fat (g)"
+            size="small"
+            name="sat_fat_g"
+            type="number"
+            value={sat_fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="trans_fat"
+            label="Trans Fat (g)"
+            size="small"
+            name="trans_fat_g"
+            type="number"
+            value={trans_fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          
+          &nbsp; &nbsp;
+          <TextField
+            id="carbs"
+            label="Carbs (g)"
+            size="small"
+            name="carbs_g"
+            type="number"
+            value={carbs_g}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="fiber"
+            label="Fiber (g)"
+            size="small"
+            name="fiber_g"
+            type="number"
+            value={fiber_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sugar"
+            label="Sugar (g)"
+            size="small"
+            name="sugar_g"
+            type="number"
+            value={sugar_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="protein"
+            label="Protein (g)"
+            size="small"
+            name="protein_g"
+            type="number"
+            value={protein_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sodium"
+            label="Sodium (mg)"
+            size="small"
+            name="sodium_mg"
+            type="number"
+            value={sodium_mg}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="potassium"
+            label="Potassium (mg)"
+            size="small"
+            name="potassium_mg"
+            type="number"
+            value={potassium_mg}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="cholesterol"
+            label="Cholesterol (mg)"
+            size="small"
+            name="cholesterol_mg"
+            type="number"
+            value={cholesterol_mg}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          <br></br>
+          &nbsp; &nbsp;
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="large">
+            Submit</Button>
+      </form>
+    </div>
+
     </ThemeProvider>
   
     );