Formatting Setup (#335)

* Add formatter

* Test with formatter

* Format with `npm run format`

* Fix formatting errors

* Use rel="noopener noreferrer" with target="_blank"

* Turn off no-case-declarations for now

(when turned on, this disables switch statements)

package.json

@@ -57,6 +57,7 @@
     "glob": "^7.1.2",
     "html-webpack-plugin": "3.2.0",
     "identicon.js": "^2.3.2",
+    "prettier-eslint-cli": "^4.7.1",
     "source-map-loader": "^0.2.3",
     "style-loader": "0.21.0",
     "webpack": "4.8.1",
@@ -72,7 +73,8 @@
     "deploy:ipfs": "./scripts/deploy.sh",
     "build": "NODE_ENV=production webpack --progress --display errors-only",
     "translations": "node translations/scripts/processTranslatedMessages.js",
-    "test": "node scripts/test.js --env=jsdom"
+    "test": "node scripts/test.js --env=jsdom",
+    "format": "npx prettier-eslint --write 'src/**/*.js' 'scripts/**/*.js'"
   },
   "babel": {
     "presets": [
@@ -103,6 +105,7 @@
     ]
   },
   "eslintConfig": {
+    "root": true,
     "parser": "babel-eslint",
     "parserOptions": {
       "ecmaVersion": 6,
@@ -113,7 +116,8 @@
       }
     },
     "globals": {
-      "web3": true
+      "web3": true,
+      "originTest": true
     },
     "env": {
       "browser": true,
@@ -129,9 +133,49 @@
       "plugin:react/recommended"
     ],
     "rules": {
-      "react/prop-types": "off",
+      "computed-property-spacing": [
+        "error"
+      ],
+      "indent": [
+        "error",
+        2
+      ],
+      "jsx-quotes": [
+        "error"
+      ],
+      "key-spacing": [
+        "error"
+      ],
+      "no-case-declarations": [
+        "off"
+      ],
+      "no-console": [
+        "off"
+      ],
+      "no-var": [
+        "error"
+      ],
+      "object-curly-spacing": [
+        "error",
+        "always"
+      ],
+      "prefer-const": [
+        "error"
+      ],
+      "quotes": [
+        "error",
+        "single",
+        {
+          "avoidEscape": true,
+          "allowTemplateLiterals": true
+        }
+      ],
       "react/no-children-prop": "off",
-      "no-console": "off"
+      "react/prop-types": "off",
+      "semi": [
+        "error",
+        "never"
+      ]
     }
   }
 }

scripts/helpers/test-format.js

@@ -0,0 +1,21 @@
+const { spawn } = require('child_process')
+
+const testFormat = () => {
+  return new Promise((resolve, reject) => {
+    const eslint = spawn('./node_modules/.bin/eslint', [
+      'scripts/**/*.js',
+      'src/**/*.js'
+    ])
+    eslint.stdout.on('data', data => {
+      reject(`Code formatter inspection failed:\n${String(data)}`)
+    })
+    eslint.on('exit', code => {
+      if (code === 0) {
+        console.log('Code formatter inspection passed.')
+      }
+      resolve()
+    })
+  })
+}
+
+module.exports = testFormat

scripts/helpers/test-javascript.js

@@ -0,0 +1,8 @@
+const testJavascript = () => {
+  console.log("We don't have tests yet.")
+  console.log('Please see Testing Strategy issue #149 and provide your input.')
+
+  return true
+}
+
+module.exports = testJavascript

scripts/test.js

@@ -1,2 +1,20 @@
-console.log("We don't have tests yet.")
-console.log("Please see Testing Strategy issue #149 and provide your input.")
+const chalk = require('chalk')
+const testJavascript = require('./helpers/test-javascript')
+const testFormat = require('./helpers/test-format')
+
+const start = async () => {
+  try {
+    console.log(chalk`\n{bold.hex('#6e3bea') ⬢  Testing Formatting }\n`)
+    await testFormat()
+    console.log(chalk`\n{bold.hex('#1a82ff') ⬢  Testing Javascript }\n`)
+    await testJavascript()
+    console.log(chalk`\n{bold ✅  Tests passed. :) }\n`)
+    process.exit()
+  } catch (error) {
+    console.log(chalk`\n{bold ⚠️  Tests failed. :( }\n`)
+    console.error(error)
+    process.exit(1)
+  }
+}
+
+start()

