Skip to content

Commit

Permalink
feat: handle search (#15)
Browse files Browse the repository at this point in the history
  • Loading branch information
pyphilia authored Feb 1, 2024
1 parent c059a7f commit 5cea532
Show file tree
Hide file tree
Showing 14 changed files with 131 additions and 74 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/deploy-dev.yml
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ jobs:
uses: graasp/graasp-deploy/.github/actions/deploy-s3@v1
# Replace input build-folder or version if needed
with:
build-folder: 'build'
build-folder: 'dist'
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_DEV }}
aws-region: ${{ secrets.AWS_REGION_DEV }}
aws-s3-bucket-name: ${{ vars.AWS_S3_BUCKET_NAME }}
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/deploy-prod.yml
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ jobs:
uses: graasp/graasp-deploy/.github/actions/deploy-s3@v1
# Replace input build-folder or version if needed
with:
build-folder: 'build'
build-folder: 'dist'
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_PROD }}
aws-region: ${{ secrets.AWS_REGION_PROD }}
aws-s3-bucket-name: ${{ vars.AWS_S3_BUCKET_NAME }}
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/deploy-stage.yml
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ jobs:
uses: graasp/graasp-deploy/.github/actions/deploy-s3@v1
# Replace input build-folder or version if needed
with:
build-folder: 'build'
build-folder: 'dist'
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_STAGE }}
aws-region: ${{ secrets.AWS_REGION_STAGE }}
aws-s3-bucket-name: ${{ vars.AWS_S3_BUCKET_NAME }}
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"pre-commit": "yarn prettier:check && yarn lint && yarn type-check",
"prettier:check": "prettier --check {src,cypress}/**/*.{js,ts,tsx,json}",
"prettier:write": "prettier --write {src,cypress}/**/*.{js,ts,tsx,json}",
"type-check": "tsc --noEmit && tsc --noEmit -p cypress/tsconfig.json",
"type-check": "tsc --noEmit",
"check": "yarn prettier:check && yarn lint && yarn type-check"
},
"dependencies": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/autocomplete/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const AutoCompleteInput = ({
}: Props): JSX.Element => (
<Autocomplete
value={value}
onChange={(event: any, newValue: Country | null) => {
onChange={(_event: any, newValue: Country | null) => {
setValue(newValue);
}}
disablePortal
Expand Down
17 changes: 11 additions & 6 deletions src/components/map/CurrentLocationMarker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,21 @@ const CurrentLocationMarker = (): JSX.Element | null => {
maximumAge: 0,
};

const success = (pos) => {
const success = (pos: {
coords: { latitude: number; longitude: number };
}) => {
const crd = pos.coords;
setPosition([crd.latitude, crd.longitude]);
};

const error = (err) => {
console.warn(`ERROR(${err.code}): ${err.message}`);
};

navigator.geolocation.getCurrentPosition(success, error, options);
navigator.geolocation.getCurrentPosition(
success,
(err: { code: number; message: string }) => {
// eslint-disable-next-line no-console
console.warn(`ERROR(${err.code}): ${err.message}`);
},
options,
);

if (!position) {
return null;
Expand Down
13 changes: 7 additions & 6 deletions src/components/map/GeographicSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,23 @@ type Props = {

const GeographicSearch = ({ lat, lng, onClick }: Props): null => {
const map = useMap();
const provider = new OpenStreetMapProvider();

useMapEvents({
click: onClick,
});

const searchControl = new GeoSearchControl({
provider,
});

useEffect(() => {
const provider = new OpenStreetMapProvider();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const searchControl = new GeoSearchControl({
provider,
});
map.addControl(searchControl);
return () => {
map.removeControl(searchControl);
};
}, []);
}, [map]);

useEffect(() => {
map.flyTo({ lat, lng }, 10);
Expand Down
16 changes: 12 additions & 4 deletions src/components/map/ItemsMarkers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
import { hooks } from '../../config/queryClient';
import { iconsPerParent } from '../icons/icons';

const ItemsMarkers = (): JSX.Element | JSX.Element[] | undefined => {
const ItemsMarkers = ({
tags,
}: {
tags: string[];
}): JSX.Element | JSX.Element[] | undefined => {
const map = useMap();

const [bounds, setBounds] = useState({
Expand All @@ -13,7 +17,10 @@ const ItemsMarkers = (): JSX.Element | JSX.Element[] | undefined => {
lng1: 0,
lng2: 10,
});
const { data: itemGeolocations } = hooks.useItemsInMap(bounds);
const { data: itemGeolocations } = hooks.useItemsInMap({
...bounds,
keywords: tags,
});

const updateBounds = () => {
const b = map.getBounds();
Expand All @@ -26,16 +33,17 @@ const ItemsMarkers = (): JSX.Element | JSX.Element[] | undefined => {
};

useMapEvents({
zoomend: (e) => {
zoomend: (_e) => {
updateBounds();
},
dragend: (e) => {
dragend: (_e) => {
updateBounds();
},
});

useEffect(() => {
updateBounds();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return itemGeolocations?.map(({ lat, lng, item: { name, description } }) => (
Expand Down
16 changes: 9 additions & 7 deletions src/components/map/Map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { MapContainer, TileLayer } from 'react-leaflet';
import { LatLng } from 'leaflet';

import { legends } from '../../config/constants';
import { markers } from '../../data/data';
import { MarkerProps, Point } from '../../types';
import Search from '../search/Search';
import AddItemModal from './AddItemModal';
Expand Down Expand Up @@ -35,11 +34,10 @@ import Legends from './Legends';
const Map = (): JSX.Element => {
const [center, setCenter] = useState<[number, number]>([51.505, -0.09]); // Default center coordinates

const [isItemSearchDialogOpen, setIsItemSearchDialogOpen] = useState(false);
const [itemsList] = useState(markers);
const [isItemSearchDialogOpen] = useState(false);

const [selectedItem, setSelectedItem] = useState<null | MarkerProps>(null);
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const [selectedItem] = useState<null | MarkerProps>(null);
const [tags, setTags] = useState<string[]>([]);

// click on pint at the map
const [clickedPoint, setClickedPoint] = useState<Point>([]);
Expand Down Expand Up @@ -93,6 +91,10 @@ const Map = (): JSX.Element => {
}
};

const onChangeTags = (newTags: any) => {
setTags(newTags);
};

return (
<>
{Boolean(clickedPoint.length) && (
Expand All @@ -106,7 +108,7 @@ const Map = (): JSX.Element => {
{/* {showCountryForm && <CountryForm />} */}

<div className="map-container">
<Search />
<Search onChange={onChangeTags} />

<MapContainer
center={center}
Expand All @@ -119,7 +121,7 @@ const Map = (): JSX.Element => {
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
<CurrentLocationMarker />
<ItemsMarkers />
<ItemsMarkers tags={tags} />

<GeographicSearch
onClick={handleClick}
Expand Down
4 changes: 1 addition & 3 deletions src/components/search/CustomSearchMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const list: { label: MarkerParent }[] = [
{ label: 'Published' },
];
interface Props {
isItemSearchDialogOpen: boolean;
itemsList: MarkerProps[];
setSelectedItem: (val: MarkerProps) => void;
closeMenu: () => void;
Expand All @@ -24,7 +23,6 @@ interface Props {
anchorEl: HTMLInputElement | null;
}
const CustomSearch = ({
isItemSearchDialogOpen,
itemsList,
setSelectedItem,
closeMenu,
Expand All @@ -46,7 +44,7 @@ const CustomSearch = ({

return (
<Popover
open={isItemSearchDialogOpen}
open
onClose={closeMenu}
anchorOrigin={{
vertical: 'bottom',
Expand Down
104 changes: 73 additions & 31 deletions src/components/search/Search.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,91 @@
import { ChangeEvent, MouseEvent, useState } from 'react';
import { Autocomplete, Box, Stack, TextField } from '@mui/material';

import { TextField } from '@mui/material';
const Search = ({
onChange,
}: {
onChange: (newTags: string[]) => void;
}): JSX.Element => {
// const [anchor, setAnchor] = useState<HTMLInputElement | null>(null);
// const [markerSearch, setMarkerSearch] = useState('');
// const [open, setOpen] = useState(false);

import CustomSearch from './CustomSearchMenu';
// const handleInputClick = (e: MouseEvent<HTMLInputElement>) => {
// setAnchor(e.currentTarget);
// };

const Search = (): JSX.Element => {
const [anchor, setAnchor] = useState<HTMLInputElement | null>(null);
const [markerSearch, setMarkerSearch] = useState('');
const [open, setOpen] = useState(false);
// const handleDialogClose = () => {};

const handleInputClick = (e: MouseEvent<HTMLInputElement>) => {
setAnchor(e.currentTarget);
};

const handleDialogClose = () => {};
// const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
// setMarkerSearch(e.target.value);
// };

const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setMarkerSearch(e.target.value);
const onChangeTags = (_e: unknown, newValue: string[]) => {
onChange(newValue);
};

return (
<form className="custom-search-input">
<TextField
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
zIndex: 9999,
}}
>
<Stack
direction="column"
justifyContent="center"
alignItems="center"
py={2}
>
<Stack
sx={{
background: 'white',
}}
p={2}
>
<form>
<Autocomplete
multiple
options={[]}
// getOptionLabel={(option) => option.title}
freeSolo
renderInput={(params) => (
<TextField
// eslint-disable-next-line react/jsx-props-no-spreading
{...params}
placeholder="Search here..."
variant="outlined"
label="Search"
sx={{ width: 400 }}
/>
)}
onChange={onChangeTags}
/>
{/* <TextField
placeholder="Search About an Item"
variant="outlined"
onClick={handleInputClick}
value={markerSearch}
onChange={handleInputChange}
sx={{ background: 'white' }}
/>
{open && (
<CustomSearch
isItemSearchDialogOpen={open}
itemsList={[]}
setSelectedItem={() => {}}
closeMenu={handleDialogClose}
selectedTags={[]}
// isChecked={true}
setIsChecked={() => {}}
setSelectedTags={() => []}
anchorEl={anchor}
/>
)}
</form>
<CustomSearch
isItemSearchDialogOpen={open}
itemsList={[]}
setSelectedItem={() => {}}
closeMenu={handleDialogClose}
selectedTags={[]}
// isChecked={true}
setIsChecked={() => {}}
setSelectedTags={() => []}
anchorEl={anchor}
/> */}
</form>
</Stack>
</Stack>
</Box>
);
};

export default Search;
2 changes: 1 addition & 1 deletion src/components/tags/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ToggleButtonsMultiple = ({
setValue,
}: Props): JSX.Element => {
const handleSelect = (
event: React.MouseEvent<HTMLElement>,
_event: React.MouseEvent<HTMLElement>,
ele: string[],
) => {
setValue(ele);
Expand Down
1 change: 1 addition & 0 deletions src/config/constants.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line import/prefer-default-export
export const legends = [
{ title: 'MyItems', color: '#2A81CB' },
{ title: 'Published', color: '#2AAD27' },
Expand Down
Loading

0 comments on commit 5cea532

Please sign in to comment.