Add separate _index page for mobile filtermenu layout and connect dis…

…trict type to query params
NYCPlanning · Jun 26, 2024 · 8e3a6e8 · 8e3a6e8
1 parent 97725ce
commit 8e3a6e8
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 44 deletions.
diff --git a/app/components/FilterMenu.tsx b/app/components/FilterMenu.tsx
@@ -1,4 +1,5 @@
-import { useState, FormEvent } from "react";
+import { FormEvent } from "react";
+import { useSearchParams, useNavigate } from "@remix-run/react";
 import {
   Button,
   Flex,
@@ -12,10 +13,13 @@ import {
 } from "@nycplanning/streetscape";
 import { ChevronDownIcon } from "@chakra-ui/icons";
 
-export type GeographyType = "cd" | "ccd" | null;
-
-export const FilterMenu = ({ onClose }: FilterMenuProps) => {
-  const [geographyType, setGeorgaphyType] = useState<GeographyType>("cd");
+export const FilterMenu = ({
+  onClose = () => {
+    return;
+  },
+}: FilterMenuProps) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const districtType = searchParams.get("districtType");
   return (
     <Flex
       borderRadius={"base"}
@@ -49,25 +53,40 @@ export const FilterMenu = ({ onClose }: FilterMenuProps) => {
             borderBottomWidth={"1px"}
             borderBottomColor={"gray.400"}
           >
-            Filter by Geography
+            Filter by District
           </Heading>
         </Show>
-        <FormControl id="geographyType">
-          <FormLabel>Geography Type</FormLabel>
+        <FormControl id="districtType">
+          <FormLabel
+            onClick={() => {
+              onClose();
+            }}
+          >
+            District Type
+          </FormLabel>
           <Select
             placeholder="-Select-"
             variant="base"
             onChange={(e: FormEvent<HTMLSelectElement>) => {
-              setGeorgaphyType(e.currentTarget.value as GeographyType);
+              if (e.currentTarget.value === "") {
+                setSearchParams({}, { replace: true });
+              } else {
+                setSearchParams(
+                  {
+                    districtType: e.currentTarget.value,
+                  },
+                  { replace: true },
+                );
+              }
             }}
-            value={geographyType}
+            value={districtType === null ? "" : districtType}
           >
             <option value={"cd"}>Community District</option>
             <option value={"ccd"}>City Council District</option>
           </Select>
         </FormControl>
         <HStack spacing={2} width={"full"}>
-          {geographyType !== "ccd" ? (
+          {districtType !== "ccd" ? (
             <FormControl id="borough">
               <FormLabel>Borough</FormLabel>
               <Select
@@ -78,7 +97,7 @@ export const FilterMenu = ({ onClose }: FilterMenuProps) => {
             </FormControl>
           ) : null}
           <FormControl id="district">
-            <FormLabel>District</FormLabel>
+            <FormLabel>District Number</FormLabel>
             <Select
               placeholder="-Select-"
               variant="base"
@@ -87,13 +106,13 @@ export const FilterMenu = ({ onClose }: FilterMenuProps) => {
           </FormControl>
         </HStack>
         <Button width="full" isDisabled={true}>
-          Go to Selected Geography
+          Go to Selected District
         </Button>
       </Flex>
     </Flex>
   );
 };
 
 export interface FilterMenuProps {
-  onClose: () => void;
+  onClose?: () => void;
 }
diff --git a/app/components/Overlay.tsx b/app/components/Overlay.tsx
@@ -1,18 +1,20 @@
-import { Flex, Button, Hide, Show } from "@nycplanning/streetscape";
-import { ReactNode, useState } from "react";
+import { Flex, Show } from "@nycplanning/streetscape";
+import { ReactNode } from "react";
 import { FilterMenu } from "./FilterMenu";
 
-export const Overlay = () => {
-  const [shouldShowFilterMenu, setShouldShowFilterMenu] = useState(false);
+export interface OverlayProps {
+  children: ReactNode;
+}
 
+export const Overlay = ({ children }: OverlayProps) => {
   return (
     <Flex
       position="relative"
       padding={{ base: 3, lg: 8 }}
       height={"100vh"}
       width={"100vw"}
       direction={{ base: "column", lg: "row" }}
-      justify={{ base: "flex-end", lg: "flex-start" }}
+      justify={{ base: "flex-end", lg: "space-between" }}
       align={{ base: "center", lg: "flex-start" }}
       pointerEvents={"none"}
       sx={{
@@ -22,30 +24,9 @@ export const Overlay = () => {
       }}
     >
       <Show above="lg">
-        <FilterMenu onClose={() => setShouldShowFilterMenu(false)} />
+        <FilterMenu />
       </Show>
-      {shouldShowFilterMenu ? (
-        <Hide above="lg">
-          <FilterMenu onClose={() => setShouldShowFilterMenu(false)} />
-        </Hide>
-      ) : null}
-      {!shouldShowFilterMenu ? (
-        <Hide above="lg">
-          <Button
-            width={"full"}
-            maxW={"21.25rem"}
-            onClick={() => {
-              setShouldShowFilterMenu(true);
-            }}
-          >
-            Filter by Geography
-          </Button>
-        </Hide>
-      ) : null}
+      {children}
     </Flex>
   );
 };
-
-export interface OverlayProps {
-  children: ReactNode;
-}
diff --git a/app/root.tsx b/app/root.tsx
@@ -46,11 +46,13 @@ export default function App() {
   return (
     <Document>
       <StreetscapeProvider>
-        <Outlet />
         <ClientOnly>
           {() => (
             <>
-              <Atlas /> <Overlay />
+              <Atlas />{" "}
+              <Overlay>
+                <Outlet />
+              </Overlay>
             </>
           )}
         </ClientOnly>

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -0,0 +1,28 @@
+import { Hide, Button } from "@nycplanning/streetscape";
+import { FilterMenu } from "../components/FilterMenu";
+import { useState } from "react";
+
+export default function Index() {
+  const [shouldShowFilterMenu, setShouldShowFilterMenu] = useState(false);
+  return (
+    <Hide above="lg">
+      {shouldShowFilterMenu ? (
+        <FilterMenu
+          onClose={() => {
+            setShouldShowFilterMenu(false);
+          }}
+        />
+      ) : (
+        <Button
+          width={"full"}
+          maxW={"21.25rem"}
+          onClick={() => {
+            setShouldShowFilterMenu(true);
+          }}
+        >
+          Filter by Geography
+        </Button>
+      )}
+    </Hide>
+  );
+}