refactor(store): move update store from redux to redux-toolkit

app/renderer/src/components/Updater.tsx

@@ -2,7 +2,7 @@ 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 { useAppDispatch, useAppSelector } from "hooks/storeHooks";
 import { AppStateTypes, setIgnoreUpdate, SettingTypes } from "../store";
 import {
   setUpdateBody,
@@ -51,14 +51,14 @@ const IgnoreVersion = styled.div`
 `;
 
 const Updater: React.FC = () => {
-  const settings: SettingTypes = useSelector(
+  const settings: SettingTypes = useAppSelector(
     (state: AppStateTypes) => state.settings
   );
-  const update: UpdateTypes = useSelector(
+  const update: UpdateTypes = useAppSelector(
     (state: AppStateTypes) => state.update
   );
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   return (
     <UpdateWrapper>

app/renderer/src/store/config/index.ts

@@ -3,6 +3,10 @@ import { getFromStorage } from "utils";
 import { ConfigTypes } from "./types";
 import { defaultConfig } from "./defaultConfig";
 
+type ConfigPayload<T extends keyof ConfigTypes> = PayloadAction<
+  ConfigTypes[T]
+>;
+
 const config =
   (getFromStorage("state") && getFromStorage("state").config) ||
   defaultConfig;
@@ -13,51 +17,47 @@ const configSlice = createSlice({
   name: "config",
   initialState,
   reducers: {
-    setStayFocus(
-      state,
-      action: PayloadAction<ConfigTypes["stayFocus"]>
-    ) {
+    setStayFocus(state, action: ConfigPayload<"stayFocus">) {
       state.stayFocus = action.payload;
     },
-    setShorBreak(
-      state,
-      action: PayloadAction<ConfigTypes["shortBreak"]>
-    ) {
+
+    setShorBreak(state, action: ConfigPayload<"shortBreak">) {
       state.shortBreak = action.payload;
     },
-    setLongBreak(
-      state,
-      action: PayloadAction<ConfigTypes["longBreak"]>
-    ) {
+
+    setLongBreak(state, action: ConfigPayload<"longBreak">) {
       state.longBreak = action.payload;
     },
-    setSessionRounds(
-      state,
-      action: PayloadAction<ConfigTypes["sessionRounds"]>
-    ) {
+
+    setSessionRounds(state, action: ConfigPayload<"sessionRounds">) {
       state.sessionRounds = action.payload;
     },
+
     restoreDefaultConfig() {
       return defaultConfig;
     },
+
     setFirstSpecialBreak(
       state,
       action: PayloadAction<ConfigTypes["specialBreaks"]["firstBreak"]>
     ) {
       state.specialBreaks.firstBreak = action.payload;
     },
+
     setSecondSpecialBreak(
       state,
       action: PayloadAction<ConfigTypes["specialBreaks"]["secondBreak"]>
     ) {
       state.specialBreaks.secondBreak = action.payload;
     },
+
     setThirdSpecialBreak(
       state,
       action: PayloadAction<ConfigTypes["specialBreaks"]["thirdBreak"]>
     ) {
       state.specialBreaks.thirdBreak = action.payload;
     },
+
     setFourthSpecialBreak(
       state,
       action: PayloadAction<ConfigTypes["specialBreaks"]["fourthBreak"]>

app/renderer/src/store/settings/index.ts

@@ -5,6 +5,10 @@ import { defaultSettings } from "./defaultSettings";
 
 export type { SettingTypes };
 
+type SettingsPayload<T extends keyof SettingTypes> = PayloadAction<
+  SettingTypes[T]
+>;
+
 const settings =
   (getFromStorage("state") && getFromStorage("state").settings) ||
   defaultSettings;
@@ -15,17 +19,11 @@ const settingsSlice = createSlice({
   name: "settings",
   initialState,
   reducers: {
-    setIgnoreUpdate(
-      state,
-      action: PayloadAction<SettingTypes["ignoreUpdate"]>
-    ) {
+    setIgnoreUpdate(state, action: SettingsPayload<"ignoreUpdate">) {
       state.ignoreUpdate = action.payload;
     },
 
-    setAlwaysOnTop(
-      state,
-      action: PayloadAction<SettingTypes["alwaysOnTop"]>
-    ) {
+    setAlwaysOnTop(state, action: SettingsPayload<"alwaysOnTop">) {
       state.alwaysOnTop = action.payload;
     },
 
@@ -35,85 +33,79 @@ const settingsSlice = createSlice({
 
     setEnableDarkTheme(
       state,
-      action: PayloadAction<SettingTypes["enableDarkTheme"]>
+      action: SettingsPayload<"enableDarkTheme">
     ) {
       state.enableDarkTheme = action.payload;
     },
 
     setEnableCompactMode(
       state,
-      action: PayloadAction<SettingTypes["compactMode"]>
+      action: SettingsPayload<"compactMode">
     ) {
       state.compactMode = action.payload;
     },
 
     setEnableFullscreenBreak(
       state,
-      action: PayloadAction<SettingTypes["enableFullscreenBreak"]>
+      action: SettingsPayload<"enableFullscreenBreak">
     ) {
       state.enableFullscreenBreak = action.payload;
     },
 
     setEnableStrictMode(
       state,
-      action: PayloadAction<SettingTypes["enableStrictMode"]>
+      action: SettingsPayload<"enableStrictMode">
     ) {
       state.enableStrictMode = action.payload;
     },
 
     setEnableProgressAnimation(
       state,
-      action: PayloadAction<SettingTypes["enableProgressAnimation"]>
+      action: SettingsPayload<"enableProgressAnimation">
     ) {
       state.enableProgressAnimation = action.payload;
     },
 
     setEnableVoiceAssistance(
       state,
-      action: PayloadAction<SettingTypes["enableVoiceAssistance"]>
+      action: SettingsPayload<"enableVoiceAssistance">
     ) {
       state.enableVoiceAssistance = action.payload;
     },
 
     setUseNativeTitlebar(
       state,
-      action: PayloadAction<SettingTypes["useNativeTitlebar"]>
+      action: SettingsPayload<"useNativeTitlebar">
     ) {
       state.useNativeTitlebar = action.payload;
     },
 
     setNotificationType(
       state,
-      action: PayloadAction<SettingTypes["notificationType"]>
+      action: SettingsPayload<"notificationType">
     ) {
       state.notificationType = action.payload;
     },
 
-    setCloseToTray(
-      state,
-      action: PayloadAction<SettingTypes["closeToTray"]>
-    ) {
+    setCloseToTray(state, action: SettingsPayload<"closeToTray">) {
       state.closeToTray = action.payload;
     },
 
     setMinimizeToTray(
       state,
-      action: PayloadAction<SettingTypes["minimizeToTray"]>
+      action: SettingsPayload<"minimizeToTray">
     ) {
       state.minimizeToTray = action.payload;
     },
 
     setAutoStartWorkTime(
       state,
-      action: PayloadAction<SettingTypes["autoStartWorkTime"]>
+      action: SettingsPayload<"autoStartWorkTime">
     ) {
       state.autoStartWorkTime = action.payload;
     },
 
-    setOpenAtLogin(
-      state,
-      action: PayloadAction<SettingTypes["openAtLogin"]>
-    ) {
+    setOpenAtLogin(state, action: SettingsPayload<"openAtLogin">) {
       state.openAtLogin = action.payload;
     },
 

app/renderer/src/store/store.ts

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

app/renderer/src/store/update/index.ts

@@ -1,3 +1,40 @@
-export * from "./actions";
-export * from "./reducer";
-export * from "./types";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { getFromStorage } from "utils";
+
+export type UpdateTypes = {
+  updateVersion: string;
+  updateBody: string | undefined;
+};
+
+type UploadPayload<T extends keyof UpdateTypes> = PayloadAction<
+  UpdateTypes[T]
+>;
+
+const defaultUpdateStatus: Readonly<UpdateTypes> = Object.freeze({
+  updateBody: undefined,
+  updateVersion: "",
+});
+
+const updateStatus =
+  (getFromStorage("state") && getFromStorage("state").update) ||
+  defaultUpdateStatus;
+
+const initialState: UpdateTypes = updateStatus;
+
+const updateSlice = createSlice({
+  name: "update",
+  initialState,
+  reducers: {
+    setUpdateBody(state, action: UploadPayload<"updateBody">) {
+      state.updateBody = action.payload;
+    },
+
+    setUpdateVersion(state, action: UploadPayload<"updateVersion">) {
+      state.updateVersion = action.payload;
+    },
+  },
+});
+
+export const { setUpdateBody, setUpdateVersion } = updateSlice.actions;
+
+export default updateSlice.reducer;