filter reducer added

Author: Rankvet-Developer

src/app/store.js

@@ -1,11 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { apiSlice } from '../features/api/apiSlice';
 import counterReducer from '../features/counter/counterSlice';
+import filterReducer from '../features/filter/filterSlice';
 
 export const store = configureStore({
   reducer: {
     counter: counterReducer,
-    [apiSlice.reducerPath]: apiSlice.reducer
+    [apiSlice.reducerPath]: apiSlice.reducer,
+    filter: filterReducer
   },
   middleware: (getDefaultMiddlewares) => 
     getDefaultMiddlewares().concat(apiSlice.middleware),

src/components/TodoList.js

@@ -4,7 +4,7 @@ import Todo from "./Todo";
 export default function TodoList() {
     // use rtk query
     const {data:todos,isLoading,isError} = useGetTodosQuery();
-
+    
     let content = null;
 
     // decide what to render 

src/features/api/apiSlice.js

@@ -21,7 +21,7 @@ export const apiSlice = createApi({
                             queryString = "completed=false&";
                         }
                         if(status === "Complete"){
-                            queryString = "completed=false&";
+                            queryString = "completed=true&";
                         }
                     }
 
@@ -35,7 +35,14 @@ export const apiSlice = createApi({
                     method: 'get'
                 }
             },
-            providesTags: ["Todos"]
+            providesTags: (result,error,arg) => {
+                console.log(result);
+                return [
+                    "Todos",
+                    {type:"Todos",id: arg.id}
+                ]
+            }
+            // invalidatesTags: ["Todos"]
         }),
         addTodo: builder.mutation({
             query: (data) => ({

src/features/filter/filterSlice.js

@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    status: "All",
+    colors: []
+}
+
+const filterSlice = createSlice({
+    name: "filter",
+    initialState,
+    reducers:{
+        setStatus: (state,action) => {
+            state.status = action.payload;
+        },
+        addColor: (state,action) => {
+            state.colors.push(action.payload);
+        },
+        removeColor: (state,action) => {
+            state.colors = state.colors.filter(existingColor => existingColor !== action.payload);
+        }
+    }
+})
+
+export const {
+    setStatus,
+    addColor,
+    removeColor
+} = filterSlice.actions;
+
+export default filterSlice.reducer;