feat: reset todos order values on reload (#9)

src/app/api/apiSlice.js

@@ -8,6 +8,7 @@ export const apiSlice = createApi({
     endpoints: (builder) => ({
         getTodos: builder.query({
             query: () => '/todos',
+            transformResponse: res => res.sort((a,b) => b.order - a.order),
             providesTags: ['Todos']
         }),
         addTodo: builder.mutation({
@@ -49,6 +50,14 @@ export const apiSlice = createApi({
                 body: todos
             }),
             invalidatesTags: ['Todos']
+        }),
+        resetTodo: builder.mutation({
+            query: (todos) => ({
+                url: '/todos/reset',
+                method: 'POST',
+                body: todos
+            }),
+            invalidatesTags: ['Todos']
         })
     })
 })
@@ -59,5 +68,6 @@ export const {
     useUpdateTodoMutation,
     useDoneTodoMutation,
     useDeleteTodoMutation,
-    useReorderTodoMutation
+    useReorderTodoMutation,
+    useResetTodoMutation
 } = apiSlice

src/features/todos/TodoList.js

@@ -8,12 +8,14 @@ import {
     useDoneTodoMutation,
     useDeleteTodoMutation,
     useReorderTodoMutation,
+    useResetTodoMutation,
 } from '../../app/api/apiSlice'
 
 const TodoList = () => {
+    const [ isResetDone, setisResetDone ] = useState(false);
     const [ todoWithoutDB, setTodoWithoutDB ] = useState([])
     const [ newTodo, setNewTodo ] = useState('')
-    const [moveDoneToEnd, setMoveDoneToEnd] = useState(false);
+    const [ moveDoneToEnd, setMoveDoneToEnd ] = useState(false);
 
     const {
         data: todos,
@@ -26,6 +28,7 @@ const TodoList = () => {
     const [ doneTodo ] = useDoneTodoMutation()
     const [ deleteTodo ] = useDeleteTodoMutation()
     const [ reorderTodo ] = useReorderTodoMutation()
+    const [ resetTodo ] = useResetTodoMutation()
 
     // Effect to load todos from local storage if there is cache
     useEffect(() => {
@@ -39,6 +42,15 @@ const TodoList = () => {
         }
     }, [todos])
 
+    // Reset Order to 0 when page first mounted
+    useEffect(()=> {
+        if (todos && !isResetDone){
+            resetTodo(todos)
+            setisResetDone(true)
+        }
+    }, [todos, isResetDone, resetTodo])
+
+
     // Effect to save todos to local storage when todos change
     useEffect(() => {
         localStorage.setItem('todos', JSON.stringify(todoWithoutDB))

src/index.css

@@ -181,6 +181,8 @@ input[type="text"] {
 
 .content{
   margin-bottom: 2rem;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .submit:hover .svg-inline--fa {