refactor(lock_settings): removed lock settings feature realizing it i…

…s useless on some points BREAKING CHANGE: Removed Lock Settings from app's features.
zidoro · Jun 3, 2020 · 203c0e1 · 203c0e1
1 parent 4623a10
commit 203c0e1
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 96 deletions.
diff --git a/app/src/routes/Settings/FeatureSection.tsx b/app/src/routes/Settings/FeatureSection.tsx
@@ -5,7 +5,6 @@ import {
   setEnableSpecialBreaks,
   setEnableStrictMode,
   AppStateTypes,
-  lockSettings,
   setEnableTimerAnimation,
   SettingTypes,
   setNotificationProperty,
@@ -30,58 +29,43 @@ const FeatureSection: React.FC = () => {
       label: "Always On Top",
       checked: settings.alwaysOnTop,
       onChange: useCallback(() => {
-        if (!settings.isSettingLock) {
-          dispatch(setAlwaysOnTop(!settings.alwaysOnTop));
-        }
-      }, [dispatch, settings.alwaysOnTop, settings.isSettingLock]),
+        dispatch(setAlwaysOnTop(!settings.alwaysOnTop));
+      }, [dispatch, settings.alwaysOnTop]),
     },
     {
       id: "special-breaks",
       label: "Special Breaks",
       checked: settings.enableSpecialBreaks,
       onChange: useCallback(() => {
-        if (!settings.isSettingLock) {
-          dispatch(setEnableSpecialBreaks(!settings.enableSpecialBreaks));
-        }
-      }, [dispatch, settings.enableSpecialBreaks, settings.isSettingLock]),
+        dispatch(setEnableSpecialBreaks(!settings.enableSpecialBreaks));
+      }, [dispatch, settings.enableSpecialBreaks]),
     },
     {
       id: "strict-mode",
       label: "Strict Mode",
       checked: settings.enableStrictMode,
       onChange: useCallback(() => {
-        if (!settings.isSettingLock) {
-          dispatch(setEnableStrictMode(!settings.enableStrictMode));
-        }
-      }, [dispatch, settings.enableStrictMode, settings.isSettingLock]),
+        dispatch(setEnableStrictMode(!settings.enableStrictMode));
+      }, [dispatch, settings.enableStrictMode]),
     },
     {
       id: "dark-theme",
       label: "Dark Theme",
       checked: isDarkMode,
       onChange: () => {
-        if (!settings.isSettingLock && toggleThemeAction) {
+        if (toggleThemeAction) {
           toggleThemeAction();
         }
       },
     },
-    {
-      id: "lock-settings",
-      label: "Lock Settings",
-      checked: settings.isSettingLock,
-      onChange: useCallback(() => {
-        dispatch(lockSettings(!settings.isSettingLock));
-      }, [dispatch, settings.isSettingLock]),
-    },
+
     {
       id: "timer-animation",
       label: "Timer Animation",
       checked: settings.enableTimerAnimation,
       onChange: useCallback(() => {
-        if (!settings.isSettingLock) {
-          dispatch(setEnableTimerAnimation(!settings.enableTimerAnimation));
-        }
-      }, [dispatch, settings.enableTimerAnimation, settings.isSettingLock]),
+        dispatch(setEnableTimerAnimation(!settings.enableTimerAnimation));
+      }, [dispatch, settings.enableTimerAnimation]),
     },
   ];
 

