How to change the logic of your task application?
To create a robust task application (Tudus) and enable future functionality such as editing tasks using unique paths, it is essential to move away from identifying them by their text and start using them by their ID. In this guide, discover how to transform your application to achieve this using custom hooks in React.
Why is identification by ID necessary for tasks?
Using a unique ID for each task enables:
- Ease of editing: Modifying the text does not alter the identifier.
- Friendly URLs: Routes can use IDs to reference specific tasks regardless of text changes.
- Consistent data structures: By versioning your data structures, you can accommodate future updates without generating errors in previous versions.
How to integrate an ID generation system?
To implement an ID generator in your custom useTudus
hook, follow these steps:
-
Create an ID generator:When creating a todo, generate a new ID using the list of existing tasks.
const newTuduID = (tuduList) => { if (!tuduList || tuduList.length === 0) { return 1; } const idList = tuduList.map(tudu => tudu.id); const maxID = Math.max(...idList); return maxID + 1;};
-
When adding a new task:Use the newTuduID
function to assign a unique ID to each new todo.
const addTudu = (text) => { const id = newTuduID(tudus); const newTudu = { text, completed: false, id }; setTudus([...tudus, newTudu]);};
-
Update task completion and deletion functions:Change task recognition from text to ID.
const completeTudu = (id) => { const index = tudus.findIndex(tudu => tudu.id === id); if (index !==-1) { const newTudus = [...tudus]; newTudus[index].completed = !newTudus[index].completed; setTudus(newTudus); } } };
const deleteTudu = (id) => { setTudus(tudus.filter(tudu => tudu.id !== id));} };
How to manage local storage?
Introduce a versioning system that allows to control different data structures in the local storage:
-
Versioning: change the key of the local storage when you update the data structure.
const useLocalStorage = (key, initialValue) => { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { return initialValue; } } });
const setValue = (value) => { try { setStoredValue(value); window.localStorage.setItem(key, JSON.stringify(value)); } catch (error) { console.error(error); } } };
return [storedValue, setValue];};
const [tudus, setTudus] = useLocalStorage('tudus-version2', []);
What updates to make to the frontend?
Be sure to update the frontend to reflect the changes in the data structure:
- Change the references in each component to use
tudu.id
instead of tudu.text
.
- Adjust the unique
keys
in lists and React components to tudu.id.
Why not use alternative identifiers in JavaScript?
Although there are libraries such as UUID or JavaScript generators to create IDs, an approach based on the maximum value by adding one ensures simplicity and efficiency. This is particularly useful if the maximum number of tasks is not large.
Invite yourself to explore, experiment and implement these changes in your task application. Always remember to test modifications and ensure consistency across all components of your application. Stay motivated and continue to learn and improve your code!
Want to see more contributions, questions and answers from the community?