From 354dc3553066d042a6d518b044ba876a48fcf511 Mon Sep 17 00:00:00 2001
From: Nipuna Gunathilake <nipuna777@gmail.com>
Date: Sun, 22 Oct 2023 04:00:30 +0800
Subject: [PATCH] convert item filter into a modal

---
 client/components/map/FilterPanel.tsx   | 229 +++++++++++++++++-------
 client/spa-pages/components/MapPage.tsx |  33 ++--
 2 files changed, 176 insertions(+), 86 deletions(-)

diff --git a/client/components/map/FilterPanel.tsx b/client/components/map/FilterPanel.tsx
index 3b7bf5d..95a5d15 100644
--- a/client/components/map/FilterPanel.tsx
+++ b/client/components/map/FilterPanel.tsx
@@ -1,28 +1,30 @@
 import {
 	Box,
-	VStack,
 	HStack,
-	Spacer,
-	Button,
 	Text,
 	Slider,
 	SliderTrack,
 	SliderFilledTrack,
 	SliderThumb,
+	Modal,
+	ModalContent,
+	ModalOverlay,
 	Divider,
-	CheckboxGroup,
-	Checkbox,
-	Stack,
+	Button,
+	Flex,
+	useCheckbox,
+	chakra,
+	CheckboxProps,
+	useCheckboxGroup,
 } from "@chakra-ui/react";
-import { XButton } from "./Buttons";
 import { COLORS } from "theme";
 import { TItemSelection, TEmptyItem } from "app-context/SheetyContext/types";
 import { OptionType } from "spa-pages";
