🛠 v1.0.1 - Deployment Bugfix

Home Page: - sticky footer in production failed due to the useWindowDimension hook initialising to 0 height - user could proceed despite not inserting an address value - users could change to another item from their original item, but the method would not be reset accordingly Map Page: - location change did not update facilities instantly - get directions button did not have a URL - icons were not appropriately sized - cluster number was not appropriately placed Pick Up Page: - filter popup was too wide - carousel data did not handle the edge case of having 0 items Instructions Page: - icons did not appear on production - general waste items were not removed from selection General: - handled the edge case of user only inserting general waste items
bettersg · Dec 23, 2023 · fed78de · fed78de
1 parent 052cc5c
commit fed78de
Show file tree

Hide file tree

Showing 112 changed files with 131 additions and 160 deletions.
diff --git a/client/components/footer/StickyFooter.tsx b/client/components/footer/StickyFooter.tsx
@@ -30,7 +30,6 @@ export const StickyFooter = forwardRef<HTMLDivElement, Props>(({ disabled, setPa
 				MAX_DISTANCE_KM,
 			),
 		);
-
 		setPage(pageNumber);
 	};
 

diff --git a/client/components/home/UserInput/Items.tsx b/client/components/home/UserInput/Items.tsx
@@ -51,6 +51,7 @@ export const Items = () => {
 				_item[type] = value as Methods;
 			} else {
 				_item[type] = value;
+				_item["method"] = undefined;
 			}
 			_items[index] = _item;
 			setUserSelection(_items);
@@ -107,7 +108,7 @@ export const Items = () => {
 							placeholder="Method"
 							color={item.method ? COLORS.Select.body : COLORS.Select.placeholder}
 							iconColor={COLORS.Select.icon}
-							value={item.method}
+							value={item.method ? item.method : "Method"}
 							onChange={(e: ChangeEvent<HTMLInputElement>) => {
 								e.target.value && handleUpdateItem("method", index, e.target.value);
 							}}

diff --git a/client/components/home/UserInput/Location/index.tsx b/client/components/home/UserInput/Location/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Text } from "@chakra-ui/react";
 import { fetchAddresses } from "api/onemap";
 import { useUserInputs } from "hooks/useUserSelection";
 import debounce from "lodash/debounce";
@@ -32,7 +32,7 @@ export const Location = ({ handleBlur, showText, containerStyle = {} }: Location
 									lat: result.LATITUDE,
 									long: result.LONGITUDE,
 								},
-							} as AddressOption),
+							}) as AddressOption,
 					),
 				),
 			);

