Add prettify command and run it

.eslintrc

@@ -28,7 +28,7 @@
     "react/jsx-uses-vars": 2,
     "react/react-in-jsx-scope": 2,
     "react/jsx-no-target-blank": 1,
-    "comma-dangle": [2, "never"],
+    "comma-dangle": [2, "always-multiline"],
     "react/prop-types": 0,
     "no-use-before-define": 0,
     "padded-blocks": 0,

components/Fader.jsx

@@ -6,11 +6,11 @@ function clamp(min, max, value) {
 
 export default class Fader extends React.Component {
   static defaultProps = {
-    threshold: 100
+    threshold: 100,
   };
 
   state = {
-    opacity: 0
+    opacity: 0,
   };
 
   onScroll = () => {
@@ -19,7 +19,7 @@ export default class Fader extends React.Component {
       distanceToBottom = scrollableDistance - scrollTop;
 
     this.setState({
-      opacity: clamp(0, 1, distanceToBottom / this.props.threshold)
+      opacity: clamp(0, 1, distanceToBottom / this.props.threshold),
     });
   };
 
@@ -34,7 +34,7 @@ export default class Fader extends React.Component {
 
   render() {
     var style = {
-      opacity: this.state.opacity
+      opacity: this.state.opacity,
     };
 
     return <div className="fader" style={style}></div>;

components/Feed.jsx

@@ -14,7 +14,7 @@ function throwError(err) {
 
 export default class Feed extends React.Component {
   state = {
-    messages: []
+    messages: [],
   };
 
   componentDidMount() {
@@ -32,7 +32,7 @@ export default class Feed extends React.Component {
             .sortBy("timestamp")
             .reverse()
             .value()
-            .slice(0, 40)
+            .slice(0, 40),
         });
       })
       .catch(throwError);

components/InviteForm.jsx

@@ -9,7 +9,7 @@ export default class InviteForm extends React.Component {
     email: "",
     submitted: false,
     sending: false,
-    error: null
+    error: null,
   };
 
   onSubmit = e => {
@@ -18,12 +18,12 @@ export default class InviteForm extends React.Component {
     this.setState({
       submitted: false,
       sending: true,
-      error: null
+      error: null,
     });
 
     request
       .post(api("invites"), {
-        email: this.state.email.trim()
+        email: this.state.email.trim(),
       })
       .then(this.handleSuccess)
       .catch(this.handleError);
@@ -44,7 +44,7 @@ export default class InviteForm extends React.Component {
     this.setState({
       email: e.target.value,
       error: null,
-      submitted: false
+      submitted: false,
     });
   };
 
@@ -54,13 +54,13 @@ export default class InviteForm extends React.Component {
       "invite-form": true,
       "has-success": this.state.submitted,
       "has-error": this.state.error,
-      sending: this.state.sending
+      sending: this.state.sending,
     });
 
     var inputClasses = classSet({
       input: true,
       "has-success": this.state.submitted,
-      "has-error": this.state.error
+      "has-error": this.state.error,
     });
 
     var feedbackMessage;

components/Members.jsx

@@ -5,14 +5,14 @@ import api from "./api";
 
 export default class Members extends React.Component {
   state = {
-    members: []
+    members: [],
   };
 
   componentDidMount() {
     request.get(api("members")).then(
       function(res) {
         this.setState({
-          members: _.shuffle(res.data)
+          members: _.shuffle(res.data),
         });
       }.bind(this)
     );

components/feed-transformers.js

@@ -23,7 +23,7 @@ export default {
         branch: branch,
         number: item.payload.number,
         ref_type: item.payload.ref_type,
-        ref: item.payload.ref
+        ref: item.payload.ref,
       });
 
       var url = `https://github.com/${item.actor.login}`;
@@ -36,7 +36,7 @@ export default {
         body: message,
         timestamp: new Date(item.created_at),
         url: message.url,
-        type: "github"
+        type: "github",
       };
     });
   },
@@ -55,8 +55,8 @@ export default {
         imageLink: url,
         body: twitterText.autoLink(item.text),
         timestamp: new Date(item.created_at),
-        type: "twitter"
+        type: "twitter",
       };
     });
-  }
+  },
 };

components/membership/MembershipForm.jsx

