From 5d7571ca81a675236b6d56de2881641d15e37982 Mon Sep 17 00:00:00 2001 From: Desoindx Date: Sun, 23 Jan 2022 15:15:55 +0100 Subject: [PATCH] Display map on mobile --- src/components/Directory.styles.ts | 27 -- src/components/Directory.tsx | 320 ------------------ src/components/Directory/Directory.styles.ts | 57 ++++ .../{ => Directory}/Psychologist.tsx | 21 +- .../{ => Directory}/PsychologistsMap.tsx | 23 +- src/components/Directory/ResultsDesktop.tsx | 84 +++++ src/components/Directory/ResultsMobile.tsx | 27 ++ src/components/Directory/SearchBar.tsx | 205 +++++++++++ src/components/Directory/index.tsx | 130 +++++++ src/components/Psychologist.styles.ts | 13 - src/css/style.css | 8 + src/db/seeds/index.ts | 4 +- 12 files changed, 534 insertions(+), 385 deletions(-) delete mode 100644 src/components/Directory.styles.ts delete mode 100644 src/components/Directory.tsx create mode 100644 src/components/Directory/Directory.styles.ts rename src/components/{ => Directory}/Psychologist.tsx (69%) rename src/components/{ => Directory}/PsychologistsMap.tsx (59%) create mode 100644 src/components/Directory/ResultsDesktop.tsx create mode 100644 src/components/Directory/ResultsMobile.tsx create mode 100644 src/components/Directory/SearchBar.tsx create mode 100644 src/components/Directory/index.tsx delete mode 100644 src/components/Psychologist.styles.ts diff --git a/src/components/Directory.styles.ts b/src/components/Directory.styles.ts deleted file mode 100644 index ca7405ae..00000000 --- a/src/components/Directory.styles.ts +++ /dev/null @@ -1,27 +0,0 @@ -import styled from "styled-components"; - -export const DirectoryWrapper = styled.div` - margin-bottom: 32px; - height: calc(100vh - 116.5px); - overflow: hidden; - display: flex; - flex-direction: column; -`; - -export const Results = styled.div` - display: flex; - flex: 1 1 auto; - overflow: hidden; -`; - -export const Search = styled.div` - display: flex; - align-items: flex-end; - flex: 0 1 auto; - margin: 24px 0; -`; - -export const Psychologists = styled.div` - overflow: scroll; - margin-right: 16px; -`; diff --git a/src/components/Directory.tsx b/src/components/Directory.tsx deleted file mode 100644 index d193e5db..00000000 --- a/src/components/Directory.tsx +++ /dev/null @@ -1,320 +0,0 @@ -import { Alert, Button, Col, SearchableSelect } from "@dataesr/react-dsfr"; -import axios from "axios"; -import { useRouter } from "next/router"; -import React, { createRef, useEffect, useRef, useState } from "react"; - -import { Coordinates } from "../types/coordinates"; -import { FILTER } from "../types/enums/filters"; -import { Psychologist as PsychologistType } from "../types/psychologist"; -import { - DirectoryWrapper, - Psychologists, - Results, - Search, -} from "./Directory.styles"; -import Psychologist from "./Psychologist"; -import PsychologistsMap from "./PsychologistsMap"; -import { getDepartment } from "./utils/departments"; - -const AROUND_ME = "Autour de moi"; -const AROUND_ME_OPTION = [{ label: AROUND_ME, value: AROUND_ME }]; - -const geoStatusEnum = { - DENIED: -1, - GRANTED: 1, - UNKNOWN: 0, - UNSUPPORTED: -2, -}; - -const Directory = () => { - const router = useRouter(); - - const [coords, setCoords] = useState(); - const [geoStatus, setGeoStatus] = useState(geoStatusEnum.UNKNOWN); - const [geoLoading, setGeoLoading] = useState(false); - const [options, setOptions] = useState(AROUND_ME_OPTION); - const currentPageRef = useRef(0); - - const [psychologists, setPsychologists] = useState(); - const psychologistsRefs = useRef(); - const resultsRef = useRef(null); - const [selectedPsychologist, setSelectedPsychologist] = useState(); - const [mapCenter, setMapCenter] = useState(); - - const [filter, setFilter] = useState(""); - const [filterText, setFilterText] = useState(""); - - const loadPsychologists = (currentPage) => { - let query = `?${FILTER.PAGE_INDEX}=${currentPage}`; - if (coords) { - query = `${query}&${FILTER.LONGITUDE}=${coords.longitude}&${FILTER.LATITUDE}=${coords.latitude}`; - setMapCenter(coords); - } - axios.get(`/api/psychologists${query}`).then((response) => { - if (currentPage === 0) { - const refs = {}; - response.data.forEach((x) => (refs[x.id] = createRef())); - psychologistsRefs.current = refs; - if (resultsRef.current) { - resultsRef.current.scrollTo({ top: 0 }); - } - setSelectedPsychologist(null); - setPsychologists(response.data); - } else { - response.data.forEach( - (x) => (psychologistsRefs.current[x.id] = createRef()) - ); - setPsychologists(psychologists.concat(response.data)); - } - - if (!coords) { - const [longitude, latitude] = response.data[0].coordinates.coordinates; - setMapCenter({ - latitude, - longitude, - }); - } - }); - }; - - useEffect(() => { - if (process.env.NEXT_PUBLIC_DISPLAY_DIRECTORY !== "true") { - router.push("/"); - } else { - loadPsychologists(0); - } - }, []); - - const success = (pos) => { - const { longitude, latitude } = pos.coords; - setCoords({ latitude, longitude }); - setGeoStatus(geoStatusEnum.GRANTED); - setGeoLoading(false); - }; - - const errors = () => { - setGeoStatus(geoStatusEnum.DENIED); - }; - - const getGeolocation = (state) => { - if (state === "granted") { - setGeoLoading(true); - navigator.geolocation.getCurrentPosition(success); - } else if (state === "prompt") { - setGeoLoading(true); - navigator.geolocation.getCurrentPosition(success, errors); - } else if (state === "denied") { - setGeoStatus(geoStatusEnum.DENIED); - } - }; - - const checkGeolocationPermission = () => { - if (navigator.geolocation) { - navigator.permissions.query({ name: "geolocation" }).then((result) => { - getGeolocation(result.state); - }); - } else { - setGeoStatus(geoStatusEnum.UNSUPPORTED); - } - }; - - useEffect(() => { - if (filter === AROUND_ME) { - checkGeolocationPermission(); - } else if (filter && typeof filter === "string") { - setGeoLoading(true); - axios - .get( - `https://api-adresse.data.gouv.fr/search/?q=${filter}&postCode=${filter}` - ) - .then((response) => { - const coordinates = response.data.features[0].geometry.coordinates; - setCoords({ - latitude: coordinates[1], - longitude: coordinates[0], - }); - setGeoLoading(false); - }); - } else if (filter) { - const coordinates = filter.split("-"); - setCoords({ - latitude: coordinates[1], - longitude: coordinates[0], - }); - } - }, [filter]); - - const searchCommunes = () => { - if (filterText.length > 2 && filterText !== AROUND_ME) { - axios - .get( - `https://geo.api.gouv.fr/communes?nom=${filterText}&limit=10&fields=population,centre,departement,nom` - ) - .then((response) => { - const communes = response.data - .sort((a, b) => b.population - a.population) - .map((commune) => ({ - label: `${commune.nom}, ${commune.departement.nom}`, - value: `${commune.centre.coordinates[0]}-${commune.centre.coordinates[1]}`, - })); - setOptions(communes.concat(AROUND_ME_OPTION)); - }); - } - }; - - const searchDepartment = async (department: string) => { - const results = await Promise.all( - department - .split("|") - .map((x) => - axios.get( - `https://geo.api.gouv.fr/departements/${x}/communes?limit=10&fields=population,centre,departement,nom,codesPostaux` - ) - ) - ); - - const communes = results - .flatMap((result) => result.data) - .flatMap((commune) => - commune.codesPostaux.map((codePostal) => ({ - centre: commune.centre, - codePostal, - departement: commune.departement, - nom: commune.nom, - population: commune.population, - })) - ) - .filter((commune) => commune.codePostal.startsWith(filterText)) - .sort((a, b) => b.population - a.population) - .map((commune) => { - return { - label: `${commune.nom}, ${commune.codePostal}, ${commune.departement.nom}`, - value: `${commune.codePostal} ${commune.nom}`, - }; - }); - setOptions(communes.concat(AROUND_ME_OPTION)); - }; - - useEffect(() => { - if (filter) { - return; - } - - if (filterText) { - if (isNaN(+filterText)) { - searchCommunes(); - return; - } - - const department = getDepartment(filterText); - if (department) { - searchDepartment(department); - return; - } - } - - setOptions(AROUND_ME_OPTION); - }, [filterText]); - - const onClick = (psychologist: PsychologistType) => { - setSelectedPsychologist(psychologist.id); - setMapCenter({ - latitude: psychologist.coordinates.coordinates[1], - longitude: psychologist.coordinates.coordinates[0], - }); - }; - - const loadMorePsychologists = () => { - loadPsychologists(currentPageRef.current + 1); - currentPageRef.current = currentPageRef.current + 1; - }; - - if (!psychologists) { - return null; - } - - return ( - - - - - option.label === AROUND_ME || - option.label.toLowerCase().includes(label.toLowerCase()) - } - label="Rechercher par ville ou code postal" - options={options} - /> - - - - - {filter === AROUND_ME && geoStatus === geoStatusEnum.DENIED && ( - - )} - {filter === AROUND_ME && geoStatus === geoStatusEnum.UNSUPPORTED && ( - - )} - - - - {psychologists.map((psychologist) => ( -
- onClick(psychologist)} - /> -
- ))} - - - - {mapCenter && ( - { - setSelectedPsychologist(psychologist.id); - setMapCenter({ - latitude: psychologist.coordinates.coordinates[1], - longitude: psychologist.coordinates.coordinates[0], - }); - resultsRef.current.scrollTo({ - top: - psychologistsRefs.current[psychologist.id].current - .offsetTop - resultsRef.current.offsetTop, - }); - }} - mapCenter={[mapCenter.latitude, mapCenter.longitude]} - psychologists={psychologists} - /> - )} - - - - ); -}; - -export default Directory; diff --git a/src/components/Directory/Directory.styles.ts b/src/components/Directory/Directory.styles.ts new file mode 100644 index 00000000..1e17ba95 --- /dev/null +++ b/src/components/Directory/Directory.styles.ts @@ -0,0 +1,57 @@ +import styled, { css } from "styled-components"; + +export const DirectoryWrapper = styled.div` + margin-bottom: 32px; + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: column; +`; + +export const Desktop = styled.div` + flex: 1 1 auto; + overflow: hidden; + display: none; + @media (min-width: 768px) { + display: flex; + } +`; + +export const Mobile = styled.div` + flex: 1 1 auto; + overflow: hidden; + display: flex; + @media (min-width: 768px) { + display: none; + } +`; + +export const Search = styled.div` + display: flex; + flex-wrap: wrap; + align-items: flex-end; + flex: 0 1 auto; + margin: 24px 0; +`; + +export const Psychologists = styled.div` + overflow: scroll; + margin-right: 16px; +`; + +export const PsychologistWrapper = styled.div` + cursor: pointer; + background-color: var(--background-default-white); + padding: 24px; + + &:hover { + background-color: var(--background-contrast-grey); + } + + ${(props) => + css` + ${props.selected + ? "box-shadow: inset 0 0 0 1px black;" + : "box-shadow: inset 0 0 0 1px var(--border-default-grey);"} + `} +`; diff --git a/src/components/Psychologist.tsx b/src/components/Directory/Psychologist.tsx similarity index 69% rename from src/components/Psychologist.tsx rename to src/components/Directory/Psychologist.tsx index 6f2418d1..ff85cf1b 100644 --- a/src/components/Psychologist.tsx +++ b/src/components/Directory/Psychologist.tsx @@ -1,7 +1,6 @@ import React from "react"; -import { Psychologist as PsychologistType } from "../types/psychologist"; -import { PsychologistWrapper } from "./Psychologist.styles"; +import { Psychologist as PsychologistType } from "../../types/psychologist"; const infos = [ { label: "Adresse:", value: "address" }, @@ -19,21 +18,9 @@ const infos = [ { label: "Travail avec les enfants", value: "withChildren" }, ]; -const Psychologist = ({ - psychologist, - onClick, - selected, -}: { - psychologist: PsychologistType; - onClick: () => void; - selected: boolean; -}) => { +const Psychologist = ({ psychologist }: { psychologist: PsychologistType }) => { return ( - + <>

{psychologist.firstName} {psychologist.lastName}

@@ -50,7 +37,7 @@ const Psychologist = ({ ) : null; })} - + ); }; diff --git a/src/components/PsychologistsMap.tsx b/src/components/Directory/PsychologistsMap.tsx similarity index 59% rename from src/components/PsychologistsMap.tsx rename to src/components/Directory/PsychologistsMap.tsx index e6effa40..cfeaa449 100644 --- a/src/components/PsychologistsMap.tsx +++ b/src/components/Directory/PsychologistsMap.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { MapContainer, Marker, TileLayer, useMap } from "react-leaflet"; +import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet"; -import { Psychologist } from "../types/psychologist"; +import { Psychologist as PsychologistType } from "../../types/psychologist"; +import Psychologist from "./Psychologist"; function ChangeView({ center }) { const map = useMap(); @@ -15,8 +16,8 @@ const PsychologistsMap = ({ selectPsychologist, }: { mapCenter: any; - psychologists: Psychologist[]; - selectPsychologist: (psychologist: Psychologist) => void; + psychologists: PsychologistType[]; + selectPsychologist?: (psychologist: PsychologistType) => void; }) => { return ( ( selectPsychologist(psychologist), + click: () => { + if (selectPsychologist) { + selectPsychologist(psychologist); + } + }, }} key={psychologist.id} position={[ psychologist.coordinates.coordinates[1], psychologist.coordinates.coordinates[0], ]} - /> + > + {!selectPsychologist && ( + + + + )} + ))} ); diff --git a/src/components/Directory/ResultsDesktop.tsx b/src/components/Directory/ResultsDesktop.tsx new file mode 100644 index 00000000..9cb75411 --- /dev/null +++ b/src/components/Directory/ResultsDesktop.tsx @@ -0,0 +1,84 @@ +import { Button, Col } from "@dataesr/react-dsfr"; +import React, { Dispatch, MutableRefObject, SetStateAction } from "react"; + +import { Coordinates } from "../../types/coordinates"; +import { Psychologist as PsychologistType } from "../../types/psychologist"; +import { + Desktop, + Psychologists, + PsychologistWrapper, +} from "./Directory.styles"; +import Psychologist from "./Psychologist"; +import PsychologistsMap from "./PsychologistsMap"; + +const ResultsDesktop = ({ + psychologists, + loadMorePsychologists, + resultsRef, + psychologistsRefs, + selectedPsychologist, + setSelectedPsychologist, + mapCenter, + setMapCenter, +}: { + psychologists: PsychologistType[]; + loadMorePsychologists: () => void; + resultsRef: MutableRefObject; + psychologistsRefs: any; + selectedPsychologist: number; + setSelectedPsychologist: Dispatch>; + mapCenter: Coordinates; + setMapCenter: Dispatch>; +}) => { + const onClick = (psychologist: PsychologistType) => { + setSelectedPsychologist(psychologist.id); + setMapCenter({ + latitude: psychologist.coordinates.coordinates[1], + longitude: psychologist.coordinates.coordinates[0], + }); + }; + + return ( + + + {psychologists.map((psychologist) => ( +
+ onClick(psychologist)} + > + + +
+ ))} + + + + {mapCenter && ( + { + setSelectedPsychologist(psychologist.id); + setMapCenter({ + latitude: psychologist.coordinates.coordinates[1], + longitude: psychologist.coordinates.coordinates[0], + }); + resultsRef.current.scrollTo({ + top: + psychologistsRefs.current[psychologist.id].current.offsetTop - + resultsRef.current.offsetTop, + }); + }} + mapCenter={[mapCenter.latitude, mapCenter.longitude]} + psychologists={psychologists} + /> + )} + + + ); +}; + +export default ResultsDesktop; diff --git a/src/components/Directory/ResultsMobile.tsx b/src/components/Directory/ResultsMobile.tsx new file mode 100644 index 00000000..70e608a7 --- /dev/null +++ b/src/components/Directory/ResultsMobile.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +import { Coordinates } from "../../types/coordinates"; +import { Psychologist as PsychologistType } from "../../types/psychologist"; +import { Mobile } from "./Directory.styles"; +import PsychologistsMap from "./PsychologistsMap"; + +const ResultsDesktop = ({ + psychologists, + mapCenter, +}: { + psychologists: PsychologistType[]; + mapCenter: Coordinates; +}) => { + return ( + + {mapCenter && ( + + )} + + ); +}; + +export default ResultsDesktop; diff --git a/src/components/Directory/SearchBar.tsx b/src/components/Directory/SearchBar.tsx new file mode 100644 index 00000000..f4e81c04 --- /dev/null +++ b/src/components/Directory/SearchBar.tsx @@ -0,0 +1,205 @@ +import { Alert, Button, Col, SearchableSelect } from "@dataesr/react-dsfr"; +import axios from "axios"; +import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; + +import { Coordinates } from "../../types/coordinates"; +import { getDepartment } from "../utils/departments"; +import { Search } from "./Directory.styles"; + +const AROUND_ME = "Autour de moi"; +const AROUND_ME_OPTION = [{ label: AROUND_ME, value: AROUND_ME }]; + +const geoStatusEnum = { + DENIED: -1, + GRANTED: 1, + UNKNOWN: 0, + UNSUPPORTED: -2, +}; + +const SearchBar = ({ + filter, + setFilter, + coords, + setCoords, + geoLoading, + setGeoLoading, + loadMorePsychologists, + loadPsychologists, +}: { + filter: string; + setFilter: Dispatch>; + coords: Coordinates; + setCoords: Dispatch>; + geoLoading: boolean; + setGeoLoading: Dispatch>; + loadMorePsychologists: () => void; + loadPsychologists: (page: number) => void; +}) => { + const [filterText, setFilterText] = useState(""); + const [geoStatus, setGeoStatus] = useState(geoStatusEnum.UNKNOWN); + const [options, setOptions] = useState(AROUND_ME_OPTION); + + const searchCommunes = () => { + if (filterText.length > 2 && filterText !== AROUND_ME) { + axios + .get( + `https://geo.api.gouv.fr/communes?nom=${filterText}&limit=10&fields=population,centre,departement,nom` + ) + .then((response) => { + const communes = response.data + .sort((a, b) => b.population - a.population) + .map((commune) => ({ + label: `${commune.nom}, ${commune.departement.nom}`, + value: `${commune.centre.coordinates[0]}-${commune.centre.coordinates[1]}`, + })); + setOptions(communes.concat(AROUND_ME_OPTION)); + }); + } + }; + + const searchDepartment = async (department: string) => { + const results = await Promise.all( + department + .split("|") + .map((x) => + axios.get( + `https://geo.api.gouv.fr/departements/${x}/communes?limit=10&fields=population,centre,departement,nom,codesPostaux` + ) + ) + ); + + const communes = results + .flatMap((result) => result.data) + .flatMap((commune) => + commune.codesPostaux.map((codePostal) => ({ + centre: commune.centre, + codePostal, + departement: commune.departement, + nom: commune.nom, + population: commune.population, + })) + ) + .filter((commune) => commune.codePostal.startsWith(filterText)) + .sort((a, b) => b.population - a.population) + .map((commune) => { + return { + label: `${commune.nom}, ${commune.codePostal}, ${commune.departement.nom}`, + value: `${commune.codePostal} ${commune.nom}`, + }; + }); + setOptions(communes.concat(AROUND_ME_OPTION)); + }; + + const success = (pos) => { + const { longitude, latitude } = pos.coords; + setCoords({ latitude, longitude }); + setGeoStatus(geoStatusEnum.GRANTED); + setGeoLoading(false); + }; + + const errors = () => { + setGeoStatus(geoStatusEnum.DENIED); + }; + + const getGeolocation = (state) => { + if (state === "granted") { + setGeoLoading(true); + navigator.geolocation.getCurrentPosition(success); + } else if (state === "prompt") { + setGeoLoading(true); + navigator.geolocation.getCurrentPosition(success, errors); + } else if (state === "denied") { + setGeoStatus(geoStatusEnum.DENIED); + } + }; + + const checkGeolocationPermission = () => { + if (navigator.geolocation) { + navigator.permissions.query({ name: "geolocation" }).then((result) => { + getGeolocation(result.state); + }); + } else { + setGeoStatus(geoStatusEnum.UNSUPPORTED); + } + }; + + useEffect(() => { + if (filter === AROUND_ME) { + checkGeolocationPermission(); + } + }, [filter]); + + useEffect(() => { + if (filter) { + return; + } + + if (filterText) { + if (isNaN(+filterText)) { + searchCommunes(); + return; + } + + const department = getDepartment(filterText); + if (department) { + searchDepartment(department); + return; + } + } + + setOptions(AROUND_ME_OPTION); + }, [filterText]); + + return ( + + + + option.label === AROUND_ME || + option.label.toLowerCase().includes(label.toLowerCase()) + } + label="Rechercher par ville ou code postal" + options={options} + /> + + + + + + {filter === AROUND_ME && geoStatus === geoStatusEnum.DENIED && ( + + )} + {filter === AROUND_ME && geoStatus === geoStatusEnum.UNSUPPORTED && ( + + )} + + ); +}; + +export default SearchBar; diff --git a/src/components/Directory/index.tsx b/src/components/Directory/index.tsx new file mode 100644 index 00000000..9bda53cb --- /dev/null +++ b/src/components/Directory/index.tsx @@ -0,0 +1,130 @@ +import axios from "axios"; +import { useRouter } from "next/router"; +import React, { createRef, useEffect, useRef, useState } from "react"; + +import { Coordinates } from "../../types/coordinates"; +import { FILTER } from "../../types/enums/filters"; +import { Psychologist as PsychologistType } from "../../types/psychologist"; +import { DirectoryWrapper } from "./Directory.styles"; +import ResultsDesktop from "./ResultsDesktop"; +import ResultsMobile from "./ResultsMobile"; +import SearchBar from "./SearchBar"; + +const Directory = () => { + const router = useRouter(); + + const currentPageRef = useRef(0); + + const [coords, setCoords] = useState(); + const [geoLoading, setGeoLoading] = useState(false); + + const [psychologists, setPsychologists] = useState(); + const psychologistsRefs = useRef(); + const resultsRef = useRef(null); + const [selectedPsychologist, setSelectedPsychologist] = useState(); + const [mapCenter, setMapCenter] = useState(); + + const [filter, setFilter] = useState(""); + + const loadMorePsychologists = () => { + loadPsychologists(currentPageRef.current + 1); + currentPageRef.current = currentPageRef.current + 1; + }; + + const loadPsychologists = (currentPage) => { + let query = `?${FILTER.PAGE_INDEX}=${currentPage}`; + if (coords) { + query = `${query}&${FILTER.LONGITUDE}=${coords.longitude}&${FILTER.LATITUDE}=${coords.latitude}`; + setMapCenter(coords); + } + axios.get(`/api/psychologists${query}`).then((response) => { + if (currentPage === 0) { + const refs = {}; + response.data.forEach((x) => (refs[x.id] = createRef())); + psychologistsRefs.current = refs; + if (resultsRef.current) { + resultsRef.current.scrollTo({ top: 0 }); + } + setSelectedPsychologist(null); + setPsychologists(response.data); + } else { + response.data.forEach( + (x) => (psychologistsRefs.current[x.id] = createRef()) + ); + setPsychologists(psychologists.concat(response.data)); + } + + if (!coords) { + const [longitude, latitude] = response.data[0].coordinates.coordinates; + setMapCenter({ + latitude, + longitude, + }); + } + }); + }; + + useEffect(() => { + if (process.env.NEXT_PUBLIC_DISPLAY_DIRECTORY !== "true") { + router.push("/"); + } else { + loadPsychologists(0); + } + }, []); + + useEffect(() => { + if (filter && typeof filter === "string") { + setGeoLoading(true); + axios + .get( + `https://api-adresse.data.gouv.fr/search/?q=${filter}&postCode=${filter}` + ) + .then((response) => { + const coordinates = response.data.features[0].geometry.coordinates; + setCoords({ + latitude: coordinates[1], + longitude: coordinates[0], + }); + setGeoLoading(false); + }); + } else if (filter) { + const coordinates = filter.split("-"); + setCoords({ + latitude: coordinates[1], + longitude: coordinates[0], + }); + } + }, [filter]); + + if (!psychologists) { + return null; + } + + return ( + + + + + + ); +}; + +export default Directory; diff --git a/src/components/Psychologist.styles.ts b/src/components/Psychologist.styles.ts deleted file mode 100644 index 7f54272a..00000000 --- a/src/components/Psychologist.styles.ts +++ /dev/null @@ -1,13 +0,0 @@ -import styled, { css } from "styled-components"; - -export const PsychologistWrapper = styled.div` - cursor: pointer; - background-color: var(--background-contrast-grey); - padding: 24px; - ${(props) => - css` - ${props.selected - ? "border: solid 1px black;" - : "border: solid 1px transparent"} - `} -`; diff --git a/src/css/style.css b/src/css/style.css index f2324514..39676da8 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -47,6 +47,14 @@ margin-top: 20px; } +.select-search-options { + z-index: 1100 !important; +} + +.leaflet-popup-close-button { + box-shadow: none !important; +} + @media (min-width: 1024px) { .time-line-list { flex-direction: row; diff --git a/src/db/seeds/index.ts b/src/db/seeds/index.ts index a4746ddd..45a4491e 100644 --- a/src/db/seeds/index.ts +++ b/src/db/seeds/index.ts @@ -21,8 +21,8 @@ const createPsychologists = async () => { cdsmsp: faker.lorem.word(5), coordinates: { coordinates: [ - parseFloat(faker.address.longitude(2, -2)), - parseFloat(faker.address.latitude(48, 44)), + parseFloat(faker.address.longitude(4, -4)), + parseFloat(faker.address.latitude(50, 40)), ], // @ts-ignore crs: { properties: { name: "EPSG:4326" }, type: "name" },