From 25be60614b891f30e953a66ed08a965f0ba85bbd Mon Sep 17 00:00:00 2001
From: WelldoneM <welldonematanga12@gmail.com>
Date: Tue, 15 Oct 2024 19:19:16 -0500
Subject: [PATCH 1/4] feat(time-preferences): add time grid for users to select
 study time preferences

---
 src/App.jsx                                   |  2 +
 .../Profile/TimePreferencesGrid.jsx           | 69 +++++++++++++++++++
 .../Profile/TimePreferencesPage.jsx           | 29 ++++++++
 3 files changed, 100 insertions(+)
 create mode 100644 src/components/Profile/TimePreferencesGrid.jsx
 create mode 100644 src/components/Profile/TimePreferencesPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index de4bdfb..75b20e9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import GroupsPage from '@components/GroupsPage';
 import HomePage from '@components/HomePage';
 import EditProfile from '@components/Profile/EditProfile';
 import ProfilePage from '@components/Profile/ProfilePage';
+import TimePreferencesPage from '@components/Profile/TimePreferencesPage';
 import { ThemeProvider } from '@mui/material/styles';
 import { theme } from '@utils/theme';
 import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
@@ -25,6 +26,7 @@ const AppContent = ({ currentPage, setCurrentPage }) => {
           {/* <Route path="messages" element={<div>TBD</div>} /> */}
           <Route path="profile/:id" element={<ProfilePage />} />
           <Route path="edit-profile" element={<EditProfile />} />
+          <Route path="time-preferences" element={<TimePreferencesPage />} />
         </Routes>
       </div>
       {!isEditProfilePage && <Footer currentPage={currentPage} setCurrentPage={setCurrentPage} />}
diff --git a/src/components/Profile/TimePreferencesGrid.jsx b/src/components/Profile/TimePreferencesGrid.jsx
new file mode 100644
index 0000000..6ad07de
--- /dev/null
+++ b/src/components/Profile/TimePreferencesGrid.jsx
@@ -0,0 +1,69 @@
+//to be deleted soon
+import React, { useState } from 'react';
+
+import { Box, Paper, Typography } from '@mui/material';
+
+// Generate 12-hour clock with AM/PM
+const generateTimeSlots = () => {
+  const slots = [];
+  for (let i = 0; i < 24; i++) {
+    const hour = i % 12 === 0 ? 12 : i % 12; // Handle 12-hour format
+    const period = i < 12 ? 'AM' : 'PM';
+    slots.push(`${hour}:00 ${period}`);
+  }
+  return slots;
+};
+
+const hours = generateTimeSlots();
+const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+const TimePreferencesGrid = ({ selectedTimes, setSelectedTimes }) => {
+  const handleSlotClick = (day, hour) => {
+    const slot = `${day}-${hour}`;
+    const updatedTimes = selectedTimes.includes(slot)
+      ? selectedTimes.filter((time) => time !== slot)
+      : [...selectedTimes, slot];
+
+    setSelectedTimes(updatedTimes);
+  };
+
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: `repeat(${days.length + 1}, 1fr)`, gap: 1 }}>
+      {/* Render Day Headers */}
+      <Paper elevation={0} /> {/* Empty cell for alignment */}
+      {days.map((day) => (
+        <Typography key={day} variant="subtitle1" align="center">
+          {day}
+        </Typography>
+      ))}
+      {/* Render Time Rows */}
+      {hours.map((hour) => (
+        <React.Fragment key={hour}>
+          <Typography variant="subtitle2" align="center">
+            {hour}
+          </Typography>
+          {days.map((day) => {
+            const slot = `${day}-${hour}`;
+            const isSelected = selectedTimes.includes(slot);
+
+            return (
+              <Paper
+                key={slot}
+                onClick={() => handleSlotClick(day, hour)}
+                sx={{
+                  width: '100%',
+                  height: 30,
+                  backgroundColor: isSelected ? 'purple' : 'white',
+                  cursor: 'pointer',
+                  border: '1px solid grey',
+                }}
+              />
+            );
+          })}
+        </React.Fragment>
+      ))}
+    </Box>
+  );
+};
+
+export default TimePreferencesGrid;
diff --git a/src/components/Profile/TimePreferencesPage.jsx b/src/components/Profile/TimePreferencesPage.jsx
new file mode 100644
index 0000000..7f7c930
--- /dev/null
+++ b/src/components/Profile/TimePreferencesPage.jsx
@@ -0,0 +1,29 @@
+// To be deleted
+// adding thid page to display the time grid for now.
+import React, { useState } from 'react';
+
+import { Box, Typography, Button } from '@mui/material';
+
+import TimePreferencesGrid from './TimePreferencesGrid';
+
+export default function TimePreferencesPage() {
+  const [selectedTimes, setSelectedTimes] = useState([]);
+
+  const handleSavePreferences = () => {
+    console.log('Selected Times:', selectedTimes);
+  };
+
+  return (
+    <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3 }}>
+      <Typography variant="h4" align="center" gutterBottom>
+        Select Your Study Time Preferences
+      </Typography>
+
+      <TimePreferencesGrid selectedTimes={selectedTimes} setSelectedTimes={setSelectedTimes} />
+
+      <Button variant="contained" onClick={handleSavePreferences} sx={{ marginTop: 2 }}>
+        Save Preferences
+      </Button>
+    </Box>
+  );
+}

