refactor(store): use custom hooks instead of redux default hooks

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/Updater.tsx

@@ -3,12 +3,8 @@ import Header from "./Header";
 import styled from "styled-components/macro";
 import ReactMarkdown from "react-markdown";
 import { useAppDispatch, useAppSelector } from "hooks/storeHooks";
-import { AppStateTypes, setIgnoreUpdate, SettingTypes } from "../store";
-import {
-  setUpdateBody,
-  setUpdateVersion,
-  UpdateTypes,
-} from "../store/update";
+import { setIgnoreUpdate } from "../store";
+import { setUpdateBody, setUpdateVersion } from "../store/update";
 import {
   StyledButtonNormal,
   StyledButtonPrimary,
@@ -51,12 +47,8 @@ const IgnoreVersion = styled.div`
 `;
 
 const Updater: React.FC = () => {
-  const settings: SettingTypes = useAppSelector(
-    (state: AppStateTypes) => state.settings
-  );
-  const update: UpdateTypes = useAppSelector(
-    (state: AppStateTypes) => state.update
-  );
+  const settings = useAppSelector((state) => state.settings);
+  const update = useAppSelector((state) => state.update);
 
   const dispatch = useAppDispatch();
 

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

app/renderer/src/contexts/CounterContext.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import useStayAwake from "use-stay-awake";
-import { setRound, setTimerType, SettingTypes, setPlay } from "store";
+import { setRound, setTimerType, setPlay } from "store";
 import { useNotification } from "hooks";
 import { padNum, isEqualToOne } from "utils";
 
@@ -36,9 +36,7 @@ const CounterProvider: React.FC = ({ children }) => {
     config: state.config,
   }));
 
