From 031da522b979409d30b3e366e1fb97581b149464 Mon Sep 17 00:00:00 2001 From: Kevin Hendrix Date: Sat, 4 Feb 2023 15:21:23 -0500 Subject: [PATCH 01/11] Initialize components for login page --- client/components/App.jsx | 12 +++++++++++- client/components/Login.jsx | 21 +++++++++++++++++++++ client/index.js | 15 +++++---------- 3 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 client/components/Login.jsx diff --git a/client/components/App.jsx b/client/components/App.jsx index 73b357e..52daecf 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -1,9 +1,19 @@ import React from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import FeatureContainer from '../containers/FeaturePageContainer'; function App() { return ( - + <> + + + } /> + } /> + + + , + + ); } diff --git a/client/components/Login.jsx b/client/components/Login.jsx new file mode 100644 index 0000000..f50373b --- /dev/null +++ b/client/components/Login.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Login() { + return ( +
+ + + + + + +
+ ); +} +export default Login; diff --git a/client/index.js b/client/index.js index 461de4b..695b27b 100644 --- a/client/index.js +++ b/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 ReactDOM from 'react-dom/client'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import App from './components/App'; // import styles from './scss/application.scss'; -const domNode = document.getElementById('app'); -const root = createRoot(domNode); -root.render( - - - -); +ReactDOM.createRoot(document.getElementById('app')).render(); From cb571c1ed7676e8d95e4f904d99f165571b0eeaf Mon Sep 17 00:00:00 2001 From: jm-roman Date: Sat, 4 Feb 2023 17:21:44 -0500 Subject: [PATCH 02/11] signup and login backend completed --- server/controllers/userController.js | 53 ++++++++++++++++++++++++++++ server/models/userModel.js | 37 +++++++++++++++++++ server/server.js | 26 +++++++++++--- 3 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 server/controllers/userController.js create mode 100644 server/models/userModel.js diff --git a/server/controllers/userController.js b/server/controllers/userController.js new file mode 100644 index 0000000..bde052d --- /dev/null +++ b/server/controllers/userController.js @@ -0,0 +1,53 @@ +const User = require('../models/userModel'); +const bcrypt = require('bcrypt'); +const userController = {}; + +userController.createUser = async (req, res, next) => { + const { username, password } = req.body; + + try { + //check first to see if user is already created + const found = await User.findOne({ username }); + if (found) { + console.log('yes user is created'); + throw new Error('username is already in use'); + } + const newUser = await new User({ username, password }); + await newUser.save(); + res.locals.user = newUser; + return next(); + } catch (error) { + return next({ + log: 'Express error handler caught unknown middleware error', + status: 500, + message: { err: error.message }, + }); + } +}; + +userController.verifyUser = async (req, res, next) => { + const { username, password } = req.body; + try { + //grab encrypted password from db + const user = await User.find({ username }); + console.log(user); + if (!user[0]) { + console.log('no user found'); + throw new Error('no user found'); + } + const matched = await bcrypt.compare(password, user[0].password); + if (!matched) { + throw new Error('password incorrect'); + } + res.locals.username = username; + return next(); + } catch (error) { + return next({ + log: 'Express error handler caught unknown middleware error', + status: 500, + message: { err: error.message }, + }); + } +}; + +module.exports = userController; diff --git a/server/models/userModel.js b/server/models/userModel.js new file mode 100644 index 0000000..20fb316 --- /dev/null +++ b/server/models/userModel.js @@ -0,0 +1,37 @@ +const mongoose = require('mongoose'); +const bcrypt = require('bcrypt'); +const SALT_WORK_FACTOR = 10; + +const userSchema = new mongoose.Schema({ + username: { + type: String, + required: true, + unique: true, + }, + password: { + type: String, + required: true, + }, + favorite: { + type: Array, + default: [], + }, +}); + +userSchema.pre('save', async function (next) { + try { + // "modification" includes creating a new pw, per mongoose + if (!this.isModified('password')) { + return next(); + } + const hashedPassword = await bcrypt.hash(this.password, SALT_WORK_FACTOR); + this.password = hashedPassword; + return next(); + } catch (err) { + return next(err); + } +}); + +const User = mongoose.model('User', userSchema); + +module.exports = User; diff --git a/server/server.js b/server/server.js index 51bd91e..c4e43b6 100644 --- a/server/server.js +++ b/server/server.js @@ -12,6 +12,8 @@ const PORT = 3000; const foodController = require('./controllers/foodController'); +const userController = require('./controllers/userController'); + //connect to database const mongoURI = 'mongodb+srv://goblinshark:codesmith@foodremedy.nl2qzoj.mongodb.net/?retryWrites=true&w=majority'; @@ -26,14 +28,10 @@ mongoose // needed to fix fetching problem in react app.use(cors()); +app.use(express.json()); app.use(express.static(path.resolve(__dirname, '../client'))); -// listens, confirms connection -app.listen(PORT, () => { - console.log(`Success! Your application is running on port ${PORT}.`); -}); - // handles POST requests from illness dropdown app.post( '/search', @@ -42,6 +40,19 @@ app.post( (req, res) => res.status(200).send(res.locals.facts) ); +//route for signing up +app.get('/signup', (req, res) => { + res.sendFile(path.resolve(__dirname, '../client/signup.html')); +}); + +app.post('/signup', userController.createUser, (req, res) => { + res.status(200).json(res.locals.user); +}); + +app.post('/login', userController.verifyUser, (req, res) => { + res.status(200).json(res.locals.username); +}); + // global error handler app.use((err, req, res, next) => { const defaultErr = { @@ -53,3 +64,8 @@ app.use((err, req, res, next) => { console.log(errorObj.log); return res.status(errorObj.status).json(errorObj.message); }); + +// listens, confirms connection +app.listen(PORT, () => { + console.log(`Success! Your application is running on port ${PORT}.`); +}); From 514a67e410ba9e857470a2cda021d1dd9c4fe48f Mon Sep 17 00:00:00 2001 From: Kevin Hendrix Date: Sat, 4 Feb 2023 17:41:02 -0500 Subject: [PATCH 03/11] Add logic to display data from backend in table component --- client/components/App.jsx | 17 ++++++----- client/components/Table.jsx | 33 +++++++++++++++------- client/containers/FeaturePageContainer.jsx | 24 ++++++++++++++-- package.json | 2 +- 4 files changed, 53 insertions(+), 23 deletions(-) diff --git a/client/components/App.jsx b/client/components/App.jsx index 52daecf..754119b 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -1,18 +1,17 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import FeatureContainer from '../containers/FeaturePageContainer'; +import Login from './Login'; function App() { return ( - <> - - - } /> - } /> - - - , - + + + + } /> + } /> + + ); } diff --git a/client/components/Table.jsx b/client/components/Table.jsx index b417468..84e3606 100644 --- a/client/components/Table.jsx +++ b/client/components/Table.jsx @@ -12,18 +12,31 @@ function Table(props) { ); - + // 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) => ( - {dataProperties.map((property) => - // if (column === 'linkedinValue') { - // return {row[column]}; - // } - // if (column === 'lastConnectionValue' || column === 'nextConnectionValue') { - // const date = new Date(row[column]); - // return {date.toDateString()}; - // } - {row[property]})} + + {[{row.name}, ...row.nutrients.map((property) => { + console.log('property', property); + if (!property) { + return N/A; + } + return {`${property.quantity ? property.quantity.toFixed(2) : 0} ${property.unit}`}; + }, + + // if (column === 'linkedinValue') { + // return {row[column]}; + // } + // if (column === 'lastConnectionValue' || column === 'nextConnectionValue') { + // const date = new Date(row[column]); + // return {date.toDateString()}; + // } + ), + ]} )); diff --git a/client/containers/FeaturePageContainer.jsx b/client/containers/FeaturePageContainer.jsx index bfc71b8..f222b50 100644 --- a/client/containers/FeaturePageContainer.jsx +++ b/client/containers/FeaturePageContainer.jsx @@ -3,10 +3,13 @@ import Table from '../components/Table'; import DropDown from '../components/DropDown'; function FeatureContainer() { - const tableHeaders = ['Insert', 'food', 'headers']; - const tableProperties = ['Insert', 'food', 'properties']; + + // const tableProperties = ['Insert', 'food', 'properties']; const [ailment, setAilment] = React.useState('headache'); + 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) => { @@ -16,10 +19,25 @@ function FeatureContainer() { const handleClick = () => { 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)); }; diff --git a/package.json b/package.json index 8729a5c..5199022 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "webpack.config.js", "scripts": { "start": "nodemon server/server.js", - "dev": "webpack serve --config ./webpack.config.js --mode development", + "dev": "webpack serve --config ./webpack.config.js --mode development & nodemon server/server.js", "test": "echo \"Error: no test specified\" && exit 1" }, "eslintConfig": { From b42e062729e02c1f0afd751ba7652b44767f8085 Mon Sep 17 00:00:00 2001 From: Kevin Hendrix Date: Mon, 6 Feb 2023 11:31:33 -0500 Subject: [PATCH 04/11] fix api call format in FeaturePageContainer --- client/containers/FeaturePageContainer.jsx | 4 ++-- package.json | 1 + server/controllers/foodController.js | 2 ++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/containers/FeaturePageContainer.jsx b/client/containers/FeaturePageContainer.jsx index f222b50..7f9dc27 100644 --- a/client/containers/FeaturePageContainer.jsx +++ b/client/containers/FeaturePageContainer.jsx @@ -3,7 +3,6 @@ import Table from '../components/Table'; import DropDown from '../components/DropDown'; function FeatureContainer() { - // const tableProperties = ['Insert', 'food', 'properties']; const [ailment, setAilment] = React.useState('headache'); @@ -17,9 +16,10 @@ function FeatureContainer() { }; const handleClick = () => { + console.log('ailment', ailment); fetch('http://localhost:3000/search', { method: 'POST', - body: JSON.stringify(ailment), + body: JSON.stringify({ ailment }), headers: { 'Content-Type': 'application/json' }, }) .then((res) => res.json()) diff --git a/package.json b/package.json index 5199022..7645b64 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "webpack.config.js", "scripts": { "start": "nodemon server/server.js", + "build": "webpack", "dev": "webpack serve --config ./webpack.config.js --mode development & nodemon server/server.js", "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/server/controllers/foodController.js b/server/controllers/foodController.js index 632608a..bacb8be 100644 --- a/server/controllers/foodController.js +++ b/server/controllers/foodController.js @@ -16,6 +16,7 @@ const preciseURL = // gets foodController.getFoods = (req, res, next) => { // queries mongoDB for illness, saves related foods in res locals + console.log('hitting get foods'); try { Illness.findOne({ illness: req.body }).then((data) => { res.locals.foods = data.foods; @@ -31,6 +32,7 @@ foodController.getFoods = (req, res, next) => { }; foodController.getFacts = async (req, res, next) => { + console.log('hitting get facts'); res.locals.facts = []; try { for (let food of res.locals.foods) { From 1620cdb2da7d7939559cf8ed61346258e84a9e5e Mon Sep 17 00:00:00 2001 From: Sheng Li Date: Mon, 6 Feb 2023 09:36:58 -0800 Subject: [PATCH 05/11] added favorites --- server/controllers/foodController.js | 2 +- server/controllers/userController.js | 78 +++++++++++++++++++++++++++- server/server.js | 14 +++++ 3 files changed, 91 insertions(+), 3 deletions(-) diff --git a/server/controllers/foodController.js b/server/controllers/foodController.js index 632608a..469a4de 100644 --- a/server/controllers/foodController.js +++ b/server/controllers/foodController.js @@ -17,7 +17,7 @@ const preciseURL = foodController.getFoods = (req, res, next) => { // queries mongoDB for illness, saves related foods in res locals try { - Illness.findOne({ illness: req.body }).then((data) => { + Illness.findOne({ ailment: req.body.ailment }).then((data) => { res.locals.foods = data.foods; return next(); }); diff --git a/server/controllers/userController.js b/server/controllers/userController.js index bde052d..f00254e 100644 --- a/server/controllers/userController.js +++ b/server/controllers/userController.js @@ -18,7 +18,7 @@ userController.createUser = async (req, res, next) => { return next(); } catch (error) { return next({ - log: 'Express error handler caught unknown middleware error', + log: 'Error in userController.createUser middleware function', status: 500, message: { err: error.message }, }); @@ -43,11 +43,85 @@ userController.verifyUser = async (req, res, next) => { return next(); } catch (error) { return next({ - log: 'Express error handler caught unknown middleware error', + log: 'Error in userController.verifyUser middleware function', status: 500, message: { err: error.message }, }); } }; +userController.addFavorite = async (req, res, next) => { + const username = req.params.username; + try { + const user = await User.findOne({ username }); + const favorite = user?.favorite; + if (!user) { + throw Error('user not found'); + } + //const favorite = user.favorite; + //findoneandupdate {username}, {favorite:[...favorite,food]} + const addFavorite = await User.findOneAndUpdate( + { username }, + { favorite: [...favorite, req.body] } + ); + if (!addFavorite) { + throw Error('user cannot be updated'); + } + res.locals.favorite = addFavorite; + return next(); + } catch (error) { + return next({ + log: 'Error in userController.addFavorite middleware function', + status: 500, + message: { err: error.message }, + }); + } + //findOne => return the user +}; + +userController.getFavorite = async (req, res, next) => { + const username = req.params.username; + try { + const user = await User.findOne({ username }); + res.locals.favorite = user.favorite; + next(); + } catch (error) { + return next({ + log: 'Error in userController.getFavorites middleware function', + status: 500, + message: { err: error.message }, + }); + } +}; + +userController.deleteFavorite = async (req, res, next) => { + const username = req.params.username; + const { food } = req.body; + try { + const user = await User.findOne({ username }); + const favorite = user?.favorite; + if (!user) { + throw Error('user not found'); + } + //const favorite = user.favorite; + //findoneandupdate {username}, {favorite:[...favorite,food]} + const deleteFavorite = await User.findOneAndUpdate( + { username }, + { favorite: favorite.filter((obj) => obj.food !== food) } + ); + if (!deleteFavorite) { + throw Error('user cannot be updated'); + } + res.locals.favorite = deleteFavorite; + return next(); + } catch (error) { + return next({ + log: 'Error in userController.addFavorite middleware function', + status: 500, + message: { err: error.message }, + }); + } + //findOne => return the user +}; + module.exports = userController; diff --git a/server/server.js b/server/server.js index c4e43b6..4003d65 100644 --- a/server/server.js +++ b/server/server.js @@ -53,6 +53,20 @@ app.post('/login', userController.verifyUser, (req, res) => { res.status(200).json(res.locals.username); }); +//save favorite food to user's favorite folder +app.patch('/user/addfav/:username',userController.addFavorite,(req, res)=> { + res.status(200).json(res.locals.favorite); +}) +//get a collection of favorite food for a user +app.get('/user/:username',userController.getFavorite,(req,res)=>{ + res.status(200).json(res.locals.favorite); +}) + +//delete a favorite food from a user's favorite collection +app.patch('/user/deletefav/:username',userController.deleteFavorite,(req, res)=> { + res.status(200).json(res.locals.favorite); +}) + // global error handler app.use((err, req, res, next) => { const defaultErr = { From bdbbf68d78694f9cfef09b93ed55662f5ed95479 Mon Sep 17 00:00:00 2001 From: Kevin Hendrix Date: Mon, 6 Feb 2023 14:58:35 -0500 Subject: [PATCH 06/11] Initialize react structure for login page --- client/components/App.jsx | 5 ++- client/components/Login.jsx | 84 ++++++++++++++++++++++++++++++++++--- 2 files changed, 82 insertions(+), 7 deletions(-) diff --git a/client/components/App.jsx b/client/components/App.jsx index 754119b..a99f7aa 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -1,14 +1,15 @@ -import React from 'react'; +import React, { useState } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import FeatureContainer from '../containers/FeaturePageContainer'; import Login from './Login'; function App() { + const [globalUser, setGlobalUser] = useState(''); return ( - } /> + } /> } /> diff --git a/client/components/Login.jsx b/client/components/Login.jsx index f50373b..3db7aca 100644 --- a/client/components/Login.jsx +++ b/client/components/Login.jsx @@ -1,19 +1,93 @@ -import React from 'react'; +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); + setUsername(''); + setPassword(''); + }) + .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) { + setUsername(''); + console.log('username after click', username) + setPassword(''); + console.log(res); + 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 Login() { return (
- + +
); From 655d2f9eb3be2ee3a572e16117e3cf82dd0bd033 Mon Sep 17 00:00:00 2001 From: Sheng Li Date: Mon, 6 Feb 2023 12:16:29 -0800 Subject: [PATCH 07/11] mimum change made --- client/index.js | 2 +- client/scss/_variables.scss | 0 client/scss/application.scss | 84 ++++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 client/scss/_variables.scss create mode 100644 client/scss/application.scss diff --git a/client/index.js b/client/index.js index 695b27b..c95dd5b 100644 --- a/client/index.js +++ b/client/index.js @@ -4,6 +4,6 @@ import ReactDOM from 'react-dom/client'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import App from './components/App'; -// import styles from './scss/application.scss'; +import styles from './scss/application.scss'; ReactDOM.createRoot(document.getElementById('app')).render(); diff --git a/client/scss/_variables.scss b/client/scss/_variables.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/scss/application.scss b/client/scss/application.scss new file mode 100644 index 0000000..82e3e77 --- /dev/null +++ b/client/scss/application.scss @@ -0,0 +1,84 @@ +@import '_variables'; +@import url('https://fonts.googleapis.com/css2?family=Lora&family=Sen&display=swap'); + + +// Colors + +$primaryBlack: #050505; +$secondaryBlack: #5d5d5d; + +$primaryLime: #00ff00; +$secondaryLime: #acffac; +$lightestLime:#e2ffe2; + +$primarySalmon: salmon; +$secondarySalmon: rgb(252, 192, 185); + + + + +// Global +body { + height: 100vh; + margin: 0px; + font-family: 'Sen', sans-serif; +} +.loginWrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: $lightestLime; + height: 100vh; +} + +button { + background-color: $primarySalmon; + border: 1px solid white; + height: 30px; +} + +#button :hover { + cursor: help; +} + +// 1b. Login page + +.loginContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid $secondarySalmon; + border-radius: 5%; + width: 300px; + box-shadow: 8px 10px 14px 0px rgb(128, 128, 128, 0.1); + background-color: white; + margin-top: 100px; +} + +.loginContainer input { + margin-left: 10px; + margin-bottom: 20px; + border-radius: 5%; +} + +.loginContainer button { + width: 200px; + margin-bottom: 20px; + border-radius: 5%; +} + +// 1a. Signup page + +// 2. Feature Page +.feature-container { + margin-top: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 2%; + margin-left: 5px; + margin-right: 5px; +} From 78b6a8331e2e5c6a5ff181268b5a5914f5fb1997 Mon Sep 17 00:00:00 2001 From: Kevin Hendrix Date: Mon, 6 Feb 2023 15:34:42 -0500 Subject: [PATCH 08/11] Change login from div to form --- client/components/Login.jsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/client/components/Login.jsx b/client/components/Login.jsx index 3db7aca..d4a0f3f 100644 --- a/client/components/Login.jsx +++ b/client/components/Login.jsx @@ -9,7 +9,7 @@ function Login(props) { const navigate = useNavigate(); const handleChange = (event) => { - console.log('username before click', username) + console.log('username before click', username); if (event.target.id === 'username') setUsername(event.target.value); if (event.target.id === 'password') setPassword(event.target.value); }; @@ -26,8 +26,6 @@ function Login(props) { .then((res) => res.json()) .then((data) => { console.log('user created:', data); - setUsername(''); - setPassword(''); }) .catch((err) => console.log(err)); }; @@ -44,10 +42,6 @@ function Login(props) { .then((res) => { if (!res.ok) { - setUsername(''); - console.log('username after click', username) - setPassword(''); - console.log(res); throw new Error(`Error! status: ${res.status}`); } return res.json(); @@ -60,8 +54,13 @@ function Login(props) { .catch((err) => console.log('login error:', err)); }; + function handleSubmit(e) { + e.preventDefault(); + e.target.reset(); + } + return ( -
+
- + -
+ ); } export default Login; From 8e6aecc5119544b637c79acada5668795fc084a9 Mon Sep 17 00:00:00 2001 From: Sheng Li Date: Mon, 6 Feb 2023 12:59:40 -0800 Subject: [PATCH 09/11] styling finished --- client/components/DropDown.jsx | 4 +- client/components/Login.jsx | 53 ++++++++----- client/containers/FeaturePageContainer.jsx | 48 ++++++++++-- client/scss/application.scss | 87 +++++++++++++++++++--- 4 files changed, 159 insertions(+), 33 deletions(-) diff --git a/client/components/DropDown.jsx b/client/components/DropDown.jsx index d4f4b8c..1e49ac9 100644 --- a/client/components/DropDown.jsx +++ b/client/components/DropDown.jsx @@ -5,7 +5,8 @@ function DropDown(props) { const { ailment, handleChange, handleClick } = props; return ( -
+
+
+
+
+

Food Remedy

+ - + - - + - + +
); } diff --git a/client/containers/FeaturePageContainer.jsx b/client/containers/FeaturePageContainer.jsx index 7f9dc27..e89440d 100644 --- a/client/containers/FeaturePageContainer.jsx +++ b/client/containers/FeaturePageContainer.jsx @@ -6,8 +6,31 @@ function FeatureContainer() { // const tableProperties = ['Insert', 'food', 'properties']; const [ailment, setAilment] = React.useState('headache'); - 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 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([]); @@ -44,9 +67,24 @@ function FeatureContainer() { return ( <> -

Placeholder

- - + + + +
); } diff --git a/client/scss/application.scss b/client/scss/application.scss index 82e3e77..be07169 100644 --- a/client/scss/application.scss +++ b/client/scss/application.scss @@ -1,7 +1,6 @@ @import '_variables'; @import url('https://fonts.googleapis.com/css2?family=Lora&family=Sen&display=swap'); - // Colors $primaryBlack: #050505; @@ -9,13 +8,11 @@ $secondaryBlack: #5d5d5d; $primaryLime: #00ff00; $secondaryLime: #acffac; -$lightestLime:#e2ffe2; +$lightestLime: #e2ffe2; $primarySalmon: salmon; -$secondarySalmon: rgb(252, 192, 185); - - - +$secondarySalmon: #fcc0b9; +$lightestSalmon: #fdebe9; // Global body { @@ -39,7 +36,7 @@ button { } #button :hover { - cursor: help; + cursor: help; } // 1b. Login page @@ -69,8 +66,6 @@ button { border-radius: 5%; } -// 1a. Signup page - // 2. Feature Page .feature-container { margin-top: 100px; @@ -82,3 +77,77 @@ button { margin-left: 5px; margin-right: 5px; } + +//navbar +nav { + display: flex; + justify-content: space-between; + border-bottom: 1px solid $secondarySalmon; +} + +.logoutContainer { + display: flex; + align-items: center; + justify-content: end; + gap: 50px; +} + +//dropdown + +.dropdown-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100vw; + background-color: $lightestLime; +} + +.dropdown { + display: flex; + justify-content: center; + align-items: center; + border: 1px solid $secondarySalmon; + border-radius: 5%; + width: 300px; + box-shadow: 8px 10px 14px 0px rgb(128, 128, 128, 0.1); + background-color: white; + margin-top: 100px; + margin-bottom: 100px; +} + +.dropdown label { + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.dropdown select { + margin-top: 10px; + margin-bottom: 10px; +} + +table { + margin: 5px; + margin-top: 50px; +} + +thead { + background-color: $lightestSalmon; + font-size: 14px; +} + +tbody { + background-color: white; + font-size: 12px; +} + +td { + margin-left: 20px; +} + +tr { + padding: 10px; +} From 354ac9716607225b7dcb111953d0452da45349c0 Mon Sep 17 00:00:00 2001 From: Kevin Hendrix Date: Mon, 6 Feb 2023 16:00:39 -0500 Subject: [PATCH 10/11] Reconfigure style after changing input box to form --- client/components/Login.jsx | 4 ++++ client/scss/application.scss | 15 ++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/client/components/Login.jsx b/client/components/Login.jsx index d4a0f3f..8cdede4 100644 --- a/client/components/Login.jsx +++ b/client/components/Login.jsx @@ -60,6 +60,9 @@ function Login(props) { } return ( +
+