diff --git a/app/src/routes/Settings/SettingHeader.tsx b/app/src/routes/Settings/SettingHeader.tsx
@@ -1,26 +1,20 @@
 import React, { useCallback, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { restoreDefaultSettings, AppStateTypes, SettingTypes } from "store";
+import { restoreDefaultSettings } from "store";
+import { useDispatch } from "react-redux";
 
 import { Header } from "components";
 import { StyledHeaderButton } from "styles";
 
 const SettingHeader: React.FC = () => {
   const dispatch = useDispatch();
 
-  const settings: SettingTypes = useSelector(
-    (state: AppStateTypes) => state.settings
-  );
-
   const [success, setSuccess] = useState(false);
 
   const restoreSettings = useCallback(() => {
-    if (!settings.isSettingLock) {
-      setSuccess(true);
-      dispatch(restoreDefaultSettings());
-      setTimeout(() => setSuccess(false), 1000);
-    }
-  }, [dispatch, settings.isSettingLock]);
+    setSuccess(true);
+    dispatch(restoreDefaultSettings());
+    setTimeout(() => setSuccess(false), 1000);
+  }, [dispatch]);
 
   return (
     <Header heading="Settings">

diff --git a/app/src/routes/Timer/Control/Control.tsx b/app/src/routes/Timer/Control/Control.tsx
@@ -17,7 +17,6 @@ import {
   StyledControl,
   StyledControlMain,
   StyledStrictIndicator,
-  StyledLockIndicator,
 } from "styles";
 import { SVG } from "components";
 
@@ -120,17 +119,11 @@ const Control: React.FC<Props> = ({ resetTimerAction }) => {
         />
       </StyledControlMain>
 
-      {settings.enableStrictMode && !settings.isSettingLock && (
+      {settings.enableStrictMode && (
         <StyledStrictIndicator>
           <SVG name="hand" />
         </StyledStrictIndicator>
       )}
-
-      {settings.isSettingLock && (
-        <StyledLockIndicator>
-          <SVG name="lock" />
-        </StyledLockIndicator>
-      )}
     </StyledControl>
   );
 };

diff --git a/app/src/store/settings/actions.ts b/app/src/store/settings/actions.ts
@@ -9,7 +9,6 @@ import {
   RESTORE_DEFAULT_SETTINGS,
   ENABLE_DARK_THEME,
   TOGGLE_NOTIFICATION_SOUND,
-  LOCK_SETTINGS,
   ENABLE_TIMER_ANIMATION,
   SET_NOTIFICATION_PROPERTY,
 } from "./types";
@@ -74,15 +73,6 @@ export const setEnableWebBlocker = (
   };
 };
 
-export const lockSettings = (
-  isSettingLock: SettingTypes["isSettingLock"]
-): SettingActionTypes => {
-  return {
-    type: LOCK_SETTINGS,
-    payload: isSettingLock,
-  };
-};
-
 export const setEnableTimerAnimation = (
   enableTimerAnimation: SettingTypes["enableTimerAnimation"]
 ): SettingActionTypes => {

diff --git a/app/src/store/settings/reducer.ts b/app/src/store/settings/reducer.ts
@@ -9,7 +9,6 @@ import {
   RESTORE_DEFAULT_SETTINGS,
   ENABLE_DARK_THEME,
   TOGGLE_NOTIFICATION_SOUND,
-  LOCK_SETTINGS,
   ENABLE_TIMER_ANIMATION,
   SET_NOTIFICATION_PROPERTY,
 } from "./types";
@@ -23,7 +22,6 @@ const defaultSettings: SettingTypes = {
   enableStrictMode: true,
   enableWebBlocker: true,
   enableDarkTheme: isPreferredDark(),
-  isSettingLock: false,
   enableTimerAnimation: true,
   notificationProperty: "extra",
 };
@@ -109,16 +107,6 @@ export const settingReducer = (
 
       return newState;
     }
-    case LOCK_SETTINGS: {
-      const newState = {
-        ...state,
-        isSettingLock: action.payload,
-      };
-
-      saveToStorage("settings", newState);
-
-      return newState;
-    }
     case ENABLE_TIMER_ANIMATION: {
       const newState = {
         ...state,

diff --git a/app/src/store/settings/types.ts b/app/src/store/settings/types.ts
@@ -8,7 +8,6 @@ export type SettingTypes = {
   enableStickyNotes: boolean;
   enableStrictMode: boolean;
   enableWebBlocker: boolean;
-  isSettingLock: boolean;
   enableTimerAnimation: boolean;
   notificationProperty: "none" | "normal" | "extra";
 };
@@ -22,8 +21,6 @@ export const ENABLE_DARK_THEME = `${settings} ENABLE_DARK_THEME`;
 export const ENABLE_STRICT_MODE = `${settings} ENABLE_STRICT_MODE`;
 export const ENABLE_WEB_BLOCKER = `${settings} ENABLE_WEB_BLOCKER`;
 
-export const LOCK_SETTINGS = `${settings} LOCK_SETTINGS`;
-
 export const ENABLE_TIMER_ANIMATION = `${settings} ENABLE_TIMER_ANIMATION`;
 export const SET_NOTIFICATION_PROPERTY = `${settings} SET_NOTIFICATION_PROPERTY`;
 
@@ -64,11 +61,6 @@ interface SetEnableWebBlocker {
   payload: SettingTypes["enableWebBlocker"];
 }
 
-interface LockSettings {
-  type: typeof LOCK_SETTINGS;
-  payload: SettingTypes["isSettingLock"];
-}
-
 interface SetEnableTimerAnimation {
   type: typeof ENABLE_TIMER_ANIMATION;
   payload: SettingTypes["enableTimerAnimation"];
@@ -87,6 +79,5 @@ export type SettingActionTypes =
   | SetEnableWebBlocker
   | SetEnableDarkTheme
   | TogglenotificationSoundOn
-  | LockSettings
   | SetEnableTimerAnimation
   | SetNotificationProperty;
diff --git a/app/src/styles/routes/timer/control.ts b/app/src/styles/routes/timer/control.ts
@@ -166,22 +166,3 @@ export const StyledStrictIndicator = styled.div`
     fill: currentColor;
   }
 `;
-
-export const StyledLockIndicator = styled.div`
-  width: 3.2rem;
-  height: 3.2rem;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  color: var(--color-body-text);
-  border-radius: 50%;
-
-  & > svg {
-    width: 2rem;
-    height: 2rem;
-
-    fill: currentColor;
-  }
-`;