feat: Added "Auto pause" feature

- Added "Auto pause" feature
- Improved InputField component
- Added checkBox component
- Merge defaultSettings with current settings

Author: CrawlerCode

package.json

@@ -18,6 +18,7 @@
     "@tanstack/react-query": "^4.29.5",
     "axios": "^1.4.0",
     "clsx": "^1.2.1",
+    "deepmerge": "^4.3.1",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -31,8 +32,8 @@
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.14",
     "adm-zip": "^0.5.10",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { useId } from "react";
+
+interface PropTypes extends React.ComponentProps<"input"> {
+  title: string;
+  description?: string;
+}
+
+const CheckBox = ({ title, description, ...props }: PropTypes) => {
+  const id = useId();
+
+  return (
+    <div className="flex items-center pl-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-700">
+      <div className={clsx("flex items-center", description ? "h-12" : "h-8")}>
+        <input
+          {...props}
+          id={id}
+          type="checkbox"
+          className={clsx("w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600", props.className)}
+        />
+      </div>
+      <div className="ml-2 text-sm">
+        <label htmlFor={id} className="font-medium text-gray-900 dark:text-gray-300">
+          {title}
+        </label>
+        {description && <p className="text-xs font-normal text-gray-500 dark:text-gray-300">{description}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default CheckBox;

src/components/general/CheckBox.tsx

@@ -1,34 +1,38 @@
 import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
+import { useId } from "react";
 
 interface PropTypes extends React.ComponentProps<"input"> {
   error?: string;
 }
 
-const InputField = (props: PropTypes) => {
+const InputField = ({ error, ...props }: PropTypes) => {
+  const id = useId();
+
   return (
     <>
       {props.title && (
-        <label htmlFor={props.name} className="block text-sm font-medium text-gray-900 dark:text-white">
+        <label htmlFor={id} className="block text-sm font-medium text-gray-900 dark:text-white">
           {props.title}
           {props.required && <FontAwesomeIcon icon={faAsterisk} size="2xs" className="text-red-600 ml-1" />}
         </label>
       )}
       <input
         {...props}
-        id={props.name}
+        id={id}
         required={false}
         className={clsx(
           "text-sm rounded-lg block w-full p-2.5",
           "bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white",
           "focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500",
           {
-            "border-red-500 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500": props.error !== undefined,
-          }
+            "border-red-500 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500": error !== undefined,
+          },
+          props.className
         )}
       />
-      {props.error && <p className="text-sm text-red-600 dark:text-red-500">{props.error}</p>}
+      {error && <p className="text-sm text-red-600 dark:text-red-500">{error}</p>}
     </>
   );
 };

src/components/general/InputField.tsx

@@ -15,10 +15,6 @@ type PropTypes = {
   onDone: (time: number) => void;
 };
 
-const calcTime = (time: number, start?: number) => {
-  return time + (start ? new Date().getTime() - start : 0);
-};
-
 const Issue = ({ issue, isActive, time, start, onStart, onStop, onClear, onDone }: PropTypes) => {
   const { settings } = useSettings();
 
@@ -59,6 +55,10 @@ const Issue = ({ issue, isActive, time, start, onStart, onStop, onClear, onDone
   );
 };
 
+const calcTime = (time: number, start?: number) => {
+  return time + (start ? new Date().getTime() - start : 0);
+};
+
 export const formatTime = (seconds: number) => {
   if (isNaN(seconds) || seconds < 0) return "";
 

src/components/issues/Issue.tsx

@@ -1,18 +1,28 @@
+import deepmerge from "deepmerge";
 import { loadRedmineConfig } from "../api/axios.config";
 import useStorage, { getStorage } from "./useStorage";
 
 export type Settings = {
   redmineURL: string;
   redmineApiKey: string;
+  options: {
+    autoPauseOnSwitch: boolean;
+  };
 };
 
-const defaultSettings = { redmineURL: "", redmineApiKey: "" };
+const defaultSettings = {
+  redmineURL: "",
+  redmineApiKey: "",
+  options: {
+    autoPauseOnSwitch: true,
+  },
+};
 
 const useSettings = () => {
   const { data: settings, setData: setSettings } = useStorage<Settings>("settings", defaultSettings);
 
   return {
-    settings,
+    settings: deepmerge<Settings>(defaultSettings, settings),
     setSettings: (data: Settings) => {
       setSettings(data);
       loadRedmineConfig();

src/hooks/useSettings.ts

@@ -27,20 +27,39 @@ const IssuesPage = () => {
         {issuesQuery.isLoading && <LoadingSpinner />}
         {issuesQuery.isError && <Toast type="error" message="Failed to load issues" allowClose={false} />}
         {issuesQuery.data?.map((issue) => {
-          const issueData = issue.id in issues ? issues[issue.id] : undefined;
+          const issueData =
+            issue.id in issues
+              ? issues[issue.id]
+              : {
+                  active: false,
+                  start: undefined,
+                  time: 0,
+                };
           return (
             <Issue
               issue={issue}
-              isActive={issueData?.active || false}
-              time={issueData?.time || 0}
-              start={issueData?.start}
+              isActive={issueData.active}
+              time={issueData.time}
+              start={issueData.start}
               onStart={() => {
                 setIssues({
-                  ...issues,
+                  ...(settings.options.autoPauseOnSwitch
+                    ? Object.entries(issues).reduce((res, [id, val]) => {
+                        // @ts-ignore
+                        res[id] = val.active
+                          ? {
+                              active: false,
+                              start: undefined,
+                              time: calcTime(val.time, val.start),
+                            }
+                          : val;
+                        return res;
+                      }, {})
+                    : issues),
                   [issue.id]: {
                     active: true,
                     start: new Date().getTime(),
-                    time: issueData?.time || 0,
+                    time: issueData.time,
                   },
                 });
               }}
@@ -78,4 +97,8 @@ const IssuesPage = () => {
   );
 };
 
+const calcTime = (time: number, start?: number) => {
+  return time + (start ? new Date().getTime() - start : 0);
+};
+
 export default IssuesPage;

src/pages/IssuesPage.tsx

@@ -1,6 +1,7 @@
 import { Field, Form, Formik, FormikProps } from "formik";
 import { useEffect, useRef, useState } from "react";
 import * as Yup from "yup";
+import CheckBox from "../components/general/CheckBox";
 import InputField from "../components/general/InputField";
 import Toast from "../components/general/Toast";
 import useSettings, { Settings } from "../hooks/useSettings";
@@ -40,12 +41,14 @@ const SettingsPage = () => {
               <div className="flex flex-col gap-y-2">
                 <Field type="text" name="redmineURL" title="Redmine URL" placeholder="Redmine URL" required as={InputField} error={touched.redmineURL && errors.redmineURL} />
                 <Field type="password" name="redmineApiKey" title="Redmine API-Key" placeholder="Redmine API-Key" required as={InputField} error={touched.redmineApiKey && errors.redmineApiKey} />
+                <h2 className="text-lg font-semibold">Options:</h2>
+                <Field type="checkbox" name="options.autoPauseOnSwitch" title="Auto pause" description="Automatic pause timers when changing issue" as={CheckBox} />
                 <button
                   type="button"
                   className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 mt-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
                   onClick={submitForm}
                 >
-                  Save
+                  Save Settings
                 </button>
               </div>
             </Form>