Title

+
); } export default Login; diff --git a/client/scss/application.scss b/client/scss/application.scss index 82e3e77..8288cea 100644 --- a/client/scss/application.scss +++ b/client/scss/application.scss @@ -44,6 +44,19 @@ button { // 1b. Login page + +.loginContents { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + h1{ + margin-top: 100px; + } +} + + .loginContainer { display: flex; flex-direction: column; @@ -54,7 +67,7 @@ button { width: 300px; box-shadow: 8px 10px 14px 0px rgb(128, 128, 128, 0.1); background-color: white; - margin-top: 100px; + margin-top: 50px; } .loginContainer input { From 1b8d863dfac66eee7bcf85345ac0b5bce888ab00 Mon Sep 17 00:00:00 2001 From: Sheng Li Date: Mon, 6 Feb 2023 14:10:01 -0800 Subject: [PATCH 11/11] final --- client/components/App.jsx | 7 ++++--- client/components/Login.jsx | 5 +++-- client/containers/FeaturePageContainer.jsx | 15 ++++++++++++--- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/client/components/App.jsx b/client/components/App.jsx index a99f7aa..1a66ebf 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -1,16 +1,17 @@ import React, { useState } from 'react'; -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +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 ( - + } /> - } /> + : null} /> diff --git a/client/components/Login.jsx b/client/components/Login.jsx index ae073e3..9be181e 100644 --- a/client/components/Login.jsx +++ b/client/components/Login.jsx @@ -59,10 +59,11 @@ function Login(props) { } return ( -
-

Title

+
+
+

Food Remedy