Merge pull request #7 from amrlabib/webpack-config

Webpack config

Author: amrlabib

.gitignore

@@ -1,3 +1,4 @@
+dev-dist
 dist
 node_modules
 .DS_Store

.npmignore

@@ -4,6 +4,7 @@ src
 build
 !.eslintrc
 yarn-error.log
+dev-dist
 
 *.js
 !dist/index.js

src/App.js renamed to app/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTimer } from './useTimer';
+import { useTimer } from '../src/index';
 
 function MyTimer({ expiryTimestamp }) {
   const {

app/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('app'));

package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-timer-hook",
   "version": "1.1.5",
-  "description": "React timer hook is a custom react hook built to handle timers, stopwatch and timer logic and state in your react component.",
+  "description": "React timer hook is a custom react hook built to handle timers, stopwatch and time logic/state in your react component.",
   "main": "dist/index.js",
   "scripts": {
-    "build:dev": "webpack && webpack-dev-server",
-    "build:prod": "rm -rf ./dist && webpack"
+    "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"
   },
   "repository": {
     "type": "git",

src/index.js

@@ -1,5 +1,26 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import { useEffect } from 'react';
+import useTimer from './useTimer';
+import useStopwatch from './useStopwatch';
+import useTime from './useTime';
 
-ReactDOM.render(<App />, document.getElementById('app'));
+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) {
+  // 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 };
+  }
+}

src/useStopwatch.js

@@ -0,0 +1,88 @@
+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();
+        return 0;
+      }
+      return prevSeconds + 1;
+    });
+  }
+
+  // Minutes
+  const [minutes, setMinutes] = useState(0);
+  function addMinute() {
+    setMinutes(prevMinutes => {
+      if (prevMinutes === 59) {
+        addHour();
+        return 0;
+      }
+      return prevMinutes + 1;
+    });
+  }
+
+  // Hours
+  const [hours, setHours] = useState(0);
+  function addHour() {
+    setHours(prevHours => {
+      if (prevHours === 23) {
+        addDay();
+        return 0;
+      }
+      return prevHours + 1;
+    });
+  }
+
+  // Days
+  const [days, setDays] = useState(0);
+  function addDay() {
+    setDays(prevDays => {
+      return prevDays + 1;
+    });
+  }
+
+  // Control functions
+  const intervalRef = useRef();
+
+  function start() {
+    if(!intervalRef.current) {
+      intervalRef.current = setInterval(() => addSecond(), 1000);
+    }
+  }
+
+  function pause() {
+    if(intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+  }
+
+  function reset() {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+    setSeconds(0);
+    setMinutes(0);
+    setHours(0);
+    setDays(0);
+  }
+
+  // didMount effect
+  useEffect(() => {
+    if(autoStart) {
+      start();
+    }
+    return reset;
+  },[]);
+
+  return { seconds, minutes, hours, days, start, pause, reset };
+}

src/useTime.js

@@ -0,0 +1,63 @@
+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 start() {
+    if(!intervalRef.current) {
+      setCurrentTime();
+      intervalRef.current = setInterval(() => setCurrentTime(), 1000);
+    }
+  }
+
+  function reset() {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+    setSeconds(0);
+    setMinutes(0);
+    setHours(0);
+    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 };
+}