From 5cea532b066d0a0717479a9429737cf1c86bf0fb Mon Sep 17 00:00:00 2001 From: Kim Lan Phan Hoang Date: Thu, 1 Feb 2024 17:18:08 +0100 Subject: [PATCH] feat: handle search (#15) --- .github/workflows/deploy-dev.yml | 2 +- .github/workflows/deploy-prod.yml | 2 +- .github/workflows/deploy-stage.yml | 2 +- package.json | 2 +- src/components/autocomplete/index.tsx | 2 +- src/components/map/CurrentLocationMarker.tsx | 17 +-- src/components/map/GeographicSearch.tsx | 13 +-- src/components/map/ItemsMarkers.tsx | 16 ++- src/components/map/Map.tsx | 16 +-- src/components/search/CustomSearchMenu.tsx | 4 +- src/components/search/Search.tsx | 104 +++++++++++++------ src/components/tags/index.tsx | 2 +- src/config/constants.ts | 1 + yarn.lock | 22 ++-- 14 files changed, 131 insertions(+), 74 deletions(-) diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml index 7d4f686..f6e7418 100644 --- a/.github/workflows/deploy-dev.yml +++ b/.github/workflows/deploy-dev.yml @@ -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 }} diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml index db40153..7243d7f 100644 --- a/.github/workflows/deploy-prod.yml +++ b/.github/workflows/deploy-prod.yml @@ -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 }} diff --git a/.github/workflows/deploy-stage.yml b/.github/workflows/deploy-stage.yml index ebb40ec..5b1d41a 100644 --- a/.github/workflows/deploy-stage.yml +++ b/.github/workflows/deploy-stage.yml @@ -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 }} diff --git a/package.json b/package.json index 7648cb8..b1a57f7 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/components/autocomplete/index.tsx b/src/components/autocomplete/index.tsx index ce2ae4d..c99018c 100644 --- a/src/components/autocomplete/index.tsx +++ b/src/components/autocomplete/index.tsx @@ -16,7 +16,7 @@ const AutoCompleteInput = ({ }: Props): JSX.Element => ( { + onChange={(_event: any, newValue: Country | null) => { setValue(newValue); }} disablePortal diff --git a/src/components/map/CurrentLocationMarker.tsx b/src/components/map/CurrentLocationMarker.tsx index 3891f4f..7328f1f 100644 --- a/src/components/map/CurrentLocationMarker.tsx +++ b/src/components/map/CurrentLocationMarker.tsx @@ -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; diff --git a/src/components/map/GeographicSearch.tsx b/src/components/map/GeographicSearch.tsx index 058a2c6..b8ca4a6 100644 --- a/src/components/map/GeographicSearch.tsx +++ b/src/components/map/GeographicSearch.tsx @@ -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); diff --git a/src/components/map/ItemsMarkers.tsx b/src/components/map/ItemsMarkers.tsx index e410d24..dd198d6 100644 --- a/src/components/map/ItemsMarkers.tsx +++ b/src/components/map/ItemsMarkers.tsx @@ -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({ @@ -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(); @@ -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 } }) => ( diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 04a7cb0..a4f0fcf 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -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'; @@ -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); - const [selectedTags, setSelectedTags] = useState([]); + const [selectedItem] = useState(null); + const [tags, setTags] = useState([]); // click on pint at the map const [clickedPoint, setClickedPoint] = useState([]); @@ -93,6 +91,10 @@ const Map = (): JSX.Element => { } }; + const onChangeTags = (newTags: any) => { + setTags(newTags); + }; + return ( <> {Boolean(clickedPoint.length) && ( @@ -106,7 +108,7 @@ const Map = (): JSX.Element => { {/* {showCountryForm && } */}
- + { attribution='© OpenStreetMap contributors' /> - + void; closeMenu: () => void; @@ -24,7 +23,6 @@ interface Props { anchorEl: HTMLInputElement | null; } const CustomSearch = ({ - isItemSearchDialogOpen, itemsList, setSelectedItem, closeMenu, @@ -46,7 +44,7 @@ const CustomSearch = ({ return ( void; +}): JSX.Element => { + // const [anchor, setAnchor] = useState(null); + // const [markerSearch, setMarkerSearch] = useState(''); + // const [open, setOpen] = useState(false); -import CustomSearch from './CustomSearchMenu'; + // const handleInputClick = (e: MouseEvent) => { + // setAnchor(e.currentTarget); + // }; -const Search = (): JSX.Element => { - const [anchor, setAnchor] = useState(null); - const [markerSearch, setMarkerSearch] = useState(''); - const [open, setOpen] = useState(false); + // const handleDialogClose = () => {}; - const handleInputClick = (e: MouseEvent) => { - setAnchor(e.currentTarget); - }; - - const handleDialogClose = () => {}; + // const handleInputChange = (e: ChangeEvent) => { + // setMarkerSearch(e.target.value); + // }; - const handleInputChange = (e: ChangeEvent) => { - setMarkerSearch(e.target.value); + const onChangeTags = (_e: unknown, newValue: string[]) => { + onChange(newValue); }; return ( -
- + + + + option.title} + freeSolo + renderInput={(params) => ( + + )} + onChange={onChangeTags} + /> + {/* - {open && ( - {}} - closeMenu={handleDialogClose} - selectedTags={[]} - // isChecked={true} - setIsChecked={() => {}} - setSelectedTags={() => []} - anchorEl={anchor} /> - )} - + {}} + closeMenu={handleDialogClose} + selectedTags={[]} + // isChecked={true} + setIsChecked={() => {}} + setSelectedTags={() => []} + anchorEl={anchor} + /> */} + + + + ); }; - export default Search; diff --git a/src/components/tags/index.tsx b/src/components/tags/index.tsx index 095b5c7..359bf4b 100644 --- a/src/components/tags/index.tsx +++ b/src/components/tags/index.tsx @@ -31,7 +31,7 @@ const ToggleButtonsMultiple = ({ setValue, }: Props): JSX.Element => { const handleSelect = ( - event: React.MouseEvent, + _event: React.MouseEvent, ele: string[], ) => { setValue(ele); diff --git a/src/config/constants.ts b/src/config/constants.ts index 856414e..14cd3fc 100644 --- a/src/config/constants.ts +++ b/src/config/constants.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line import/prefer-default-export export const legends = [ { title: 'MyItems', color: '#2A81CB' }, { title: 'Published', color: '#2AAD27' }, diff --git a/yarn.lock b/yarn.lock index 9dc0ce0..7f0d999 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1002,11 +1002,11 @@ __metadata: linkType: hard "@graasp/query-client@github:graasp/graasp-query-client#main": - version: 2.3.2 - resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=48ed2813891f2166a8a836bba9913396e40c0825" + version: 2.4.2 + resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=1f8598e9494b32d37feda3262fb3d12decec6286" dependencies: "@graasp/sdk": "npm:3.6.0" - "@graasp/translations": "github:graasp/graasp-translations#geolocation" + "@graasp/translations": "npm:1.23.0" axios: "npm:0.27.2" crypto-js: "npm:4.2.0" date-fns: "npm:3.3.1" @@ -1016,7 +1016,7 @@ __metadata: uuid: "npm:9.0.1" peerDependencies: react: ^17.0.0 || ^18.0.0 - checksum: 3c5bf601018e32dfb293147de888803f2b022d366bdfef7dc462a6a49e89b11c9c134d236c7735b0b4660a8d0a24431129c3f07eeeaf92f3d92c5322bd9fce9a + checksum: 72348009a97a62bf18019886e2dc5b5bcb04198c5151da56fbeaa3e67d53c279214bc0010188ee8fd1f6dea90ac9325d725ee757409ebc0c7ad589aa38bf4fa8 languageName: node linkType: hard @@ -1045,21 +1045,21 @@ __metadata: languageName: node linkType: hard -"@graasp/translations@github:graasp/graasp-translations#geolocation": +"@graasp/translations@npm:1.22.1": version: 1.22.1 - resolution: "@graasp/translations@https://github.com/graasp/graasp-translations.git#commit=38e9980b5d0450a1fe80b942aae798b20b01ab89" + resolution: "@graasp/translations@npm:1.22.1" dependencies: i18next: "npm:23.7.16" - checksum: d4499181f921aa08bbaf8c7f191d03d5b463c3d55ebb377ccd17edb6603643b239eb5d33af2e8476bca906f1ed5e3bc47271bbfedac1ba471fd393c0ecddb426 + checksum: 29043007a9926ff54236101c41ceb92eead09d8ce99edf46943790171f3275fb2cc1acd552bfa605247c42b4866bbf1f83dd889da3f571d388eca5f2dd598e17 languageName: node linkType: hard -"@graasp/translations@npm:1.22.1": - version: 1.22.1 - resolution: "@graasp/translations@npm:1.22.1" +"@graasp/translations@npm:1.23.0": + version: 1.23.0 + resolution: "@graasp/translations@npm:1.23.0" dependencies: i18next: "npm:23.7.16" - checksum: 29043007a9926ff54236101c41ceb92eead09d8ce99edf46943790171f3275fb2cc1acd552bfa605247c42b4866bbf1f83dd889da3f571d388eca5f2dd598e17 + checksum: dc0d605b520a28deb1ad3054323dc4b71f709b79adf5924552c602f3c3ed2fa7c3c8538a3015c86c8db05867159df4b2f6ad18583766b2b97c8dd850952d29e2 languageName: node linkType: hard