src/Store.js

@@ -12,7 +12,7 @@ import alert from 'reducers/Alert'
 import users from 'reducers/Users'
 import app from 'reducers/App'
 
-let middlewares = [thunkMiddleware]
+const middlewares = [thunkMiddleware]
 
 if (process.env.NODE_ENV !== 'production') {
   const { logger } = require(`redux-logger`)
@@ -30,7 +30,7 @@ const store = createStore(
     wallet,
     alert,
     users,
-    app,
+    app
   }),
   applyMiddleware(...middlewares)
 )

src/actions/Alert.js

@@ -3,7 +3,7 @@ import keyMirror from 'utils/keyMirror'
 export const AlertConstants = keyMirror(
   {
     SHOW: null,
-    HIDE: null,
+    HIDE: null
   },
   'ALERT'
 )

src/actions/App.js

@@ -25,22 +25,22 @@ export const AppConstants = keyMirror(
     ON_MOBILE: null,
     WEB3_ACCOUNT: null,
     WEB3_INTENT: null,
-    TRANSLATIONS: null,
+    TRANSLATIONS: null
   },
   'APP'
 )
 
 export function dismissMessaging() {
   return {
     type: AppConstants.MESSAGING_DISMISSED,
-    closedAt: new Date(),
+    closedAt: new Date()
   }
 }
 
 export function dismissNotifications(ids) {
   return {
     type: AppConstants.NOTIFICATIONS_DISMISSED,
-    ids,
+    ids
   }
 }
 
