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";