Merge pull request #21 from amrlabib/feature/lint

Feature/lint

Author: amrlabib

.eslintrc

@@ -0,0 +1,15 @@
+{
+  "parser": "babel-eslint",
+  "plugins": [
+    "react-hooks"
+  ],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-unused-expressions": [ 2,{
+      "allowShortCircuit": true,
+    }],
+    "max-len": 0
+  },
+  "extends": "airbnb"
+}

package.json

@@ -6,7 +6,13 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build:dev": "webpack --config webpack.dev.js && webpack-dev-server --open --config webpack.dev.js",
-    "build:prod": "rm -rf ./dist && webpack --config webpack.prod.js"
+    "build:prod": "rm -rf ./dist && webpack --config webpack.prod.js",
+    "lint": "node_modules/.bin/eslint src"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint"
+    }
   },
   "repository": {
     "type": "git",
@@ -35,12 +41,20 @@
     "babel": "^6.23.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "7",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "copy-webpack-plugin": "^4.6.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "husky": "^4.0.1",
     "react": "^16.8.0",
     "react-dom": "16.8.0",
     "webpack": "^4.24.0",

src/index.js

@@ -7,20 +7,24 @@ export {
   useTimer,
   useStopwatch,
   useTime,
-}
+};
 
 // This deprecated default export is just to avoid breaking old versions code before v1.1.0
-export default function deprecatedUseTimer(settings) {
+export default function useTimerDeprecated(settings) {
   // didMount effect
   useEffect(() => {
     console.warn('react-timer-hook: default export useTimer is deprecated, use named exports { useTimer, useStopwatch, useTime } instead');
-  },[]);
+  }, []);
 
-  if(settings.expiryTimestamp) {
-    const values = useTimer(settings);
-    return { ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: () => {} };
-  } else {
-    const values = useStopwatch(settings);
-    return { ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: values.reset };
+  if (settings.expiryTimestamp) {
+    const values = useTimer(settings); // eslint-disable-line
+    return {
+      ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: () => {},
+    };
   }
-}
+
+  const values = useStopwatch(settings); // eslint-disable-line
+  return {
+    ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: values.reset,
+  };
+}

src/useStopwatch.js

@@ -1,26 +1,30 @@
 import { useState, useEffect, useRef } from 'react';
 
-/* --------------------- useStopwatch ----------------------- */
-
 export default function useStopwatch(settings) {
   const { autoStart } = settings || {};
 
-  // Seconds
   const [seconds, setSeconds] = useState(0);
-  function addSecond() {
-    setSeconds(prevSeconds => {
-      if(prevSeconds === 59) {
-        addMinute();
+  const [minutes, setMinutes] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [days, setDays] = useState(0);
+  const intervalRef = useRef();
+
+  function addDay() {
+    setDays((prevDays) => (prevDays + 1));
+  }
+
+  function addHour() {
+    setHours((prevHours) => {
+      if (prevHours === 23) {
+        addDay();
         return 0;
       }
-      return prevSeconds + 1;
+      return prevHours + 1;
     });
   }
 
-  // Minutes
-  const [minutes, setMinutes] = useState(0);
   function addMinute() {
-    setMinutes(prevMinutes => {
+    setMinutes((prevMinutes) => {
       if (prevMinutes === 59) {
         addHour();
         return 0;
@@ -29,37 +33,24 @@ export default function useStopwatch(settings) {
     });
   }
 
-  // Hours
-  const [hours, setHours] = useState(0);
-  function addHour() {
-    setHours(prevHours => {
-      if (prevHours === 23) {
-        addDay();
+  function addSecond() {
+    setSeconds((prevSeconds) => {
+      if (prevSeconds === 59) {
+        addMinute();
         return 0;
       }
-      return prevHours + 1;
-    });
-  }
-
-  // Days
-  const [days, setDays] = useState(0);
-  function addDay() {
-    setDays(prevDays => {
-      return prevDays + 1;
+      return prevSeconds + 1;
     });
   }
 
-  // Control functions
-  const intervalRef = useRef();
-
   function start() {
-    if(!intervalRef.current) {
+    if (!intervalRef.current) {
       intervalRef.current = setInterval(() => addSecond(), 1000);
     }
   }
 
   function pause() {
-    if(intervalRef.current) {
+    if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = undefined;
     }
@@ -78,11 +69,13 @@ export default function useStopwatch(settings) {
 
   // didMount effect
   useEffect(() => {
-    if(autoStart) {
+    if (autoStart) {
       start();
     }
     return reset;
-  },[]);
+  }, []);
 
-  return { seconds, minutes, hours, days, start, pause, reset };
-}
+  return {
+    seconds, minutes, hours, days, start, pause, reset,
+  };
+}

src/useTime.js

@@ -1,17 +1,39 @@
 import { useState, useEffect, useRef } from 'react';
 
-/* ---------------------- useTime --------------------- */
-
 export default function useTime(settings) {
   const { format } = settings || {};
+
   const [seconds, setSeconds] = useState(0);
   const [minutes, setMinutes] = useState(0);
   const [hours, setHours] = useState(0);
   const [ampm, setAmPm] = useState('');
-
   const intervalRef = useRef();
+
+  function formatHours(hoursValue) {
+    if (format === '12-hour') {
+      const ampmValue = hoursValue >= 12 ? 'pm' : 'am';
+      let formattedHours = hoursValue % 12;
+      formattedHours = formattedHours || 12;
+      return { hoursValue: formattedHours, ampmValue };
+    }
+    return { hoursValue, ampmValue: '' };
+  }
+
+  function setCurrentTime() {
+    const now = new Date();
+    const secondsValue = now.getSeconds();
+    const minutesValue = now.getMinutes();
+    const { hoursValue, ampmValue } = formatHours(now.getHours());
+
+    setSeconds(secondsValue);
+    setMinutes(minutesValue);
+    setHours(hoursValue);
+    setAmPm(ampmValue);
+  }
+
+
   function start() {
-    if(!intervalRef.current) {
+    if (!intervalRef.current) {
       setCurrentTime();
       intervalRef.current = setInterval(() => setCurrentTime(), 1000);
     }
@@ -28,36 +50,14 @@ export default function useTime(settings) {
     setAmPm('');
   }
 
-  function formatHours(hours) {
-    if (format === '12-hour') {
-      const ampm = hours >= 12 ? 'pm' : 'am';
-      var formattedHours = hours % 12;
-      formattedHours = formattedHours || 12;
-      return { hours: formattedHours, ampm };
-    }
-    return { hours, ampm: '' };
-  }
-
-
-  function setCurrentTime() {
-    var now = new Date();
-    const seconds = now.getSeconds();
-    const minutes = now.getMinutes();
-    const { hours, ampm } = formatHours(now.getHours());
-
-
-    setSeconds(seconds);
-    setMinutes(minutes);
-    setHours(hours);
-    setAmPm(ampm);
-  }
-
   // didMount effect
   useEffect(() => {
     start();
     return reset;
-  },[]);
+  }, []);
 
 
-  return { seconds, minutes, hours, ampm };
+  return {
+    seconds, minutes, hours, ampm,
+  };
 }