From 9eb2376799f9fe9d22ced14ab5df51f24c083e6a Mon Sep 17 00:00:00 2001 From: marker-sss Date: Mon, 23 Mar 2026 14:13:13 -0400 Subject: [PATCH] Created view toggle --- src/app/HomePageContent.tsx | 44 +++++++++++++ src/app/ToggleViews/CalendarView.tsx | 14 +--- src/app/ToggleViews/ListView.tsx | 20 ------ src/app/ToggleViews/MapView.tsx | 12 +--- src/app/ToggleViews/index.tsx | 96 +++++++++++++--------------- src/app/page.tsx | 15 +---- 6 files changed, 95 insertions(+), 106 deletions(-) create mode 100644 src/app/HomePageContent.tsx delete mode 100644 src/app/ToggleViews/ListView.tsx diff --git a/src/app/HomePageContent.tsx b/src/app/HomePageContent.tsx new file mode 100644 index 0000000..6edf503 --- /dev/null +++ b/src/app/HomePageContent.tsx @@ -0,0 +1,44 @@ +"use client"; +import { Box } from "@mui/material"; +import * as React from "react"; + +import Filters from "./Filters"; +import HomePageClient from "./HomePageClient"; +import ToggleViews from "./ToggleViews"; +import CalendarView from "./ToggleViews/CalendarView"; +import MapView from "./ToggleViews/MapView"; +import { View } from "./ToggleViews/view-types"; + +type HomePageContentProps = { + events: { + id: string; + title: string; + eventDate: string; + startTime: string; + endTime: string; + capacity: number | null; + registeredUsers: number | null; + streetLine: string; + description: string; + isRegistered?: boolean; + }[]; +}; + +export default function HomePageContent({ + events, +}: HomePageContentProps): React.ReactElement { + const [activeView, setActiveView] = React.useState("list"); + + return ( + <> + + + + + + {activeView === "list" && } + {activeView === "map" && } + {activeView === "calendar" && } + + ); +} diff --git a/src/app/ToggleViews/CalendarView.tsx b/src/app/ToggleViews/CalendarView.tsx index 104d44d..42273b8 100644 --- a/src/app/ToggleViews/CalendarView.tsx +++ b/src/app/ToggleViews/CalendarView.tsx @@ -1,20 +1,10 @@ import { Box, Typography } from "@mui/material"; import * as React from "react"; -import type { View } from "./view-types"; - -type CalendarViewProps = { - activeView: View; -}; - -export default function CalendarView({ - activeView, -}: CalendarViewProps): React.ReactElement | null { - if (activeView !== "calendar") return null; - +export default function CalenerView(): React.ReactElement { return ( - calendar view + calender view ); } diff --git a/src/app/ToggleViews/ListView.tsx b/src/app/ToggleViews/ListView.tsx deleted file mode 100644 index 9633a82..0000000 --- a/src/app/ToggleViews/ListView.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Box, Typography } from "@mui/material"; -import * as React from "react"; - -import type { View } from "./view-types"; - -type ListViewProps = { - activeView: View; -}; - -export default function ListView({ - activeView, -}: ListViewProps): React.ReactElement | null { - if (activeView !== "list") return null; - - return ( - - list view - - ); -} diff --git a/src/app/ToggleViews/MapView.tsx b/src/app/ToggleViews/MapView.tsx index efd367f..5e43a2c 100644 --- a/src/app/ToggleViews/MapView.tsx +++ b/src/app/ToggleViews/MapView.tsx @@ -1,17 +1,7 @@ import { Box, Typography } from "@mui/material"; import * as React from "react"; -import type { View } from "../ToggleViews/view-types"; - -type MapViewProps = { - activeView: View; -}; - -export default function MapView({ - activeView, -}: MapViewProps): React.ReactElement | null { - if (activeView !== "map") return null; - +export default function MapView(): React.ReactElement { return ( map view diff --git a/src/app/ToggleViews/index.tsx b/src/app/ToggleViews/index.tsx index bf9e0b2..99afa14 100644 --- a/src/app/ToggleViews/index.tsx +++ b/src/app/ToggleViews/index.tsx @@ -5,66 +5,62 @@ import MapIcon from "@mui/icons-material/Map"; import { Box, ButtonGroup, IconButton } from "@mui/material"; import * as React from "react"; -import CalendarView from "./CalendarView"; -import ListView from "./ListView"; -import MapView from "./MapView"; import { View } from "./view-types"; -export default function ToggleViews(): React.ReactElement { - const [activeView, setActiveView] = React.useState(null); +type ToggleViewsProps = { + activeView: View; + onViewChange: (view: View) => void; +}; + +export default function ToggleViews({ + activeView, + onViewChange, +}: ToggleViewsProps): React.ReactElement { const toggleView = (view: View): void => { - setActiveView((current) => (current === view ? null : view)); + onViewChange(activeView === view ? null : view); }; return ( - - - toggleView("list")} - sx={{ - backgroundColor: - activeView === "list" ? "#E0E0E0" : "transparent", - "&:hover": { - backgroundColor: activeView === "list" ? "#D3D3D3" : "#f5f5f5", - }, - }} - > - - + + toggleView("list")} + sx={{ + backgroundColor: activeView === "list" ? "#E0E0E0" : "transparent", + "&:hover": { + backgroundColor: activeView === "list" ? "#D3D3D3" : "#f5f5f5", + }, + }} + > + + - toggleView("map")} - sx={{ - backgroundColor: activeView === "map" ? "#E0E0E0" : "transparent", - "&:hover": { - backgroundColor: activeView === "map" ? "#D3D3D3" : "#f5f5f5", - }, - }} - > - - + toggleView("map")} + sx={{ + backgroundColor: activeView === "map" ? "#E0E0E0" : "transparent", + "&:hover": { + backgroundColor: activeView === "map" ? "#D3D3D3" : "#f5f5f5", + }, + }} + > + + - toggleView("calendar")} - sx={{ + toggleView("calendar")} + sx={{ + backgroundColor: + activeView === "calendar" ? "#E0E0E0" : "transparent", + "&:hover": { backgroundColor: - activeView === "calendar" ? "#E0E0E0" : "transparent", - "&:hover": { - backgroundColor: - activeView === "calendar" ? "#D3D3D3" : "#f5f5f5", - }, - }} - > - - - - - - - - - + activeView === "calendar" ? "#D3D3D3" : "#f5f5f5", + }, + }} + > + + + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index ca984cc..20f63c5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,9 +7,7 @@ import { eventAttendees } from "@/db/schema"; import { auth } from "@/lib/auth"; import { getUpcomingEvents } from "@/lib/events"; -import Filters from "./Filters"; -import HomePageClient from "./HomePageClient"; -import ToggleViews from "./ToggleViews"; +import HomePageContent from "./HomePageContent"; export default async function HomePage(): Promise { const events = await getUpcomingEvents(); @@ -46,16 +44,7 @@ export default async function HomePage(): Promise { }} > - - - - - + );