diff --git a/README.md b/README.md index 6360353..b9df64d 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ -# TimeMe +# Get Shit Done + +[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). diff --git a/package.json b/package.json index 44c102f..57f5e5a 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "dependencies": { "enzyme": "^2.9.1", "gh-pages": "^1.0.0", + "husky": "^0.14.3", + "lint-staged": "^4.0.1", + "prettier": "^1.5.2", "prop-types": "^15.5.10", "react": "^15.6.1", "react-dom": "^15.6.1", @@ -17,11 +20,18 @@ "react-scripts": "1.0.8" }, "scripts": { + "precommit": "lint-staged", "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "cross-env NODE_PATH=src/ react-scripts start", "build": "cross-env NODE_PATH=src/ react-scripts build", "test": "cross-env NODE_PATH=src/ react-scripts test --env=jsdom", "eject": "react-scripts eject" + }, + "lint-staged": { + "src/**/*.{js,jsx,json,css}": [ + "prettier --single-quote --write --print-width 110 --trailing-comma es5", + "git add" + ] } } diff --git a/src/components/Footer/Footer.style.js b/src/components/Footer/Footer.style.js index 0ac4f91..89b3f0c 100644 --- a/src/components/Footer/Footer.style.js +++ b/src/components/Footer/Footer.style.js @@ -15,11 +15,9 @@ export const StyledFooter = styled.footer` display: flex; font-weight: 100; - ${ - media.tablet` + ${media.tablet` height: 30px; - ` - } + `}; `; export const P = styled.p` @@ -42,6 +40,4 @@ export const A = styled.a` } `; -export const Br = styled.br` - ${media.laptop`display: none`} -`; +export const Br = styled.br`${media.laptop`display: none`};`; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 815fea3..0589c85 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -6,7 +6,8 @@ function Footer() { return (

