fetchBoard refactoring

hpi-schul-cloud · Apr 26, 2024 · b78c253 · b78c253
1 parent 763e57b
commit b78c253
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 29 deletions.
diff --git a/src/modules/data/board/BoardStore.ts b/src/modules/data/board/BoardStore.ts
@@ -7,7 +7,7 @@ import { useBoardFocusHandler } from "./BoardFocusHandler.composable";
 import { useSharedEditMode } from "./EditMode.composable";
 import { CardMove } from "@/types/board/DragAndDrop";
 import { ColumnResponse } from "@/serverApi/v3";
-import { envConfigModule } from "@/store";
+// import { envConfigModule } from "@/store";
 import {
 	CreateCardRequestPayload,
 	CreateCardSuccessPayload,
@@ -18,7 +18,8 @@ import {
 	DeleteColumnRequestPayload,
 	DeleteColumnSuccessPayload,
 	DisconnectSocketRequestPayload,
-	FetchBoardPayload,
+	FetchBoardRequestPayload,
+	FetchBoardSuccessPayload,
 	MoveCardRequestPayload,
 	MoveCardSuccessPayload,
 	MoveColumnRequestPayload,
@@ -36,8 +37,8 @@ export const useBoardStore = defineStore("boardStore", () => {
 	const isLoading = ref<boolean>(false);
 
 	const restApi = useBoardRestApi();
-	const isSocketEnabled =
-		envConfigModule.getEnv.FEATURE_COLUMN_BOARD_SOCKET_ENABLED;
+	const isSocketEnabled = true;
+	// envConfigModule.getEnv.FEATURE_COLUMN_BOARD_SOCKET_ENABLED;
 
 	const socketOrRest = isSocketEnabled ? useSocketApi() : restApi;
 
@@ -240,6 +241,7 @@ export const useBoardStore = defineStore("boardStore", () => {
 	const moveCardSuccess = async (payload: MoveCardSuccessPayload) => {
 		if (!board.value) return;
 
+		console.log("payload", payload);
 		const {
 			newIndex,
 			oldIndex,
@@ -299,8 +301,12 @@ export const useBoardStore = defineStore("boardStore", () => {
 		await socketOrRest.disconnectSocketRequest(payload);
 	};
 
-	const fetchBoard = async (payload: FetchBoardPayload) => {
-		await restApi.fetchBoard(payload);
+	const fetchBoardRequest = async (payload: FetchBoardRequestPayload) => {
+		await socketOrRest.fetchBoardRequest(payload);
+	};
+
+	const fetchBoardSuccess = (payload: FetchBoardSuccessPayload) => {
+		setBoard(payload.board);
 	};
 
 	const reloadBoard = async () => {
@@ -331,7 +337,8 @@ export const useBoardStore = defineStore("boardStore", () => {
 		updateBoardTitleSuccess,
 		updateBoardVisibilityRequest,
 		updateBoardVisibilitySuccess,
-		fetchBoard,
+		fetchBoardRequest,
+		fetchBoardSuccess,
 		reloadBoard,
 	};
 });
diff --git a/src/modules/data/board/boardActions/boardActionPayload.ts b/src/modules/data/board/boardActions/boardActionPayload.ts
@@ -1,4 +1,4 @@
-import { CardResponse, ColumnResponse } from "@/serverApi/v3";
+import { BoardResponse, CardResponse, ColumnResponse } from "@/serverApi/v3";
 import { ColumnMove } from "@/types/board/DragAndDrop";
 import {
 	BoardObjectType,
@@ -18,10 +18,14 @@ export type CreateColumnRequestPayload = {
 	boardId: string;
 };
 
-export type FetchBoardPayload = {
+export type FetchBoardRequestPayload = {
 	id: string;
 };
 
+export type FetchBoardSuccessPayload = {
+	board: BoardResponse;
+};
+
 export type CreateColumnSucccessPayload = {
 	newColumn: ColumnResponse;
 };

diff --git a/src/modules/data/board/boardActions/restApi.ts b/src/modules/data/board/boardActions/restApi.ts
@@ -14,7 +14,7 @@ import {
 	CreateCardRequestPayload,
 	DeleteCardRequestPayload,
 	DeleteColumnRequestPayload,
-	FetchBoardPayload,
+	FetchBoardRequestPayload,
 	MoveCardRequestPayload,
 	MoveColumnRequestPayload,
 	UpdateBoardTitleRequestPayload,
@@ -80,11 +80,13 @@ export const useBoardRestApi = () => {
 		}
 	};
 
-	const fetchBoard = async (payload: FetchBoardPayload): Promise<void> => {
+	const fetchBoardRequest = async (
+		payload: FetchBoardRequestPayload
+	): Promise<void> => {
 		boardStore.setLoading(true);
 		try {
 			const board = await fetchBoardCall(payload.id);
-			boardStore.setBoard(board);
+			boardStore.fetchBoardSuccess({ board });
 		} catch (error) {
 			handleError(error, {
 				404: notifyWithTemplate("notLoaded", "board"),
@@ -322,7 +324,7 @@ export const useBoardRestApi = () => {
 	const reloadBoard = async () => {
 		if (boardStore.board === undefined) return;
 
-		await fetchBoard({ id: boardStore.board.id });
+		await fetchBoardRequest({ id: boardStore.board.id });
 	};
 
 	// this unused function is added to make sure that the same name is used in both socketApi and restApi
@@ -337,7 +339,7 @@ export const useBoardRestApi = () => {
 	const disconnectSocketRequest = (): void => {};
 
 	return {
-		fetchBoard,
+		fetchBoardRequest,
 		createCardRequest,
 		createColumnRequest,
 		deleteCardRequest,

diff --git a/src/modules/data/board/boardActions/socketApi.ts b/src/modules/data/board/boardActions/socketApi.ts
@@ -7,6 +7,7 @@ import {
 	DeleteCardRequestPayload,
 	DeleteColumnRequestPayload,
 	DisconnectSocketRequestPayload,
+	FetchBoardRequestPayload,
 	MoveCardRequestPayload,
 	MoveColumnRequestPayload,
 	UpdateBoardTitleRequestPayload,
@@ -78,6 +79,13 @@ export const useSocketApi = () => {
 		emitOnSocket("create-card-request", payload);
 	};
 
+	const fetchBoardRequest = async (
+		payload: FetchBoardRequestPayload
+	): Promise<void> => {
+		boardStore.setLoading(true);
+		emitOnSocket("fetch-board-request", payload);
+	};
+
 	const disconnectSocketRequest = (payload: DisconnectSocketRequestPayload) => {
 		// TODO: Kebab-Case
 		console.log("disconnectSocketRequest", payload);
@@ -88,41 +96,35 @@ export const useSocketApi = () => {
 		emitOnSocket("create-column-request", payload);
 	};
 
-	const deleteCardRequest = async (payload: DeleteCardRequestPayload) => {
-		await emitOnSocket("delete-card-request", payload);
+	const deleteCardRequest = (payload: DeleteCardRequestPayload) => {
+		emitOnSocket("delete-card-request", payload);
 	};
 
-	const deleteColumnRequest = async (payload: DeleteColumnRequestPayload) => {
-		dispatch(BoardActions.deleteColumnSuccess(payload));
+	const deleteColumnRequest = (payload: DeleteColumnRequestPayload) => {
 		emitOnSocket("delete-column-request", payload);
 	};
 
-	const moveCardRequest = async (payload: MoveCardRequestPayload) => {
-		dispatch(BoardActions.moveCardSuccess(payload));
+	const moveCardRequest = (payload: MoveCardRequestPayload) => {
 		emitOnSocket("move-card-request", payload);
 	};
 
-	const moveColumnRequest = async (payload: MoveColumnRequestPayload) => {
-		dispatch(BoardActions.moveColumnSuccess(payload));
+	const moveColumnRequest = (payload: MoveColumnRequestPayload) => {
 		emitOnSocket("move-column-request", payload);
 	};
 
-	const updateColumnTitleRequest = async (
+	const updateColumnTitleRequest = (
 		payload: UpdateColumnTitleRequestPayload
 	) => {
-		await emitOnSocket("update-column-title-request", payload);
-		dispatch(BoardActions.updateColumnTitleSuccess(payload));
+		emitOnSocket("update-column-title-request", payload);
 	};
 
 	const updateBoardTitleRequest = (payload: UpdateBoardTitleRequestPayload) => {
-		dispatch(BoardActions.updateBoardTitleSuccess(payload));
 		emitOnSocket("update-board-title-request", payload);
 	};
 
 	const updateBoardVisibilityRequest = (
 		payload: UpdateBoardVisibilityRequestPayload
 	) => {
-		dispatch(BoardActions.updateBoardVisibilitySuccess(payload));
 		emitOnSocket("update-board-visibility-request", payload);
 	};
 
@@ -138,6 +140,7 @@ export const useSocketApi = () => {
 		disconnectSocketRequest,
 		deleteCardRequest,
 		deleteColumnRequest,
+		fetchBoardRequest,
 		moveCardRequest,
 		moveColumnRequest,
 		updateColumnTitleRequest,

diff --git a/src/modules/feature/board/board/Board.vue b/src/modules/feature/board/board/Board.vue
@@ -213,7 +213,7 @@ const onMoveColumnForward = async (columnIndex: number, columnId: string) => {
 };
 
 const onReloadBoard = async () => {
-	boardStore.reloadBoard({ id: props.boardId });
+	boardStore.reloadBoard();
 };
 
 const onUpdateBoardVisibility = async (newVisibility: boolean) => {
@@ -238,7 +238,7 @@ const onUpdateBoardTitle = async (newTitle: string) => {
 
 onMounted(() => {
 	setAlert();
-	boardStore.fetchBoard({ id: props.boardId });
+	boardStore.fetchBoardRequest({ id: props.boardId });
 });
 
 onUnmounted(() => {