Skip to content

Commit 91831af

Browse files
FrankFurter123FrankFurter123
committed
Merge branch 'main' into Student-view-dashboard-functions
2 parents 38c8f29 + 8d77b64 commit 91831af

File tree

3 files changed

+466
-0
lines changed

3 files changed

+466
-0
lines changed

‎frontend/src/App.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,14 @@ import Chat from "./Components/Chat.jsx";
2222
import Booking from "./Components/Booking.jsx";
2323
import VideoCall from "./Components/VideoCall.jsx";
2424
import Calendar from "./Components/Calendar.jsx";
25+
26+
import Inbox from "./Components/Inbox.jsx";
27+
28+
2529
import TutorView from "./Components/TutorView.jsx";
2630
import AssignmentPage from "./Components/AssignmentPage.jsx";
2731

32+
2833
function App() {
2934
const location = useLocation();
3035

@@ -56,6 +61,11 @@ function App() {
5661
<Route path="/chat" element={<Chat />} />
5762
<Route path="/videocall" element={<VideoCall />} />
5863
{/* <Route path="/Calendar" element={<Calendar />} /> */}
64+
65+
{/* Jose needs this for this tutorView and inbox to work */}
66+
<Route path="/tutorview" element={<TutorView />} />
67+
<Route path="/Calendar" element={<Calendar />} />
68+
<Route path="/Inbox" element={<Inbox />} />
5969
<Route path="/tutorview" element={<TutorView />} />
6070

6171
{/* Student Routes with Layout */}

‎frontend/src/Components/Inbox.jsx‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import { useState } from "react";
2+
import { Link } from "react-router-dom";
3+
import "../Styles/Inbox.css";
4+
5+
export default function Inbox() {
6+
const [selectedMessage, setSelectedMessage] = useState(null);
7+
const [activeNav, setActiveNav] = useState("Inbox");
8+
const [filterType, setFilterType] = useState("");
9+
const [searchQuery, setSearchQuery] = useState("");
10+
11+
const [messages, setMessages] = useState([
12+
{
13+
id: 1,
14+
subject: "New Tutoring Request",
15+
preview: "Hi there! I'm looking for help with algebra...",
16+
date: "Apr 4, 2025",
17+
from: "Alex Morgan",
18+
unreadCount: 1,
19+
unread: true,
20+
type: "general",
21+
},
22+
{
23+
id: 2,
24+
subject: "Follow-up on Geometry Session",
25+
preview: "Thanks for yesterday’s session. I had a question about...",
26+
date: "Apr 2, 2025",
27+
from: "Taylor Brooks",
28+
unreadCount: 0,
29+
unread: false,
30+
type: "info",
31+
},
32+
{
33+
id: 3,
34+
subject: "Schedule Confirmation",
35+
preview: "Just confirming our next meeting time works for you...",
36+
date: "Mar 30, 2025",
37+
from: "Jordan Lee",
38+
unreadCount: 3,
39+
unread: true,
40+
type: "update",
41+
},
42+
{
43+
id: 4,
44+
subject: "Payment Received",
45+
preview: "Your tutoring payment has been processed.",
46+
date: "Apr 1, 2025",
47+
from: "Billing",
48+
unreadCount: 1,
49+
unread: true,
50+
type: "success",
51+
},
52+
{
53+
id: 7,
54+
subject: "Payment Received",
55+
preview: "Your tutoring payment has been processed.",
56+
date: "Apr 1, 2025",
57+
from: "Billing",
58+
unreadCount: 1,
59+
unread: true,
60+
type: "error",
61+
},
62+
{
63+
id: 5,
64+
subject: "Warning: Missed Session",
65+
preview: "You missed a session scheduled for April 1.",
66+
date: "Apr 1, 2025",
67+
from: "System",
68+
unreadCount: 1,
69+
unread: true,
70+
type: "warning",
71+
},
72+
{
73+
id: 6,
74+
subject: "Profile Update",
75+
preview: "Your profile has been updated successfully.",
76+
date: "Mar 28, 2025",
77+
from: "Support",
78+
unreadCount: 0,
79+
unread: false,
80+
type: "success",
81+
},
82+
]);
83+
84+
// Displays number of unread messages in a thread as a blue badge.
85+
// Resets to 0 (and hides the badge) when a thread is clicked/read.
86+
const handleSelectMessage = (msg) => {
87+
setSelectedMessage(msg);
88+
setMessages((prev) =>
89+
prev.map((m) =>
90+
m.id === msg.id ? { ...m, unread: false, unreadCount: 0 } : m
91+
)
92+
);
93+
};
94+
95+
const navLinks = {
96+
Chat: "/chat",
97+
Calendar: "/calendar",
98+
Support: "/support",
99+
Profile: "/profile",
100+
};
101+
102+
return (
103+
<div className="inbox-page">
104+
<div className="inbox-app">
105+
<div className="inbox-page-container">
106+
<div className="inbox-side-menu">
107+
<ul>
108+
{Object.keys(navLinks).map((item) => (
109+
<li
110+
key={item}
111+
className={activeNav === item ? "active" : ""}
112+
onClick={() => {
113+
setActiveNav(item);
114+
if (item !== "Inbox") {
115+
setSelectedMessage(null);
116+
}
117+
}}
118+
>
119+
<Link to={navLinks[item]}>{item}</Link>
120+
</li>
121+
))}
122+
</ul>
123+
</div>
124+
125+
<div className="inbox-thread-list">
126+
<div className="inbox-toolbar">
127+
<select onChange={(e) => setFilterType(e.target.value)}>
128+
<option value="">All Types</option>
129+
<optgroup label="Notifications">
130+
<option value="success">Success</option>
131+
<option value="warning">Warning</option>
132+
<option value="error">Error</option>
133+
</optgroup>
134+
<optgroup label="Information">
135+
<option value="general">General</option>
136+
<option value="update">Update</option>
137+
</optgroup>
138+
</select>
139+
140+
<select disabled>
141+
<option>Schedule</option>
142+
</select>
143+
144+
<input
145+
type="text"
146+
placeholder="Search..."
147+
value={searchQuery}
148+
onChange={(e) => setSearchQuery(e.target.value)}
149+
/>
150+
</div>
151+
152+
<div className="thread-label">Notifications</div>
153+
154+
<ul className="message-threads">
155+
{messages
156+
.filter((msg) =>
157+
filterType ? msg.type === filterType : true
158+
)
159+
.filter((msg) =>
160+
searchQuery
161+
? msg.preview
162+
.toLowerCase()
163+
.includes(searchQuery.toLowerCase())
164+
: true
165+
)
166+
.map((msg) => (
167+
<li
168+
key={msg.id}
169+
className={`thread ${msg.unread ? "unread" : ""}`}
170+
onClick={() => handleSelectMessage(msg)}
171+
>
172+
<div className="thread-details">
173+
<div className="sender">{msg.from}</div>
174+
<div className="subject">{msg.subject}</div>
175+
<div className="preview">{msg.preview}</div>
176+
</div>
177+
<div className="meta">
178+
<div className="date">{msg.date}</div>
179+
{msg.unreadCount > 0 && (
180+
<div className="badge">{msg.unreadCount}</div>
181+
)}
182+
</div>
183+
</li>
184+
))}
185+
</ul>
186+
</div>
187+
188+
<div className="inbox-content-panel">
189+
<div className="inbox-content-header">
190+
{selectedMessage ? selectedMessage.subject : "Notification Viewer"}
191+
</div>
192+
193+
{!selectedMessage ? (
194+
<div className="empty-state">
195+
<div className="envelope-icon">🔔</div>
196+
<p>No Notifications Selected</p>
197+
</div>
198+
) : (
199+
<div className="message-view">
200+
<p>{selectedMessage.preview}</p>
201+
</div>
202+
)}
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
);
208+
}

0 commit comments

Comments
 (0)