@@ -3,7 +3,7 @@ import MembershipInfoForm from "./MembershipInfoForm";
 
 export default class MembershipForm extends React.Component {
   state = {
-    signupSuccess: false
+    signupSuccess: false,
   };
 
   handleSignupSuccess = () => {

components/membership/MembershipInfoForm.jsx

@@ -11,7 +11,7 @@ var fieldNameTranslations = {
   email: { fi: "Sähköpostiosoite" },
   handle: { fi: "Slack-käyttäjätunnus " },
   name: { fi: "Koko nimi " },
-  postcode: { fi: "Postinumero" }
+  postcode: { fi: "Postinumero" },
 };
 
 const mailValidateRe = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -35,18 +35,18 @@ export default class MembershipInfoForm extends React.Component {
     name: "",
     postcode: "",
     sending: false,
-    pristineFields: fieldNames
+    pristineFields: fieldNames,
   };
 
   onSubmit = () => {
     this.setState({
       sending: true,
-      error: null
+      error: null,
     });
 
     request
       .post(api("membership"), {
-        userInfo: getUserInfo(this.state)
+        userInfo: getUserInfo(this.state),
       })
       .then(() => {
         this.setState({ sending: false });
@@ -68,7 +68,7 @@ export default class MembershipInfoForm extends React.Component {
       pristineFields: this.state.pristineFields.filter(
         fieldName => fieldName !== name
       ),
-      errors: []
+      errors: [],
     });
   };
 
@@ -95,7 +95,7 @@ export default class MembershipInfoForm extends React.Component {
       form: true,
       "membership-form": true,
       "has-error": inputErrors.length !== 0 || this.state.error,
-      sending: this.state.sending
+      sending: this.state.sending,
     });
 
     function getErrorMessage(err) {
@@ -126,7 +126,7 @@ export default class MembershipInfoForm extends React.Component {
         input: true,
         "has-error": _.includes(fieldsWithErrors, fieldName),
         half: fieldName === "city" || fieldName === "postcode",
-        left: fieldName === "postcode"
+        left: fieldName === "postcode",
       });
 
       function showsErrorFor(field) {

package.json

@@ -9,7 +9,8 @@
     "build": "next build && next export",
     "dev": "SERVER=http://localhost:9000/ ENV=development next",
     "prod": "ENV=production next build && next export",
-    "lint": "eslint --ext .jsx --ext .js ."
+    "lint": "eslint --ext .jsx --ext .js .",
+    "prettify": "prettier --write {components,pages,styles}/{*,**/*}.js*"
   },
   "dependencies": {
     "@zeit/next-css": "^1.0.1",
@@ -37,5 +38,8 @@
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-react": "^7.14.3",
     "prettier": "^1.18.2"
+  },
+  "prettier": {
+    "trailingComma": "es5"
   }
 }

pages/_document.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import { Footer } from "../components/Footer";
-import Fader from '../components/Fader';
+import Fader from "../components/Fader";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -45,7 +45,7 @@ class MyDocument extends Document {
           <meta property="og:image" content="images/logo.png" />
           <script src="https://js.stripe.com/v3/" />
           <script src="//use.typekit.net/scb5xny.js" />
-          <script>{'try{Typekit.load();}catch(e){};'}</script>
+          <script>{"try{Typekit.load();}catch(e){};"}</script>
         </Head>
         <body>
           <div className="site">

pages/index.jsx

@@ -5,7 +5,7 @@ import Head from "next/head";
 import InviteForm from "../components/InviteForm";
 import Members from "../components/Members";
 import Feed from "../components/Feed";
-import { projects } from '../data/indexData';
+import { projects } from "../data/indexData";
 const Hero = () => (
   <div className="header">
     <video
@@ -36,7 +36,7 @@ const PatientProject = ({ title, description, url, image }) => (
   <div className="bread">
     <div className="column column2-5">
       <a href={url} target="_blank">
-        <img src={image} style={{ width: "7rem"}} />
+        <img src={image} style={{ width: "7rem" }} />
       </a>
     </div>
     <div className="column column3-5">
@@ -58,7 +58,9 @@ const IndexContent = () => (
             </a>
             -yhteisöömme
           </h3>
-          <div className="form"><InviteForm /></div>
+          <div className="form">
+            <InviteForm />
+          </div>
           <p className="code-of-conduct">
             Ennen liittymistä yhteisöömme varmista, että olet lukenut yhteisön{" "}
             <a