diff --git a/client/components/home/UserInput/index.tsx b/client/components/home/UserInput/index.tsx
@@ -11,9 +11,8 @@ type Props = {
 
 export const UserInput = ({ scrollableContainerRef, setReadyToSubmit }: Props) => {
 	const { items, address } = useUserInputs();
-
 	useEffect(() => {
-		setReadyToSubmit(!!address && validateSelections(items));
+		setReadyToSubmit(!!address.value && validateSelections(items));
 	}, [address, items, setReadyToSubmit]);
 
 	useEffect(() => {

diff --git a/client/components/instructions/InstructionsAccordion/DisplayAccordion.tsx b/client/components/instructions/InstructionsAccordion/DisplayAccordion.tsx
@@ -55,7 +55,7 @@ const DisplayAccordion = ({ items, recyclable }: AccordionDisplayProps) => {
 								onMouseLeave={() => handleAccordionHover(index, false, isExpanded)}
 								style={{
 									boxShadow:
-										index === 0 && index !== lastIndex
+										index !== lastIndex
 											? "0px -5px 6px -6px rgba(0, 0, 0, 0.25), -5px 0px 6px -6px rgba(0, 0, 0, 0.25), 5px 0px 6px -6px rgba(0, 0, 0, 0.25)"
 											: "1px 2px 6px 0px rgb(0,0,0, 0.25)",
 								}}
@@ -65,8 +65,8 @@ const DisplayAccordion = ({ items, recyclable }: AccordionDisplayProps) => {
 										<Image
 											src={
 												isHovered || isExpanded
-													? `/whiteicons/${category}.png`
-													: `/icons/${category}.png`
+													? `/icons/whiteicons/${category}.png`
+													: `/icons/blackicons/${category}.png`
 											}
 											w={5}
 											alt={`Icon for ${category}`}

diff --git a/client/components/instructions/InstructionsAccordion/InstructionsCarousel.tsx b/client/components/instructions/InstructionsAccordion/InstructionsCarousel.tsx
@@ -1,21 +1,9 @@
-import { Box, Button, Center, Flex, Text } from "@chakra-ui/react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
-import { useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 import { Carousel } from "react-responsive-carousel";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import styles from "components/pickup/carousel.module.css";
 import { SLIDES_INTERVAL_TIME } from "components/pickup/PickupCarousel";
 const InstructionsCarousel = ({ items }: { items: string[] }) => {
-	const [currentIndex, setCurrentIndex] = useState(0);
-
-	const handlePrevClick = () => {
-		setCurrentIndex((prevIndex) => (prevIndex === 0 ? items.length - 1 : prevIndex - 1));
-	};
-
-	const handleNextClick = () => {
-		setCurrentIndex((prevIndex) => (prevIndex === items.length - 1 ? 0 : prevIndex + 1));
-	};
-
 	return (
 		<Carousel
 			showThumbs={false}

diff --git a/client/components/instructions/InstructionsAccordion/index.tsx b/client/components/instructions/InstructionsAccordion/index.tsx
@@ -1,5 +1,4 @@
 import { Box, Text } from "@chakra-ui/react";
-import { useState } from "react";
 import { Methods } from "api/sheety/enums";
 import DisplayAccordion from "./DisplayAccordion";
 

diff --git a/client/components/instructions/InstructionsHeader.tsx b/client/components/instructions/InstructionsHeader.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, HStack } from "@chakra-ui/react";
 import { Dispatch, SetStateAction } from "react";
 import { Pages } from "spa-pages/pageEnums";
-import { ArrowBackIcon, RepeatIcon } from "@chakra-ui/icons";
+import { ArrowBackIcon } from "@chakra-ui/icons";
 type Props = {
 	setPage: Dispatch<SetStateAction<Pages>>;
 };

diff --git a/client/components/map/FacilityCard.tsx b/client/components/map/FacilityCard.tsx
@@ -10,6 +10,7 @@ import { useSheetyData } from "hooks/useSheetyData";
 import { CheckIcon } from "@chakra-ui/icons";
 import { categoriesProcessor } from "./utils";
 import { Methods } from "api/sheety/enums";
+import { useUserInputs } from "hooks/useUserSelection";
 export const FacilityCard = ({
 	items,
 	facCardDetails,
@@ -20,7 +21,7 @@ export const FacilityCard = ({
 	facCardDistance: number;
 }) => {
 	const { getItemCategory } = useSheetyData();
-
+	const { address } = useUserInputs();
 	const [isExpanded, setIsExpanded] = useState(false);
 	const [translateY, setTranslateY] = useState(50);
 	const handleMovement = () => {
@@ -102,19 +103,23 @@ export const FacilityCard = ({
 							{/* <span style={{ fontWeight: 800 }}>Address:</span>{" "} */}
 							{facCardDetails.address}
 						</Text>
-						<Button
-							bg={COLORS.Button.primary}
-							textColor={"white"}
-							mt={"auto"}
-							size={"md"}
-							width={"100%"}
-							gap={3}
-							padding={3}
-							zIndex={1002}
+						<Link
+							href={`https://www.google.com/maps/dir/${address.coordinates.lat},${address.coordinates.long}/${facCardDetails.latitude},${facCardDetails.longitude}`}
 						>
-							<ExternalLinkIcon />
-							<Text>Get directions</Text>
-						</Button>
+							<Button
+								bg={COLORS.Button.primary}
+								textColor={"white"}
+								mt={"auto"}
+								size={"md"}
+								width={"100%"}
+								gap={3}
+								padding={3}
+								zIndex={1002}
+							>
+								<ExternalLinkIcon />
+								<Text>Get directions</Text>
+							</Button>
+						</Link>
 					</VStack>
 				</HStack>
 				<Flex p={2} gap={2} flexDir={"column"}>

diff --git a/client/components/map/FilterPanel.tsx b/client/components/map/FilterPanel.tsx
@@ -17,14 +17,11 @@ import {
 	CheckboxProps,
 	useCheckboxGroup,
 	Spacer,
-	useRadio,
-	UseRadioProps,
-	useRadioGroup,
 } from "@chakra-ui/react";
 import { COLORS } from "theme";
 import { TItemSelection, TEmptyItem } from "app-context/SheetyContext/types";
 import { OptionType } from "spa-pages";
-import React, { ChangeEvent, PropsWithChildren } from "react";
+import React, { ChangeEvent } from "react";
 import { Methods } from "api/sheety/enums";
 import { useSheetyData } from "hooks/useSheetyData";
 
@@ -185,43 +182,6 @@ const ChipCheckbox = (props: CheckboxProps) => {
 	);
 };
 
-const ChipRadioGroup = ({ items }: { items: Array<string> }) => {
-	const { getRootProps, getRadioProps } = useRadioGroup({
-		name: "sortBy",
-		defaultValue: "Nearest",
-	});
-
-	const group = getRootProps();
-
-	return (
-		<HStack {...group}>
-			{items.map((value) => {
-				const radio = getRadioProps({ value });
-				return (
-					<ChipRadio key={value} {...radio}>
-						{value}
-					</ChipRadio>
-				);
-			})}
-		</HStack>
-	);
-};
-
-const ChipRadio = (props: PropsWithChildren<UseRadioProps>) => {
-	const { getInputProps, getRadioProps, state } = useRadio(props);
-
-	const input = getInputProps();
-
-	return (
-		<Box as="label">
-			<input {...input} />
-			<Chip isChecked={state.isChecked} darkBackground={true}>
-				{props.children}
-			</Chip>
-		</Box>
-	);
-};
-
 export const Chip = ({
 	value,
 	children,
@@ -231,7 +191,8 @@ export const Chip = ({
 	const selectedColor = darkBackground ? "teal.500" : "teal.50";
 	const selectedTextColor = darkBackground ? "white" : "black";
 	const { getItemCategory } = useSheetyData();
-	const category = getItemCategory(value as string);
+	const category = getItemCategory(value as string) as string;
+	// To prevent an error that is triggered when I use the Show Route function
 	return (
 		<Flex
 			align="center"
@@ -247,7 +208,7 @@ export const Chip = ({
 		>
 			{category && (
 				<img
-					src={`/icons/${category}.png`}
+					src={`/icons/blackicons/${category}.png`}
 					alt={`${category} icon`}
 					style={{ width: "15px", height: "15px", marginRight: "8px" }}
 				/>

diff --git a/client/components/map/Marker/ClusterGroup.tsx b/client/components/map/Marker/ClusterGroup.tsx
@@ -53,7 +53,7 @@ const CreateMarkerClusterGroup = (
 					<MarkerIconWrapper
 						color={props.color}
 						icon={props.icon}
-						label={`${cluster.getChildCount()}`}
+						label={cluster.getChildCount()}
 					/>
 				),
 			}),

diff --git a/client/components/map/Marker/MarkerIconWrapper.tsx b/client/components/map/Marker/MarkerIconWrapper.tsx
@@ -9,7 +9,7 @@ export interface CustomMarkerProps {
 	position: LatLngExpression;
 	icon?: React.ComponentType<IconProps>; // Update the type here
 	color: string;
-	label?: string;
+	label?: number;
 	category: string;
 	isSelected?: boolean;
 }
@@ -30,18 +30,32 @@ const MarkerIconWrapper = ({
 					<IconFC className="marker-size" />
 				))}
 
-			{label && <Text className="marker-text">{label}</Text>}
+			{label && (
+				<Text
+					className="marker-text"
+					style={{
+						transform:
+							label < 10
+								? "translateX(200%)"
+								: label < 100
+								? "translateX(70%)"
+								: "translateX(35%)",
+					}}
+				>
+					{label}
+				</Text>
+			)}
 
 			{category && (
 				<>
 					<Image
 						className="marker-circle"
-						src={"/blueicons/icon_circle.png"}
+						src={"/icons/blueicons/icon_circle.png"}
 						alt="Circle behind category icon"
 					/>
 					<Image
 						className="marker-image"
-						src={`/blueicons/${category}.png`}
+						src={`/icons/blueicons/${category}.png`}
 						alt={`${category} icon`}
 					/>
 				</>

diff --git a/client/components/map/Marker/icons/ClusterIcon.tsx b/client/components/map/Marker/icons/ClusterIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon } from "@chakra-ui/react";
 
 const ClusterIcon = (props: any) => (
-	<Icon viewBox="0 0 68 88" {...props}>
+	<Icon viewBox="0 0 75 75" {...props}>
 		<g filter="url(#filter0_d_5866_39311)">
 			<path
 				d="M69 37.3829C69 55.0173 54.6731 69.3128 37 69.3128C19.3269 69.3128 5 55.0173 5 37.3829C5 19.7486 19.3269 5.45312 37 5.45312C54.6731 5.45312 69 19.7486 69 37.3829Z"

diff --git a/client/components/map/Marker/icons/UserIcon.tsx b/client/components/map/Marker/icons/UserIcon.tsx
@@ -1,8 +1,8 @@
-import { Icon, Box } from "@chakra-ui/react";
+import { Icon } from "@chakra-ui/react";
 
 // Map Icon (placeholder for testing)
 const UserIcon = (props: any) => (
-	<Icon viewBox="5 5 70 80" {...props}>
+	<Icon viewBox="0 0 75 75" {...props}>
 		<g filter="url(#filter0_d_5859_39306)">
 			<circle cx="37" cy="37" r="32" fill="#DD0303" />
 			<circle cx="37" cy="37" r="24" fill="white" />

diff --git a/client/components/map/RouteCard.tsx b/client/components/map/RouteCard.tsx
@@ -12,11 +12,9 @@ import Link from "next/link";
 export const RouteCard = ({
 	items,
 	route,
-	results,
 }: {
 	items: (TItemSelection | TEmptyItem)[];
 	route: RecyclingLocationResults["route"];
-	results: RecyclingLocationResults["results"];
 }) => {
 	const { getFacility, getItemCategory } = useSheetyData();
 	const [isExpanded, setIsExpanded] = useState(false);
@@ -70,8 +68,14 @@ export const RouteCard = ({
 				{/* Header */}
 				<HStack mb={2} justifyContent={"space-between"}>
 					<Text as="b">
-						{route.path.length - 1} stop
-						{route.path.length > 2 && "s"}
+						{route.path.length > 0 ? (
+							<>
+								{route.path.length - 1} stop
+								{route.path.length > 2 && "s"}
+							</>
+						) : (
+							<>No facilities found.</>
+						)}
 					</Text>
 					<Text as="b">
 						Total {(calculateSum(route.distanceBtwFacilities) * 1000).toFixed(0)}m

diff --git a/client/components/pickup/OrgCard.tsx b/client/components/pickup/OrgCard.tsx
@@ -9,7 +9,6 @@ import {
 	theme,
 	Divider,
 } from "@chakra-ui/react";
-import Link from "next/link";
 
 import { Card, CardBody } from "@chakra-ui/card";
 import { TSheetyPickupDetails } from "api/sheety/types";

diff --git a/client/components/pickup/OrgLabel.tsx b/client/components/pickup/OrgLabel.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 const OrgLabel = (props: Props) => {
 	return (
-		<HStack flexShrink={0}>
+		<HStack flexShrink={0} w="100%">
 			<Icon as={props.icon} boxSize={4} />
 			<Text as="b" fontSize="sm" color={COLORS.teal} fontWeight={500}>
 				{props.title}

diff --git a/client/components/pickup/PickupCarousel.tsx b/client/components/pickup/PickupCarousel.tsx
@@ -97,7 +97,7 @@ const PickupCarousel = ({
 									</Text>
 								) : (
 									<Text fontSize={["13px", "13px", "20px"]} as={"b"}>
-										{(minDist * 1000).toFixed(0)}m
+										{minDist > 10000 ? (minDist * 1000).toFixed(0) + "m" : "-"}
 									</Text>
 								)}{" "}
 							</Box>

diff --git a/client/components/pickup/filterPopover.tsx b/client/components/pickup/filterPopover.tsx
@@ -63,7 +63,7 @@ const FilterButton = ({
 				maxWidth="calc(768px - 32px)"
 				top={`${modalTop}px`}
 				marginBottom={0}
-				marginRight={3}
+				width={"90%"}
 			>
 				<FilterSection
 					title="Your items"
-Original file line number
+Diff line change
@@ Expand Up @@
     				MAX_DISTANCE_KM,
     			),
     		);
     		setPage(pageNumber);
     	};
@@ Expand Down @@