-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Parcourir la liste des guichets ref #313 avec autocomplete
- Loading branch information
Showing
23 changed files
with
601 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,33 @@ | ||
| import SymfonyRouting from "../../modules/Routing"; | ||
|
|
||
| import { jsonFetch } from "../../modules/jsonFetch"; | ||
| import { CommunityListFilter, GetResponse } from "../../@types/app_espaceco"; | ||
| import { type CommunityResponseDTO } from "../../@types/espaceco"; | ||
| import { GetResponse } from "../../@types/app_espaceco"; | ||
| import { jsonFetch } from "../../modules/jsonFetch"; | ||
|
|
||
| const get = (name: string, page: number, limit: number, signal: AbortSignal) => { | ||
| const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_get", { | ||
| name: name, | ||
| page: page, | ||
| limit: limit, | ||
| const get = (queryParams: { page: number; limit: number }, signal: AbortSignal) => { | ||
| const params = { ...queryParams, sort: "name:ASC" }; | ||
| const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_get", params); | ||
| return jsonFetch<GetResponse<CommunityResponseDTO>>(url, { | ||
| signal: signal, | ||
| }); | ||
| }; | ||
|
|
||
| const searchByName = (name: string, filter: CommunityListFilter, signal: AbortSignal) => { | ||
| const queryParams = { name: `%${name}%`, filter: filter, sort: "name:ASC" }; | ||
| const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_search", queryParams); | ||
| return jsonFetch<CommunityResponseDTO[]>(url, { | ||
| signal: signal, | ||
| }); | ||
| }; | ||
|
|
||
| const getAsMember = (queryParams: Record<string, unknown>, signal: AbortSignal) => { | ||
| const params = { ...queryParams, sort: "name:ASC" }; | ||
| const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_get_as_member", params); | ||
| return jsonFetch<GetResponse<CommunityResponseDTO>>(url, { | ||
| signal: signal, | ||
| }); | ||
| }; | ||
|
|
||
| const community = { get }; | ||
| const community = { get, searchByName, getAsMember }; | ||
|
|
||
| export default community; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| import { fr } from "@codegouvfr/react-dsfr"; | ||
| import RadioButtons from "@codegouvfr/react-dsfr/RadioButtons"; | ||
| import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui"; | ||
| import { Skeleton } from "@mui/material"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { FC, useState } from "react"; | ||
| import { CommunityListFilter, GetResponse } from "../../../@types/app_espaceco"; | ||
| import { CommunityResponseDTO } from "../../../@types/espaceco"; | ||
| import Pagination from "../../../components/Utils/Pagination"; | ||
| import RQKeys from "../../../modules/espaceco/RQKeys"; | ||
| import { CartesApiException } from "../../../modules/jsonFetch"; | ||
| import api from "../../api"; | ||
| import CommunityList from "./CommunityList"; | ||
| import { useTranslation } from "../../../i18n/i18n"; | ||
| import Alert from "@codegouvfr/react-dsfr/Alert"; | ||
| import SearchCommunity from "./SearchCommunity"; | ||
|
|
||
| const defaultLimit = 10; | ||
|
|
||
| type commonParams = { | ||
| page: number; | ||
| limit: number; | ||
| }; | ||
|
|
||
| type Pending = commonParams & { pending: boolean }; | ||
|
|
||
| const Communities: FC = () => { | ||
| const { t } = useTranslation("EspaceCoCommunities"); | ||
|
|
||
| const [filter, setFilter] = useState<CommunityListFilter>("public"); | ||
|
|
||
| const [params, setParams] = useState<commonParams>({ page: 1, limit: defaultLimit }); | ||
| const [communitiesAsMemberParams, setCommunitiesAsMemberParams] = useState<Pending>({ pending: false, page: 1, limit: defaultLimit }); | ||
|
|
||
| const [community, setCommunity] = useState<CommunityResponseDTO | null>(null); | ||
|
|
||
| // const { data /*, isError, error*/ } = useInfiniteQuery< | ||
| // GetResponse<CommunityResponseDTO>, | ||
| // CartesApiException, | ||
| // InfiniteData<GetResponse<CommunityResponseDTO>, number>, | ||
| // string[], | ||
| // number | ||
| // >({ | ||
| // queryKey: RQKeys.community_list("", page, limit), | ||
| // queryFn: ({ pageParam, signal }) => api.community.get(pageParam, limit, signal), | ||
| // initialPageParam: 1, | ||
| // getNextPageParam: (lastPage /*, allPages, lastPageParam, allPageParams*/) => lastPage.nextPage, | ||
| // getPreviousPageParam: (firstPage /*, allPages, firstPageParam, allPageParams*/) => firstPage.previousPage, | ||
| // }); | ||
|
|
||
| const communityQuery = useQuery<GetResponse<CommunityResponseDTO>, CartesApiException>({ | ||
| queryKey: RQKeys.community_list(params.page, params.limit), | ||
| queryFn: ({ signal }) => api.community.get(params, signal), | ||
| staleTime: 3600000, | ||
| retry: false, | ||
| enabled: filter === "public", | ||
| }); | ||
|
|
||
| const communitiesAsMember = useQuery<GetResponse<CommunityResponseDTO>, CartesApiException>({ | ||
| queryKey: RQKeys.communities_as_member(communitiesAsMemberParams.pending, communitiesAsMemberParams.page, communitiesAsMemberParams.limit), | ||
| queryFn: ({ signal }) => api.community.getAsMember(communitiesAsMemberParams, signal), | ||
| staleTime: 3600000, | ||
| retry: false, | ||
| enabled: filter === "iam_member" || filter === "affiliation", | ||
| }); | ||
|
|
||
| const handleFilterChange = (filter: CommunityListFilter) => { | ||
| setFilter(filter); | ||
| setCommunity(null); | ||
| if (filter === "iam_member" || filter === "affiliation") { | ||
| // TODO A VOIR SI 2 REQUETES DIFFERENTES | ||
| setCommunitiesAsMemberParams({ pending: filter === "affiliation", page: 1, limit: defaultLimit }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={fr.cx("fr-container")}> | ||
| <h1>{t("title")}</h1> | ||
| <div className={fr.cx("fr-grid-row")}> | ||
| <RadioButtons | ||
| legend={t("filters")} | ||
| options={[ | ||
| { | ||
| label: t("all_public_communities"), | ||
| nativeInputProps: { | ||
| checked: filter === "public", | ||
| onChange: () => handleFilterChange("public"), | ||
| }, | ||
| }, | ||
| { | ||
| label: t("communities_as_member"), | ||
| nativeInputProps: { | ||
| checked: filter === "iam_member", | ||
| onChange: () => handleFilterChange("iam_member"), | ||
| }, | ||
| }, | ||
| { | ||
| label: t("pending_membership"), | ||
| nativeInputProps: { | ||
| checked: filter === "affiliation", | ||
| onChange: () => handleFilterChange("affiliation"), | ||
| }, | ||
| }, | ||
| ]} | ||
| orientation="horizontal" | ||
| /> | ||
| </div> | ||
| {communityQuery.isLoading || communitiesAsMember.isLoading ? ( | ||
| <MuiDsfrThemeProvider> | ||
| {[...Array(10).keys()].map((n) => ( | ||
| <Skeleton className={fr.cx("fr-my-2v")} key={n} variant="rectangular" height={50} /> | ||
| ))} | ||
| </MuiDsfrThemeProvider> | ||
| ) : communityQuery.isError ? ( | ||
| <Alert severity="error" closable={false} title={communityQuery.error?.message} /> | ||
| ) : communitiesAsMember.isError ? ( | ||
| <Alert severity="error" closable={false} title={communitiesAsMember.error?.message} /> | ||
| ) : ( | ||
| <div> | ||
| <SearchCommunity | ||
| filter={filter} | ||
| onChange={(community) => { | ||
| setCommunity(community); | ||
| }} | ||
| /> | ||
| {community ? ( | ||
| <CommunityList communities={[community]} filter={filter} /> | ||
| ) : filter === "public" ? ( | ||
| communityQuery.data && ( | ||
| <div> | ||
| <CommunityList communities={communityQuery.data.content} filter={filter} /> | ||
| <div className={fr.cx("fr-grid-row", "fr-grid-row--center")}> | ||
| <Pagination | ||
| size={"large"} | ||
| count={communityQuery.data.totalPages} | ||
| page={params.page} | ||
| onChange={(_, page) => setParams({ ...params, page: page, limit: defaultLimit })} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| ) : ( | ||
| communitiesAsMember.data && ( | ||
| <div> | ||
| <CommunityList communities={communitiesAsMember.data.content} filter={filter} /> | ||
| <div className={fr.cx("fr-grid-row", "fr-grid-row--center")}> | ||
| <Pagination | ||
| size={"large"} | ||
| count={communitiesAsMember.data.totalPages} | ||
| page={communitiesAsMemberParams.page} | ||
| onChange={(_, page) => setCommunitiesAsMemberParams({ ...communitiesAsMemberParams, page: page, limit: defaultLimit })} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Communities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { fr } from "@codegouvfr/react-dsfr"; | ||
| import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui"; | ||
| import Skeleton from "@mui/material/Skeleton"; | ||
| import { FC } from "react"; | ||
|
|
||
| const CommunitiesSkeleton: FC = () => { | ||
| return ( | ||
| <MuiDsfrThemeProvider> | ||
| {[...Array(10).keys()].map((n) => ( | ||
| <Skeleton className={fr.cx("fr-my-2v")} key={n} variant="rectangular" height={50} /> | ||
| ))} | ||
| </MuiDsfrThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default CommunitiesSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.