refactor(store): finish migration to redux-toolkit

app/renderer/src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from "./useTargetOutside";
 export * from "./useRippleEffect";
 export * from "./useNotification";
 export * from "./useTime";
+export * from "./storeHooks";

app/renderer/src/routes/Tasks/TaskDetails/index.tsx

@@ -5,9 +5,8 @@ import React, {
   useContext,
   useCallback,
 } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useAppDispatch, useAppSelector } from "hooks";
 import {
-  AppStateTypes,
   editTaskCard,
   editTaskCardText,
   removeTaskCard,
@@ -45,11 +44,9 @@ const TaskDetails = React.forwardRef<HTMLDivElement, Props>(
     const descriptionAreaRef = useRef<HTMLTextAreaElement>(null);
     const descriptionFormRef = useRef<HTMLFormElement>(null);
 
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
 
-    const tasks = useSelector(
-      (state: AppStateTypes) => state.tasks.present
-    );
+    const tasks = useAppSelector((state) => state.tasks.present);
 
     const { openExternalCallback } = useContext(ConnnectorContext);
 
@@ -90,26 +87,26 @@ const TaskDetails = React.forwardRef<HTMLDivElement, Props>(
     const onEditCardText = useCallback(() => {
       if (cardTextAreaRef.current && cardTextAreaRef.current.value) {
         dispatch(
-          editTaskCardText(
+          editTaskCardText({
             listId,
             cardId,
-            cardTextAreaRef.current.value
-          )
+            cardText: cardTextAreaRef.current.value,
+          })
         );
       }
     }, [dispatch, cardId, listId]);
 
     const onSubmitAction = useCallback(
       (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        dispatch(editTaskCard(listId, cardId, description));
+        dispatch(editTaskCard({ listId, cardId, description }));
         setEditingDescription(false);
       },
       [dispatch, cardId, description, listId]
     );
 
     const onCardDeleteAction = useCallback(() => {
-      dispatch(removeTaskCard(listId, cardId));
+      dispatch(removeTaskCard({ listId, cardId }));
 
       if (onExit) {
         onExit();
@@ -124,9 +121,9 @@ const TaskDetails = React.forwardRef<HTMLDivElement, Props>(
     const setTaskCardDoneCallback = useCallback(
       (e) => {
         if (e.currentTarget.checked) {
-          dispatch(setTaskCardDone(listId, card?._id));
+          dispatch(setTaskCardDone({ listId, cardId: card?._id }));
         } else {
-          dispatch(setTaskCardNotDone(listId, card?._id));
+          dispatch(setTaskCardNotDone({ listId, cardId: card?._id }));
         }
       },
       [dispatch, listId, card]

app/renderer/src/routes/Tasks/TaskInnerList.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { TaskTypes } from "store";
+import type { TaskList as TaskListType } from "store";
 import TaskList from "./TaskList";
 import { StyledTaskSection } from "styles";
 
 type Props = {
-  tasks: TaskTypes[];
+  tasks: TaskListType[];
 };
 
 const TaskInnerList: React.FC<Props> = ({ tasks }) => {

app/renderer/src/routes/Tasks/TaskList.tsx

@@ -1,8 +1,7 @@
 import React, { useRef, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useAppDispatch } from "hooks";
 import { Droppable, Draggable } from "react-beautiful-dnd";
 import {
-  TaskTypes,
   addTaskCard,
   editTaskTitle,
   editTaskCardText,
@@ -11,7 +10,7 @@ import {
   removeTaskCard,
 } from "store";
 import { StyledTaskSectionItem, StyledCardWrapper } from "styles";
-
+import type { TaskList as TaskListType } from "store";
 import TaskHeader from "./TaskHeader";
 import TaskFormButton from "./TaskFormButton";
 import TaskDetails from "./TaskDetails";
@@ -21,7 +20,7 @@ type Props = {
   priority: boolean;
   listId: string;
   title: string;
-  cards: TaskTypes["cards"];
+  cards: TaskListType["cards"];
   index: number;
 };
 
@@ -38,14 +37,14 @@ const TaskList: React.FC<Props> = ({
 
   const [cardId, setCardId] = useState("");
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
-  const onCardAdd = (value: string) => {
-    dispatch(addTaskCard(listId, value));
+  const onCardAdd = (cardText: string) => {
+    dispatch(addTaskCard({ listId, cardText }));
   };
 
-  const onEditListTitle = (title: string) => {
-    dispatch(editTaskTitle(listId, title));
+  const onEditListTitle = (listTitle: string) => {
+    dispatch(editTaskTitle({ listId, listTitle }));
   };
 
   const onRemoveListAction = () => {
@@ -81,7 +80,7 @@ const TaskList: React.FC<Props> = ({
                   />
 
                   <StyledCardWrapper>
-                    {cards?.map(({ _id, text, done }, index) => (
+                    {cards.map(({ _id, text, done }, index) => (
                       <TaskCard
                         key={_id}
                         text={text}
@@ -93,10 +92,18 @@ const TaskList: React.FC<Props> = ({
                           setShowDetails(true);
                         }}
                         onSaveCardText={(text) =>
-                          dispatch(editTaskCardText(listId, _id, text))
+                          dispatch(
+                            editTaskCardText({
+                              listId,
+                              cardId: _id,
+                              cardText: text,
+                            })
+                          )
                         }
                         onDeleteCard={() =>
-                          dispatch(removeTaskCard(listId, _id))
+                          dispatch(
+                            removeTaskCard({ listId, cardId: _id })
+                          )
                         }
                       />
                     ))}

app/renderer/src/routes/Tasks/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useAppDispatch, useAppSelector } from "hooks";
 import { ActionCreators as UndoActionCreator } from "redux-undo";
 import {
   DragDropContext,
@@ -12,15 +12,15 @@ import {
   StyledTaskWrapper,
   StyledTaskMain,
 } from "styles";
-import { AppStateTypes, addTaskList, dragList } from "store";
+import { addTaskList, dragList } from "store";
 
 import TaskFormButton from "./TaskFormButton";
 import TaskInnerList from "./TaskInnerList";
 
 export default function Tasks() {
-  const tasks = useSelector((state: AppStateTypes) => state.tasks);
+  const tasks = useAppSelector((state) => state.tasks);
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const onListAdd = (value: string) => dispatch(addTaskList(value));
 
@@ -32,14 +32,14 @@ export default function Tasks() {
     }
 
     dispatch(
-      dragList(
-        source.droppableId,
-        destination.droppableId,
-        source.index,
-        destination.index,
+      dragList({
+        sourceId: source.droppableId,
+        destinationId: destination.droppableId,
+        sourceIndex: source.index,
+        destinationIndex: destination.index,
         draggableId,
-        type
-      )
+        type,
+      })
     );
   };
 
@@ -50,12 +50,14 @@ export default function Tasks() {
       if (activeElement !== "INPUT" && activeElement !== "TEXTAREA") {
         if (e.ctrlKey && e.code === "KeyZ") {
           if (tasks.past.length > 0) {
+            // @ts-ignore This is a problem with redux-undo types
             dispatch(UndoActionCreator.undo());
           }
         }
 
         if (e.ctrlKey && e.shiftKey && e.code === "KeyZ") {
           if (tasks.future.length > 0) {
+            // @ts-ignore This is a problem with redux-undo types
             dispatch(UndoActionCreator.redo());
           }
         }

app/renderer/src/routes/Timer/PriorityCard.tsx

@@ -1,11 +1,6 @@
 import React, { useEffect, useRef } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import {
-  AppStateTypes,
-  setTaskCardDone,
-  skipTaskCard,
-  removeTaskCard,
-} from "store";
+import { useAppDispatch, useAppSelector } from "hooks";
+import { setTaskCardDone, skipTaskCard, removeTaskCard } from "store";
 
 import {
   StyledPriorityCardContainer,
@@ -24,14 +19,11 @@ import {
 } from "styles";
 import { SVG } from "components";
 import { useTargetOutside } from "hooks";
-import { isObjectEmpty } from "utils";
 
 const PriorityCard: React.FC = () => {
-  const tasks = useSelector(
-    (state: AppStateTypes) => state.tasks.present
-  );
+  const tasks = useAppSelector((state) => state.tasks.present);
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const priorityList = tasks.find((list) => list.priority);
 
@@ -48,22 +40,32 @@ const PriorityCard: React.FC = () => {
   });
 
   const setTaskCardDoneCallback = () => {
-    if (!isObjectEmpty(priorityCard)) {
-      dispatch(setTaskCardDone(priorityList?._id, priorityCard?._id));
+    if (priorityCard && priorityList) {
+      dispatch(
+        setTaskCardDone({
+          listId: priorityList?._id,
+          cardId: priorityCard?._id,
+        })
+      );
     }
     setShowOptions(false);
   };
 
   const skipTaskCardCallback = () => {
-    if (!isObjectEmpty(priorityCard)) {
+    if (priorityList) {
       dispatch(skipTaskCard(priorityList?._id));
     }
     setShowOptions(false);
   };
 
   const deleteTaskCardCallback = () => {
-    if (!isObjectEmpty(priorityCard)) {
-      dispatch(removeTaskCard(priorityList?._id, priorityCard?._id));
+    if (priorityList && priorityCard) {
+      dispatch(
+        removeTaskCard({
+          listId: priorityList?._id,
+          cardId: priorityCard?._id,
+        })
+      );
     }
     setShowOptions(false);
   };

app/renderer/src/store/store.ts

@@ -5,7 +5,7 @@ import { saveToStorage, getFromStorage } from "utils";
 import configReducer from "./config";
 import settingReducer from "./settings";
 import timerReducer from "./timer";
-import { undoableTasksReducer } from "./tasks";
+import undoableTasksReducer from "./tasks";
 import updateReducer from "./update";
 
 export type AppStateTypes = ReturnType<typeof store.getState>;

app/renderer/src/store/tasks/Task.ts

@@ -0,0 +1,25 @@
+import { v4 as uuid } from "uuid";
+import type { Task } from "./types";
+
+type CreateTaskParams = Pick<Task, "text"> &
+  Partial<Pick<Task, "description">>;
+type EditableTaskParams = Partial<Omit<Task, "_id">>;
+
+export const createTask = ({
+  text,
+  description = "",
+}: CreateTaskParams): Task => {
+  return {
+    _id: uuid(),
+    text,
+    description,
+    done: false,
+  };
+};
+
+export const editTask = (
+  task: Task,
+  changedFields: EditableTaskParams
+): Task => {
+  return { ...task, ...changedFields };
+};

app/renderer/src/store/tasks/TaskList.ts

@@ -0,0 +1,43 @@
+import { Task, TaskList } from "./types";
+import { v4 as uuid } from "uuid";
+
+type CreateTaskListParams = Pick<TaskList, "title" | "priority">;
+
+export const createTaskList = ({
+  title,
+  priority,
+}: CreateTaskListParams): TaskList => {
+  return {
+    _id: uuid(),
+    title,
+    cards: [],
+    priority,
+  };
+};
+
+export const addTaskToList = (
+  taskList: TaskList,
+  task: Task
+): TaskList => {
+  return {
+    ...taskList,
+    cards: [...taskList.cards, task],
+  };
+};
+
+export const removeTaskFromList = (
+  taskList: TaskList,
+  taskId: string
+): TaskList => {
+  return {
+    ...taskList,
+    cards: taskList.cards.filter((task) => task._id !== taskId),
+  };
+};
+
+export const setListPriority = (
+  taskList: TaskList,
+  priority: boolean
+): TaskList => {
+  return { ...taskList, priority };
+};