From 6e0aaa81ea5e669605ddd5e2ab8b91b2be5471d5 Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:51:05 -0500
Subject: [PATCH 2/4] feat: Add button jump to time-preferences page.

---
 src/components/Profile/ProfilePage.jsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/Profile/ProfilePage.jsx b/src/components/Profile/ProfilePage.jsx
index 4c7e0f5..d98a52f 100755
--- a/src/components/Profile/ProfilePage.jsx
+++ b/src/components/Profile/ProfilePage.jsx
@@ -34,6 +34,10 @@ export default function ProfilePage() {
     setSignOutDialogOpen(true);
   };
 
+  const handleTimePreferencesClick = () => {
+    navigate('/time-preferences'); // Navigates to the Time Preferences page
+  };
+
   if (loading) {
     return <CircularProgress />;
   }
@@ -81,7 +85,11 @@ export default function ProfilePage() {
         />
       </InfoSection>
 
-      <ActionButtons onEditClick={handleEditClick} onSignOutClick={handleSignOutDialogOpen} />
+      <ActionButtons
+        onEditClick={handleEditClick}
+        onSignOutClick={handleSignOutDialogOpen}
+        onTimePreferencesClick={handleTimePreferencesClick}
+      />
       <SignOutDialog open={signOutDialogOpen} onClose={() => setSignOutDialogOpen(false)} />
     </Box>
   );
@@ -139,7 +147,7 @@ const ContentBox = ({ icon: IconComponent, title, content, isCourses = false })
 
 const CustomDivider = () => <Divider sx={{ my: 1 }} />;
 
-const ActionButtons = ({ onEditClick, onSignOutClick }) => (
+const ActionButtons = ({ onEditClick, onSignOutClick, onTimePreferencesClick }) => (
   <Box
     sx={{
       display: 'flex',
@@ -149,13 +157,21 @@ const ActionButtons = ({ onEditClick, onSignOutClick }) => (
       mt: 4,
     }}
   >
-    <Button variant="contained" onClick={onEditClick} sx={{ mb: 2, width: '150px' }}>
+    <Button variant="contained" onClick={onEditClick} sx={{ mb: 2, width: '250px' }}>
       Edit Profile
     </Button>
+    <Button
+      variant="contained"
+      color="primary"
+      sx={{ mb: 2, width: '250px' }}
+      onClick={onTimePreferencesClick}
+    >
+      Time Preferences
+    </Button>
     <Button
       variant="contained"
       color="secondary"
-      sx={{ width: '150px', backgroundColor: 'secondary.main' }}
+      sx={{ width: '150px', backgroundColor: 'secondary.main', mt: 2 }}
       onClick={onSignOutClick}
     >
       Sign Out

From 3698c274773f56af026d093350f9166ed6c28ebb Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:53:53 -0500
Subject: [PATCH 3/4] fix: Center the save button at bottom

---
 src/components/Profile/TimePreferencesPage.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Profile/TimePreferencesPage.jsx b/src/components/Profile/TimePreferencesPage.jsx
index 7f7c930..036dbb8 100644
--- a/src/components/Profile/TimePreferencesPage.jsx
+++ b/src/components/Profile/TimePreferencesPage.jsx
@@ -1,5 +1,3 @@
-// To be deleted
-// adding thid page to display the time grid for now.
 import React, { useState } from 'react';
 
 import { Box, Typography, Button } from '@mui/material';
@@ -14,16 +12,18 @@ export default function TimePreferencesPage() {
   };
 
   return (
-    <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3 }}>
+    <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3, alignItems: 'center' }}>
       <Typography variant="h4" align="center" gutterBottom>
