Skip to content

Commit c464d6a

Browse files
amrlabibamrlabib
committed
separate dev app from library code + useTimer, useStopwatch and useTime to different files
1 parent 86e2edd commit c464d6a

File tree

8 files changed

+185
-173
lines changed

8 files changed

+185
-173
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { useTimer } from './useTimer';
2+
import { useTimer } from '../src/index';
33

44
function MyTimer({ expiryTimestamp }) {
55
const {

‎app/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(<App />, document.getElementById('app'));

‎src/index.js‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import App from './App';
1+
import { useEffect } from 'react';
2+
import useTimer from './useTimer';
3+
import useStopwatch from './useStopwatch';
4+
import useTime from './useTime';
45

5-
ReactDOM.render(<App />, document.getElementById('app'));
6+
export {
7+
useTimer,
8+
useStopwatch,
9+
useTime,
10+
}
11+
12+
// This deprecated default export is just for old version before v1.1.0 for all new versions only named exports should be used
13+
export default function deprecatedUseTimer(settings) {
14+
// didMount effect
15+
useEffect(() => {
16+
console.warn('react-timer-hook: default export useTimer is deprecated, use named exports { useTimer, useStopwatch, useTime } instead');
17+
},[]);
18+
19+
if(settings.expiryTimestamp) {
20+
const values = useTimer(settings);
21+
return { ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: () => {} };
22+
} else {
23+
const values = useStopwatch(settings);
24+
return { ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: values.reset };
25+
}
26+
}

‎src/useStopwatch.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { useState, useEffect, useRef } from 'react';
2+
3+
/* --------------------- useStopwatch ----------------------- */
4+
5+
export default function useStopwatch(settings) {
6+
const { autoStart } = settings || {};
7+
8+
// Seconds
9+
const [seconds, setSeconds] = useState(0);
10+
function addSecond() {
11+
setSeconds(prevSeconds => {
12+
if(prevSeconds === 59) {
13+
addMinute();
14+
return 0;
15+
}
16+
return prevSeconds + 1;
17+
});
18+
}
19+
20+
// Minutes
21+
const [minutes, setMinutes] = useState(0);
22+
function addMinute() {
23+
setMinutes(prevMinutes => {
24+
if (prevMinutes === 59) {
25+
addHour();
26+
return 0;
27+
}
28+
return prevMinutes + 1;
29+
});
30+
}
31+
32+
// Hours
33+
const [hours, setHours] = useState(0);
34+
function addHour() {
35+
setHours(prevHours => {
36+
if (prevHours === 23) {
37+
addDay();
38+
return 0;
39+
}
40+
return prevHours + 1;
41+
});
42+
}
43+
44+
// Days
45+
const [days, setDays] = useState(0);
46+
function addDay() {
47+
setDays(prevDays => {
48+
return prevDays + 1;
49+
});
50+
}
51+
52+
// Control functions
53+
const intervalRef = useRef();
54+
55+
function start() {
56+
if(!intervalRef.current) {
57+
intervalRef.current = setInterval(() => addSecond(), 1000);
58+
}
59+
}
60+
61+
function pause() {
62+
if(intervalRef.current) {
63+
clearInterval(intervalRef.current);
64+
intervalRef.current = undefined;
65+
}
66+
}
67+
68+
function reset() {
69+
if (intervalRef.current) {
70+
clearInterval(intervalRef.current);
71+
intervalRef.current = undefined;
72+
}
73+
setSeconds(0);
74+
setMinutes(0);
75+
setHours(0);
76+
setDays(0);
77+
}
78+
79+
// didMount effect
80+
useEffect(() => {
81+
if(autoStart) {
82+
start();
83+
}
84+
return reset;
85+
},[]);
86+
87+
return { seconds, minutes, hours, days, start, pause, reset };
88+
}

‎src/useTime.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { useState, useEffect, useRef } from 'react';
2+
3+
/* ---------------------- useTime --------------------- */
4+
5+
export default function useTime(settings) {
6+
const { format } = settings || {};
7+
const [seconds, setSeconds] = useState(0);
8+
const [minutes, setMinutes] = useState(0);
9+
const [hours, setHours] = useState(0);
10+
const [ampm, setAmPm] = useState('');
11+
12+
const intervalRef = useRef();
13+
function start() {
14+
if(!intervalRef.current) {
15+
setCurrentTime();
16+
intervalRef.current = setInterval(() => setCurrentTime(), 1000);
17+
}
18+
}
19+
20+
function reset() {
21+
if (intervalRef.current) {
22+
clearInterval(intervalRef.current);
23+
intervalRef.current = undefined;
24+
}
25+
setSeconds(0);
26+
setMinutes(0);
27+
setHours(0);
28+
setAmPm('');
29+
}
30+
31+
function formatHours(hours) {
32+
if (format === '12-hour') {
33+
const ampm = hours >= 12 ? 'pm' : 'am';
34+
var formattedHours = hours % 12;
35+
formattedHours = formattedHours || 12;
36+
return { hours: formattedHours, ampm };
37+
}
38+
return { hours, ampm: '' };
39+
}
40+
41+
42+
function setCurrentTime() {
43+
var now = new Date();
44+
const seconds = now.getSeconds();
45+
const minutes = now.getMinutes();
46+
const { hours, ampm } = formatHours(now.getHours());
47+
48+
49+
setSeconds(seconds);
50+
setMinutes(minutes);
51+
setHours(hours);
52+
setAmPm(ampm);
53+
}
54+
55+
// didMount effect
56+
useEffect(() => {
57+
start();
58+
return reset;
59+
},[]);
60+
61+
62+
return { seconds, minutes, hours, ampm };
63+
}

‎src/useTimer.js‎

Lines changed: 1 addition & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,8 @@
11
import { useState, useEffect, useRef } from 'react';
22

3-
export default function deprecatedUseTimer(settings) {
4-
// didMount effect
5-
useEffect(() => {
6-
console.warn('react-timer-hook: default export useTimer is deprecated, use named exports { useTimer, useStopwatch } instead');
7-
},[]);
8-
9-
if(settings.expiryTimestamp) {
10-
const values = useTimer(settings);
11-
return { ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: () => {} };
12-
} else {
13-
const values = useStopwatch(settings);
14-
return { ...values, startTimer: values.start, stopTimer: values.pause, resetTimer: values.reset };
15-
}
16-
}
17-
18-
/* --------------------- useStopwatch ----------------------- */
19-
20-
export function useStopwatch(settings) {
21-
const { autoStart } = settings || {};
22-
23-
// Seconds
24-
const [seconds, setSeconds] = useState(0);
25-
function addSecond() {
26-
setSeconds(prevSeconds => {
27-
if(prevSeconds === 59) {
28-
addMinute();
29-
return 0;
30-
}
31-
return prevSeconds + 1;
32-
});
33-
}
34-
35-
// Minutes
36-
const [minutes, setMinutes] = useState(0);
37-
function addMinute() {
38-
setMinutes(prevMinutes => {
39-
if (prevMinutes === 59) {
40-
addHour();
41-
return 0;
42-
}
43-
return prevMinutes + 1;
44-
});
45-
}
46-
47-
// Hours
48-
const [hours, setHours] = useState(0);
49-
function addHour() {
50-
setHours(prevHours => {
51-
if (prevHours === 23) {
52-
addDay();
53-
return 0;
54-
}
55-
return prevHours + 1;
56-
});
57-
}
58-
59-
// Days
60-
const [days, setDays] = useState(0);
61-
function addDay() {
62-
setDays(prevDays => {
63-
return prevDays + 1;
64-
});
65-
}
66-
67-
// Control functions
68-
const intervalRef = useRef();
69-
70-
function start() {
71-
if(!intervalRef.current) {
72-
intervalRef.current = setInterval(() => addSecond(), 1000);
73-
}
74-
}
75-
76-
function pause() {
77-
if(intervalRef.current) {
78-
clearInterval(intervalRef.current);
79-
intervalRef.current = undefined;
80-
}
81-
}
82-
83-
function reset() {
84-
if (intervalRef.current) {
85-
clearInterval(intervalRef.current);
86-
intervalRef.current = undefined;
87-
}
88-
setSeconds(0);
89-
setMinutes(0);
90-
setHours(0);
91-
setDays(0);
92-
}
93-
94-
// didMount effect
95-
useEffect(() => {
96-
if(autoStart) {
97-
start();
98-
}
99-
return reset;
100-
},[]);
101-
102-
return { seconds, minutes, hours, days, start, pause, reset };
103-
}
104-
1053
/* ---------------------- useTimer --------------------- */
1064

107-
export function useTimer(settings) {
5+
export default function useTimer(settings) {
1086
const { expiryTimestamp: expiry, onExpire } = settings || {};
1097
const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
1108

@@ -245,66 +143,3 @@ export function useTimer(settings) {
245143

246144
return { seconds, minutes, hours, days, start, pause, resume, restart };
247145
}
248-
249-
250-
/* ---------------------- useTime --------------------- */
251-
252-
export function useTime(settings) {
253-
const { format } = settings || {};
254-
const [seconds, setSeconds] = useState(0);
255-
const [minutes, setMinutes] = useState(0);
256-
const [hours, setHours] = useState(0);
257-
const [ampm, setAmPm] = useState('');
258-
259-
const intervalRef = useRef();
260-
function start() {
261-
if(!intervalRef.current) {
262-
setCurrentTime();
263-
intervalRef.current = setInterval(() => setCurrentTime(), 1000);
264-
}
265-
}
266-
267-
function reset() {
268-
if (intervalRef.current) {
269-
clearInterval(intervalRef.current);
270-
intervalRef.current = undefined;
271-
}
272-
setSeconds(0);
273-
setMinutes(0);
274-
setHours(0);
275-
setAmPm('');
276-
}
277-
278-
function formatHours(hours) {
279-
if (format === '12-hour') {
280-
const ampm = hours >= 12 ? 'pm' : 'am';
281-
var formattedHours = hours % 12;
282-
formattedHours = formattedHours || 12;
283-
return { hours: formattedHours, ampm };
284-
}
285-
return { hours, ampm: '' };
286-
}
287-
288-
289-
function setCurrentTime() {
290-
var now = new Date();
291-
const seconds = now.getSeconds();
292-
const minutes = now.getMinutes();
293-
const { hours, ampm } = formatHours(now.getHours());
294-
295-
296-
setSeconds(seconds);
297-
setMinutes(minutes);
298-
setHours(hours);
299-
setAmPm(ampm);
300-
}
301-
302-
// didMount effect
303-
useEffect(() => {
304-
start();
305-
return reset;
306-
},[]);
307-
308-
309-
return { seconds, minutes, hours, ampm };
310-
}

‎webpack.dev.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = {
88
hints: false
99
},
1010
mode: "development",
11-
entry: './src/index.js',
11+
entry: './app/index.js',
1212
output: {
1313
filename: 'js/scripts.js',
1414
chunkFilename: '[name].[chunkhash].js',

‎webpack.prod.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ module.exports = {
66
hints: false
77
},
88
mode: "production",
9-
entry: './src/useTimer.js',
9+
entry: './src/index.js',
1010
output: {
1111
filename: './index.js',
1212
// chunkFilename: '[name].[chunkhash].js',

0 commit comments

Comments
 (0)