Merge pull request #51 from AnWhiteM/taskColumn-redux

add redux for columns

src/redux/columns/operations.js

@@ -0,0 +1,69 @@
+import axios from "axios";
+import { createAsyncThunk } from "@reduxjs/toolkit";
+
+axios.defaults.baseURL = "https://project-6-back-end.onrender.com";
+
+
+export const getColumns = createAsyncThunk(
+  "columns/getAll",
+  async (deskId, thunkAPI) => {
+    try {
+      const response = await axios.get(`/home/${deskId}/columns`);
+      return response.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error.message);
+    }
+  }
+);
+
+
+export const getColumn = createAsyncThunk(
+  "columns/getColumn",
+  async ({ deskId, columnId }, thunkAPI) => {
+    try {
+      const response = await axios.get(`/home/${deskId}/columns/${columnId}`);
+      return response.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error.message);
+    }
+  }
+);
+
+
+export const addColumn = createAsyncThunk(
+  "columns/addColumn",
+  async ({ deskId, newColumn }, thunkAPI) => {
+    try {
+      const response = await axios.post(`/home/${deskId}/columns`, newColumn);
+      return response.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error.message);
+    }
+  }
+);
+
+
+export const updateColumn = createAsyncThunk(
+  "columns/updateColumn",
+  async ({ deskId, columnId, updatedColumn }, thunkAPI) => {
+    try {
+      const response = await axios.put(`/home/${deskId}/columns/${columnId}`, updatedColumn);
+      return response.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error.message);
+    }
+  }
+);
+
+
+export const deleteColumn = createAsyncThunk(
+  "columns/deleteColumn",
+  async ({ deskId, columnId }, thunkAPI) => {
+    try {
+      const response = await axios.delete(`/home/${deskId}/columns/${columnId}`);
+      return response.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error.message);
+    }
+  }
+);

src/redux/columns/selectors.js

@@ -0,0 +1,7 @@
+export const selectLoading = (state) => state.column.loading;
+
+export const selectError = (state) => state.column.error;
+
+export const selectColumns = (state) => state.column.items;
+
+export const selectCurrentColumn = (state) => state.column.currentItem;

src/redux/columns/slice.js

@@ -0,0 +1,80 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { addColumn, deleteColumn, getColumns, getColumn, updateColumn } from "./operations";
+
+const columnSlice = createSlice({
+  name: "column",
+  initialState: {
+    items: [],
+    currentItem: null,
+    loading: false,
+    error: null,
+  },
+  extraReducers: (builder) =>
+    builder
+      .addCase(getColumns.pending, (state) => {
+        state.error = null;
+        state.loading = true;
+      })
+      .addCase(getColumns.fulfilled, (state, action) => {
+        state.loading = false;
+        state.items = action.payload;
+      })
+      .addCase(getColumns.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      })
+      .addCase(getColumn.pending, (state) => {
+        state.error = null;
+        state.loading = true;
+      })
+      .addCase(getColumn.fulfilled, (state, action) => {
+        state.loading = false;
+        state.currentItem = action.payload;
+      })
+      .addCase(getColumn.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      })
+      .addCase(addColumn.pending, (state) => {
+        state.error = null;
+        state.loading = true;
+      })
+      .addCase(addColumn.fulfilled, (state, action) => {
+        state.loading = false;
+        state.items.push(action.payload);
+      })
+      .addCase(addColumn.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      })
+      .addCase(updateColumn.pending, (state) => {
+        state.error = null;
+        state.loading = true;
+      })
+      .addCase(updateColumn.fulfilled, (state, action) => {
+        state.loading = false;
+        state.items = state.items.map(column =>
+          column.id === action.payload.id ? action.payload : column
+        );
+      })
+      .addCase(updateColumn.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      })
+      .addCase(deleteColumn.pending, (state) => {
+        state.error = null;
+        state.loading = true;
+      })
+      .addCase(deleteColumn.fulfilled, (state, action) => {
+        state.loading = false;
+        state.items = state.items.filter(
+          (column) => column.id !== action.payload.id
+        );
+      })
+      .addCase(deleteColumn.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      }),
+});
+
+export const columnReducer = columnSlice.reducer;

src/redux/store.js

@@ -11,6 +11,7 @@ import {
 } from "redux-persist";
 import { boardsReducer } from "./boards/slice";
 import { authReducer } from "./auth/slice";
+import { columnReducer } from "./columns/slice";
 import storage from "redux-persist/lib/storage";
 
 const authPersistConfig = {
@@ -25,6 +26,7 @@ export const store = configureStore({
   reducer: {
     boards: boardsReducer,
     auth: persistedAuthReducer,
+    column: columnReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({