Skip to content

Commit

Permalink
Merge branch 'master' into test-home-and-login
Browse files Browse the repository at this point in the history
  • Loading branch information
@cindyliang01
cindyliang01 committed Nov 14, 2023
2 parents cd97283 + 48b2673 commit b016329
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 67 deletions.
2 changes: 2 additions & 0 deletions back-end/app.js
View file
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
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
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;

0 comments on commit b016329

Please sign in to comment.