Added Prettier format on commit

Nargonath · Jul 6, 2017 · 3e22131 · 3e22131
1 parent e5b612b
commit 3e22131
Show file tree

Hide file tree

Showing 14 changed files with 309 additions and 115 deletions.
diff --git 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
@@ -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
@@ -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
@@ -6,7 +6,8 @@ function Footer() {
   return (
     <StyledFooter>
       <P>
-        Created with &hearts; by <A href="https://twitter.com/jonas_pauthier">@Jonas_Pauthier</A> (code) <Br /> and <A href="http://jeremy-fermine.com/">Jeremy Fermine</A> (design)
+        Created with &hearts; by <A href="https://twitter.com/jonas_pauthier">@Jonas_Pauthier</A> (code){' '}
+        <Br /> and <A href="http://jeremy-fermine.com/">Jeremy Fermine</A> (design)
       </P>
     </StyledFooter>
   );

diff --git 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
@@ -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 (
       <div>
-        <TaskName>{this.state.name}</TaskName>
-        <Counter>{this.formatCount()}</Counter>
-
-        {this.state.timerID !== null ?
-          <Button type="button" onClick={this.stopTick}>Stop</Button>
-        :
-          <div>
-            <Button type="button" onClick={this.startTick}>Restart</Button>
-            <Button type="button" onClick={this.props.onCancel}>Cancel</Button>
-          </div>
-        }
-
+        <TaskName>
+          {this.state.name}
+        </TaskName>
+        <Counter>
+          {this.formatCount()}
+        </Counter>
+
+        {this.state.timerID !== null
+          ? <Button type="button" onClick={this.stopTick}>
+              Stop
+            </Button>
+          : <div>
+              <Button type="button" onClick={this.startTick}>
+                Restart
+              </Button>
+              <Button type="button" onClick={this.props.onCancel}>
+                Cancel
+              </Button>
+            </div>}
       </div>
     );
   }

diff --git 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
@@ -10,36 +10,34 @@ 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') {
       return;
     }
 
     this.props.onValidate(this.state);
-  }
+  };
 
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        <Input type="text"
-               name="name"
-               value={this.state.name}
-               onChange={this.handleChange}
-               placeholder="Task name"/>
-
-        <Input type="time"
-               name="duration"
-               value={this.state.duration}
-               onChange={this.handleChange} />
-
-        <Submit type="submit"
-               value="Start" />
+        <Input
+          type="text"
+          name="name"
+          value={this.state.name}
+          onChange={this.handleChange}
+          placeholder="Task name"
+        />
+
+        <Input type="time" name="duration" value={this.state.duration} onChange={this.handleChange} />
+
+        <Submit type="submit" value="Start" />
       </form>
     );
   }

diff --git 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
@@ -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
@@ -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 (
       <Root>
-
-        <Logo src={logo} alt="getshitdone logo timer task"/>
+        <Logo src={logo} alt="getshitdone logo timer task" />
         <h1 hidden>Getshitdone</h1>
 
-        {this.state.task === null ?
-          <TimerForm onValidate={this.onTaskCreation}></TimerForm>
-        :
-          <Timer task={this.state.task}
-                 onCancel={this.onTaskCancel}></Timer>}
+        {this.state.task === null
+          ? <TimerForm onValidate={this.onTaskCreation} />
+          : <Timer task={this.state.task} onCancel={this.onTaskCancel} />}
 
-        <Footer></Footer>
+        <Footer />
       </Root>
     );
   }

diff --git a/src/services/string.js b/src/services/string.js
@@ -1,3 +1,3 @@
-export const zeroPad = (value) => {
+export const zeroPad = value => {
   return value < 10 ? `0${value}` : `${value}`;
 };
diff --git a/src/styles/responsive.js b/src/styles/responsive.js
@@ -14,7 +14,7 @@ export const media = Object.keys(sizes).reduce((acc, label) => {
   const emSize = sizes[label] / 16;
   acc[label] = (...args) => css`
     @media (min-width: ${emSize}em) {
-      ${ css(...args) }
+      ${css(...args)}
     }
   `;