From 0b1bab079143bb80fb8928b9a29c8fd90996b607 Mon Sep 17 00:00:00 2001 From: Marco di Gennaro Date: Wed, 4 Dec 2024 19:05:50 +0100 Subject: [PATCH 01/16] frontend - feat: add new list view of users on map #4848 --- app/web/features/search/MapWrapper.tsx | 2 +- app/web/features/search/SearchResultsList.tsx | 125 ++++++++++-------- .../SearchResultsMobileVerticalList.tsx | 113 ++++++++++++++++ 3 files changed, 185 insertions(+), 55 deletions(-) create mode 100644 app/web/features/search/SearchResultsMobileVerticalList.tsx diff --git a/app/web/features/search/MapWrapper.tsx b/app/web/features/search/MapWrapper.tsx index 63b3f5cedc..78e7bca1e6 100644 --- a/app/web/features/search/MapWrapper.tsx +++ b/app/web/features/search/MapWrapper.tsx @@ -19,7 +19,7 @@ import { } from "maplibre-gl"; import { User } from "proto/api_pb"; import { UserSearchRes } from "proto/search_pb"; -import { +import React, { Dispatch, MutableRefObject, SetStateAction, diff --git a/app/web/features/search/SearchResultsList.tsx b/app/web/features/search/SearchResultsList.tsx index 3f86d1e810..b6feab4da8 100644 --- a/app/web/features/search/SearchResultsList.tsx +++ b/app/web/features/search/SearchResultsList.tsx @@ -16,6 +16,7 @@ import { theme } from "theme"; import { GeocodeResult } from "utils/hooks"; import SearchBox from "./SearchBox"; +import SearchResultsMobileVerticalList from "./SearchResultsMobileVerticalList"; const useStyles = makeStyles((theme) => ({ mapResults: { @@ -43,6 +44,12 @@ const useStyles = makeStyles((theme) => ({ margin: theme.spacing(2), }, }, + singleResultMobile: { + margin: theme.spacing(0, 2), + [theme.breakpoints.up("md")]: { + display: "none", + }, + }, searchResult: { borderRadius: theme.shape.borderRadius * 2, backgroundColor: theme.palette.background.paper, @@ -58,10 +65,10 @@ const useStyles = makeStyles((theme) => ({ padding: 0, overflow: "hidden", flexShrink: 0, - width: "85vw", + width: "90%", maxWidth: "33rem", height: "100%", - margin: theme.spacing(0, 2, 0, 0), + margin: theme.spacing(0, "auto"), scrollSnapAlign: "start", "&:last-child": { marginRight: 0, @@ -132,62 +139,72 @@ export default function SearchResultsList({ resultsList = [{ user: selectedUserData.data, rank: 0, snippet: "" }]; } + const resultsSnippet = + resultsList && + resultsList.map((result) => ( + { + setSelectedResult({ + userId: result.user!.userId, + lng: result.user!.lng, + lat: result.user!.lat, + }); + }} + highlight={ + selectedResult && selectedResult.userId === result.user!.userId + } + /> + )); + return ( - + <> + {/* SHOW VERTICAL LIST ON CLICK FOR MOBILE */} + {isMobile && resultsSnippet?.length && ( + + )} + {error && {error}} + {!isMobile && ( - - )} - <> - {isLoading || - (selectedUserData.isLoading && ( - - ))} + + - {!isLoading && !hasAtLeastOnePageResults && ( - - {t("search_result.no_user_result_message")} - - )} + {!isLoading && hasAtLeastOnePageResults && ( + + {isLoading || + (selectedUserData.isLoading && ( + + ))} - {!isLoading && hasAtLeastOnePageResults && ( - - {resultsList && - resultsList.map((result) => ( - { - setSelectedResult({ - userId: result.user!.userId, - lng: result.user!.lng, - lat: result.user!.lat, - }); - }} - highlight={ - selectedResult && - selectedResult.userId === result.user!.userId - } - /> - ))} - - )} - - + {!isLoading && !hasAtLeastOnePageResults && ( + + {t("search_result.no_user_result_message")} + + )} + + {resultsSnippet} + + + )} + + )} + ); } diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx new file mode 100644 index 0000000000..c771d988c1 --- /dev/null +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -0,0 +1,113 @@ +import { ExpandLess, ExpandMore } from "@mui/icons-material"; +import { IconButton } from "@mui/material"; +import makeStyles from "@mui/styles/makeStyles"; +import { ReactNode, useState } from "react"; + +interface Props { + resultsSnippet: ReactNode[]; +} + +const useStyles = makeStyles((theme) => ({ + drawer: { + /* */ + width: "100%", + height: "350px", + overflowY: "auto", + "&[data-open-state='true']": { + height: "100%", + top: "56px", + position: "fixed", + bottom: 0, + left: 0, + zIndex: theme.zIndex.drawer, + backgroundColor: theme.palette.background.default, + }, + }, + singleResult: { + width: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + maxHeight: "400px", + paddingBottom: theme.spacing(2), + overflowY: "auto", + }, + verticalList: { + display: "flex", + flexDirection: "column", + gap: theme.spacing(2), + padding: theme.spacing(2), + "& .MuiCard-root": { + height: "auto", + width: "100%", + [theme.breakpoints.down("md")]: { + height: "auto", + "& .MuiCardContent-root": { + height: "auto", + }, + "& .MuiCardActionArea-root": { + height: "100%", + }, + }, + }, + }, + openButton: { + width: "100%", + marginLeft: 0, + }, + closeButton: { + width: "100%", + marginLeft: 0, + position: "sticky", + top: 0, + backgroundColor: theme.palette.background.default, + borderRadius: 0, + zIndex: theme.zIndex.drawer, + }, + icon: { + fontSize: "3rem", + }, +})); + +export default function SearchResultsMobileVerticalList({ + resultsSnippet, +}: Props) { + const classes = useStyles(); + const [open, setOpen] = useState(false); + + const toggleDrawer = (newOpen: boolean) => () => { + setOpen(newOpen); + }; + + return ( + <> + {!open && ( + + + + )} +
+ {open && ( + + + + )} + +
{resultsSnippet}
+
+ + ); +} From 87bfa29c79bf5cfdf5e0bae13fa56fb2b3fcb3cc Mon Sep 17 00:00:00 2001 From: Marco di Gennaro Date: Thu, 5 Dec 2024 19:40:52 +0100 Subject: [PATCH 02/16] fix: some ux issues, rework style with nmew styled from mui --- app/web/features/search/SearchResultsList.tsx | 153 ++++++++---------- .../SearchResultsMobileVerticalList.tsx | 143 ++++++++-------- 2 files changed, 132 insertions(+), 164 deletions(-) diff --git a/app/web/features/search/SearchResultsList.tsx b/app/web/features/search/SearchResultsList.tsx index fee14c6aed..1349ec8e80 100644 --- a/app/web/features/search/SearchResultsList.tsx +++ b/app/web/features/search/SearchResultsList.tsx @@ -1,5 +1,4 @@ -import { Paper, useMediaQuery } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Paper, styled, useMediaQuery } from "@mui/material"; import Alert from "components/Alert"; import CircularProgress from "components/CircularProgress"; import HorizontalScroller from "components/HorizontalScroller"; @@ -18,71 +17,61 @@ import { GeocodeResult } from "utils/hooks"; import SearchBox from "./SearchBox"; import SearchResultsMobileVerticalList from "./SearchResultsMobileVerticalList"; -const useStyles = makeStyles((theme) => ({ - mapResults: { - height: "17rem", - overflowY: "auto", - backgroundColor: theme.palette.background.default, - [theme.breakpoints.up("md")]: { - height: "auto", - width: "30rem", - padding: theme.spacing(3), - }, - }, - baseMargin: { - margin: theme.spacing(2), +const StyledMapResults = styled(Paper)(({ theme }) => ({ + height: "17rem", + overflowY: "auto", + backgroundColor: theme.palette.background.default, + [theme.breakpoints.up("md")]: { + height: "auto", + width: "30rem", + padding: theme.spacing(3), }, - scroller: { - marginTop: theme.spacing(3), - [theme.breakpoints.down("md")]: { - marginTop: 0, - }, +})); + +const StyledTextBody = styled(TextBody)(({ theme }) => ({ + margin: theme.spacing(2), +})); + +const StyledHorizontalScroller = styled(HorizontalScroller)(({ theme }) => ({ + marginTop: theme.spacing(3), + [theme.breakpoints.down("md")]: { + marginTop: 0, }, - singleResult: { - maxWidth: "100%", - [theme.breakpoints.up("md")]: { - margin: theme.spacing(2), +})); + +const StyledSearchResult = styled(SearchResult)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius * 2, + backgroundColor: theme.palette.background.paper, + boxShadow: "0 0 4px rgba(0,0,0,0.25)", + [theme.breakpoints.up("md")]: { + marginBottom: theme.spacing(3), + "&:last-child": { + marginBottom: 0, }, }, - singleResultMobile: { - margin: theme.spacing(0, 2), - [theme.breakpoints.up("md")]: { - display: "none", - }, + "& .MuiCardContent-root": { + padding: theme.spacing(3), }, - searchResult: { - borderRadius: theme.shape.borderRadius * 2, - backgroundColor: theme.palette.background.paper, - boxShadow: "0 0 4px rgba(0,0,0,0.25)", - marginBottom: theme.spacing(3), + [theme.breakpoints.down("md")]: { + padding: 0, + overflow: "hidden", + flexShrink: 0, + width: "90%", + maxWidth: "33rem", + height: "100%", + scrollSnapAlign: "start", "&:last-child": { - marginBottom: 0, + marginRight: 0, }, - "& .MuiCardContent-root": { - padding: theme.spacing(3), + "& .MuiCardActionArea-root": { + height: "100%", }, - [theme.breakpoints.down("md")]: { - padding: 0, - overflow: "hidden", - flexShrink: 0, - width: "90%", - maxWidth: "33rem", + "& .MuiCardContent-root": { height: "100%", - margin: theme.spacing(0, "auto"), - scrollSnapAlign: "start", - "&:last-child": { - marginRight: 0, - }, - "& .MuiCardActionArea-root": { - height: "100%", - }, - "& .MuiCardContent-root": { - height: "100%", - padding: theme.spacing(2), - overflow: "hidden", - display: "flex", - flexDirection: "column", - }, + padding: theme.spacing(2), + overflow: "hidden", + display: "flex", + flexDirection: "column", }, }, })); @@ -120,7 +109,6 @@ export default function SearchResultsList({ }: mapWrapperProps) { const selectedUserData = useUser(selectedResult?.userId); const { t } = useTranslation(SEARCH); - const classes = useStyles(); const isMobile = useMediaQuery(theme.breakpoints.down("md")); const hasAtLeastOnePageResults = @@ -142,9 +130,8 @@ export default function SearchResultsList({ const resultsSnippet = resultsList && resultsList.map((result) => ( - { @@ -160,17 +147,25 @@ export default function SearchResultsList({ /> )); + const isLoadingState = isLoading || selectedUserData.isLoading; + return ( <> {/* SHOW VERTICAL LIST ON CLICK FOR MOBILE */} - {isMobile && resultsSnippet?.length && ( + {isMobile && resultsSnippet && resultsSnippet?.length > 0 && ( )} {error && {error}} - {!isMobile && ( - + {!hasAtLeastOnePageResults && ( + + {t("search_result.no_user_result_message")} + + )} + + {!isMobile && hasAtLeastOnePageResults && ( + - {!isLoading && hasAtLeastOnePageResults && ( - - {isLoading || - (selectedUserData.isLoading && ( - - ))} - - {!isLoading && !hasAtLeastOnePageResults && ( - - {t("search_result.no_user_result_message")} - - )} - + {isLoadingState && } + + {hasAtLeastOnePageResults && ( + {resultsSnippet} - - - )} - + + )} + + )} ); diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index c771d988c1..2ac40bb8e8 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -1,113 +1,96 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material"; -import { IconButton } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; -import { ReactNode, useState } from "react"; +import { IconButton, List, styled } from "@mui/material"; +import React, { ReactNode, useState } from "react"; interface Props { resultsSnippet: ReactNode[]; } -const useStyles = makeStyles((theme) => ({ - drawer: { - /* */ - width: "100%", - height: "350px", - overflowY: "auto", - "&[data-open-state='true']": { - height: "100%", - top: "56px", - position: "fixed", - bottom: 0, - left: 0, - zIndex: theme.zIndex.drawer, - backgroundColor: theme.palette.background.default, - }, +const StyledDrawer = styled("div")<{ + open?: boolean; +}>(({ theme, open }) => ({ + width: "100%", + overflowY: "auto", + maxHeight: open ? "none" : "280px", + position: open ? "fixed" : "relative", + top: open ? "56px" : "auto", + bottom: open ? 0 : "auto", + left: open ? 0 : "auto", + zIndex: open ? theme.zIndex.drawer : "auto", + backgroundColor: open ? theme.palette.background.default : "transparent", + minHeight: open ? "250px" : "auto", + scrollbarWidth: "none", // Firefox + "&::-webkit-scrollbar": { + display: "none", // Chrome, Safari, Opera }, - singleResult: { + msOverflowStyle: "none", // IE and Edge +})); + +const StyledOpenButton = styled(IconButton)(({ theme }) => ({ + width: "100%", + marginLeft: 0, + "& svg": { fontSize: "3rem" }, +})); + +const StyledCloseButton = styled(IconButton)(({ theme }) => ({ + width: "100%", + marginLeft: 0, + position: "sticky", + top: 0, + backgroundColor: theme.palette.background.default, + borderRadius: 0, + zIndex: theme.zIndex.drawer, + "& svg": { fontSize: "3rem" }, +})); + +const StyledVerticalList = styled(List)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + gap: theme.spacing(2), + padding: theme.spacing(2), + "& .MuiCard-root": { + height: "auto", width: "100%", - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center", - maxHeight: "400px", - paddingBottom: theme.spacing(2), - overflowY: "auto", - }, - verticalList: { - display: "flex", - flexDirection: "column", - gap: theme.spacing(2), - padding: theme.spacing(2), - "& .MuiCard-root": { + [theme.breakpoints.down("md")]: { height: "auto", - width: "100%", - [theme.breakpoints.down("md")]: { + "& .MuiCardContent-root": { height: "auto", - "& .MuiCardContent-root": { - height: "auto", - }, - "& .MuiCardActionArea-root": { - height: "100%", - }, + }, + "& .MuiCardActionArea-root": { + height: "100%", }, }, }, - openButton: { - width: "100%", - marginLeft: 0, - }, - closeButton: { - width: "100%", - marginLeft: 0, - position: "sticky", - top: 0, - backgroundColor: theme.palette.background.default, - borderRadius: 0, - zIndex: theme.zIndex.drawer, - }, - icon: { - fontSize: "3rem", - }, })); export default function SearchResultsMobileVerticalList({ resultsSnippet, }: Props) { - const classes = useStyles(); const [open, setOpen] = useState(false); const toggleDrawer = (newOpen: boolean) => () => { setOpen(newOpen); }; + const shouldShowOpenButton = resultsSnippet.length > 1 && !open; + return ( <> - {!open && ( - - - + {shouldShowOpenButton && ( + + + )} -
+ + {open && ( - - - + + + )} -
{resultsSnippet}
-
+ {resultsSnippet} + ); } From a92b4af6f26818afeafe16bd8f9db320c1d61ad2 Mon Sep 17 00:00:00 2001 From: Marco di Gennaro Date: Fri, 6 Dec 2024 10:13:35 +0100 Subject: [PATCH 03/16] fix: fine tuning on open-close dawer button --- .../features/search/SearchResultsMobileVerticalList.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index 2ac40bb8e8..dbd9e3bf33 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -1,6 +1,6 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material"; import { IconButton, List, styled } from "@mui/material"; -import React, { ReactNode, useState } from "react"; +import React, { ReactNode, useEffect, useState } from "react"; interface Props { resultsSnippet: ReactNode[]; @@ -67,12 +67,17 @@ export default function SearchResultsMobileVerticalList({ resultsSnippet, }: Props) { const [open, setOpen] = useState(false); + const [shouldShowOpenButton, setShouldShowOpenButton] = useState(false); const toggleDrawer = (newOpen: boolean) => () => { setOpen(newOpen); }; - const shouldShowOpenButton = resultsSnippet.length > 1 && !open; + useEffect(() => { + setShouldShowOpenButton(resultsSnippet.length > 1 && !open); + } + , [resultsSnippet, open]); + return ( <> From 89cea8c8af20fe8086eb6692f2cde53d4e49a62a Mon Sep 17 00:00:00 2001 From: Marco di Gennaro Date: Fri, 6 Dec 2024 11:26:50 +0100 Subject: [PATCH 04/16] fix: format and lint --- app/web/features/search/SearchResultsMobileVerticalList.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index dbd9e3bf33..3b07871a0b 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -75,9 +75,7 @@ export default function SearchResultsMobileVerticalList({ useEffect(() => { setShouldShowOpenButton(resultsSnippet.length > 1 && !open); - } - , [resultsSnippet, open]); - + }, [resultsSnippet, open]); return ( <> From 9361705081281f8e7b61140436cfd9d160339cb9 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sat, 14 Dec 2024 19:26:47 +0100 Subject: [PATCH 05/16] new update --- app/web/features/search/SearchPage.tsx | 56 +++++-------------- app/web/features/search/SearchResultsList.tsx | 23 ++++++-- .../SearchResultsMobileVerticalList.tsx | 22 +++++--- 3 files changed, 46 insertions(+), 55 deletions(-) diff --git a/app/web/features/search/SearchPage.tsx b/app/web/features/search/SearchPage.tsx index fe9595886d..a9801916e5 100644 --- a/app/web/features/search/SearchPage.tsx +++ b/app/web/features/search/SearchPage.tsx @@ -78,7 +78,6 @@ export default function SearchPage({ const classes = useStyles(); const theme = useTheme(); const map = useRef(); - const isMobile = useMediaQuery(theme.breakpoints.down("md")); // State const [wasSearchPerformed, setWasSearchPerformed] = useState(false); @@ -180,46 +179,21 @@ export default function SearchPage({
- {/* Desktop */} - {!isMobile && ( - - )} - {/* Mobile */} - {isMobile && ( - - - - )} + ({ })); const StyledHorizontalScroller = styled(HorizontalScroller)(({ theme }) => ({ + boxShadow: "none", marginTop: theme.spacing(3), [theme.breakpoints.down("md")]: { marginTop: 0, }, })); +const StyledPaper = styled(Paper)(({ theme }) => ({ + boxShadow: "none", +})); + const StyledSearchResult = styled(SearchResult)(({ theme }) => ({ borderRadius: theme.shape.borderRadius * 2, backgroundColor: theme.palette.background.paper, @@ -91,6 +96,7 @@ interface mapWrapperProps { setLocationResult: Dispatch>; setQueryName: Dispatch>; queryName: string; + wasSearchPerformed: boolean; } export default function SearchResultsList({ @@ -106,6 +112,7 @@ export default function SearchResultsList({ setLocationResult, setQueryName, queryName, + wasSearchPerformed, }: mapWrapperProps) { const selectedUserData = useUser(selectedResult?.userId); const { t } = useTranslation(SEARCH); @@ -118,6 +125,10 @@ export default function SearchResultsList({ .flatMap((page) => page.resultsList) .filter((result) => result.user); + if (isMobile && !wasSearchPerformed) { + resultsList = []; + } + const wasResultFound = resultsList?.find( (value) => value.user?.userId === selectedResult?.userId @@ -151,12 +162,12 @@ export default function SearchResultsList({ return ( <> - {/* SHOW VERTICAL LIST ON CLICK FOR MOBILE */} + {/* Mobile */} {isMobile && resultsSnippet && resultsSnippet?.length > 0 && ( )} - + {/* Desktop */} { !isMobile && hasAtLeastOnePageResults && ( @@ -169,15 +180,15 @@ export default function SearchResultsList({ queryName={queryName} /> - + {isLoadingState && } {error && {error}} {!isLoading && !hasAtLeastOnePageResults && ( - + {t("search_result.no_user_result_message")} - + )} {hasAtLeastOnePageResults && ( @@ -189,7 +200,7 @@ export default function SearchResultsList({ {resultsSnippet} )} - + ) } diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index 3b07871a0b..1a31524262 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -29,23 +29,28 @@ const StyledDrawer = styled("div")<{ const StyledOpenButton = styled(IconButton)(({ theme }) => ({ width: "100%", marginLeft: 0, - "& svg": { fontSize: "3rem" }, + backgroundColor: theme.palette.background.default, + borderRadius: 0, + maxHeight: "60px", + "& svg": { fontSize: "4rem" }, })); const StyledCloseButton = styled(IconButton)(({ theme }) => ({ width: "100%", marginLeft: 0, position: "sticky", + maxHeight: "60px", top: 0, backgroundColor: theme.palette.background.default, borderRadius: 0, zIndex: theme.zIndex.drawer, - "& svg": { fontSize: "3rem" }, + "& svg": { fontSize: "4rem" }, })); const StyledVerticalList = styled(List)(({ theme }) => ({ display: "flex", flexDirection: "column", + alignItems: "center", gap: theme.spacing(2), padding: theme.spacing(2), "& .MuiCard-root": { @@ -79,12 +84,6 @@ export default function SearchResultsMobileVerticalList({ return ( <> - {shouldShowOpenButton && ( - - - - )} - {open && ( @@ -94,6 +93,13 @@ export default function SearchResultsMobileVerticalList({ {resultsSnippet} + + {shouldShowOpenButton && ( + + + + )} + ); } From 8b39389e2d7e88791d405073996c63fa44667083 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sat, 14 Dec 2024 19:34:16 +0100 Subject: [PATCH 06/16] small fixes --- app/web/features/search/MapWrapper.tsx | 1 + app/web/features/search/SearchResultsList.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/web/features/search/MapWrapper.tsx b/app/web/features/search/MapWrapper.tsx index 6125cfe68c..ad767dff4e 100644 --- a/app/web/features/search/MapWrapper.tsx +++ b/app/web/features/search/MapWrapper.tsx @@ -262,6 +262,7 @@ export default function MapWrapper({ currentBbox[1][1], ], }); + setSelectedResult(undefined); } setWasSearchPerformed(true); } diff --git a/app/web/features/search/SearchResultsList.tsx b/app/web/features/search/SearchResultsList.tsx index 234b99b2fb..01e805a08f 100644 --- a/app/web/features/search/SearchResultsList.tsx +++ b/app/web/features/search/SearchResultsList.tsx @@ -164,7 +164,10 @@ export default function SearchResultsList({ <> {/* Mobile */} {isMobile && resultsSnippet && resultsSnippet?.length > 0 && ( - + <> + + {error && {error}} + )} {/* Desktop */} From 9f1dfe98db0c879b7fd3101b37ea6a011186ce53 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sat, 14 Dec 2024 20:24:59 +0100 Subject: [PATCH 07/16] Minor improvements --- app/web/features/search/SearchResultsList.tsx | 6 ++-- .../SearchResultsMobileVerticalList.tsx | 30 ++++++++++++------- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/app/web/features/search/SearchResultsList.tsx b/app/web/features/search/SearchResultsList.tsx index 01e805a08f..3ed87b3228 100644 --- a/app/web/features/search/SearchResultsList.tsx +++ b/app/web/features/search/SearchResultsList.tsx @@ -9,7 +9,7 @@ import { useTranslation } from "i18n"; import { SEARCH } from "i18n/namespaces"; import { User } from "proto/api_pb"; import { UserSearchRes } from "proto/search_pb"; -import { Dispatch, SetStateAction } from "react"; +import { Dispatch, SetStateAction, useState } from "react"; import { InfiniteData } from "react-query"; import { theme } from "theme"; import { GeocodeResult } from "utils/hooks"; @@ -114,6 +114,7 @@ export default function SearchResultsList({ queryName, wasSearchPerformed, }: mapWrapperProps) { + const [open, setOpen] = useState(false); const selectedUserData = useUser(selectedResult?.userId); const { t } = useTranslation(SEARCH); const isMobile = useMediaQuery(theme.breakpoints.down("md")); @@ -146,6 +147,7 @@ export default function SearchResultsList({ key={result.user!.userId} user={result.user!} onSelect={() => { + setOpen(false); setSelectedResult({ userId: result.user!.userId, lng: result.user!.lng, @@ -165,7 +167,7 @@ export default function SearchResultsList({ {/* Mobile */} {isMobile && resultsSnippet && resultsSnippet?.length > 0 && ( <> - + {error && {error}} )} diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index 1a31524262..131e3442f6 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -4,6 +4,8 @@ import React, { ReactNode, useEffect, useState } from "react"; interface Props { resultsSnippet: ReactNode[]; + open: boolean; + setOpen: (newState: boolean) => void; } const StyledDrawer = styled("div")<{ @@ -11,7 +13,7 @@ const StyledDrawer = styled("div")<{ }>(({ theme, open }) => ({ width: "100%", overflowY: "auto", - maxHeight: open ? "none" : "280px", + maxHeight: open ? "none" : "250px", position: open ? "fixed" : "relative", top: open ? "56px" : "auto", bottom: open ? 0 : "auto", @@ -29,12 +31,18 @@ const StyledDrawer = styled("div")<{ const StyledOpenButton = styled(IconButton)(({ theme }) => ({ width: "100%", marginLeft: 0, + borderRadius: "10px", backgroundColor: theme.palette.background.default, - borderRadius: 0, maxHeight: "60px", "& svg": { fontSize: "4rem" }, })); +const StyledDiv = styled("div")(({ theme }) => ({ + position: "relative", + top: "-7px", + zIndex: "11", +})); + const StyledCloseButton = styled(IconButton)(({ theme }) => ({ width: "100%", marginLeft: 0, @@ -70,8 +78,9 @@ const StyledVerticalList = styled(List)(({ theme }) => ({ export default function SearchResultsMobileVerticalList({ resultsSnippet, + open, + setOpen }: Props) { - const [open, setOpen] = useState(false); const [shouldShowOpenButton, setShouldShowOpenButton] = useState(false); const toggleDrawer = (newOpen: boolean) => () => { @@ -83,7 +92,13 @@ export default function SearchResultsMobileVerticalList({ }, [resultsSnippet, open]); return ( - <> + + {shouldShowOpenButton && ( + + + + )} + {open && ( @@ -94,12 +109,7 @@ export default function SearchResultsMobileVerticalList({ {resultsSnippet} - {shouldShowOpenButton && ( - - - - )} - + ); } From ca7ee0ce0862e0fb1425fa557748e3b8c611f4a5 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sat, 14 Dec 2024 20:27:45 +0100 Subject: [PATCH 08/16] minor changes --- app/web/features/search/SearchPage.tsx | 2 - app/web/features/search/SearchResultsList.tsx | 76 ++++++++++--------- .../SearchResultsMobileVerticalList.tsx | 6 +- 3 files changed, 41 insertions(+), 43 deletions(-) diff --git a/app/web/features/search/SearchPage.tsx b/app/web/features/search/SearchPage.tsx index a9801916e5..da39baa377 100644 --- a/app/web/features/search/SearchPage.tsx +++ b/app/web/features/search/SearchPage.tsx @@ -1,4 +1,3 @@ -import { Collapse, useMediaQuery, useTheme } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import HtmlMeta from "components/HtmlMeta"; import { Coordinates } from "features/search/constants"; @@ -76,7 +75,6 @@ export default function SearchPage({ const { t } = useTranslation([GLOBAL, SEARCH]); const queryClient = new QueryClient(); const classes = useStyles(); - const theme = useTheme(); const map = useRef(); // State diff --git a/app/web/features/search/SearchResultsList.tsx b/app/web/features/search/SearchResultsList.tsx index 3ed87b3228..9adedfe1ec 100644 --- a/app/web/features/search/SearchResultsList.tsx +++ b/app/web/features/search/SearchResultsList.tsx @@ -167,48 +167,50 @@ export default function SearchResultsList({ {/* Mobile */} {isMobile && resultsSnippet && resultsSnippet?.length > 0 && ( <> - + {error && {error}} )} {/* Desktop */} - { - !isMobile && hasAtLeastOnePageResults && ( - - - - - {isLoadingState && } - - {error && {error}} - - {!isLoading && !hasAtLeastOnePageResults && ( - - {t("search_result.no_user_result_message")} - - )} - - {hasAtLeastOnePageResults && ( - - {resultsSnippet} - - )} - - - ) - } + {!isMobile && hasAtLeastOnePageResults && ( + + + + + {isLoadingState && } + + {error && {error}} + + {!isLoading && !hasAtLeastOnePageResults && ( + + {t("search_result.no_user_result_message")} + + )} + + {hasAtLeastOnePageResults && ( + + {resultsSnippet} + + )} + + + )} ); } diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index 131e3442f6..5882d9e201 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -40,7 +40,7 @@ const StyledOpenButton = styled(IconButton)(({ theme }) => ({ const StyledDiv = styled("div")(({ theme }) => ({ position: "relative", top: "-7px", - zIndex: "11", + zIndex: "11", })); const StyledCloseButton = styled(IconButton)(({ theme }) => ({ @@ -79,7 +79,7 @@ const StyledVerticalList = styled(List)(({ theme }) => ({ export default function SearchResultsMobileVerticalList({ resultsSnippet, open, - setOpen + setOpen, }: Props) { const [shouldShowOpenButton, setShouldShowOpenButton] = useState(false); @@ -108,8 +108,6 @@ export default function SearchResultsMobileVerticalList({ {resultsSnippet} - - ); } From d4003da06018443bb2d190641a83aa4e9fac22f7 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sat, 14 Dec 2024 21:02:32 +0100 Subject: [PATCH 09/16] updated tests --- app/web/features/search/SearchResultsList.test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/web/features/search/SearchResultsList.test.tsx b/app/web/features/search/SearchResultsList.test.tsx index c351e82fb3..7d8535cf21 100644 --- a/app/web/features/search/SearchResultsList.test.tsx +++ b/app/web/features/search/SearchResultsList.test.tsx @@ -54,6 +54,7 @@ describe("SearchResultsList", () => { beforeEach(() => { render( { render( Date: Sat, 14 Dec 2024 21:21:41 +0100 Subject: [PATCH 10/16] more bug fixed --- app/web/features/search/MapWrapper.tsx | 1 - app/web/features/search/SearchPage.tsx | 9 +++++++++ app/web/features/search/SearchResultsList.tsx | 4 +++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/web/features/search/MapWrapper.tsx b/app/web/features/search/MapWrapper.tsx index ad767dff4e..6125cfe68c 100644 --- a/app/web/features/search/MapWrapper.tsx +++ b/app/web/features/search/MapWrapper.tsx @@ -262,7 +262,6 @@ export default function MapWrapper({ currentBbox[1][1], ], }); - setSelectedResult(undefined); } setWasSearchPerformed(true); } diff --git a/app/web/features/search/SearchPage.tsx b/app/web/features/search/SearchPage.tsx index da39baa377..60f6f9486f 100644 --- a/app/web/features/search/SearchPage.tsx +++ b/app/web/features/search/SearchPage.tsx @@ -76,6 +76,7 @@ export default function SearchPage({ const queryClient = new QueryClient(); const classes = useStyles(); const map = useRef(); + const searchFromDashboard = !!(locationName || bbox); // State const [wasSearchPerformed, setWasSearchPerformed] = useState(false); @@ -171,6 +172,13 @@ export default function SearchPage({ locationResult.location.lat, ]); + /** + * Every time a new result is set (new search) we unselect the selected result + */ + useEffect(() => { + setSelectedResult(undefined); + }, [locationResult]) + const errorMessage = error?.message; return ( @@ -191,6 +199,7 @@ export default function SearchPage({ setSelectedResult={setSelectedResult} wasSearchPerformed={wasSearchPerformed} isLoading={isLoading || isFetching} + searchFromDashboard={searchFromDashboard} /> >; queryName: string; wasSearchPerformed: boolean; + searchFromDashboard: boolean; } export default function SearchResultsList({ @@ -113,6 +114,7 @@ export default function SearchResultsList({ setQueryName, queryName, wasSearchPerformed, + searchFromDashboard, }: mapWrapperProps) { const [open, setOpen] = useState(false); const selectedUserData = useUser(selectedResult?.userId); @@ -126,7 +128,7 @@ export default function SearchResultsList({ .flatMap((page) => page.resultsList) .filter((result) => result.user); - if (isMobile && !wasSearchPerformed) { + if (isMobile && !wasSearchPerformed && !searchFromDashboard) { resultsList = []; } From 98bba620632d31163feb396d1f60d59031392776 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sat, 14 Dec 2024 22:08:34 +0100 Subject: [PATCH 11/16] lint --- app/web/features/search/SearchPage.tsx | 2 +- app/web/features/search/SearchResultsList.test.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/web/features/search/SearchPage.tsx b/app/web/features/search/SearchPage.tsx index 60f6f9486f..c75cdaf349 100644 --- a/app/web/features/search/SearchPage.tsx +++ b/app/web/features/search/SearchPage.tsx @@ -177,7 +177,7 @@ export default function SearchPage({ */ useEffect(() => { setSelectedResult(undefined); - }, [locationResult]) + }, [locationResult]); const errorMessage = error?.message; diff --git a/app/web/features/search/SearchResultsList.test.tsx b/app/web/features/search/SearchResultsList.test.tsx index 7d8535cf21..1c811294b8 100644 --- a/app/web/features/search/SearchResultsList.test.tsx +++ b/app/web/features/search/SearchResultsList.test.tsx @@ -54,6 +54,7 @@ describe("SearchResultsList", () => { beforeEach(() => { render( { beforeEach(() => { render( Date: Sat, 14 Dec 2024 23:00:51 +0100 Subject: [PATCH 12/16] fix test --- app/web/features/search/SearchResultsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/web/features/search/SearchResultsList.tsx b/app/web/features/search/SearchResultsList.tsx index a910579e8c..93a74c998e 100644 --- a/app/web/features/search/SearchResultsList.tsx +++ b/app/web/features/search/SearchResultsList.tsx @@ -179,7 +179,7 @@ export default function SearchResultsList({ )} {/* Desktop */} - {!isMobile && hasAtLeastOnePageResults && ( + {!isMobile && ( Date: Sat, 14 Dec 2024 23:55:40 +0100 Subject: [PATCH 13/16] minor changes --- app/web/features/search/SearchPage.tsx | 2 +- app/web/features/search/SearchResultsMobileVerticalList.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/web/features/search/SearchPage.tsx b/app/web/features/search/SearchPage.tsx index c75cdaf349..0bea4ba249 100644 --- a/app/web/features/search/SearchPage.tsx +++ b/app/web/features/search/SearchPage.tsx @@ -76,7 +76,7 @@ export default function SearchPage({ const queryClient = new QueryClient(); const classes = useStyles(); const map = useRef(); - const searchFromDashboard = !!(locationName || bbox); + const searchFromDashboard = locationName !==""; // State const [wasSearchPerformed, setWasSearchPerformed] = useState(false); diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index 5882d9e201..4de80c6f0e 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -31,10 +31,11 @@ const StyledDrawer = styled("div")<{ const StyledOpenButton = styled(IconButton)(({ theme }) => ({ width: "100%", marginLeft: 0, - borderRadius: "10px", + borderRadius: "10px 10px 0 0", backgroundColor: theme.palette.background.default, maxHeight: "60px", "& svg": { fontSize: "4rem" }, + "&:hover": { backgroundColor: "#e2dcdc" }, })); const StyledDiv = styled("div")(({ theme }) => ({ From b9dc3d37a81b34440b5c79a3c669136698a3e090 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sun, 15 Dec 2024 14:37:21 +0100 Subject: [PATCH 14/16] format --- app/web/features/search/SearchPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/web/features/search/SearchPage.tsx b/app/web/features/search/SearchPage.tsx index 0bea4ba249..a50f0041cd 100644 --- a/app/web/features/search/SearchPage.tsx +++ b/app/web/features/search/SearchPage.tsx @@ -76,7 +76,7 @@ export default function SearchPage({ const queryClient = new QueryClient(); const classes = useStyles(); const map = useRef(); - const searchFromDashboard = locationName !==""; + const searchFromDashboard = locationName !== ""; // State const [wasSearchPerformed, setWasSearchPerformed] = useState(false); From aec81fc650c500c58cd4748cacdcb090c13b8995 Mon Sep 17 00:00:00 2001 From: Bakeiro Date: Sun, 29 Dec 2024 15:56:13 +0100 Subject: [PATCH 15/16] minor CSS changes --- .../search/SearchResultsMobileVerticalList.tsx | 11 ++++++----- app/web/theme.ts | 3 +++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index 4de80c6f0e..c084edf5ae 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -13,7 +13,7 @@ const StyledDrawer = styled("div")<{ }>(({ theme, open }) => ({ width: "100%", overflowY: "auto", - maxHeight: open ? "none" : "250px", + maxHeight: open ? "none" : "220px", position: open ? "fixed" : "relative", top: open ? "56px" : "auto", bottom: open ? 0 : "auto", @@ -31,16 +31,17 @@ const StyledDrawer = styled("div")<{ const StyledOpenButton = styled(IconButton)(({ theme }) => ({ width: "100%", marginLeft: 0, - borderRadius: "10px 10px 0 0", + borderRadius: "15px 15px 0 0", + boxShadow: "0px -4px 5px 0px rgba(17, 17, 26, 0.08)", backgroundColor: theme.palette.background.default, - maxHeight: "60px", + maxHeight: "50px", "& svg": { fontSize: "4rem" }, "&:hover": { backgroundColor: "#e2dcdc" }, })); const StyledDiv = styled("div")(({ theme }) => ({ position: "relative", - top: "-7px", + top: "-12px", zIndex: "11", })); @@ -53,7 +54,7 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({ backgroundColor: theme.palette.background.default, borderRadius: 0, zIndex: theme.zIndex.drawer, - "& svg": { fontSize: "4rem" }, + "& svg": { fontSize: "3.5rem" }, })); const StyledVerticalList = styled(List)(({ theme }) => ({ diff --git a/app/web/theme.ts b/app/web/theme.ts index 4e24a1ab87..7161fbba43 100644 --- a/app/web/theme.ts +++ b/app/web/theme.ts @@ -47,6 +47,9 @@ const themeOptions: ThemeOptions = { textDecoration: "none", color: "inherit", }, + '.maplibregl-ctrl-bottom-right': { + bottom: '7px !important', + } }, }, MuiFormLabel: { From 8e1c4888944303f5567ff004aee42c3d4f8e2f41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Baqueiro=20Santerb=C3=A1s?= Date: Thu, 2 Jan 2025 13:09:13 +0100 Subject: [PATCH 16/16] Update SearchResultsMobileVerticalList.tsx --- app/web/features/search/SearchResultsMobileVerticalList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/web/features/search/SearchResultsMobileVerticalList.tsx b/app/web/features/search/SearchResultsMobileVerticalList.tsx index c084edf5ae..22851bf04f 100644 --- a/app/web/features/search/SearchResultsMobileVerticalList.tsx +++ b/app/web/features/search/SearchResultsMobileVerticalList.tsx @@ -54,7 +54,7 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({ backgroundColor: theme.palette.background.default, borderRadius: 0, zIndex: theme.zIndex.drawer, - "& svg": { fontSize: "3.5rem" }, + "& svg": { fontSize: "3rem" }, })); const StyledVerticalList = styled(List)(({ theme }) => ({