Created view toggle

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<View>("list");
+
+  return (
+    <>
+      <Box sx={{ display: "flex", width: "100%" }}>
+        <Filters />
+        <ToggleViews activeView={activeView} onViewChange={setActiveView} />
+      </Box>
+
+      {activeView === "list" && <HomePageClient events={events} />}
+      {activeView === "map" && <MapView />}
+      {activeView === "calendar" && <CalendarView />}
+    </>
+  );
+}

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 (
     <Box>
-      <Typography>calendar view</Typography>
+      <Typography>calender view</Typography>
     </Box>
   );
 }

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 (
     <Box>
       <Typography>map view</Typography>

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<View>(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 (
     <Box>
-      <Box>
-        <ButtonGroup variant="outlined">
-          <IconButton
-            onClick={() => toggleView("list")}
-            sx={{
-              backgroundColor:
-                activeView === "list" ? "#E0E0E0" : "transparent",
-              "&:hover": {
-                backgroundColor: activeView === "list" ? "#D3D3D3" : "#f5f5f5",
-              },
-            }}
-          >
-            <FormatListBulletedIcon sx={{ color: "#555555" }} />
-          </IconButton>
+      <ButtonGroup variant="outlined">
+        <IconButton
+          onClick={() => toggleView("list")}
+          sx={{
+            backgroundColor: activeView === "list" ? "#E0E0E0" : "transparent",
+            "&:hover": {
+              backgroundColor: activeView === "list" ? "#D3D3D3" : "#f5f5f5",
+            },
+          }}
+        >
+          <FormatListBulletedIcon sx={{ color: "#555555" }} />
+        </IconButton>
 
-          <IconButton
-            onClick={() => toggleView("map")}
-            sx={{
-              backgroundColor: activeView === "map" ? "#E0E0E0" : "transparent",
-              "&:hover": {
-                backgroundColor: activeView === "map" ? "#D3D3D3" : "#f5f5f5",
-              },
-            }}
-          >
-            <MapIcon sx={{ color: "#555555" }} />
-          </IconButton>
+        <IconButton
+          onClick={() => toggleView("map")}
+          sx={{
+            backgroundColor: activeView === "map" ? "#E0E0E0" : "transparent",
+            "&:hover": {
+              backgroundColor: activeView === "map" ? "#D3D3D3" : "#f5f5f5",
+            },
+          }}
+        >
+          <MapIcon sx={{ color: "#555555" }} />
+        </IconButton>
 
-          <IconButton
-            onClick={() => toggleView("calendar")}
-            sx={{
+        <IconButton
+          onClick={() => toggleView("calendar")}
+          sx={{
+            backgroundColor:
+              activeView === "calendar" ? "#E0E0E0" : "transparent",
+            "&:hover": {
               backgroundColor:
-                activeView === "calendar" ? "#E0E0E0" : "transparent",
-              "&:hover": {
-                backgroundColor:
-                  activeView === "calendar" ? "#D3D3D3" : "#f5f5f5",
-              },
-            }}
-          >
-            <CalendarMonthIcon sx={{ color: "#555555" }} />
-          </IconButton>
-        </ButtonGroup>
-      </Box>
-      <Box>
-        <ListView activeView={activeView} />
-        <MapView activeView={activeView} />
-        <CalendarView activeView={activeView} />
-      </Box>
+                activeView === "calendar" ? "#D3D3D3" : "#f5f5f5",
+            },
+          }}
+        >
+          <CalendarMonthIcon sx={{ color: "#555555" }} />
+        </IconButton>
+      </ButtonGroup>
     </Box>
   );
 }

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<React.ReactElement> {
   const events = await getUpcomingEvents();
@@ -46,16 +44,7 @@ export default async function HomePage(): Promise<React.ReactElement> {
         }}
       >
         <WelcomeCard />
-        <Box
-          sx={{
-            display: "flex",
-            width: "100%",
-          }}
-        >
-          <Filters />
-          <ToggleViews />
-        </Box>
-        <HomePageClient events={eventsWithState} />
+        <HomePageContent events={eventsWithState} />
       </Box>
     </div>
   );