user.py Route done

client/src/App.jsx

@@ -1,21 +1,30 @@
-import React, { useState } from 'react';
+import React, { useState,useEffect } from 'react';
 import { UserProvider } from './Components/userContext';
 import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
 import Home from './Components/Home';  // Ensure this path is correct
 import AuthComponent from './Components/authComponent';
 import UserProfile from './Components/userProfile';
 import Sidebar from './Components/sideBar';
 import Navbar from './Components/navBar';
+import MoodLogging from './Components/moodLogging';
+import MoodLogs from './Components/moodLogs';
 import { CssBaseline, Box } from '@mui/material';
 
 function App() {
+    useEffect(() => {
+        document.body.style.backgroundColor = '#f5f5f5';
+
+      }, []);
+
     return (
         <UserProvider>
             <Layout>
                 <Routes>
                     <Route path="/" element={<Home />} />
                     <Route path="/auth" element={<AuthComponent />} />
                     <Route path="/user/profile/:userId" element={<UserProfile />} />
+                    <Route path="/user/mood_logging" element={<MoodLogging />} />
+                    <Route path="/user/mood_logs" element={<MoodLogs />} />
                 </Routes>
             </Layout>
         </ UserProvider>
@@ -37,7 +46,7 @@ function Layout({ children }) {
             <CssBaseline />
             {showNav && <Navbar toggleSidebar={toggleSidebar}/>}
             {showNav && sidebarOpen && <Sidebar />}
-            <Box component="main" sx={{ flexGrow: 1, p: mainPadding }}>
+            <Box component="main" sx={{ flexGrow: 1, p: mainPadding, }}>
                 {children}
             </Box>
         </Box>

client/src/Assets/Styles/MoodLogging.css

@@ -0,0 +1,74 @@
+.mood-logging-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    font-family: 'Arial', sans-serif;
+
+}
+
+.mood-logging {
+    width: 90%;
+    max-width: 500px;
+
+    padding: 25px;
+    border-radius: 10px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s ease-in-out;
+}
+
+.mood-logging:hover {
+    box-shadow: 0 20px 45px rgba(0,0,0,0.15);
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+}
+
+input[type="text"] {
+    padding: 12px 20px;
+    margin: 10px 0;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+    font-size: 16px;
+    transition: border-color 0.3s ease-in-out;
+}
+
+input[type="text"]:focus {
+    border-color: #007BFF;
+    outline: none;
+}
+
+.submit-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background-color: #007BFF;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-top: 20px;
+    transition: background-color 0.3s ease-in-out;
+}
+
+.submit-button:hover {
+    background-color: #0056b3;
+}
+
+
+.message {
+    text-align: center;
+    margin-top: 15px;
+    padding: 10px;
+    font-size: 16px;
+    color: #2c3e50;
+    border-radius: 5px;
+    background-color: #e0e0e0;
+}

client/src/Assets/Styles/MoodLogs.css

@@ -0,0 +1,43 @@
+.mood-logs {
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    background-color: white;
+}
+
+h2 {
+    display: flex;
+    align-items: center; /* This aligns the icon with the text vertically */
+    font-size: 24px; /* Adjust text size as needed */
+}
+
+.icon-large {
+    font-size: 40px; /* or any other size */
+    margin-right: 7px; /* Adds space between the icon and the text */
+}
+
+.mood-logs h2 {
+    text-align: center;
+    color: #333;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+li {
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+}
+
+li:last-child {
+    border-bottom: none;
+}
+
+.error {
+    color: red;
+    text-align: center;
+}

client/src/Components/moodLogging.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Button } from '@mui/material';
+import MoodIcon from '@mui/icons-material/Mood';
+import SendIcon from '@mui/icons-material/Send';
+import '../Assets/Styles/MoodLogging.css';
+
+function MoodLogging() {
+    const [mood, setMood] = useState('');
+    const [activities, setActivities] = useState('');
+    const [message, setMessage] = useState('');
+
+    const handleLogMood = async () => {
+        const token = localStorage.getItem('token');
+        if (!mood || !activities) {
+            setMessage("Both mood and activities are required.");
+            return;
+        }if (!token) {
+            setMessage("You are not logged in.");
+            return;
+        }
+
+        try {
+            const response = await axios.post('/api/user/log_mood', { mood, activities }, {
+                headers: {
+                    Authorization: `Bearer ${token}`
+                }
+            });
+            setMessage(response.data.message);
+        } catch (error) {
+            setMessage(error.response.data.error);
+        }
+    };
+
+    return (
+        <div className="mood-logging-container">
+            <h1><MoodIcon fontSize="large" /> Track Your Vibes </h1>
+            <div className="mood-logging">
+                <div className="input-group">
+                <label htmlFor="mood-input">Mood:</label>
+                <input id="mood-input" type="text" value={mood} onChange={(e) => setMood(e.target.value)} placeholder="Enter your current mood" />
+
+                <label htmlFor="activities-input">Activities:</label>
+                <input id="activities-input" type="text" value={activities} onChange={(e) => setActivities(e.target.value)} placeholder="What are you doing?" />
+                </div>
+                <Button variant="contained" className="submit-button" onClick={handleLogMood} startIcon={<SendIcon />}>
+                    Log Mood
+                </Button>
+                {message && <div className="message">{message}</div>}
+            </div>
+        </div>
+    );
+}
+
+export default MoodLogging;

