adding code so that after the user saves their preferences the app na…

…vigates back to the profile page.
392-f24 · Oct 17, 2024 · f35e89b · f35e89b
1 parent 68ba805
commit f35e89b
Showing 1 changed file with 35 additions and 29 deletions.
diff --git a/src/components/Profile/TimePreferencesPage.jsx b/src/components/Profile/TimePreferencesPage.jsx
@@ -4,38 +4,44 @@ import { useTimePreferences } from '@data/useTimePreferences';
 import { Box, Typography, Button, CircularProgress } from '@mui/material';
 
 import TimePreferencesGrid from './TimePreferencesGrid';
+import { useAuthState } from '@auth/useAuthState';
+import { useNavigate } from "react-router-dom";
 
 export default function TimePreferencesPage() {
-  const { selectedTimes, setSelectedTimes, loading, savePreferences } = useTimePreferences();
+    const [user] = useAuthState();
+    const { selectedTimes, setSelectedTimes, loading, savePreferences } = useTimePreferences();
+    const navigate = useNavigate();
+
+    // Function to save preferences and navigate back to profile page
+    const handleSavePreferences = async () => {
+        await savePreferences();
+        navigate(`/profile/${user.uid}`);
+
+    };
+
+    if (loading) {
+        return (
+            <Box
+                sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
+            >
+                <CircularProgress />
+            </Box>
+        );
+    }
 
-  // Function to save preferences and navigate back to profile page
-  const handleSavePreferences = async () => {
-    await savePreferences();
-  };
-
-  if (loading) {
     return (
-      <Box
-        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
-      >
-        <CircularProgress />
-      </Box>
+        <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3, alignItems: 'center' }}>
+            <Typography variant="h4" align="center" gutterBottom>
+                Time Preferences
+            </Typography>
+
+            <TimePreferencesGrid selectedTimes={selectedTimes} setSelectedTimes={setSelectedTimes} />
+
+            <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: 2 }}>
+                <Button variant="contained" onClick={handleSavePreferences}>
+                    Save Preferences
+                </Button>
+            </Box>
+        </Box>
     );
-  }
-
-  return (
-    <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3, alignItems: 'center' }}>
-      <Typography variant="h4" align="center" gutterBottom>
-        Time Preferences
-      </Typography>
-
-      <TimePreferencesGrid selectedTimes={selectedTimes} setSelectedTimes={setSelectedTimes} />
-
-      <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: 2 }}>
-        <Button variant="contained" onClick={handleSavePreferences}>
-          Save Preferences
-        </Button>
-      </Box>
-    </Box>
-  );
 }