refactor(store): move timer store to redux-toolkit

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,
 };