react-clone-trello

1
import { PayloadAction, createAsyncThunk, createSlice } from "@reduxjs/toolkit";
2
import { request } from "../../../utils/requests";
3
import { IBoardTemplates, IBoard } from "../../../types/boardTypes";
4
import { v4 as uuidv4 } from "uuid";
5
import { IBoardPageState } from "../../../pages/BoardPage/BoardPage";
6

7
type TBoardSliceState = {
8
  boards: IBoard[];
9
  boardColumns: IBoard[];
10
  color: string | null;
11
  isRequestFailed: boolean;
12
  isRequestLoading: boolean;
13
  templates: IBoardTemplates[];
14
};
15

16
const initialState: TBoardSliceState = {
17
  boards: [],
18
  boardColumns: [],
19
  templates: [],
20
  color: null,
21
  isRequestLoading: false,
22
  isRequestFailed: false,
23
};
24

25
export const deleteBoard = createAsyncThunk<IBoard, string>(
26
  "board/deleteBoard",
27
  async (id) => {
28
    const response = await request<IBoard>(
29
      `http://localhost:3000/boards/${id}`,
30
      {
31
        method: "DELETE",
32
      }
33
    );
34
    return response;
35
  }
36
);
37

38
export const deleteColumn = createAsyncThunk<IBoard, string>(
39
  "board/deleteColumn",
40
  async (id) => {
41
    const response = await request<IBoard>(
42
      `http://localhost:3000/boardColumns/${id}`,
43
      {
44
        method: "DELETE",
45
      }
46
    );
47
    return response;
48
  }
49
);
50

51
export const postBoards = createAsyncThunk<IBoard, IBoardPageState>(
52
  "board/postBoards",
53
  async (data) => {
54
    const response = await request<IBoard>("http://localhost:3000/boards", {
55
      method: "POST",
56
      headers: {
57
        "Content-type": "application/json",
58
      },
59
      body: JSON.stringify({ id: uuidv4(), type: "board", ...data }),
60
    });
61
    return response;
62
  }
63
);
64

65
export const postColumns = createAsyncThunk<IBoard, IBoardPageState>(
66
  "board/postColumns",
67
  async (data) => {
68
    const response = await request<IBoard>(
69
      "http://localhost:3000/boardColumns",
70
      {
71
        method: "POST",
72
        headers: {
73
          "Content-type": "application/json",
74
        },
75
        body: JSON.stringify({ id: uuidv4(), type: "column", ...data }),
76
      }
77
    );
78
    return response;
79
  }
80
);
81

82
export const getColumns = createAsyncThunk("board/getColumns", async () => {
83
  const response = await request<IBoard[]>(
84
    "http://localhost:3000/boardColumns",
85
    {
86
      method: "GET",
87
    }
88
  );
89
  return response;
90
});
91

92
export const getTemplates = createAsyncThunk("board/getTemplates", async () => {
93
  const response = await request<IBoardTemplates[]>(
94
    "http://localhost:3000/templates",
95
    {
96
      method: "GET",
97
    }
98
  );
99
  return response;
100
});
101

102
export const getBoards = createAsyncThunk("board/getBoards", async () => {
103
  const response = await request<IBoard[]>("http://localhost:3000/boards", {
104
    method: "GET",
105
  });
106
  return response;
107
});
108

109
export const boardSlice = createSlice({
110
  name: "board",
111
  initialState,
112
  reducers: {
113
    moveCard: (
114
      state,
115
      action: PayloadAction<{ dragIndex: number; hoverIndex: number }>
116
    ) => {
117
      const { dragIndex, hoverIndex } = action.payload;
118
      const temp = state.boardColumns[dragIndex];
119
      state.boardColumns = state.boardColumns.filter(
120
        (item, idx) => idx !== dragIndex
121
      );
122
      state.boardColumns.splice(hoverIndex, 0, temp);
123
    },
124
  },
125
  extraReducers: (builder) => {
126
    builder
127
      .addCase(getColumns.pending, (state) => {
128
        state.isRequestLoading = true;
129
      })
130
      .addCase(getColumns.fulfilled, (state, { payload }) => {
131
        state.boardColumns = payload;
132
        state.isRequestFailed = false;
133
        state.isRequestLoading = false;
134
      })
135
      .addCase(getColumns.rejected, (state) => {
136
        state.isRequestFailed = true;
137
        state.isRequestLoading = false;
138
      })
139
      .addCase(getTemplates.pending, (state) => {
140
        state.isRequestLoading = true;
141
      })
142
      .addCase(getTemplates.fulfilled, (state, { payload }) => {
143
        state.templates = payload;
144
        state.isRequestFailed = false;
145
        state.isRequestLoading = false;
146
      })
147
      .addCase(getTemplates.rejected, (state) => {
148
        state.isRequestFailed = true;
149
        state.isRequestLoading = false;
150
      })
151
      .addCase(postBoards.pending, (state) => {
152
        state.isRequestLoading = true;
153
      })
154
      .addCase(postBoards.fulfilled, (state, { payload }) => {
155
        state.boards = [...state.boards, payload];
156
        state.isRequestFailed = false;
157
        state.isRequestLoading = false;
158
      })
159
      .addCase(postBoards.rejected, (state) => {
160
        state.isRequestFailed = true;
161
        state.isRequestLoading = false;
162
      })
163
      .addCase(getBoards.pending, (state) => {
164
        state.isRequestLoading = true;
165
      })
166
      .addCase(getBoards.fulfilled, (state, { payload }) => {
167
        state.boards = payload;
168
        state.isRequestFailed = false;
169
        state.isRequestLoading = false;
170
      })
171
      .addCase(getBoards.rejected, (state) => {
172
        state.isRequestFailed = true;
173
        state.isRequestLoading = false;
174
      })
175
      .addCase(postColumns.pending, (state) => {
176
        state.isRequestLoading = true;
177
      })
178
      .addCase(postColumns.fulfilled, (state, { payload }) => {
179
        state.boardColumns = [...state.boardColumns, payload];
180
        state.isRequestFailed = false;
181
        state.isRequestLoading = false;
182
      })
183
      .addCase(postColumns.rejected, (state) => {
184
        state.isRequestFailed = true;
185
        state.isRequestLoading = false;
186
      })
187
      .addCase(deleteBoard.pending, (state) => {
188
        state.isRequestLoading = true;
189
      })
190
      .addCase(deleteBoard.fulfilled, (state, { payload }) => {
191
        state.boards = state.boards.filter((board) => board.id !== payload.id);
192
        state.isRequestFailed = false;
193
        state.isRequestLoading = false;
194
      })
195
      .addCase(deleteBoard.rejected, (state) => {
196
        state.isRequestFailed = true;
197
        state.isRequestLoading = false;
198
      })
199
      .addCase(deleteColumn.pending, (state) => {
200
        state.isRequestLoading = true;
201
      })
202
      .addCase(deleteColumn.fulfilled, (state, { payload }) => {
203
        state.boardColumns = state.boardColumns.filter(
204
          (column) => column.id !== payload.id
205
        );
206
        state.isRequestFailed = false;
207
        state.isRequestLoading = false;
208
      })
209
      .addCase(deleteColumn.rejected, (state) => {
210
        state.isRequestFailed = true;
211
        state.isRequestLoading = false;
212
      });
213
  },
214
});
215

216
export const { moveCard } = boardSlice.actions;
217
export default boardSlice.reducer;
218