client/src/Components/moodLogs.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import '../Assets/Styles/MoodLogs.css';
+import ListAltIcon from '@mui/icons-material/ListAlt'; // Icon for mood logs
+
+function MoodLogs() {
+    const [moodLogs, setMoodLogs] = useState([]);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        const fetchMoodLogs = async () => {
+            const token = localStorage.getItem('token');
+            if (!token) {
+                setError("You are not logged in.");
+                return;
+            }
+
+            try {
+                const response = await axios.get('/api/user/get_mood_logs', {
+                    headers: {
+                        Authorization: `Bearer ${token}`
+                    }
+                });
+                console.log("Received data:", response.data); // Check what's being received
+                setMoodLogs(response.data.mood_logs || []);
+            } catch (error) {
+                setError(error.response.data.error);
+            }
+        };
+
+        fetchMoodLogs();
+    }, []);
+    const formatDateTime = (dateObject) => {
+        const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
+        try {
+            // Extract the date string from the date object
+            const dateString = dateObject['$date'];
+            const date = new Date(dateString);
+            return date.toLocaleDateString("en-US", options) ;
+        } catch (error) {
+            console.error("Date parsing error:", error);
+            return "Invalid Date";
+        }
+    };    
+
+    return (
+        <div className="mood-logs">
+            <h2><ListAltIcon className="icon-large" />Your Mood Journey</h2>
+            {error ?<div className="error">{error}</div> : (
+                <ul>
+                    {moodLogs.map((log, index) => (
+                        <li key={index}><div><strong>Mood:</strong> {log.mood}</div>
+                            <div><strong>Activities:</strong> {log.activities}</div>
+                            <div><strong>Timestamp:</strong> {formatDateTime(log.timestamp)}</div></li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
+
+export default MoodLogs;

client/src/Components/sideBar.jsx

@@ -1,9 +1,11 @@
 import React, {useContext} from 'react';
 import { Drawer, List, ListItem, ListItemIcon, ListItemText} from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import PersonIcon from '@mui/icons-material/Person';
+import DeckIcon from '@mui/icons-material/Deck';
+import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'; // Icon for mood logging
+import ListAltIcon from '@mui/icons-material/ListAlt'; // Icon for mood logs
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import { UserContext } from './userContext';
+import { Link } from 'react-router-dom';
 
 const drawerWidth = 230;
 
@@ -18,21 +20,34 @@ function Sidebar() {
         '& .MuiDrawer-paper': {
           width: drawerWidth,
           boxSizing: 'border-box',
-          position: 'relative'
+          position: 'relative', //position: 'fixed', Fixing the sidebar so it doesn't move on scroll
+          height: '100vh', // Ensuring it covers the full height of the viewport
+          top: 0, // Aligning it to the top of the viewport
+          overflowX: 'hidden', // Hiding horizontal overflow
         },
       }}
       variant="permanent"
       anchor="left"
     >
       <List>
+      <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
         <ListItem button>
-          <ListItemIcon><HomeIcon /></ListItemIcon>
+          <ListItemIcon><DeckIcon /></ListItemIcon>
           <ListItemText primary="Home" />
         </ListItem>
-        <ListItem button>
-          <ListItemIcon><PersonIcon /></ListItemIcon>
-          <ListItemText primary="Profile" />
-        </ListItem>
+        </Link>
+        <Link to="/user/mood_logging" style={{ textDecoration: 'none', color: 'inherit' }}>
+                    <ListItem button>
+                        <ListItemIcon><InsertEmoticonIcon /></ListItemIcon>
+                        <ListItemText primary="Track Your Vibes" />
+                    </ListItem>
+                </Link>
+                <Link to="/user/mood_logs" style={{ textDecoration: 'none', color: 'inherit' }}>
+                    <ListItem button>
+                        <ListItemIcon><ListAltIcon /></ListItemIcon>
+                        <ListItemText primary="Mood Logs" />
+                    </ListItem>
+                </Link>
         <ListItem button onClick={logout}>
           <ListItemIcon><ExitToAppIcon /></ListItemIcon>
           <ListItemText primary="Logout" /> 

server/routes/user.py

@@ -1,5 +1,6 @@
 import logging
-
+from bson import json_util
+import json
 from flask import Blueprint, request, jsonify
 from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity
 from bson import ObjectId
@@ -149,7 +150,8 @@ def get_mood_logs():
     try:
         current_user = get_jwt_identity()
         mood_logs = MongoDBClient.get_user_mood_logs(current_user)
-        return jsonify({"mood_logs": [str(log) for log in mood_logs]}), 200
+        mood_logs_json = json.loads(json_util.dumps(mood_logs))
+        return jsonify({"mood_logs": mood_logs_json}), 200
 
     except Exception as e:
         logging.error(f"Error retrieving mood logs: {str(e)}")