fix search

OPEN-ENT-NG · Jan 9, 2025 · 1446b99 · 1446b99
1 parent dc11911
commit 1446b99
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 50 deletions.
diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
@@ -53,8 +53,8 @@ export const BoardCreateMagnetBoardModal: FC<
   };
 
   const handleSubmit = async () => {
-    if (inputValue.selectedBoardId) {
-      setSelectedBoardData(inputValue.selectedBoardId);
+    if (inputValue.selectedBoard) {
+      setSelectedBoardData(inputValue.selectedBoard);
       setIsCreateMagnetOpen(true);
       handleClose();
     }
@@ -126,7 +126,7 @@ export const BoardCreateMagnetBoardModal: FC<
             </Button>
             <Button
               onClick={() => handleSubmit()}
-              disabled={!inputValue.selectedBoardId}
+              disabled={!inputValue.selectedBoard}
             >
               {t("magneto.add")}
             </Button>

diff --git a/frontend/src/components/board-create-magnet-board-modal/types.ts b/frontend/src/components/board-create-magnet-board-modal/types.ts
@@ -1,4 +1,5 @@
 import { CURRENTTAB_STATE } from "../tab-list/types";
+import { Board } from "~/models/board.model";
 
 export interface BoardCreateMagnetBoardModalProps {
   open: boolean;
@@ -8,7 +9,7 @@ export interface BoardCreateMagnetBoardModalProps {
 export interface InputValueState {
   search: string;
   currentTab: CURRENTTAB_STATE;
-  selectedBoardId: string | null;
+  selectedBoard: Board | null;
 }
 
 export interface BoardCardWrapperProps {

diff --git a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
@@ -15,19 +15,25 @@ export const useRenderContent = (
   inputValue: InputValueState,
   setInputValue: React.Dispatch<React.SetStateAction<InputValueState>>,
 ) => {
-  const { search, currentTab, selectedBoardId } = inputValue;
+  const { search, currentTab, selectedBoard } = inputValue;
   const springs = useSpring({
     from: { opacity: 0 },
     to: { opacity: 1 },
   });
 
-  const { data: myBoardsResult } = useGetAllBoardsQuery({
-    isPublic: currentTab === CURRENTTAB_STATE.PUBLIC,
-    isShared: currentTab === CURRENTTAB_STATE.SHARED,
-    isDeleted: false,
-    sortBy: "modificationDate",
-    page: 0,
-  });
+  const { data: myBoardsResult } = useGetAllBoardsQuery(
+    {
+      isPublic: currentTab === CURRENTTAB_STATE.PUBLIC,
+      isShared: currentTab === CURRENTTAB_STATE.SHARED,
+      searchText: search,
+      isDeleted: false,
+      sortBy: "modificationDate",
+      page: 0,
+    },
+    {
+      refetchOnMountOrArgChange: true,
+    },
+  );
 
   const boards = useMemo(() => {
     return (
@@ -47,7 +53,7 @@ export const useRenderContent = (
 
   const updateSelectedMagnets = (
     event: ReactMouseEvent<HTMLDivElement>,
-    boardId: string,
+    board: Board,
   ) => {
     if (!isSelectable(event.nativeEvent)) {
       event.preventDefault();
@@ -56,16 +62,16 @@ export const useRenderContent = (
 
     setInputValue((prevState: InputValueState): InputValueState => {
       // Si le board cliqué est déjà sélectionné, on le désélectionne
-      if (prevState.selectedBoardId === boardId) {
+      if (prevState.selectedBoard?.id === board.id) {
         return {
           ...prevState,
-          selectedBoardId: null,
+          selectedBoard: null,
         };
       }
       // Sinon, on sélectionne le nouveau board
       return {
         ...prevState,
-        selectedBoardId: boardId,
+        selectedBoard: board,
       };
     });
   };
@@ -83,42 +89,35 @@ export const useRenderContent = (
     };
   }, []);
 
-  const isBoardSelected = (boardId: string): boolean => {
-    return selectedBoardId === boardId;
+  const isBoardSelected = (board: Board): boolean => {
+    return selectedBoard?.id === board.id;
   };
 
   return (
     <div className="board-list-container">
       {boards?.length > 0 && (
         <animated.ul className="grid ps-0 list-unstyled mb-24">
-          {boards
-            .filter((board: Board) => {
-              if (search === "") {
-                return board;
-              }
-            })
-            .map((board: Board) => {
-              const { id } = board;
-              return (
-                <animated.li
-                  className="z-1 boardSizing"
-                  key={id}
-                  style={{
-                    position: "relative",
-                    ...springs,
+          {boards.map((board: Board) => {
+            return (
+              <animated.li
+                className="z-1 boardSizing"
+                key={board.id}
+                style={{
+                  position: "relative",
+                  ...springs,
+                }}
+              >
+                <BoardCardWrapper
+                  isBoardSelected={isBoardSelected(board)}
+                  onClick={(event) => {
+                    updateSelectedMagnets(event, board);
                   }}
                 >
-                  <BoardCardWrapper
-                    isBoardSelected={isBoardSelected(board.id)}
-                    onClick={(event) => {
-                      updateSelectedMagnets(event, board.id);
-                    }}
-                  >
-                    <BoardItemLight board={board} />
-                  </BoardCardWrapper>
-                </animated.li>
-              );
-            })}
+                  <BoardItemLight board={board} />
+                </BoardCardWrapper>
+              </animated.li>
+            );
+          })}
         </animated.ul>
       )}
     </div>

diff --git a/frontend/src/components/create-magnet/CreateMagnet.tsx b/frontend/src/components/create-magnet/CreateMagnet.tsx
@@ -139,7 +139,7 @@ export const CreateMagnet: FC = () => {
       resourceId: media?.id ?? "",
       resourceType: getMagnetResourceType(),
       resourceUrl: selectedBoardData
-        ? selectedBoardData
+        ? selectedBoardData.id
         : linkUrl
         ? linkUrl
         : media?.url ?? null,
@@ -176,6 +176,14 @@ export const CreateMagnet: FC = () => {
     }
   }, [media]);
 
+  useEffect(() => {
+    console.log(selectedBoardData);
+    if (!isEditMagnet && selectedBoardData) {
+      setTitle(selectedBoardData.title);
+      setDescription(selectedBoardData.description);
+    }
+  }, [selectedBoardData]);
+
   useEffect(() => {
     if (isEditMagnet) {
       setTitle(activeCard.title);
@@ -267,7 +275,14 @@ export const CreateMagnet: FC = () => {
             <ImageContainer media={media} handleClickMedia={modifyFile} />
           )}
           {selectedBoardData !== null && (
-            <ScaledIframe src={`/magneto#/board/${selectedBoardData}/view`} />
+            <ScaledIframe
+              src={`/magneto#/board/${selectedBoardData._id}/view`}
+            />
+          )}
+          {activeCard?.resourceType === RESOURCE_TYPE.BOARD && (
+            <ScaledIframe
+              src={`/magneto#/board/${activeCard.resourceUrl}/view`}
+            />
           )}
           {magnetTypeHasAudio && (
             <Box sx={audioWrapperStyle}>

diff --git a/frontend/src/providers/MediaLibraryProvider/index.tsx b/frontend/src/providers/MediaLibraryProvider/index.tsx
@@ -19,6 +19,7 @@ import { getMediaLibraryType } from "./utils";
 import { MediaProps } from "~/components/board-view/types";
 import { MENU_NOT_MEDIA_TYPE } from "~/core/enums/menu-not-media-type.enum";
 import { useMediaLibrary as useMediaLibraryHook } from "~/hooks/useMediaLibrary";
+import { Board } from "~/models/board.model";
 
 const MediaLibraryContext = createContext<MediaLibraryContextType | null>(null);
 
@@ -50,7 +51,7 @@ export const MediaLibraryProvider: FC<MediaLibraryProviderProps> = ({
   const [magnetType, setMagnetType] = useState<MENU_NOT_MEDIA_TYPE | null>(
     null,
   );
-  const [selectedBoardData, setSelectedBoardData] = useState<string | null>(
+  const [selectedBoardData, setSelectedBoardData] = useState<Board | null>(
     null,
   );
 

diff --git a/frontend/src/providers/MediaLibraryProvider/types.ts b/frontend/src/providers/MediaLibraryProvider/types.ts
@@ -10,6 +10,7 @@ import { WorkspaceElement } from "edifice-ts-client";
 
 import { MediaProps } from "~/components/board-view/types";
 import { MENU_NOT_MEDIA_TYPE } from "~/core/enums/menu-not-media-type.enum";
+import { Board } from "~/models/board.model";
 
 export interface MediaLibraryProviderProps {
   children: ReactNode;
@@ -38,6 +39,6 @@ export type MediaLibraryContextType = {
   setMagnetType: Dispatch<SetStateAction<MENU_NOT_MEDIA_TYPE | null>>;
   handleClickMenu: (type: MENU_NOT_MEDIA_TYPE) => void;
   onClose: () => void;
-  selectedBoardData: string | null;
-  setSelectedBoardData: (id: string | null) => void;
+  selectedBoardData: Board | null;
+  setSelectedBoardData: (id: Board | null) => void;
 };
diff --git a/frontend/src/services/api/boards.service.ts b/frontend/src/services/api/boards.service.ts
@@ -43,10 +43,11 @@ export const boardsApi = emptySplitApi.injectEndpoints({
     }),
     getAllBoards: builder.query({
       query: (params: IBoardsParamsRequest) => {
+        console.log(params.searchText);
         let urlParams: string =
           `?isPublic=${params.isPublic}&isShared=${params.isShared}` +
           `&isDeleted=${params.isDeleted}&sortBy=${params.sortBy}` +
-          `&allFolders=true`;
+          `&searchText=${params.searchText}&allFolders=true`;
 
         if (params.page != null) {
           urlParams += `&page=${params.page}`;