-        Select Your Study Time Preferences
+        Time Preferences
       </Typography>
 
       <TimePreferencesGrid selectedTimes={selectedTimes} setSelectedTimes={setSelectedTimes} />
 
-      <Button variant="contained" onClick={handleSavePreferences} sx={{ marginTop: 2 }}>
-        Save Preferences
-      </Button>
+      <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: 2 }}>
+        <Button variant="contained" onClick={handleSavePreferences}>
+          Save Preferences
+        </Button>
+      </Box>
     </Box>
   );
 }

From f7c69a9ab6e8824ed4332ab2f92a1c6fc8167d7b Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Tue, 15 Oct 2024 21:02:17 -0500
Subject: [PATCH 4/4] refactor: Improve mobile UI for UX

1. time only contain hour.
2. Use abbrev for dates in week.
3. Add select for "No earlier than" and "No later than".
4. Add "Include Weekends" toggle.
---
 .../Profile/TimePreferencesGrid.jsx           | 193 +++++++++++++-----
 1 file changed, 142 insertions(+), 51 deletions(-)

diff --git a/src/components/Profile/TimePreferencesGrid.jsx b/src/components/Profile/TimePreferencesGrid.jsx
index 6ad07de..889dfdc 100644
--- a/src/components/Profile/TimePreferencesGrid.jsx
+++ b/src/components/Profile/TimePreferencesGrid.jsx
@@ -1,69 +1,160 @@
-//to be deleted soon
 import React, { useState } from 'react';
 
-import { Box, Paper, Typography } from '@mui/material';
+import {
+  Box,
+  Paper,
+  Typography,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Switch,
+  FormControlLabel,
+  useTheme,
+} from '@mui/material';
 
 // Generate 12-hour clock with AM/PM
-const generateTimeSlots = () => {
-  const slots = [];
-  for (let i = 0; i < 24; i++) {
-    const hour = i % 12 === 0 ? 12 : i % 12; // Handle 12-hour format
-    const period = i < 12 ? 'AM' : 'PM';
-    slots.push(`${hour}:00 ${period}`);
-  }
-  return slots;
-};
+const hours = Array.from({ length: 24 }, (_, i) => {
+  const hour = i % 12 || 12;
+  return `${hour} ${i < 12 ? 'AM' : 'PM'}`;
+});
 