- Created with ♥ by @Jonas_Pauthier (code)
and Jeremy Fermine (design) + Created with ♥ by @Jonas_Pauthier (code){' '} +
and Jeremy Fermine (design)

); diff --git a/src/components/Timer/Timer.style.js b/src/components/Timer/Timer.style.js index 6a79590..6ea6de3 100644 --- a/src/components/Timer/Timer.style.js +++ b/src/components/Timer/Timer.style.js @@ -14,12 +14,10 @@ export const Button = styled.button` font-size: 1.5em; cursor: pointer; - ${ - media.tablet` + ${media.tablet` width: 300px; margin: 0 auto 10px auto; - ` - } + `}; `; export const Counter = styled.div` @@ -29,11 +27,9 @@ export const Counter = styled.div` font-size: 5em; margin-bottom: 5%; - ${ - media.tablet` + ${media.tablet` margin-bottom: 20px; - ` - } + `}; `; export const TaskName = styled.p` diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js index e56d959..e1d138f 100644 --- a/src/components/Timer/index.js +++ b/src/components/Timer/index.js @@ -35,7 +35,7 @@ class Timer extends Component { } showNotification(taskName) { - if (!("Notification" in window)) { + if (!('Notification' in window)) { return null; } @@ -46,17 +46,14 @@ class Timer extends Component { startTick = () => { this.setState({ - timerID: setInterval( - () => this.tick(), - 1000 - ), + timerID: setInterval(() => this.tick(), 1000), }); }; stopTick = () => { clearInterval(this.state.timerID); this.setState({ timerID: null }); - } + }; formatCount() { const op = this.state.seconds < 0 ? '- ' : ''; @@ -70,18 +67,25 @@ class Timer extends Component { render() { return (
- {this.state.name} - {this.formatCount()} - - {this.state.timerID !== null ? - - : -
- - -
- } - + + {this.state.name} + + + {this.formatCount()} + + + {this.state.timerID !== null + ? + :
+ + +
}
); } diff --git a/src/components/TimerForm/TimerForm.style.js b/src/components/TimerForm/TimerForm.style.js index c979921..b43c0a2 100644 --- a/src/components/TimerForm/TimerForm.style.js +++ b/src/components/TimerForm/TimerForm.style.js @@ -15,12 +15,10 @@ export const Input = styled.input` color: grey; } - ${ - media.tablet` + ${media.tablet` width: 300px; margin: 40px auto; - ` - } + `}; `; export const Submit = styled.input` @@ -35,10 +33,8 @@ export const Submit = styled.input` font-size: 1.5em; cursor: pointer; - ${ - media.tablet` + ${media.tablet` margin: 40px auto; width: 300px; - ` - } + `}; `; diff --git a/src/components/TimerForm/index.js b/src/components/TimerForm/index.js index e440c9b..d31183a 100644 --- a/src/components/TimerForm/index.js +++ b/src/components/TimerForm/index.js @@ -10,11 +10,11 @@ class TimerForm extends Component { this.state = { name: '', duration: '00:00' }; } - handleChange = (event) => { + handleChange = event => { this.setState({ [event.target.name]: event.target.value }); - } + }; - handleSubmit = (event) => { + handleSubmit = event => { event.preventDefault(); if (this.state.name === '' || this.state.duration === '00:00') { @@ -22,24 +22,22 @@ class TimerForm extends Component { } this.props.onValidate(this.state); - } + }; render() { return (
- - - - - + + + + + ); } diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js index 4a3ccf0..eec16c3 100644 --- a/src/registerServiceWorker.js +++ b/src/registerServiceWorker.js @@ -13,9 +13,7 @@ const isLocalhost = Boolean( // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) ); export default function register() { @@ -77,10 +75,7 @@ function checkValidServiceWorker(swUrl) { fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. - if ( - response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 - ) { + if (response.status === 404 || response.headers.get('content-type').indexOf('javascript') === -1) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { @@ -93,9 +88,7 @@ function checkValidServiceWorker(swUrl) { } }) .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); + console.log('No internet connection found. App is running in offline mode.'); }); } diff --git a/src/scenes/Home/Home.style.js b/src/scenes/Home/Home.style.js index b7ba751..4fcae2c 100644 --- a/src/scenes/Home/Home.style.js +++ b/src/scenes/Home/Home.style.js @@ -23,17 +23,11 @@ export const Root = styled.div` padding-bottom: 70px; font-size: 12px; - ${ - media.desktop` + ${media.desktop` font-size: 14px; - ` - } - - ${ - media.big` + `} ${media.big` font-size: 18px; - ` - } + `}; `; export const Logo = styled.img` @@ -42,22 +36,12 @@ export const Logo = styled.img` width: 150px; height: auto; - ${ - media.tablet` + ${media.tablet` display: inline-block; margin: 30px 50px; - ` - } - - ${ - media.desktop` + `} ${media.desktop` margin-bottom: 5%; - ` - } - - ${ - media.big` + `} ${media.big` margin-bottom: 10%; - ` - } + `}; `; diff --git a/src/scenes/Home/index.js b/src/scenes/Home/index.js index 62b443d..415911e 100644 --- a/src/scenes/Home/index.js +++ b/src/scenes/Home/index.js @@ -14,41 +14,38 @@ class Home extends Component { } componentDidMount() { - if (!("Notification" in window)) { + if (!('Notification' in window)) { return null; } if (Notification.permission !== 'denied') { - Notification.requestPermission((permission) => { - if(!('permission' in Notification)) { + Notification.requestPermission(permission => { + if (!('permission' in Notification)) { Notification.permission = permission; } }); } } - onTaskCreation = (task) => { + onTaskCreation = task => { this.setState({ task }); - } + }; onTaskCancel = () => { this.setState({ task: null }); - } + }; render() { return ( - - +

Getshitdone

- {this.state.task === null ? - - : - } + {this.state.task === null + ? + : } -
+