ref #313 Mise en place de deux panneaux

assets/components/Utils/Skeleton.tsx

@@ -0,0 +1,19 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
+import MuiSkeleton from "@mui/material/Skeleton";
+import { FC } from "react";
+
+type SkeletonProps = {
+    count: number;
+};
+const Skeleton: FC<SkeletonProps> = ({ count }) => {
+    return (
+        <MuiDsfrThemeProvider>
+            {[...Array(count).keys()].map((n) => (
+                <MuiSkeleton className={fr.cx("fr-my-2v")} key={n} variant="rectangular" height={50} />
+            ))}
+        </MuiDsfrThemeProvider>
+    );
+};
+
+export default Skeleton;

assets/espaceco/pages/communities/Communities.tsx

@@ -1,19 +1,18 @@
 import { fr } from "@codegouvfr/react-dsfr";
+import Alert from "@codegouvfr/react-dsfr/Alert";
 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 Skeleton from "../../../components/Utils/Skeleton";
+import { useTranslation } from "../../../i18n/i18n";
 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";
+import Pagination from "../../../components/Utils/Pagination";
 
 const defaultLimit = 10;
 
@@ -28,26 +27,10 @@ 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),
@@ -69,61 +52,58 @@ const Communities: FC = () => {
         setCommunity(null);
         if (filter === "iam_member" || filter === "affiliation") {
             // TODO A VOIR SI 2 REQUETES DIFFERENTES
-            setCommunitiesAsMemberParams({ pending: filter === "affiliation", page: 1, limit: defaultLimit });
+            setCommunitiesAsMemberParams({ ...communitiesAsMemberParams, page: 1, pending: filter === "affiliation" });
         }
     };
 
     return (
         <div className={fr.cx("fr-container")}>
             <h1>{t("title")}</h1>
+            <div>
+                {communityQuery.isError && <Alert severity="error" closable={false} title={communityQuery.error?.message} />}
+                {communitiesAsMember.isError && <Alert severity="error" closable={false} title={communitiesAsMember.error?.message} />}
+            </div>
             <div className={fr.cx("fr-grid-row")}>
-                <RadioButtons
-                    legend={t("filters")}
-                    options={[
-                        {
-                            label: t("all_public_communities"),
-                            nativeInputProps: {
-                                checked: filter === "public",
-                                onChange: () => handleFilterChange("public"),
+                <div className={fr.cx("fr-col-4", "fr-px-2v")}>
+                    <label className={fr.cx("fr-text--bold")}>{t("filters")}</label>
+                    <div className={fr.cx("fr-mb-4v")}>
+                        <SearchCommunity
+                            filter={filter}
+                            onChange={(community) => {
+                                setCommunity(community);
+                            }}
+                        />
+                    </div>
+                    <RadioButtons
+                        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("communities_as_member"),
+                                nativeInputProps: {
+                                    checked: filter === "iam_member",
+                                    onChange: () => handleFilterChange("iam_member"),
+                                },
                             },
-                        },
-                        {
-                            label: t("pending_membership"),
-                            nativeInputProps: {
-                                checked: filter === "affiliation",
-                                onChange: () => handleFilterChange("affiliation"),
+                            {
+                                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 ? (
+                </div>
+                <div className={fr.cx("fr-col-8", "fr-px-2v")}>
+                    {communityQuery.isLoading || communitiesAsMember.isLoading ? (
+                        <Skeleton count={10} />
+                    ) : community ? (
                         <CommunityList communities={[community]} filter={filter} />
                     ) : filter === "public" ? (
                         communityQuery.data && (
@@ -155,7 +135,7 @@ const Communities: FC = () => {
                         )
                     )}
                 </div>
-            )}
+            </div>
         </div>
     );
 };