@@ -57,14 +57,14 @@ export function enableMessaging() {
 export function setMessagingEnabled(messagingEnabled) {
   return {
     type: AppConstants.MESSAGING_ENABLED,
-    messagingEnabled,
+    messagingEnabled
   }
 }
 
 export function setMessagingInitialized(messagingInitialized) {
   return {
     type: AppConstants.MESSAGING_INITIALIZED,
-    messagingInitialized,
+    messagingInitialized
   }
 }
 
@@ -96,9 +96,10 @@ export function localizeApp() {
     bestAvailableLanguage = getBestAvailableLanguage(userSelectedLangCode)
   } else {
     // Detect user's preferred settings
-    const browserDefaultLang = (navigator.languages && navigator.languages[0]) ||
-                             navigator.language ||
-                             navigator.userLanguage
+    const browserDefaultLang =
+      (navigator.languages && navigator.languages[0]) ||
+      navigator.language ||
+      navigator.userLanguage
     if (browserDefaultLang && browserDefaultLang !== 'en-US') {
       bestAvailableLanguage = getBestAvailableLanguage(browserDefaultLang)
     }
@@ -119,11 +120,11 @@ export function localizeApp() {
     moment.locale(momentLocale)
   }
 
-  return { 
+  return {
     type: AppConstants.TRANSLATIONS,
     selectedLanguageCode: selectedLanguageCode,
     selectedLanguageFull: getLanguageNativeName(selectedLanguageCode),
     availableLanguages: getAvailableLanguages(),
-    messages 
+    messages
   }
 }

src/actions/Listing.js

@@ -23,8 +23,8 @@ export function getListingIds() {
       window.location.hostname === 'demo.originprotocol.com'
 
     try {
-      let networkId = await web3.eth.net.getId()
-      let contractFound = listingsRegistryContract.networks[networkId]
+      const networkId = await web3.eth.net.getId()
+      const contractFound = listingsRegistryContract.networks[networkId]
       if (!contractFound) {
         dispatch({
           type: ListingConstants.FETCH_IDS_ERROR,
@@ -34,7 +34,7 @@ export function getListingIds() {
       }
 
       if (inProductionEnv && networkId < 10) {
-        let response = await fetch(
+        const response = await fetch(
           `https://raw.githubusercontent.com/OriginProtocol/demo-dapp/hide_list/hidelist_${networkId}.json`
         )
         if (response.status === 200) {

src/actions/Message.js

@@ -6,7 +6,7 @@ export const MessageConstants = keyMirror(
   {
     ADD: null,
     ERROR: null,
-    UPDATE: null,
+    UPDATE: null
   },
   'MESSAGE'
 )
@@ -16,9 +16,9 @@ export function addMessage(obj) {
     try {
       dispatch({
         type: MessageConstants.ADD,
-        obj,
+        obj
       })
-    } catch(err) {
+    } catch (err) {
       dispatch({ type: MessageConstants.ERROR, err })
     }
   }
@@ -28,12 +28,12 @@ export function updateMessage(obj) {
   return function(dispatch) {
     try {
       origin.messaging.set(obj)
-      
+
       dispatch({
         type: MessageConstants.UPDATE,
-        obj,
+        obj
       })
-    } catch(err) {
+    } catch (err) {
       dispatch({ type: MessageConstants.ERROR, err })
     }
   }

src/actions/Notification.js

@@ -5,7 +5,7 @@ import origin from '../services/origin'
 export const NotificationConstants = keyMirror(
   {
     ERROR: null,
-    FETCH: null,
+    FETCH: null
   },
   'NOTIFICATION'
 )
@@ -17,9 +17,9 @@ export function fetchNotifications() {
 
       dispatch({
         type: NotificationConstants.FETCH,
-        notifications,
+        notifications
       })
-    } catch(err) {
+    } catch (err) {
       dispatch({ type: NotificationConstants.ERROR, err })
     }
   }

src/actions/Profile.js

@@ -21,8 +21,8 @@ export const ProfileConstants = keyMirror(
 
 export function fetchProfile() {
   return async function(dispatch) {
-    var user = await origin.users.get(),
-        wallet = await origin.contractService.currentAccount()
+    const user = await origin.users.get(),
+      wallet = await origin.contractService.currentAccount()
 
     dispatch({
       type: ProfileConstants.FETCH_SUCCESS,
@@ -48,7 +48,7 @@ export function deployProfile() {
       profile: { provisional, published }
     } = getState()
 
-    let userData = {
+    const userData = {
       profile: {
         firstName: provisional.firstName,
         lastName: provisional.lastName,
@@ -79,9 +79,9 @@ export function deployProfile() {
     }
 
     try {
-      var user = await origin.users.set(userData)
+      const user = await origin.users.set(userData)
       dispatch({ type: ProfileConstants.DEPLOY_SUCCESS, user })
-    } catch(error) {
+    } catch (error) {
       dispatch({ type: ProfileConstants.DEPLOY_ERROR, error })
     }
   }

src/actions/Transaction.js

@@ -3,7 +3,7 @@ import keyMirror from 'utils/keyMirror'
 export const TransactionConstants = keyMirror(
   {
     UPDATE: null,
-    UPSERT: null,
+    UPSERT: null
   },
   'TRANSACTION'
 )
@@ -12,7 +12,7 @@ export function update(confirmationCount, transactionReceipt) {
   return {
     type: TransactionConstants.UPDATE,
     confirmationCount,
-    transactionReceipt,
+    transactionReceipt
   }
 }
 
@@ -21,7 +21,7 @@ export function upsert(transaction) {
     type: TransactionConstants.UPSERT,
     transaction: {
       confirmationCount: 0,
-      ...transaction,
-    },
+      ...transaction
+    }
   }
 }

src/actions/User.js

@@ -6,7 +6,7 @@ export const UserConstants = keyMirror(
   {
     FETCH: null,
     FETCH_SUCCESS: null,
-    FETCH_ERROR: null,
+    FETCH_ERROR: null
   },
   'USER'
 )
@@ -21,7 +21,7 @@ export function fetchUser(address, unnamedUserMessage) {
         user,
         unnamedUserMessage
       })
-    } catch(error) {
+    } catch (error) {
       dispatch({ type: UserConstants.FETCH_ERROR, error })
     }
   }