Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Connect route for UserInfo page #79

Merged
merged 3 commits into from
Nov 14, 2023
Merged

Connect route for UserInfo page #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5dc70cc
connect route for UserInfo page + fix fetch data errors
HedwigO Nov 14, 2023
5bef0e7
create route for UserInfo
HedwigO Nov 14, 2023
4df9e9a
Merge branch 'master' into expense-and-userinfo-page
HedwigO Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions back-end/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const eventsRoute = require('./routes/eventsRoute');
const addEventRoute = require('./routes/addEventRoute')
const loginRoute = require("./routes/loginRoute");
const addExpensePayerRoute = require("./routes/addExpensePayerRoute");
const userInfoPageRoute = require('./routes/UserInfoPageRoute');

app.use(cors());
app.use(express.json());
Expand All @@ -29,6 +30,7 @@ app.use('/addFriends', addFriendRoute);
app.use('/events', eventsRoute);
app.use('/addEvent', addEventRoute);
app.use("/", loginRoute);
app.use("/user-info", userInfoPageRoute);

// export the express app we created to make it available to other modules
module.exports = app;
28 changes: 28 additions & 0 deletions back-end/routes/userInfoPageRoute.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
// fetch user information and send it as a JSON response
const userInfoData = {
id: 1,
name: 'Bryn',
email: '[email protected]',
avatar: 'https://robohash.org/utetquibusdam.png?size=50x50&set=set1',
user: [
{
id: 2,
name: 'Jdavie',
email: '[email protected]',
},
{
id: 3,
name: 'Emmie',
email: '[email protected]',
},
],
};

res.json(userInfoData);
});

module.exports = router;
137 changes: 70 additions & 67 deletions front-end/src/components/UserInfo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,21 @@
import React, { useState, useEffect } from "react";
import '../styles/UserInfo.css';
import Navbar from "./Navbar";
import axios from 'axios';

function UserInfo() {
const [userData, setUserData] = useState(null);
const [randomUser, setRandomUser] = useState(null); {/* to fetch random user info */}
const [isDarkMode, setIsDarkMode] = useState(false); {/* to control dark mode */}
const [message, setMessage] = useState(''); {/* to input contact us messages */}
const [randomUser, setRandomUser] = useState(null);
const [isDarkMode, setIsDarkMode] = useState(false);
const [message, setMessage] = useState('');

{/* dark mode function */}
const toggleDarkMode = () => {
setIsDarkMode(prevMode => !prevMode);
};
const toggleDarkMode = () => setIsDarkMode(prevMode => !prevMode);

{/* contact us function */}
const sendMessage = () => {
console.log(message);
{/* can add an API call here to send the message to the backend */}
{/* reset the message input after sending */}
setMessage('');
};

{/* backup data */}
const backupData = {
"id": 1,
"name": "Bryn",
Expand All @@ -46,19 +40,22 @@ function UserInfo() {
useEffect(() => {
async function fetchData() {
try {
const response = await fetch("https://my.api.mockaroo.com/user_info.json?key=2712db60");
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
const response = await axios.get("http://localhost:3001/user-info");
const data = response.data;
setUserData(data);
{/* pick a random user from the user array */}
const randomIdx = Math.floor(Math.random() * data.user.length);
setRandomUser(data.user[randomIdx]);

// handle potential undefined data.user
const userArray = data.user || [];
if (userArray.length > 0) {
const randomIdx = Math.floor(Math.random() * userArray.length);
setRandomUser(userArray[randomIdx]);
} else {
console.error("User data or user array is empty.");
setRandomUser(null);
}
} catch (error) {
console.error("Error fetching user data:", error);
setUserData(backupData);
{/* pick a random user from the backup data */}
const randomIdx = Math.floor(Math.random() * backupData.user.length);
setRandomUser(backupData.user[randomIdx]);
}
Expand All @@ -68,56 +65,62 @@ function UserInfo() {

return (
<div className={`UserInfo-full-height ${isDarkMode ? 'dark-mode' : ''}`}>
<div className="UserInfo">
<h1 className="page-title">Account</h1>
{randomUser && (
<>
<div className="user-detail-section">
<img src={userData.avatar} alt="User's Avatar" className="avatar" />
<div className="user-name-email">
<div className="name">{randomUser.name}</div>
<div className="email">{randomUser.email}</div>
</div>
</div>
<div className="settings-list-general">
<ul>
<li className="setting-title">Settings</li>
<li className="setting-item">
Dark Mode
<label className="switch">
<input type="checkbox" checked={isDarkMode} onChange={toggleDarkMode} />
<span className="slider round"></span>
</label>
</li>
<li className="setting-item">Passcode</li>
</ul>
</div>

<div className="settings-list-feedback">
<ul>
<li className="setting-title">Feedback</li>
<li className="setting-item setting-item-feedback">
<div className="contact-us-title">Contact us</div>
<div className="chatbox-container">
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Type your message here..." /* store messages in backend */
className="chatbox-input"
/>
<button onClick={sendMessage} className="send-button">Send</button>
<div className="UserInfo">
<h1 className="page-title">Account</h1>
{randomUser && (
<>
<div className="user-detail-section">
<img src={userData.avatar} alt="User's Avatar" className="avatar" />
<div className="user-name-email">
<div className="name">{randomUser.name}</div>
<div className="email">{randomUser.email}</div>
</div>
</li>
</ul>
</div>
</>
)}
<Navbar isDarkMode={isDarkMode} /> {/* set dark mode for Navbar */}
</div>
</div>
<div className="settings-list-general">
<ul>
<li className="setting-title">Settings</li>
<li className="setting-item">
Dark Mode
<label className="switch">
<input
type="checkbox"
id="darkModeToggle"
name="darkModeToggle"
checked={isDarkMode}
onChange={toggleDarkMode}
/>
<span className="slider round"></span>
</label>
</li>
<li className="setting-item">Passcode</li>
{/* Add additional settings here */}
</ul>
</div>
<div className="settings-list-feedback">
<ul>
<li className="setting-title">Feedback</li>
<li className="setting-item setting-item-feedback">
<div className="contact-us-title">Contact us</div>
<div className="chatbox-container">
<textarea
id="userMessage"
name="userMessage"
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Type your message here..."
className="chatbox-input"
/>
<button onClick={sendMessage} className="send-button">Send</button>
</div>
</li>
</ul>
</div>
</>
)}
<Navbar isDarkMode={isDarkMode} />
</div>
</div>
);


}

export default UserInfo;