Add favorites page

src/Components/Favorites/Favorites.jsx

@@ -0,0 +1,66 @@
+import { Container } from "@mui/material";
+import Grid from "@mui/material/Unstable_Grid2";
+import { Outlet, useLoaderData } from "react-router-dom";
+import { getMetaData } from "../../Data/UserData";
+import { loader as ProgramPageLoader } from "../ProgramPage/ProgramPage";
+import SearchBar from "../ProgramPage/SideBar/SearchBar/SearchBar";
+import { getQuery } from "../ProgramPage/SideBar/SideBar";
+import ProgramCard from "./ProgramCard";
+
+function filterProgramsById(programs, programIDs) {
+    let filtered = {};
+    for (const university in programs) {
+        const filteredPrograms = programs[university].filter((program) =>
+            programIDs.includes(program.ProgramID)
+        );
+        if (filteredPrograms.length > 0) {
+            filtered[university] = filteredPrograms;
+        }
+    }
+    return filtered;
+}
+
+function flattenPrograms(programs) {
+    let flattened = [];
+    for (const university in programs) {
+        flattened.push(...programs[university]);
+    }
+    return flattened;
+}
+
+export async function loader({ request }) {
+    const metaData = await getMetaData();
+    const programPageData = await ProgramPageLoader({ request });
+    programPageData.programs = filterProgramsById(
+        programPageData.programs,
+        metaData.ProgramCollection || []
+    );
+    return { programPageData };
+}
+
+export default function Favorites() {
+    let { programPageData } = useLoaderData();
+
+    return (
+        <Container maxWidth={"xl"} sx={{ flexDirection: "row" }}>
+            <Container maxWidth={"lg"} sx={{ mt: 2 }}>
+                <SearchBar
+                    query={getQuery(programPageData)}
+                    pageName="favorites"
+                />
+            </Container>
+            <Grid
+                container
+                spacing={2}
+                columns={60}
+                maxHeight={"calc(100vh - 150px)"}
+                sx={{ my: 2, overflowY: "auto" }}
+            >
+                {flattenPrograms(programPageData.programs).map((program) => (
+                    <ProgramCard key={program.ProgramID} program={program} />
+                ))}
+            </Grid>
+            <Outlet></Outlet>
+        </Container>
+    );
+}

src/Components/Favorites/ProgramCard.jsx

@@ -0,0 +1,68 @@
+import { useTheme } from "@mui/material";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Unstable_Grid2";
+import { grey } from "@mui/material/colors";
+import { useNavigate } from "react-router-dom";
+import { regionFlagMapping } from "../../Data/Schemas";
+
+const ProgramCard = ({ program }) => {
+    const darkMode = useTheme().palette.mode === "dark";
+
+    const navigate = useNavigate();
+
+    const flags = program.Region.map((r) => regionFlagMapping[r]).reduce(
+        (prev, curr) => prev + " " + curr,
+        ""
+    );
+
+    return (
+        <Grid
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            xs={60}
+            sm={20}
+            md={15}
+            lg={12}
+        >
+            <Paper
+                elevation={2}
+                sx={{
+                    position: "relative",
+                    width: 278,
+                    height: 150,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: darkMode ? grey[800] : grey[200],
+                    borderRadius: "10px",
+                    p: 1,
+                }}
+                onClick={() =>
+                    navigate(
+                        `/favorites/${program.ProgramID}${window.location.search}`
+                    )
+                }
+            >
+                <Typography
+                    variant="h5"
+                    sx={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        position: "absolute",
+                        top: 4,
+                        right: 10,
+                    }}
+                >
+                    {flags}
+                </Typography>
+                <Typography variant="h6" component="div" textAlign={"center"}>
+                    {program.ProgramID}
+                </Typography>
+            </Paper>
+        </Grid>
+    );
+};
+
+export default ProgramCard;

src/Components/ProgramPage/SideBar/SearchBar/SearchBar.jsx

@@ -22,7 +22,7 @@ export default function SearchBar({query, pageName}) {
     const [searchParams, setSearchParams] = useSearchParams();
     const [timeoutId, setTimeoutId] = useState(null);
     useEffect(() => {
-        if (pageName === 'program') {
+        if (pageName === 'program' || pageName === 'favories') {
             document.getElementById('u').value = query.u;
             document.getElementById('d').value = query.d?.split(',');
             document.getElementById('m').value = query.m?.split(',');
@@ -53,7 +53,7 @@ export default function SearchBar({query, pageName}) {
     const defaultRegion = regionList.filter(x => query.r?.split(',').includes(x));
 
     return (
-        <Box sx={{display: 'flex', flexDirection: 'column', gap: "10px"}}>
+        <Box sx={{display: 'flex', gap: "10px", flexDirection: pageName === 'favorites' ? 'row' : 'column'}}>
             <Paper
                 role='search'
                 className='searchContainer'
@@ -63,7 +63,7 @@ export default function SearchBar({query, pageName}) {
             >
                 <SearchIcon sx={{mx: "10px"}}/>
                 <Divider orientation="vertical" variant="middle" flexItem/>
-                {pageName === 'program' ? <InputBase
+                {pageName === 'program' || pageName === 'favorites' ? <InputBase
                     id='u'
                     name='u'
                     placeholder="Search..."
@@ -85,7 +85,7 @@ export default function SearchBar({query, pageName}) {
                     size="small"
                 />}
             </Paper>
-            {pageName === 'program' ? <>
+            {pageName === 'program' || pageName === 'favorites' ? <>
                 <Filter
                     label='Select Degree'
                     id='d'

src/Components/router.jsx

@@ -46,6 +46,7 @@ import {loadMarkDown} from "../Data/Common";
 import ProfileIndexMDPath from "../Data/MarkDown/ProfileIndex.md"
 import HomeIndexMDPath from "../Data/MarkDown/HomeIndex.md"
 import PostIndexMDPath from "../Data/MarkDown/PostIndex.md"
+import Favorites, {loader as FavoritesLoader} from "./Favorites/Favorites";
 
 const router = createBrowserRouter([
     {
@@ -161,6 +162,23 @@ const router = createBrowserRouter([
                                 ]
                             }
                         ]
+                    }, {
+                        path: '/favorites',
+                        element: <Favorites/>,
+                        loader: FavoritesLoader,
+                        children: [
+                            {
+                                errorElement: <ErrorPage/>,
+                                children: [
+                                    {
+                                        path: '/favorites/:programId',
+                                        element: <ProgramContentInDataPoints/>,
+                                        loader: programContentLoader,
+                                        action: programContentAction
+                                    }
+                                ]
+                            }
+                        ]
                     }, {
                         path: '/posts',
                         element: <PostPage/>,