-const hours = generateTimeSlots();
-const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+const weekdays = ['M', 'T', 'W', 'Th', 'F'];
+const weekendDays = ['Sa', 'Su'];
 
 const TimePreferencesGrid = ({ selectedTimes, setSelectedTimes }) => {
+  const [noEarlierThan, setNoEarlierThan] = useState(8); // Time index for "No earlier than"
+  const [noLaterThan, setNoLaterThan] = useState(20); // Time index for "No later than"
+  const [includeWeekends, setIncludeWeekends] = useState(false); // Toggle for showing weekends
+
   const handleSlotClick = (day, hour) => {
     const slot = `${day}-${hour}`;
-    const updatedTimes = selectedTimes.includes(slot)
-      ? selectedTimes.filter((time) => time !== slot)
-      : [...selectedTimes, slot];
-
-    setSelectedTimes(updatedTimes);
+    setSelectedTimes((prev) =>
+      prev.includes(slot) ? prev.filter((time) => time !== slot) : [...prev, slot],
+    );
   };
 
+  const theme = useTheme();
+
+  // Handle filtering the displayed hours based on the selected limits
+  const filteredHours = hours.slice(noEarlierThan, noLaterThan + 1);
+
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: `repeat(${days.length + 1}, 1fr)`, gap: 1 }}>
-      {/* Render Day Headers */}
-      <Paper elevation={0} /> {/* Empty cell for alignment */}
-      {days.map((day) => (
-        <Typography key={day} variant="subtitle1" align="center">
-          {day}
-        </Typography>
-      ))}
-      {/* Render Time Rows */}
-      {hours.map((hour) => (
-        <React.Fragment key={hour}>
-          <Typography variant="subtitle2" align="center">
-            {hour}
+    <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3 }}>
+      {/* No Earlier Than and No Later Than selectors */}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
+        <FormControl sx={{ minWidth: 120 }}>
+          <InputLabel>No earlier than</InputLabel>
+          <Select
+            value={noEarlierThan}
+            label="No earlier than"
+            onChange={(e) => setNoEarlierThan(e.target.value)}
+          >
+            {hours.map((hour, index) => (
+              <MenuItem key={hour} value={index}>
+                {hour}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <FormControl sx={{ minWidth: 120 }}>
+          <InputLabel>No later than</InputLabel>
+          <Select
+            value={noLaterThan}
+            label="No later than"
+            onChange={(e) => setNoLaterThan(e.target.value)}
+          >
+            {hours.map((hour, index) => (
+              <MenuItem key={hour} value={index}>
+                {hour}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Box>
+
+      {/* Toggle for Weekends */}
+      <Box sx={{ display: 'flex', justifyContent: 'center', marginBottom: 2 }}>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={includeWeekends}
+              onChange={(e) => setIncludeWeekends(e.target.checked)}
+              color="primary"
+            />
+          }
+          label="Include Weekends"
+        />
+      </Box>
+
+      {/* Time Grid */}
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${includeWeekends ? weekdays.length + weekendDays.length + 1 : weekdays.length + 1}, 1fr)`,
+          gap: 1,
+        }}
+      >
+        <Box /> {/* Empty cell for alignment */}
+        {weekdays.map((day) => (
+          <Typography key={day} variant="subtitle1" align="center">
+            {day}
           </Typography>
-          {days.map((day) => {
-            const slot = `${day}-${hour}`;
-            const isSelected = selectedTimes.includes(slot);
+        ))}
+        {includeWeekends &&
+          weekendDays.map((day) => (
+            <Typography key={day} variant="subtitle1" align="center">
+              {day}
+            </Typography>
+          ))}
+        {filteredHours.map((hour) => (
+          <React.Fragment key={hour}>
+            <Typography variant="subtitle2" align="center" sx={{ whiteSpace: 'nowrap' }}>
+              {hour}
+            </Typography>
+            {weekdays.map((day) => {
+              const slot = `${day}-${hour}`;
+              const isSelected = selectedTimes.includes(slot);
+
+              return (
+                <Paper
+                  key={slot}
+                  onClick={() => handleSlotClick(day, hour)}
+                  sx={{
+                    width: '100%',
+                    height: 30,
+                    backgroundColor: isSelected ? theme.palette.primary.main : 'white',
+                    cursor: 'pointer',
+                    border: '0.5px solid grey',
+                  }}
+                />
+              );
+            })}
+            {includeWeekends &&
+              weekendDays.map((day) => {
+                const slot = `${day}-${hour}`;
+                const isSelected = selectedTimes.includes(slot);
 
-            return (
-              <Paper
-                key={slot}
-                onClick={() => handleSlotClick(day, hour)}
-                sx={{
-                  width: '100%',
-                  height: 30,
-                  backgroundColor: isSelected ? 'purple' : 'white',
-                  cursor: 'pointer',
-                  border: '1px solid grey',
-                }}
-              />
-            );
-          })}
-        </React.Fragment>
-      ))}
+                return (
+                  <Paper
+                    key={slot}
+                    onClick={() => handleSlotClick(day, hour)}
+                    sx={{
+                      width: '100%',
+                      height: 30,
+                      backgroundColor: isSelected ? theme.palette.primary.main : 'white',
+                      cursor: 'pointer',
+                      border: '0.5px solid grey',
+                    }}
+                  />
+                );
+              })}
+          </React.Fragment>
+        ))}
+      </Box>
     </Box>
   );
 };
 
-export default TimePreferencesGrid;
+export default React.memo(TimePreferencesGrid);