.1496908331498617:5a2a0b786f0b5475641e5bb261bbcd59_698090e8d9b69a50e527318e.6980a713d9b69a50e527321a.6980a713c69735ad5a1affe8:Trae CN.T(2026/2/2 21:30:59)

src/components/hoc/wrapInputBox.js

@@ -1,22 +1,28 @@
 import KeyCode from 'keycode-js';
 import { compose, withState, withHandlers } from 'recompose';
+import { PRIORITY_NORMAL } from '../../services/todo';
 
 export default compose(
     withState('value', 'setValue', props => {
-        console.log('got props', props);
-        return props.value || ''
+        return props.value || '';
+    }),
+    withState('priority', 'setPriority', props => {
+        return props.priority || PRIORITY_NORMAL;
     }),
     withHandlers({
-        handleKeyUp: ({ addNew, setValue }) => e => {
+        handleKeyUp: ({ addNew, setValue, priority }) => e => {
             const text = e.target.value.trim();
 
             if (e.keyCode === KeyCode.KEY_RETURN && text) {
-                addNew(text);
+                addNew(text, priority);
                 setValue('');
             }
         },
         handleChange: ({ setValue }) => e => {
             setValue(e.target.value);
+        },
+        handlePriorityChange: ({ setPriority }) => e => {
+            setPriority(e.target.value);
         }
     })
 );

src/components/ui/InputBox.js

@@ -1,18 +1,33 @@
 import React from 'react';
 import enhance from '../hoc/wrapInputBox';
+import { PRIORITY_HIGH, PRIORITY_MEDIUM, PRIORITY_NORMAL } from '../../services/todo';
 
 function InputBox(props) {
-    const { value, handleChange, handleKeyUp } = props;
+    const { value, handleChange, handleKeyUp, priority, handlePriorityChange } = props;
 
     return (
-        <input autoFocus
-            type="text"
-            className="form-control add-todo"
-            value={value}
-            onKeyUp={handleKeyUp}
-            onChange={handleChange}
-            placeholder="Add New"
-        />
+        <div className="input-group">
+            <input autoFocus
+                type="text"
+                className="form-control add-todo"
+                value={value}
+                onKeyUp={handleKeyUp}
+                onChange={handleChange}
+                placeholder="Add New"
+            />
+            <div className="input-group-btn">
+                <select 
+                    className="form-control" 
+                    value={priority}
+                    onChange={handlePriorityChange}
+                    style={{ width: '120px' }}
+                >
+                    <option value={PRIORITY_HIGH}>High</option>
+                    <option value={PRIORITY_MEDIUM}>Medium</option>
+                    <option value={PRIORITY_NORMAL}>Normal</option>
+                </select>
+            </div>
+        </div>
     );
 }
 

src/components/ui/TodoItem.js

@@ -1,16 +1,34 @@
 import React from 'react';
 import CheckBox from './CheckBox';
+import { PRIORITY_HIGH, PRIORITY_MEDIUM, PRIORITY_NORMAL } from '../../services/todo';
 
 export default function TodoItem(props) {
     const {data, changeStatus} = props;
     const handleChange = (checked) => changeStatus(data.id, checked);
     const className = 'todo-item ui-state-default ' + (data.completed === true ? 'completed' : 'pending');
+
+    const getPriorityBadge = () => {
+        let badgeClass = 'badge ';
+        switch(data.priority) {
+            case PRIORITY_HIGH:
+                badgeClass += 'badge-danger';
+                break;
+            case PRIORITY_MEDIUM:
+                badgeClass += 'badge-warning';
+                break;
+            case PRIORITY_NORMAL:
+            default:
+                badgeClass += 'badge-default';
+        }
+        return <span className={badgeClass} style={{marginLeft: '10px'}}>{data.priority}</span>;
+    };
 
     return (
         <li className={className}>
             <div className="checkbox">
                 <label>
                     <CheckBox checked={data.completed} onChange={handleChange}/> {data.text}
+                    {getPriorityBadge()}
                 </label>
             </div>
         </li>

src/components/ui/TodoList.js

@@ -4,12 +4,13 @@ import Header from './Header';
 import Footer from './Footer';
 import FilteredList from './FilteredList';
 import {applyFilter, search, FILTER_ACTIVE} from '../../services/filter';
+import {sortList} from '../../services/todo';
 
 export default function TodoList(props) {
     const {list, filter, mode, query} = props.data;
     const {addNew, changeFilter, changeStatus, changeMode, setSearchQuery} = props.actions;
     const activeItemCount = applyFilter(list, FILTER_ACTIVE).length;
-    const items = search(applyFilter(list, filter), query);
+    const items = search(applyFilter(sortList(list), filter), query);
 
     return (
         <div className="container">

src/components/wrappers/StateProvider.js

@@ -24,9 +24,9 @@ class StateProvider extends Component {
         return <div>{children}</div>;
     }
 
-    addNew(text) {
-        let updatedList = addToList(this.state.list, {text, completed: false});
-
+    addNew(text, priority) {
+        let updatedList = addToList(this.state.list, {text, completed: false, priority});
+        localStorage.setItem('todos', JSON.stringify(updatedList));
         this.setState({list: updatedList});
     }
 
@@ -35,9 +35,11 @@ class StateProvider extends Component {
     }
 
     changeStatus(itemId, completed) {
-        const updatedList = updateStatus(this.state.list, itemId, completed);
-
-        this.setState({list: updatedList});
+        this.setState(prevState => {
+            const updatedList = updateStatus(prevState.list, itemId, completed);
+            localStorage.setItem('todos', JSON.stringify(updatedList));
+            return {list: updatedList};
+        });
     }
 
     changeMode(mode = MODE_NONE) {

src/services/todo.js

@@ -1,25 +1,39 @@
 import update from 'immutability-helper';
 
 /**
- * Get the list of todo items.
+ * Priority levels
+ */
+export const PRIORITY_HIGH = 'High';
+export const PRIORITY_MEDIUM = 'Medium';
+export const PRIORITY_NORMAL = 'Normal';
+
+/**
+ * Get the list of todo items from localStorage.
  * @return {Array}
  */
 export function getAll() {
+    const storedTodos = localStorage.getItem('todos');
+    if (storedTodos) {
+        return JSON.parse(storedTodos);
+    }
     return [
         {
             id: 1,
             text: 'Learn Javascript',
-            completed: false
+            completed: false,
+            priority: PRIORITY_NORMAL
         },
         {
             id: 2,
             text: 'Learn React',
-            completed: false
+            completed: false,
+            priority: PRIORITY_NORMAL
         },
         {
             id: 3,
             text: 'Build a React App',
-            completed: false
+            completed: false,
+            priority: PRIORITY_NORMAL
         }
     ]
 }
@@ -59,8 +73,33 @@ function getNextId() {
  */
 export function addToList(list, data) {
     let item = Object.assign({
-        id: getNextId()
+        id: getNextId(),
+        priority: PRIORITY_NORMAL
     }, data);
 
     return list.concat([item]);
 }
+
+/**
+ * Sorts the todo list by priority and completion status.
+ * Completed tasks sink to the bottom.
+ * Priority order: High > Medium > Normal
+ * @param {Array} list
+ * @return {Array}
+ */
+export function sortList(list) {
+    const priorityOrder = {
+        [PRIORITY_HIGH]: 3,
+        [PRIORITY_MEDIUM]: 2,
+        [PRIORITY_NORMAL]: 1
+    };
+
+    return [...list].sort((a, b) => {
+        // Completed tasks sink to bottom
+        if (a.completed !== b.completed) {
+            return a.completed ? 1 : -1;
+        }
+        // Sort by priority
+        return priorityOrder[b.priority] - priorityOrder[a.priority];
+    });
+}