feat: filter todos by status

Author: coderSuresh

app/page.tsx

@@ -3,6 +3,7 @@ import DarkModeToggler from "@/components/DarkModeToggler"
 import Form from "@/components/Form"
 import TodosContents from "@/components/TodosContents"
 import AnimationProvider from "@/provider/AnimationProvider"
+import FilterProvider from "@/provider/FilterProvider"
 import ThemeProvider from "@/provider/ThemeProvider"
 import TodoProvider from "@/provider/TodoProvider"
 
@@ -11,34 +12,36 @@ const Home = () => {
   return (
     <ThemeProvider>
       <TodoProvider>
-        <AnimationProvider>
-        <main className="bg-bg h-screen">
+        <FilterProvider>
+          <AnimationProvider>
+            <main className="bg-bg h-screen">
 
-          <BackgroundImage />
+              <BackgroundImage />
 
-          <section className="container relative max-w-2xl mx-auto p-5">
+              <section className="container relative max-w-2xl mx-auto p-5">
 
-            <div className="flex items-center justify-between sm:pt-16 pt-8">
-              <h1 className="uppercase tracking-widest md:text-4xl text-2xl font-bold text-white">
-                Todo
-              </h1>
+                <div className="flex items-center justify-between sm:pt-16 pt-8">
+                  <h1 className="uppercase tracking-widest md:text-4xl text-2xl font-bold text-white">
+                    Todo
+                  </h1>
 
-              <DarkModeToggler />
+                  <DarkModeToggler />
 
-            </div>
+                </div>
 
-            <div className="bg-card-bg rounded-md shadow-lg px-5 py-2 mt-8">
-              <Form />
-            </div>
+                <div className="bg-card-bg rounded-md shadow-lg px-5 py-2 mt-8">
+                  <Form />
+                </div>
 
-            <TodosContents />
+                <TodosContents />
 
-          </section>
+              </section>
 
-          <p className="text-grayish-text text-center md:mt-0 pb-10 mt-20">Drag and drop yo reorder list</p>
+              <p className="text-grayish-text text-center md:mt-0 pb-10 mt-20">Drag and drop yo reorder list</p>
 
-        </main>
-        </AnimationProvider>
+            </main>
+          </AnimationProvider>
+        </FilterProvider>
       </TodoProvider>
     </ThemeProvider>
   )

components/ListControls.tsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import ClearAllCompletedBtn from './ClearAllCompletedBtn'
+import { FilterContext } from '@/context/FilterContext'
 
 const ListControls = ({ len, todos }: ListControlProps) => {
 
+    const { filter, setFilter } = React.useContext(FilterContext)
+
     return (
         <div className='flex px-5 py-2 justify-between items-center text-sm text-grayish-text'>
 
@@ -11,9 +14,26 @@ const ListControls = ({ len, todos }: ListControlProps) => {
             </div>
 
             <div className='flex md:w-fit gap-3 font-bold md:mt-0 md:static absolute mt-36 md:shadow-none shadow-md w-[calc(100%-40px)] left-5 right-5 rounded-md bg-card-bg md:py-0 py-4 px-5 justify-center'>
-                <button className='text-bright-blue hover:text-text-hovered'>All</button>
-                <button className='hover:text-text-hovered'>Active</button>
-                <button className='hover:text-text-hovered'>Completed</button>
+                <button
+                    onClick={() => setFilter('all')}
+                    className={`${filter === 'all' ? 'text-bright-blue' : ''} sm:hover:text-text-hovered`}
+                >
+                    All
+                </button>
+
+                <button
+                    onClick={() => setFilter('active')}
+                    className={`${filter === 'active' ? 'text-bright-blue' : ''} sm:hover:text-text-hovered`}
+                >
+                    Active
+                </button>
+
+                <button
+                    onClick={() => setFilter('completed')}
+                    className={`${filter === 'completed' ? 'text-bright-blue' : ''} sm:hover:text-text-hovered`}
+                >
+                    Completed
+                </button>
             </div>
 
             <ClearAllCompletedBtn todos={todos} />

components/TodosContents.tsx

@@ -3,28 +3,40 @@ import React from 'react'
 import ListItem from './ListItem'
 import ListControls from './ListControls'
 import { TodoContext } from '@/context/TodoContext'
+import { FilterContext } from '@/context/FilterContext'
 
 const TodosContainer = () => {
 
     const [todos, setTodos] = React.useState<TodoType[]>([])
     const [loading, setLoading] = React.useState(true)
+    const [filteredTodos, setFilteredTodos] = React.useState<TodoType[]>([])
 
     const { isManipulated, setIsManipulated } = React.useContext(TodoContext)
+    const { filter, setFilter } = React.useContext(FilterContext)
 
     React.useEffect(() => {
+        setFilter('all')
         setIsManipulated(false)
         const todos = JSON.parse(localStorage.getItem('todos') || '[]')
         setTodos(todos)
         setLoading(false)
     }, [isManipulated])
 
+    React.useEffect(() => {
+        if (filter === 'active') setFilteredTodos(todos.filter(todo => !todo.completed))
+        else if (filter === 'completed') setFilteredTodos(todos.filter(todo => todo.completed))
+        else setFilteredTodos(todos)
+    }, [filter, todos])
+
     const renderTodos = () => {
 
         if (todos.length <= 0) {
             return <p className="text-center text-grayish-text my-10">Nothing to do for now.</p>
         }
 
-        return todos.map(todo => {
+        let todosWithContent = filteredTodos.length > 0 ? filteredTodos : todos as TodoType[]
+
+        return todosWithContent.map(todo => {
             return (
                 <ListItem
                     key={todo.id}

context/FilterContext.ts

@@ -0,0 +1,7 @@
+'use client'
+import React from 'react'
+
+export const FilterContext = React.createContext({
+  filter: 'all',
+  setFilter: (filter: string) => {},
+})

provider/FilterProvider.tsx

@@ -0,0 +1,16 @@
+'use client'
+import React from 'react'
+import { FilterContext } from '@/context/FilterContext'
+
+const FilterProvider = ({ children }: ChildrenProps) => {
+
+    const [filter, setFilter] = React.useState('all')
+
+    return (
+        <FilterContext.Provider value={{ filter, setFilter }}>
+            {children}
+        </FilterContext.Provider>
+    )
+}
+
+export default FilterProvider