Skip to content

Commit

Permalink
Added search context and reworked popup structure
Browse files Browse the repository at this point in the history 
Signed-off-by: Emil Balitzki <emil.balitzki@gmail.com>
  • Loading branch information
@Corgam
Corgam committed May 21, 2024
1 parent 82262c5 commit 89d8d11
Show file tree
Hide file tree
Showing 6 changed files with 289 additions and 238 deletions.
58 changes: 10 additions & 48 deletions frontend/src/components/DataView/DataView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,9 @@ import TabContext from "@mui/lab/TabContext/TabContext";
import Tab from "@mui/material/Tab/Tab";
import TabList from "@mui/lab/TabList/TabList";
import { CaretDown } from "@phosphor-icons/react";
import PopUp from "../Popup/Popup";
import { useContext, useState } from "react";
import { TabsContext } from "../../contexts/TabsContext";

interface OptionItem {
id: string;
displayValue: string;
}
import SearchPopUp from "../PopUp/SearchPopUp";

function DataView() {
// Access the tabs context
Expand All @@ -30,34 +25,12 @@ function DataView() {
return currentTab ? currentTab.title : "No map loaded";
};

const [openDialog, setOpenDialog] = useState(false);

const handleOpenDialog = () => {
setOpenDialog(true);
// Stores the state of if the search popup is open
const [ifOpenedDialog, setIfOpenedDialog] = useState(false);
const toggleIfOpenedDialog = () => {
setIfOpenedDialog(!ifOpenedDialog);
};

const handleCloseDialog = () => {
setOpenDialog(false);
};

const [favorites, setFavorites] = useState<OptionItem[]>([
{ id: "1", displayValue: "Nuremberg" },
{ id: "2", displayValue: "Munich" },
]);
const [options] = useState<OptionItem[]>([
{ id: "1", displayValue: "Nuremberg" },
{ id: "2", displayValue: "Munich" },
{
id: "3",
displayValue: "Andreij Sacharow Platz 1, 90402 Nuremberg",
},
{ id: "4", displayValue: "Main train station Nuremberg" },
{ id: "5", displayValue: "Walter-Meckauer-Street 20" },
{ id: "6", displayValue: "49°26'46.6\"N 11°04'33.7\"E" },
]);

const onCurrentSearchChanged = () => {};

return (
<div className="dataview-container">
<TabContext value="1">
Expand All @@ -77,23 +50,12 @@ function DataView() {
<CaretDown
weight="bold"
className="location-icon"
onClick={handleOpenDialog}
onClick={toggleIfOpenedDialog}
/>
<PopUp
title="Locations"
favorites={favorites}
setFavorites={setFavorites}
onClose={handleCloseDialog}
openDialog={openDialog}
onCurrentSearchChanged={onCurrentSearchChanged}
options={options}
onItemSelected={(item) => {
handleCloseDialog();
setTimeout(() => {
alert(item.displayValue);
}, 400);
}}
></PopUp>
<SearchPopUp
onToggleIfOpenedDialog={toggleIfOpenedDialog}
ifOpenedDialog={ifOpenedDialog}
></SearchPopUp>
</div>
</div>
}
Expand Down
58 changes: 10 additions & 48 deletions frontend/src/components/MapView/MapOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,66 +2,28 @@ import { useState } from "react";
import { MagnifyingGlass } from "@phosphor-icons/react";
import "./MapOptions.css";
import { Tooltip } from "@mui/material";
import PopUp from "../Popup/Popup";

interface OptionItem {
id: string;
displayValue: string;
}
import SearchPopUp from "../PopUp/SearchPopUp";

const MapOptions: React.FC = () => {
const [openDialog, setOpenDialog] = useState(false);

const handleOpenDialog = () => {
setOpenDialog(true);
};

const handleCloseDialog = () => {
setOpenDialog(false);
// Stores the state of if the search popup is open
const [ifOpenedDialog, setIfOpenedDialog] = useState(false);
const toggleIfOpenedDialog = () => {
setIfOpenedDialog(!ifOpenedDialog);
};

const [favorites, setFavorites] = useState<OptionItem[]>([
{ id: "1", displayValue: "Nuremberg" },
{ id: "2", displayValue: "Munich" },
]);
const [options] = useState<OptionItem[]>([
{ id: "1", displayValue: "Nuremberg" },
{ id: "2", displayValue: "Munich" },
{
id: "3",
displayValue: "Andreij Sacharow Platz 1, 90402 Nuremberg",
},
{ id: "4", displayValue: "Main train station Nuremberg" },
{ id: "5", displayValue: "Walter-Meckauer-Street 20" },
{ id: "6", displayValue: "49°26'46.6\"N 11°04'33.7\"E" },
]);

const onCurrentSearchChanged = () => {};

return (
<div className="map-options-container">
<Tooltip arrow title="Search for an address">
<MagnifyingGlass
weight="duotone"
className="search-map-icon"
onClick={handleOpenDialog}
onClick={toggleIfOpenedDialog}
/>
</Tooltip>
<PopUp
title="Locations"
favorites={favorites}
setFavorites={setFavorites}
onClose={handleCloseDialog}
openDialog={openDialog}
onCurrentSearchChanged={onCurrentSearchChanged}
options={options}
onItemSelected={(item) => {
handleCloseDialog();
setTimeout(() => {
alert(item.displayValue);
}, 400);
}}
></PopUp>
<SearchPopUp
onToggleIfOpenedDialog={toggleIfOpenedDialog}
ifOpenedDialog={ifOpenedDialog}
/>
</div>
);
};
Expand Down
149 changes: 12 additions & 137 deletions frontend/src/components/Popup/Popup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,30 @@
import React, { Dispatch, SetStateAction, useState } from "react";
import React from "react";
import {
IconButton,
List,
ListItem,
ListItemButton,
ListItemText,
Dialog,
DialogActions,
DialogTitle,
DialogContent,
Button,
Divider,
TextField,
} from "@mui/material";
import StarIcon from "@mui/icons-material/Star";

interface FavorableItem {
id: string; // Unique identifier for the item
displayValue: string; // Display value shown in the list
}

interface PopUpProps {
openDialog: boolean;
ifOpenedDialog: boolean;
onClose: () => void;
title: string;
favorites: FavorableItem[];
setFavorites: Dispatch<SetStateAction<FavorableItem[]>>;
options: FavorableItem[];
onCurrentSearchChanged: (currentSearch: string) => void;
onItemSelected: (selection: FavorableItem) => void;
children: React.ReactNode;
}

// This is the partent component for all PopUps.
// - ifOpenedDialog - a boolean storing if the popup is currently opened.
// - onClose - on close function handler
// - title - the title of the PopUp
// - children - all children JSX components
const PopUp: React.FC<PopUpProps> = ({
openDialog,
ifOpenedDialog,
onClose,
title,
favorites,
setFavorites,
options,
onCurrentSearchChanged,
onItemSelected,
children,
}) => {
const [searchText, setSearchText] = useState("");

const filterBySearchText = (item: FavorableItem) => {
return item.displayValue.toLowerCase().includes(searchText.toLowerCase());
};

const filterBySearchtxtAndIfInFavorites = (item: FavorableItem) => {
return (
item.displayValue.toLowerCase().includes(searchText.toLowerCase()) &&
!favorites.some((fav) => fav.id === item.id)
);
};

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(e.target.value);
onCurrentSearchChanged(e.target.value);
};

const addToFavorite = (item: FavorableItem) => {
if (!favorites.some((fav) => fav.id === item.id)) {
setFavorites([...favorites, item]);
}
};

const removeFromFavorite = (itemToRemove: FavorableItem) => {
const updatedFavorites = favorites.filter(
(item) => item.id !== itemToRemove.id
);
setFavorites(updatedFavorites);
};

return (
<Dialog
sx={{
Expand All @@ -82,89 +35,11 @@ const PopUp: React.FC<PopUpProps> = ({
},
},
}}
open={openDialog}
open={ifOpenedDialog}
onClose={onClose}
>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<TextField
value={searchText}
onChange={handleChange}
margin="dense"
id="outlined-basic"
label="Search"
variant="outlined"
fullWidth
/>
<List dense={false}>
{favorites.filter(filterBySearchText).map((item, index) => (
<ListItem
key={index}
secondaryAction={
<IconButton
edge="end"
aria-label="unfavorite"
onClick={() => removeFromFavorite(item)}
>
<StarIcon style={{ fill: "yellow", stroke: "black" }} />
</IconButton>
}
disablePadding
>
<ListItemButton key={index} onClick={() => onItemSelected(item)}>
<ListItemText
primary={item.displayValue}
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "500px", // Set your width here
},
},
}}
/>
</ListItemButton>
</ListItem>
))}
<Divider />
{options
.filter(filterBySearchtxtAndIfInFavorites)
.map((item, index) => (
<ListItem
key={index}
secondaryAction={
<IconButton
edge="end"
aria-label="favorite"
onClick={() => addToFavorite(item)}
>
<StarIcon
style={{ fill: "transparent", stroke: "black" }}
/>
</IconButton>
}
disablePadding
>
<ListItemButton
key={index}
onClick={() => onItemSelected(item)}
>
<ListItemText
primary={item.displayValue}
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "500px", // Set your width here
},
},
}}
/>
</ListItemButton>
</ListItem>
))}
</List>
</DialogContent>
<DialogContent>{children}</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
Close
Expand Down
Loading

0 comments on commit 89d8d11

Please sign in to comment.