-import { ChangeEvent } from "react";
+import React, { ChangeEvent } from "react";
+import { Methods } from "api/sheety/enums";
 
 type FilterProps = {
-	isMobile: boolean | undefined;
-	setFilterShow: () => void;
+	isOpen: boolean;
 	filterApply: () => void;
 	handleSliderChange: (val: number) => void;
 	range: number;
@@ -32,8 +34,7 @@ type FilterProps = {
 };
 
 export const FilterPanel = ({
-	isMobile,
-	setFilterShow,
+	isOpen,
 	filterApply,
 	handleSliderChange,
 	range,
@@ -41,77 +42,169 @@ export const FilterPanel = ({
 	selectOptions,
 	handleCheckboxChange,
 }: FilterProps) => {
+	const selectedOptionsWithCheckedState = selectOptions.map((option) => {
+		const isChecked = itemState.some(
+			(item) => item.name === option.value && item.method === option.method,
+		);
+		return { ...option, isChecked };
+	});
+
 	return (
-		<Box
-			position={"fixed"}
-			height={isMobile ? "calc(92vh)" : "calc(90vh)"}
-			width={"100vw"}
-			bg="white"
-			zIndex={99999}
-			bottom={0}
-			overflowY={"scroll"}
-			overflowX={"hidden"}
-		>
-			<VStack p={7} w={"100vw"} gap={5}>
-				<HStack w="100%" justify="space-between">
-					<XButton onClick={setFilterShow} />
-					<Spacer />
-					<Button
-						color={COLORS.white}
-						bgColor={COLORS.Button.primary}
-						onClick={filterApply}
-					>
-						Apply
-					</Button>
-				</HStack>
+		<Modal isOpen={isOpen} onClose={() => undefined}>
+			<ModalOverlay />
+			<ModalContent maxWidth="calc(768px - 32px)" marginTop="140px" marginInline="4">
+				<FilterSection
+					title="Your items"
+					button={
+						<Button
+							size="sm"
+							color="white"
+							bgColor={COLORS.Button.primary}
+							onClick={filterApply}
+						>
+							Apply
+						</Button>
+					}
+				>
+					<PillBox
+						items={selectedOptionsWithCheckedState}
+						handleItemSelect={handleCheckboxChange}
+					/>
+				</FilterSection>
+
+				<FilterSection title="Sort by">
+					<HStack>
+						<Box
+							border="1px solid #D6EAEA"
+							background={COLORS.Button.primary}
+							padding={1}
+							borderRadius="full"
+							paddingInline={3}
+							color="white"
+							fontSize={12}
+						>
+							Nearest
+						</Box>
+						<Box
+							border="1px solid #D6EAEA"
+							padding={1}
+							borderRadius="full"
+							paddingInline={3}
+							fontSize={12}
+						>
+							Most items
+						</Box>
+					</HStack>
+				</FilterSection>
 
-				<VStack w="100%">
-					<Text w="100%" textAlign={"left"} fontWeight={"bold"}>
-						Distance
-					</Text>
-					<HStack w="80%" justify="space-between">
+				<FilterSection title="Max Distance" hideDivider={true}>
+					<HStack justify="space-between">
 						<Text>3km</Text>
 						<Text>10km</Text>
 					</HStack>
 					<Slider
 						min={30}
 						max={100}
-						w="80%"
 						aria-label="slider-ex-1"
 						defaultValue={range}
 						onChangeEnd={(val) => handleSliderChange(val)}
 					>
 						<SliderTrack>
-							<SliderFilledTrack />
+							<SliderFilledTrack background="#31979566" />
 						</SliderTrack>
-						<SliderThumb />
+						<SliderThumb background={COLORS.Button.primary} />
 					</Slider>
-				</VStack>
-				<Divider borderColor="gray.500" borderWidth="1px" />
-				<VStack align="flex-start" w="100%">
-					<Text textAlign={"left"} fontWeight={"bold"}>
-						Items
-					</Text>
-					<CheckboxGroup
-						colorScheme="blue"
-						defaultValue={itemState.map((item) => item.name)}
-					>
-						<Stack pl={1} spacing={3} direction={"column"}>
-							{selectOptions.map((item) => (
-								<Checkbox
-									onChange={(e) => handleCheckboxChange(e)}
-									key={item.idx}
-									data-key={item.idx}
-									value={item.value}
-									name={item.method}
-								>
-									{item.value}
-								</Checkbox>
-							))}
-						</Stack>
-					</CheckboxGroup>
-				</VStack>
-			</VStack>
+				</FilterSection>
+			</ModalContent>
+		</Modal>
+	);
+};
+
+function FilterSection({
+	title,
+	hideDivider,
+	button,
+	children,
+}: React.PropsWithChildren<{ title: string; hideDivider?: boolean; button?: JSX.Element }>) {
+	return (
+		<Box w="100%" p={2} pb={0}>
+			<HStack justify="space-between" mb={3}>
+				<Text fontWeight={"bold"}>{title}</Text>
+				{button}
+			</HStack>
+			{children}
+			<Divider
+				background="gray.200"
+				h="1px"
+				marginBlock={4}
+				display={hideDivider ? "none" : "auto"}
+			/>
 		</Box>
 	);
+}
+
+type PillBoxItem = {
+	value: string;
+	method?: Methods;
+	isChecked: boolean;
+};
+
+const PillBox = ({
+	items,
+	handleItemSelect,
+}: {
+	items: Array<PillBoxItem>;
+	handleItemSelect: (item: any) => void;
+}) => {
+	const { getCheckboxProps } = useCheckboxGroup({
+		value: items.filter((item) => item.isChecked).map((item) => item.value),
+	});
+
+	return (
+		<Flex flex={1} gap={2} flexWrap="wrap" maxH="70px" overflow="auto">
+			{items.map((item) => (
+				<PillBoxItem
+					{...getCheckboxProps({
+						value: item.value,
+						name: item.method,
+					})}
+					onChange={handleItemSelect}
+				/>
+			))}
+
+			{items.map((item) => (
+				<PillBoxItem
+					{...getCheckboxProps({
+						value: item.value,
+						name: item.method,
+					})}
+					onChange={handleItemSelect}
+				/>
+			))}
+		</Flex>
+	);
+};
+
+const PillBoxItem = (props: CheckboxProps) => {
+	const { state, getInputProps, getLabelProps, htmlProps } = useCheckbox(props);
+
+	return (
+		<chakra.label {...htmlProps}>
+			<input {...getInputProps()} hidden />
+			<Text
+				bg="white"
+				borderRadius="full"
+				paddingX="10px"
+				paddingY="5px"
+				background={state.isChecked ? "#D6EAEA" : "white"}
+				border={state.isChecked ? "1px solid #D6EAEA" : "1px solid #D6EAEA"}
+				cursor="pointer"
+				whiteSpace="nowrap"
+				fontSize="12px"
+				{...getLabelProps()}
+			>
+				{props.value}
+			</Text>
+		</chakra.label>
+	);
 };
diff --git a/client/spa-pages/components/MapPage.tsx b/client/spa-pages/components/MapPage.tsx
index ea621bf..193d14d 100644
--- a/client/spa-pages/components/MapPage.tsx
+++ b/client/spa-pages/components/MapPage.tsx
@@ -1,6 +1,6 @@
 // General Imports
 import { BasePage } from "layouts/BasePage";
-import { Flex, VStack, Box, IconButton } from "@chakra-ui/react";
+import { Flex, VStack, Box, IconButton, useDisclosure } from "@chakra-ui/react";
 import { Dispatch, SetStateAction, useState } from "react";
 import { Pages } from "spa-pages/pageEnums";
 import { useUserInputs } from "hooks/useUserSelection";
@@ -78,7 +78,7 @@ const MapInner = ({ setPage }: Props) => {
 	////// States //////
 
 	// Filters
-	const [filterShow, setFilterShow] = useState(false);
+	const { isOpen: isFilterOpen, onOpen: onFilterOpen, onClose: onFilterClose } = useDisclosure();
 	const [range, setRange] = useState(60);
 	// const [isExpanded, setIsExpanded] = useState(false);
 
@@ -353,7 +353,7 @@ const MapInner = ({ setPage }: Props) => {
 
 				<MapHeaderButtons
 					setPage={setPage}
-					setFilterShow={setFilterShow}
+					onFilterOpen={onFilterOpen}
 					selectedOptions={selectedOptions}
 					selectOptions={selectOptions}
 					handleMultiselectOnChange={handleMultiselectOnChange}
@@ -398,18 +398,15 @@ const MapInner = ({ setPage }: Props) => {
 					getMatchingFacility={getMatchingFacility}
 				/>
 			)} */}
-			{filterShow && (
-				<FilterPanel
-					isMobile={isMobile}
-					setFilterShow={() => setFilterShow(true)}
-					filterApply={() => setFilterShow(false)}
-					handleSliderChange={handleSliderChange}
-					range={range}
-					itemState={itemState}
-					selectOptions={selectOptions}
-					handleCheckboxChange={handleCheckboxChange}
-				/>
-			)}
+			<FilterPanel
+				isOpen={isFilterOpen}
+				filterApply={() => onFilterClose()}
+				handleSliderChange={handleSliderChange}
+				range={range}
+				itemState={itemState}
+				selectOptions={selectOptions}
+				handleCheckboxChange={handleCheckboxChange}
+			/>
 		</BasePage>
 	);
 };
@@ -423,15 +420,14 @@ export const MapPage = ({ setPage }: Props) => (
 
 export const MapHeaderButtons = ({
 	setPage,
-	setFilterShow,
 	selectedOptions,
 	selectOptions,
 	handleMultiselectOnChange,
 	itemState,
 	handleChangedLocation,
+	onFilterOpen,
 }: {
 	setPage: Dispatch<SetStateAction<Pages>>;
-	setFilterShow: Dispatch<SetStateAction<boolean>>;
 	selectedOptions: OptionType[];
 	selectOptions: OptionType[];
 	handleMultiselectOnChange: (
@@ -440,6 +436,7 @@ export const MapHeaderButtons = ({
 	) => void;
 	itemState: (TItemSelection | TEmptyItem)[];
 	handleChangedLocation: (itemEntry: (TItemSelection | TEmptyItem)[]) => void;
+	onFilterOpen: () => void;
 }) => {
 	return (
 		<VStack
@@ -487,7 +484,7 @@ export const MapHeaderButtons = ({
 					handleMultiselectOnChange={handleMultiselectOnChange}
 					selectOptions={selectOptions}
 				/>
-				<FilterButton onClick={() => setFilterShow(true)} height="44px" />
+				<FilterButton onClick={onFilterOpen} height="44px" />
 			</Flex>
 		</VStack>
 	);