added the tag feature so that now it's totally sync with server and that's a cool feature I have ever seen

Author: Rankvet-Developer

src/components/Footer.js

@@ -15,75 +15,82 @@ const numberOfTodos = (no_of_todos) => {
 export default function Footer() {
 
     const [status,setStatus] = useState("All");
+    const [colors,setColors] = useState([]);
 
-    const {data:todos,isSuccess} = useGetTodosQuery(status);
+    const {data:todos,isSuccess} = useGetTodosQuery({status: status,colors: colors});
 
     // const filters = useSelector((state) => state.filters);
 
     const todosRemaining = isSuccess && todos.filter((todo) => !todo.completed).length;
     // const { status, colors } = filters;
 
     const handleStatusChange = (statusName) => {
+        console.log(statusName);
         setStatus(statusName);
     };
 
-    // const handleColorChange = (color) => {
-    //     if (colors.includes(color)) {
-    //         dispatch(colorChanged(color, "removed"));
-    //     } else {
-    //         dispatch(colorChanged(color, "added"));
-    //     }
-    // };
+    const handleColorChange = (color) => {
+        if (colors.includes(color)) {
+            // remove color
+            setColors(() => {
+                return [...colors].filter(existingColor => existingColor !== color)
+            })
+        } else {
+            // add color...
+            const newColors = [...colors,color];
+            setColors(newColors);
+        }
+    };
 
     return (
         <div className="mt-4 flex justify-between text-xs text-gray-500">
             <p>{numberOfTodos(todosRemaining)} left</p>
             <ul className="flex space-x-1 items-center text-xs">
                 <li
-                    // className={`cursor-pointer ${
-                    //     status === "All" && "font-bold"
-                    // }`}
+                    className={`cursor-pointer ${
+                        status === "All" && "font-bold"
+                    }`}
                     onClick={() => handleStatusChange("All")}
                 >
                     All
                 </li>
                 <li>|</li>
                 <li
-                    // className={`cursor-pointer ${
-                    //     status === "Incomplete" && "font-bold"
-                    // }`}
+                    className={`cursor-pointer ${
+                        status === "Incomplete" && "font-bold"
+                    }`}
                     onClick={() => handleStatusChange("Incomplete")}
                 >
                     Incomplete
                 </li>
                 <li>|</li>
                 <li
-                    // className={`cursor-pointer ${
-                    //     status === "Complete" && "font-bold"
-                    // }`}
+                    className={`cursor-pointer ${
+                        status === "Complete" && "font-bold"
+                    }`}
                     onClick={() => handleStatusChange("Complete")}
                 >
                     Complete
                 </li>
                 <li></li>
                 <li></li>
                 <li
-                    // className={`h-3 w-3 border-2 border-green-500 md:hover:bg-green-500 rounded-full cursor-pointer ${
-                    //     colors.includes("green") && "bg-green-500"
-                    // }`}
-                    // onClick={() => handleColorChange("green")}
+                    className={`h-3 w-3 border-2 border-green-500 md:hover:bg-green-500 rounded-full cursor-pointer ${
+                        colors.includes("green") && "bg-green-500"
+                    }`}
+                    onClick={() => handleColorChange("green")}
                 ></li>
                 <li
-                    // className={`h-3 w-3 border-2 border-red-500 md:hover:bg-red-500 rounded-full cursor-pointer ${
-                    //     colors.includes("red") && "bg-red-500"
-                    // }`}
-                    // onClick={() => handleColorChange("red")}
+                    className={`h-3 w-3 border-2 border-red-500 md:hover:bg-red-500 rounded-full cursor-pointer ${
+                        colors.includes("red") && "bg-red-500"
+                    }`}
+                    onClick={() => handleColorChange("red")}
                 ></li>
                 <li
-                    // className={`h-3 w-3 border-2 border-yellow-500 md:hover:bg-yellow-500 rounded-full cursor-pointer ${
-                    //     colors.includes("yellow") && "bg-yellow-500"
-                    // }`}
-                    // onClick={() => handleColorChange("yellow")}
+                    className={`h-3 w-3 border-2 border-yellow-500 md:hover:bg-yellow-500 rounded-full cursor-pointer ${
+                        colors.includes("yellow") && "bg-yellow-500"
+                    }`}
+                    onClick={() => handleColorChange("yellow")}
                 ></li>
             </ul>
         </div>

src/features/api/apiSlice.js

@@ -5,28 +5,37 @@ export const apiSlice = createApi({
     baseQuery: fetchBaseQuery({
         baseUrl: "http://localhost:8000"
     }),
+    tagTypes: ["Todos"],
     endpoints: (builder) => ({
         getTodos: builder.query({
-            query: (status="") => {
+            query: (data) => {
                 let queryString = "";
+                if(data){
+                    const {status,colors} = data;
 
-                if(status !== ""){
-                    if(status === "All"){
-                        queryString = "";
+                    if(status !== ""){
+                        if(status === "All"){
+                            queryString = "";
+                        }
+                        if(status === "Incomplete"){
+                            queryString = "completed=false&";
+                        }
+                        if(status === "Complete"){
+                            queryString = "completed=false&";
+                        }
                     }
-                    if(status === "Incomplete"){
-                        queryString = "completed=false";
-                    }
-                    if(status === "Complete"){
-                        queryString = "completed=false";
+
+                    if(colors.length > 0){
+                        queryString += colors.map(color => `color=${color}`).join("&");
                     }
                 }
 
                 return {
                     url: `/todos?${queryString}`,
                     method: 'get'
                 }
-            }
+            },
+            providesTags: ["Todos"]
         }),
         addTodo: builder.mutation({
             query: (data) => ({
@@ -36,7 +45,8 @@ export const apiSlice = createApi({
                     text: data,
                     completed: false,
                 }
-            })
+            }),
+            invalidatesTags: ["Todos"]
         }),
         updateTodo: builder.mutation({
             query: ({id,data}) => ({
@@ -49,7 +59,8 @@ export const apiSlice = createApi({
             query: (id) => ({
                 url: `/todos/${id}`,
                 method: "DELETE"
-            })
+            }),
+            invalidatesTags: ["Todos"]
         }),
         toogleTodo: builder.mutation({
             query:({id,toogleValue}) => ({
@@ -58,7 +69,8 @@ export const apiSlice = createApi({
                 body:{
                     completed: !toogleValue
                 }
-            })
+            }),
+            invalidatesTags: ["Todos"]
         }),
         updateTodoColor: builder.mutation({
             query: ({id,color}) => ({