refactor(store): move old redux code to redux toolkit (#594)

app/renderer/package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@pomatez/shareables": "*",
+    "@reduxjs/toolkit": "2.0.1",
     "@tauri-apps/api": "2.0.0-alpha.11",
     "@tauri-apps/plugin-autostart": "2.0.0-alpha.2",
     "@tauri-apps/plugin-global-shortcut": "2.0.0-alpha.2",
@@ -59,7 +60,6 @@
     "react-redux": "^7.2.9",
     "react-router-dom": "^5.3.4",
     "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.8",
     "redux-undo": "^1.0.1",
     "styled-components": "^5.3.11",
     "use-stay-awake": "^0.1.5"

app/renderer/src/App.tsx

@@ -7,13 +7,10 @@ import {
 } from "contexts";
 import { Layout, Preloader } from "components";
 import { compactRoutes, routes } from "config";
-import { useSelector } from "react-redux";
-import { AppStateTypes } from "store";
+import { useAppSelector } from "hooks/storeHooks";
 
 export default function App() {
-  const settings = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
   useEffect(() => {
     const contextEvent = (event: MouseEvent) => {

app/renderer/src/components/Layout.tsx

@@ -6,28 +6,20 @@ import React, {
   useRef,
 } from "react";
 import { RouteComponentProps, withRouter } from "react-router-dom";
-import { useSelector } from "react-redux";
-import {
-  AppStateTypes,
-  SHORT_BREAK,
-  LONG_BREAK,
-  SPECIAL_BREAK,
-  SettingTypes,
-} from "store";
 import { StyledLayout } from "styles";
 
 import Titlebar from "./Titlebar";
 import Navigation from "./Navigation";
 import { ThemeContext } from "contexts";
+import { TimerStatus } from "store/timer/types";
+import { useAppSelector } from "hooks/storeHooks";
 
 type Props = {} & RouteComponentProps;
 
 const Layout: React.FC<Props> = ({ history, location, children }) => {
-  const timer = useSelector((state: AppStateTypes) => state.timer);
+  const timer = useAppSelector((state) => state.timer);
 
-  const settings: SettingTypes = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
   const { toggleThemeAction } = useContext(ThemeContext);
 
@@ -52,9 +44,9 @@ const Layout: React.FC<Props> = ({ history, location, children }) => {
   useEffect(() => {
     if (settings.enableFullscreenBreak) {
       if (
-        timer.timerType === SHORT_BREAK ||
-        timer.timerType === LONG_BREAK ||
-        timer.timerType === SPECIAL_BREAK
+        timer.timerType === TimerStatus.SHORT_BREAK ||
+        timer.timerType === TimerStatus.LONG_BREAK ||
+        timer.timerType === TimerStatus.SPECIAL_BREAK
       ) {
         if (location.pathname !== "/") {
           setNoTransition(true);

app/renderer/src/components/Navigation.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { useSelector } from "react-redux";
-import { AppStateTypes, TimerTypes } from "store";
+import { useAppSelector } from "hooks/storeHooks";
 import {
   StyledNav,
   StyledNavList,
@@ -11,17 +10,16 @@ import {
 import { NavNotify } from "components";
 import { routes } from "config";
 import SVG from "./SVG";
+import { TimerStatus } from "store/timer/types";
 
 type Props = {
-  timerType?: TimerTypes["timerType"];
+  timerType?: TimerStatus;
 };
 
 const Navigation: React.FC<Props> = ({ timerType }) => {
-  const settings = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
-  const state = useSelector((state: AppStateTypes) => state);
+  const state = useAppSelector((state) => state);
 
   return (
     <StyledNav useNativeTitlebar={settings.useNativeTitlebar}>

app/renderer/src/components/Titlebar.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useCallback } from "react";
-import { TimerTypes } from "store";
+import { TimerStatus } from "store/timer/types";
 import {
   StyledTitlebar,
   StyledWindowActions,
@@ -23,7 +23,7 @@ import appIconLongBreakDark from "assets/logos/tray-dark-lb.png";
 
 type Props = {
   darkMode: boolean;
-  timerType?: TimerTypes["timerType"];
+  timerType?: TimerStatus;
 };
 
 const Titlebar: React.FC<Props> = ({ darkMode, timerType }) => {
@@ -32,11 +32,11 @@ const Titlebar: React.FC<Props> = ({ darkMode, timerType }) => {
 
   const getAppIcon = useCallback(() => {
     switch (timerType) {
-      case "STAY_FOCUS":
+      case TimerStatus.STAY_FOCUS:
         return darkMode ? appIconDark : appIcon;
-      case "SHORT_BREAK":
+      case TimerStatus.SHORT_BREAK:
         return darkMode ? appIconShortBreakDark : appIconShortBreak;
-      case "LONG_BREAK":
+      case TimerStatus.LONG_BREAK:
         return darkMode ? appIconLongBreakDark : appIconLongBreak;
       default:
         return darkMode ? appIconLongBreakDark : appIconLongBreak;

app/renderer/src/components/TraySVG.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { TimerTypes } from "store";
+import { TimerStatus } from "store/timer/types";
 
 type Props = {
   dashOffset?: number;
-  timerType?: TimerTypes["timerType"];
+  timerType?: TimerStatus;
 };
 
 export const TraySVG: React.FC<Props> = ({ timerType, dashOffset }) => {
   const getProgressColor = (opacity = 1) => {
     switch (timerType) {
-      case "STAY_FOCUS":
+      case TimerStatus.STAY_FOCUS:
         return `rgba(0, 152, 247, ${opacity})`;
-      case "SHORT_BREAK":
+      case TimerStatus.SHORT_BREAK:
         return `rgba(7, 181, 131, ${opacity})`;
       default:
         return `rgba(212, 141, 10, ${opacity})`;
@@ -71,7 +71,8 @@ export const TraySVG: React.FC<Props> = ({ timerType, dashOffset }) => {
   );
 };
 
+//TODO: Remove this
 TraySVG.defaultProps = {
   dashOffset: 0,
-  timerType: "STAY_FOCUS",
+  timerType: TimerStatus.STAY_FOCUS,
 };

app/renderer/src/components/Updater.tsx

@@ -2,13 +2,9 @@ import React from "react";
 import Header from "./Header";
 import styled from "styled-components/macro";
 import ReactMarkdown from "react-markdown";
-import { useDispatch, useSelector } from "react-redux";
-import { AppStateTypes, setIgnoreUpdate, SettingTypes } from "../store";
-import {
-  setUpdateBody,
-  setUpdateVersion,
-  UpdateTypes,
-} from "../store/update";
+import { useAppDispatch, useAppSelector } from "hooks/storeHooks";
+import { setIgnoreUpdate } from "../store";
+import { setUpdateBody, setUpdateVersion } from "../store/update";
 import {
   StyledButtonNormal,
   StyledButtonPrimary,
@@ -51,14 +47,10 @@ const IgnoreVersion = styled.div`
 `;
 
 const Updater: React.FC = () => {
-  const settings: SettingTypes = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
-  const update: UpdateTypes = useSelector(
-    (state: AppStateTypes) => state.update
-  );
+  const settings = useAppSelector((state) => state.settings);
+  const update = useAppSelector((state) => state.update);
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   return (
     <UpdateWrapper>

app/renderer/src/config.ts

@@ -1,7 +1,7 @@
 import { SVGTypes } from "components";
 import { TaskList, Config, Timer, Settings } from "routes";
 import { ConfigSliderProps } from "routes";
-import { AppStateTypes, SettingTypes } from "./store";
+import { AppStateTypes } from "./store";
 import { DefaultRootState } from "react-redux";
 
 export const APP_NAME = "Pomatez";