Typescript (#118)

* ts files extension

* type code

* eslint errors

* typscript configurations and eslint updates

* clean after typescript migration

* code review

Author: amrlabib

.babelrc

@@ -56,8 +56,8 @@ export default function App() {
           <Header>
             <H1>react-timer-hook</H1>
             <div>
-              <iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160" height="30" title="GitHub" />
-              <iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="126" height="30" title="GitHub" />
+              <iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="160" height="30" title="GitHub" />
+              <iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=fork&count=true&size=large" frameBorder="0" scrolling="0" width="126" height="30" title="GitHub" />
             </div>
           </Header>
         </Container>

.eslintrc

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const ButtonStyled = styled.button`
@@ -16,8 +15,4 @@ const ButtonStyled = styled.button`
   }
 `;
 
-export default function Button(props) {
-  return (
-    <ButtonStyled {...props} />
-  );
-}
+export default ButtonStyled;

demo/App.js demo/App.tsx

@@ -49,7 +49,13 @@ const SingleDigit = styled.span`
   }
 `;
 
-export default function Digit({ value, title, isMIlliseconds }) {
+type DigitType = {
+  value: number,
+  title: string,
+  isMIlliseconds?: boolean;
+};
+
+export default function Digit({ value, title, isMIlliseconds }: DigitType) {
   const digits = value.toString().padStart(4, '0');
   return (
     <Container>

demo/components/Button.js demo/components/Button.tsx

@@ -26,14 +26,23 @@ const Separtor = styled.span`
   margin: 5px 0px;
 `;
 
-export default function TimerStyled({ milliseconds, seconds, minutes, hours, days, enableMilliseconds }) {
+type TimerType = {
+  milliseconds: number, 
+  seconds: number, 
+  minutes: number, 
+  hours: number, 
+  days?: number, 
+  enableMilliseconds: boolean;
+};
+
+export default function TimerStyled({ milliseconds, seconds, minutes, hours, days, enableMilliseconds }: TimerType) {
   return (
     <TimerContainer>
-      {days !== undefined ? <Digit value={days} title="DAYS" addSeparator /> : null}
+      {days !== undefined ? <Digit value={days} title="DAYS" /> : null}
       {days !== undefined ? (<SepartorContainer><Separtor /><Separtor /></SepartorContainer>): null}
-      <Digit value={hours} title="HOURS" addSeparator />
+      <Digit value={hours} title="HOURS" />
       <SepartorContainer><Separtor /><Separtor /></SepartorContainer>
-      <Digit value={minutes} title="MINUTES" addSeparator />
+      <Digit value={minutes} title="MINUTES" />
       <SepartorContainer><Separtor /><Separtor /></SepartorContainer>
       <Digit value={seconds} title="SECONDS" />
       {enableMilliseconds ? 

demo/components/Digit.js demo/components/Digit.tsx

@@ -3,9 +3,7 @@ import { useStopwatch } from '../../src/index';
 import Button from './Button';
 import TimerStyled from './TimerStyled';
 
-export default function UseStopwatchDemo({ interval }) {
-  const time = new Date();
-  time.setMilliseconds(time.getMilliseconds() + 10000);
+export default function UseStopwatchDemo({ interval }: { interval: number}) {
   const {
     milliseconds,
     seconds,
@@ -15,7 +13,7 @@ export default function UseStopwatchDemo({ interval }) {
     start,
     pause,
     reset,
-  } = useStopwatch({ autoStart: true, interval, offsetTimestamp: 0 });
+  } = useStopwatch({ interval });
 
 
   return (
@@ -24,7 +22,7 @@ export default function UseStopwatchDemo({ interval }) {
       <TimerStyled milliseconds={milliseconds} seconds={seconds} minutes={minutes} hours={hours} days={days} enableMilliseconds={interval < 1000} />
       <Button onClick={start}>Start</Button>
       <Button onClick={pause}>Pause</Button>
-      <Button onClick={reset}>Reset</Button>
+      <Button onClick={() => reset()}>Reset</Button>
     </div>
   );
 }

demo/components/TimerStyled.js demo/components/TimerStyled.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTime } from '../../src/index';
 import TimerStyled from './TimerStyled';
 
-export default function UseTimeDemo({ interval }) {
+export default function UseTimeDemo({ interval }: { interval: number}) {
   const {
     milliseconds,
     seconds,

demo/components/UseStopwatchDemo.js demo/components/UseStopwatchDemo.tsx

@@ -3,7 +3,7 @@ import { useTimer } from '../../src/index';
 import TimerStyled from './TimerStyled';
 import Button from './Button';
 
-export default function UseTimerDemo({ expiryTimestamp, interval }) {
+export default function UseTimerDemo({ expiryTimestamp, interval }: { expiryTimestamp: Date, interval: number}) {
   const {
     milliseconds,
     seconds,

demo/components/UseTimeDemo.js demo/components/UseTimeDemo.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-expect-error
 ReactDOM.render(<App />, document.getElementById('app'));