-  const settings: SettingTypes = useAppSelector(
-    (state) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
   const { preventSleeping, allowSleeping } = useStayAwake();
 

app/renderer/src/contexts/ThemeContext.tsx

@@ -1,8 +1,8 @@
 import React, { useRef } from "react";
 import { isPreferredDark } from "utils";
 import { GlobalStyles } from "styles";
-import { useSelector, useDispatch } from "react-redux";
-import { AppStateTypes, setEnableDarkTheme, SettingTypes } from "store";
+import { useAppDispatch, useAppSelector } from "hooks/storeHooks";
+import { setEnableDarkTheme } from "store";
 
 type ThemeProps = {
   isDarkMode: boolean;
@@ -14,11 +14,9 @@ const ThemeContext = React.createContext<ThemeProps>({
 });
 
 const ThemeProvider: React.FC = ({ children }) => {
-  const settings: SettingTypes = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const useNativeTitlebar = useRef(settings.useNativeTitlebar);
 

app/renderer/src/contexts/connectors/ElectronConnector.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useContext, useEffect } from "react";
 import { ConnnectorContext } from "../ConnnectorContext";
-import { useSelector } from "react-redux";
-import { AppStateTypes, SettingTypes } from "../../store";
+import { useAppSelector } from "hooks/storeHooks";
 import { CounterContext } from "../CounterContext";
 import {
   SET_ALWAYS_ON_TOP,
@@ -29,11 +28,9 @@ export const ElectronInvokeConnector: InvokeConnector = {
 export const ElectronConnectorProvider: React.FC = ({ children }) => {
   const { electron } = window;
 
-  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 { shouldFullscreen } = useContext(CounterContext);
 

app/renderer/src/contexts/connectors/TauriConnector.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useContext, useEffect } from "react";
 import { ConnnectorContext } from "../ConnnectorContext";
-import { useDispatch, useSelector } from "react-redux";
-import { AppStateTypes, SettingTypes } from "../../store";
+import { useAppDispatch, useAppSelector } from "hooks/storeHooks";
 import { CounterContext } from "../CounterContext";
 import {
   CHECK_FOR_UPDATES,
@@ -36,11 +35,9 @@ export const TauriInvokeConnector = {
 };
 
 export const TauriConnectorProvider: React.FC = ({ children }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
-  const settings: SettingTypes = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
   // Prevent webpage behavior (naitive apps shouldn't refresh with F5 or Ctrl+R)
   useEffect(() => {
@@ -114,7 +111,7 @@ export const TauriConnectorProvider: React.FC = ({ children }) => {
     });
   }, [settings.openAtLogin]);
 
-  const timer = useSelector((state: AppStateTypes) => state.timer);
+  const timer = useAppSelector((state) => state.timer);
 
   const { shouldFullscreen } = useContext(CounterContext);
 

app/renderer/src/hooks/useTrayIconUpdates.tsx

@@ -1,14 +1,13 @@
 import { CounterContext } from "contexts";
 import { useEffect, useContext } from "react";
-import { useSelector } from "react-redux";
-import type { AppStateTypes } from "store";
+import { useAppSelector } from "./storeHooks";
 import { TraySVG } from "components";
 import { encodeSvg } from "utils";
 
 export const useTrayIconUpdates = (
   onNewIcon: (dataUrl: string) => void
 ) => {
-  const timer = useSelector((state: AppStateTypes) => state.timer);
+  const timer = useAppSelector((state) => state.timer);
 
   const { count, duration, timerType } = useContext(CounterContext);
   const dashOffset = (duration - count) * (24 / duration);

app/renderer/src/routes/Config/ConfigHeader.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useAppDispatch } from "hooks/storeHooks";
 import { restoreDefaultConfig } from "store";
 
 import { StyledHeaderButton } from "styles";
 import { Header } from "components";
 
 const ConfigHeader: React.FC = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [success, setSuccess] = useState(false);
 

app/renderer/src/routes/Config/SpecialBreaks.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { useAppSelector, useAppDispatch } from "hooks/storeHooks";
 import {
-  AppStateTypes,
   setFirstSpecialBreak,
   setSecondSpecialBreak,
   setThirdSpecialBreak,
@@ -15,7 +14,7 @@ import {
 import SpecialField from "./SpecialField";
 
 const SpecialBreaks: React.FC = () => {
-  const config = useAppSelector((state: AppStateTypes) => state.config);
+  const config = useAppSelector((state) => state.config);
 
   const dispath = useAppDispatch();
 

app/renderer/src/routes/Settings/FeatureSection.tsx

@@ -3,9 +3,7 @@ import { useAppDispatch, useAppSelector } from "hooks/storeHooks";
 import {
   setAlwaysOnTop,
   setEnableStrictMode,
-  AppStateTypes,
   setEnableProgressAnimation,
-  SettingTypes,
   setNotificationType,
   setEnableFullscreenBreak,
   setUseNativeTitlebar,
@@ -24,9 +22,7 @@ import { detectOS } from "utils";
 import { NotificationTypes } from "store/settings/types";
 
 const FeatureSection: React.FC = () => {
-  const settings: SettingTypes = useAppSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
   const dispatch = useAppDispatch();
 

app/renderer/src/routes/Settings/SettingHeader.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from "react";
 import { restoreDefaultSettings } from "store";
-import { useDispatch } from "react-redux";
+import { useAppDispatch } from "hooks/storeHooks";
 
 import { Header } from "components";
 import { StyledHeaderButton } from "styles";
 
 const SettingHeader: React.FC = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [success, setSuccess] = useState(false);
 

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

@@ -8,17 +8,13 @@ import HelpSection from "./HelpSection";
 import ShortcutSection from "./ShortcutSection";
 import StickySection from "./StickySection";
 import SettingHeader from "./SettingHeader";
-import { AppStateTypes, SettingTypes } from "../../store";
-import { useSelector } from "react-redux";
-import { UpdateTypes } from "../../store/update";
+import { useAppSelector } from "hooks/storeHooks";
 import { Updater } from "../../components";
 
 export default function Settings() {
   const alertState = getFromStorage("alert") || null;
 
-  const update: UpdateTypes = useSelector(
-    (state: AppStateTypes) => state.update
-  );
+  const update = useAppSelector((state) => state.update);
 
   const [alert, setAlert] = useState(alertState);
 

app/renderer/src/routes/Timer/Control/CompactModeButton.tsx

@@ -1,17 +1,14 @@
 import { SVG } from "components";
 import { CounterContext } from "contexts";
 import { useRippleEffect } from "hooks";
+import { useAppSelector } from "hooks/storeHooks";
 import React, { useCallback, useRef } from "react";
-import { useSelector } from "react-redux";
-import { AppStateTypes, SettingTypes } from "store";
 import { StyledCompactButton } from "styles";
 
 type Props = { flipped?: boolean } & React.HTMLProps<HTMLButtonElement>;
 
 const CompactModeButton: React.FC<Props> = ({ onClick, flipped }) => {
-  const { compactMode }: SettingTypes = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const { compactMode } = useAppSelector((state) => state.settings);
 
   const buttonRef = useRef<HTMLButtonElement>(null);
 

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

@@ -1,8 +1,7 @@
 import { CounterContext } from "contexts";
 import { useTime } from "hooks";
 import React, { useContext } from "react";
-import { useSelector } from "react-redux";
-import { AppStateTypes, SettingTypes } from "store";
+import { useAppSelector } from "hooks/storeHooks";
 import {
   StyledCounterContainer,
   StyledCounterProgress,
@@ -13,9 +12,7 @@ import CounterTimer from "./CounterTimer";
 import CounterType from "./CounterType";
 
 const Counter: React.FC = () => {
-  const settings: SettingTypes = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
+  const settings = useAppSelector((state) => state.settings);
 
   const { count, duration, timerType, shouldFullscreen } =
     useContext(CounterContext);

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

@@ -1,15 +1,14 @@
 import { CounterContext } from "contexts";
 import React, { useCallback, useContext } from "react";
-import { useSelector } from "react-redux";
-import { AppStateTypes } from "store";
+import { useAppSelector } from "hooks/storeHooks";
 import { StyledTimer } from "styles";
 import Control from "./Control";
 import Counter from "./Counter";
 import PriorityCard from "./PriorityCard";
 
 export default function Timer() {
-  const compactMode = useSelector(
-    (state: AppStateTypes) => state.settings.compactMode
+  const compactMode = useAppSelector(
+    (state) => state.settings.compactMode
   );
   const { resetTimerAction } = useContext(CounterContext);