Merge pull request #478 from ThulaxanUthayakumar/improve-todo-performance-ui

Refactor Todo App UI and improve performance

Author: ianshulx

react-todo-app/src/components/AppContent.js

@@ -1,9 +1,10 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+
 import styles from '../styles/modules/app.module.scss';
 import TodoItem from './TodoItem';
-import { clearCompletedTodos } from '../slices/todoSlice'; // ✅ import action
+import { clearCompletedTodos } from '../slices/todoSlice';
 
 const container = {
   hidden: { opacity: 1 },
@@ -15,35 +16,36 @@ const container = {
     },
   },
 };
+
 const child = {
   hidden: { y: 20, opacity: 0 },
-  visible: {
-    y: 0,
-    opacity: 1,
-  },
+  visible: { y: 0, opacity: 1 },
 };
 
 function AppContent() {
   const dispatch = useDispatch();
+
   const todoList = useSelector((state) => state.todo.todoList);
   const filterStatus = useSelector((state) => state.todo.filterStatus);
 
-  const sortedTodoList = [...todoList];
-  sortedTodoList.sort((a, b) => new Date(b.time) - new Date(a.time));
+  // ✅ Optimized sorting + filtering
+  const filteredTodoList = useMemo(() => {
+    return [...todoList]
+      .sort((a, b) => new Date(b.time) - new Date(a.time))
+      .filter((item) =>
+        filterStatus === 'all' ? true : item.status === filterStatus
+      );
+  }, [todoList, filterStatus]);
 
-  const filteredTodoList = sortedTodoList.filter((item) => {
-    if (filterStatus === 'all') {
-      return true;
-    }
-    return item.status === filterStatus;
-  });
+  const hasCompleted = useMemo(
+    () => todoList.some((todo) => todo.status === 'complete'),
+    [todoList]
+  );
 
-  // ✅ Handler for clearing completed todos
-  const handleClearCompleted = () => {
+  // ✅ Stable handler
+  const handleClearCompleted = useCallback(() => {
     dispatch(clearCompletedTodos());
-  };
-
-  const hasCompleted = todoList.some((todo) => todo.status === 'complete');
+  }, [dispatch]);
 
   return (
     <motion.div
@@ -52,31 +54,20 @@ function AppContent() {
       initial="hidden"
       animate="visible"
     >
-      {/* ✅ Clear Completed button */}
+      {/* Clear Completed Button */}
       {hasCompleted && (
-        <div style={{ textAlign: 'right', marginBottom: '1rem' }}>
+        <div className={styles.clearWrapper}>
           <button
+            className={styles.clearButton}
             onClick={handleClearCompleted}
-            style={{
-              backgroundColor: '#ff5c5c',
-              border: 'none',
-              color: 'white',
-              padding: '0.5rem 1rem',
-              borderRadius: '8px',
-              cursor: 'pointer',
-              fontWeight: '500',
-              transition: 'background 0.2s',
-            }}
-            onMouseOver={(e) => (e.target.style.backgroundColor = '#ff3b3b')}
-            onMouseOut={(e) => (e.target.style.backgroundColor = '#ff5c5c')}
           >
             Clear Completed
           </button>
         </div>
       )}
 
       <AnimatePresence>
-        {filteredTodoList && filteredTodoList.length > 0 ? (
+        {filteredTodoList.length > 0 ? (
           filteredTodoList.map((todo) => (
             <TodoItem key={todo.id} todo={todo} />
           ))
@@ -90,4 +81,4 @@ function AppContent() {
   );
 }
 
-export default AppContent;
+export default AppContent;

react-todo-app/src/styles/modules/app.module.scss

@@ -32,3 +32,22 @@
 	width: max-content;
 	height: auto;
 }
+.clearWrapper {
+  text-align: right;
+  margin-bottom: 1rem;
+}
+
+.clearButton {
+  background-color: #ff5c5c;
+  border: none;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: 0.2s ease;
+
+  &:hover {
+    background-color: #ff3b3b;
+  }
+}