feat(notification): modify notification setting and add new options t…

…o choose from

BREAKING CHANGE: Notification changed to Notification Property.

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "productivity-timer",
-  "version": "2.0.9-beta",
+  "version": "2.2.0-beta",
   "private": true,
   "main": "public/electron.js",
   "license": "MIT",
@@ -15,14 +15,15 @@
   "scripts": {
     "clean": "rm -rf build/ dist/",
     "develop": "react-scripts start",
-    "gen-tts": "node tts-generator.js",
+    "gen:tts": "node tts-generator.js",
     "react:build": "react-scripts build",
     "compile:electron": "tsc -p electron/tsconfig.json",
     "electron": "yarn compile:electron && electron .",
     "build:app": "yarn clean && yarn compile:electron && yarn react:build",
     "build:dir": "yarn compile:electron && yarn react:build && electron-builder --dir",
-    "build:linux": "yarn build:app && electron-builder --linux",
     "build:win": "yarn build:app && electron-builder --win",
+    "build:mac": "yarn build:app && electron-builder --mac",
+    "build:linux": "yarn build:app && electron-builder --linux",
     "release": "yarn build:app && electron-builder --publish always",
     "semantic-release": "semantic-release"
   },

app/src/assets/icons/index.ts

@@ -32,3 +32,5 @@ export { ReactComponent as RefreshSVG } from "./refresh.svg";
 export { ReactComponent as LockSVG } from "./lock.svg";
 
 export { ReactComponent as HandSVG } from "./hand.svg";
+
+export { ReactComponent as ChevronDownSVG } from "./chevron-down.svg";

app/src/components/Collapse.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import {
+  StyledCollapse,
+  StyledCollapseHeading,
+  StyledCollapseContent,
+} from "styles";
+import { SVG } from "components";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+const Collapse: React.FC<Props> = ({ children }) => {
+  const [open, setOpen] = useState(false);
+
+  const toggleCollapse = () => {
+    setOpen((prevState) => !prevState);
+  };
+
+  return (
+    <StyledCollapse>
+      <StyledCollapseHeading open={open} onClick={toggleCollapse}>
+        Notification Property
+        <SVG name="chevron-down" />
+      </StyledCollapseHeading>
+      {open && <StyledCollapseContent>{children}</StyledCollapseContent>}
+    </StyledCollapse>
+  );
+};
+
+export default React.memo(Collapse);

app/src/components/Layout.tsx

@@ -1,7 +1,13 @@
 import React, { useEffect, useContext, useCallback, useState } from "react";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { useSelector } from "react-redux";
-import { AppStateTypes, SHORT_BREAK, LONG_BREAK, SPECIAL_BREAK } from "store";
+import {
+  AppStateTypes,
+  SHORT_BREAK,
+  LONG_BREAK,
+  SPECIAL_BREAK,
+  SettingTypes,
+} from "store";
 import { StyledLayout } from "styles";
 
 import Titlebar from "./Titlebar";
@@ -11,12 +17,10 @@ import { ThemeContext } from "contexts";
 type Props = {} & RouteComponentProps;
 
 const Layout: React.FC<Props> = ({ history, location, children }) => {
-  const { timerType, onStrictMode, darkMode } = useSelector(
-    ({ timer, settings }: AppStateTypes) => ({
-      timerType: timer.timerType,
-      onStrictMode: settings.enableStrictMode,
-      darkMode: settings.enableDarkTheme,
-    })
+  const timer = useSelector((state: AppStateTypes) => state.timer);
+
+  const settings: SettingTypes = useSelector(
+    (state: AppStateTypes) => state.settings
   );
 
   const { toggleThemeAction } = useContext(ThemeContext);
@@ -41,11 +45,11 @@ const Layout: React.FC<Props> = ({ history, location, children }) => {
   }, [registerKey]);
 
   useEffect(() => {
-    if (onStrictMode) {
+    if (settings.enableStrictMode) {
       if (
-        timerType === SHORT_BREAK ||
-        timerType === LONG_BREAK ||
-        timerType === SPECIAL_BREAK
+        timer.timerType === SHORT_BREAK ||
+        timer.timerType === LONG_BREAK ||
+        timer.timerType === SPECIAL_BREAK
       ) {
         if (location.pathname !== "/") {
           setNoTransition(true);
@@ -55,12 +59,15 @@ const Layout: React.FC<Props> = ({ history, location, children }) => {
         setNoTransition(false);
       }
     }
-  }, [timerType, location, history, onStrictMode]);
+  }, [timer.timerType, location, history, settings.enableStrictMode]);
 
   return (
     <StyledLayout noTransition={noTransition}>
-      <Titlebar darkMode={darkMode} timerType={timerType} />
-      <Navigation timerType={timerType} />
+      <Titlebar
+        darkMode={settings.enableDarkTheme}
+        timerType={timer.timerType}
+      />
+      <Navigation timerType={timer.timerType} />
       {children}
     </StyledLayout>
   );

app/src/components/Radio.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxLabel } from "styles";
+
+type Props = { label?: string } & React.HTMLProps<HTMLInputElement>;
+
+export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
+  ({ id, label, name, disabled, ...props }, ref) => {
+    return (
+      <StyledCheckbox htmlFor={id} disabled={disabled}>
+        <input
+          type="radio"
+          name={name}
+          id={id}
+          ref={ref}
+          disabled={disabled}
+          {...props}
+        />
+        <StyledCheckboxBox />
+        <StyledCheckboxLabel>{label}</StyledCheckboxLabel>
+      </StyledCheckbox>
+    );
+  }
+);
+
+export default React.memo(Checkbox);

app/src/components/SVG.tsx

@@ -25,6 +25,7 @@ import {
   RefreshSVG,
   LockSVG,
   HandSVG,
+  ChevronDownSVG,
 } from "assets/icons";
 
 export type SVGTypes = {
@@ -53,7 +54,8 @@ export type SVGTypes = {
     | "fast-food"
     | "refresh"
     | "lock"
-    | "hand";
+    | "hand"
+    | "chevron-down";
 };
 
 const SVG: React.FC<SVGTypes> = ({ name }) => {
@@ -108,6 +110,8 @@ const SVG: React.FC<SVGTypes> = ({ name }) => {
       return <LockSVG />;
     case "hand":
       return <HandSVG />;
+    case "chevron-down":
+      return <ChevronDownSVG />;
     default:
       return <TimerSVG />;
   }

app/src/components/Time.tsx

@@ -14,6 +14,7 @@ const Time: React.FC<Props> = ({
   error,
   onFocus,
   onBlur,
+  ...props
 }) => {
   return (
     <StyledTimeWrapper disabled={disabled}>

app/src/components/index.ts

@@ -18,6 +18,9 @@ export { default as Portal } from "./Portal";
 export { default as Dimmer } from "./Dimmer";
 
 export { default as Checkbox } from "./Checkbox";
+export { default as Radio } from "./Radio";
+
+export { default as Collapse } from "./Collapse";
 
 export * from "./Popper";
 export * from "./Preloader";