Update on eslint + prettier setup

fix some files styling

renderer/.eslintrc.js → .eslintrc.js

@@ -2,6 +2,8 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
+    node: true,
+    jest: true,
   },
   extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
   globals: {
@@ -16,7 +18,6 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module',
   },
-  plugins: ['react'],
   rules: {
     'react/jsx-filename-extension': [1, {extensions: ['.js', '.jsx']}],
   },

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "start": "electron .",
     "build": "next build renderer && next export renderer",
-    "dist": "npm run build && build --dir"
+    "dist": "npm run build && build --dir",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "build": {
     "asar": false,

renderer/components/dashboard/index.js

@@ -2,5 +2,4 @@ export * from './user-info'
 export * from './user-actions'
 export * from './net-profile'
 export * from './flip-list'
-export * from './flip-group'
 export {default as FlipGroup} from './flip-group'

renderer/components/dashboard/net-profile.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import {Figure} from '../atoms'
 
 export const NetProfile = ({addr, balance}) => (
@@ -18,3 +19,10 @@ export const NetProfile = ({addr, balance}) => (
     `}</style>
   </div>
 )
+
+NetProfile.propTypes = {
+  addr: PropTypes.string.isRequired,
+  balance: PropTypes.shape({stake: PropTypes.number, balance: PropTypes.number}).isRequired,
+}
+
+export default NetProfile

renderer/components/flips/flip-editor.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React, {Component} from 'react'
 import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd'
 import {decode, encode} from 'rlp'
@@ -44,13 +45,14 @@ export class FlipEditor extends Component {
     guard.type(file)
 
     const reader = new FileReader()
-    reader.addEventListener('loadend', ev => {
-      global.ipcRenderer.send(channels.compressFlipSource, new Uint8Array(ev.target.result))
+    reader.addEventListener('loadend', readerEvent => {
+      global.ipcRenderer.send(channels.compressFlipSource, new Uint8Array(readerEvent.target.result))
     })
     reader.readAsArrayBuffer(file)
   }
 
   handleSubmitCrop = blob => {
+    // eslint-disable-next-line react/destructuring-assignment
     if (this.state.flipSizeExceeded) {
       return
     }
@@ -83,7 +85,9 @@ export class FlipEditor extends Component {
   }
 
   handleSubmitFlip = async () => {
-    const {pics, order} = this.state.flip
+    const {
+      flips: {pics, order},
+    } = this.state
 
     const promises = pics.map(blob => new Response(blob).arrayBuffer())
     const arrayBuffers = await Promise.all(promises)
@@ -99,8 +103,9 @@ export class FlipEditor extends Component {
         try {
           const storedFlips = JSON.parse(localStorage.getItem(flipsStorageKey)) || []
           localStorage.setItem(flipsStorageKey, JSON.stringify([result.flipHash, ...storedFlips]))
-        } catch (error) {
-          console.log(error)
+        } catch (storageError) {
+          // eslint-disable-next-line no-console
+          console.error(storageError)
         }
       } else {
         this.setState({
@@ -115,15 +120,15 @@ export class FlipEditor extends Component {
   }
 
   handleFetchFlip = async () => {
-    const hash = this.flipHashRef.current.value || this.state.flipHash
+    const {flipHash: hash = this.flipHashRef.current.value} = this.state
     const {result} = await fetchFlip(hash)
 
     const [flipPics, flipOrder] = decode(fromHexString(result.hex.substr(2)))
 
     const orderedFlipPics = []
-    for (let i = 0; i < flipOrder.length; i++) {
+    for (let i = 0; i < flipOrder.length; i += 1) {
       orderedFlipPics.push([])
-      for (let k = 0; k < flipOrder[i].length; k++) {
+      for (let k = 0; k < flipOrder[i].length; k += 1) {
         const picArrayBuffer = flipPics[flipOrder[i][k][0] || 0]
         orderedFlipPics[i].push(picArrayBuffer)
       }
@@ -156,25 +161,33 @@ export class FlipEditor extends Component {
   }
 
   render() {
-    const {uploadedSrc, flip, fetchedFlip} = this.state
+    const {uploadedSrc, flip, fetchedFlip, flipSizeExceeded, flipHash} = this.state
     return (
       <>
         <h2>FLIPs</h2>
         <div>
           Drag and drop your pics here or upload manually{' '}
-          <input type="file" accept="image/*" onChange={this.handleUpload} disabled={this.state.flipSizeExceeded} />
+          <input type="file" accept="image/*" onChange={this.handleUpload} disabled={flipSizeExceeded} />
           <div>
-            <button onClick={this.reset}>Reset</button>
+            <button type="button" onClick={this.reset}>
+              Reset
+            </button>
           </div>
         </div>
         {uploadedSrc && (
           <div>
-            <FlipCrop src={uploadedSrc} disabled={this.state.flipSizeExceeded} onSubmit={this.handleSubmitCrop} />
+            <FlipCrop src={uploadedSrc} disabled={flipSizeExceeded} onSubmit={this.handleSubmitCrop} />
             <h2>{flip.type}</h2>
             <h3>Reference pics</h3>
             {flip.pics.map(
               (pic, idx) =>
-                pic && <img key={`flip-pic-${idx}`} src={URL.createObjectURL(new Blob([pic], {type: 'image/jpeg'}))} />
+                pic && (
+                  <img
+                    key={`flip-pic-${idx}`}
+                    alt={`flip-pic-${idx}`}
+                    src={URL.createObjectURL(new Blob([pic], {type: 'image/jpeg'}))}
+                  />
+                )
             )}
             <h3>Options</h3>
             <div className="row">
@@ -190,15 +203,16 @@ export class FlipEditor extends Component {
                               draggableId={`flip-pic-${refIdx}-${orderIdx}`}
                               index={idx}
                             >
-                              {(provided, snapshot) => (
+                              {(providedInner, snapshotInner) => (
                                 <div
-                                  ref={provided.innerRef}
-                                  {...provided.draggableProps}
-                                  {...provided.dragHandleProps}
-                                  style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                                  ref={providedInner.innerRef}
+                                  {...providedInner.draggableProps}
+                                  {...providedInner.dragHandleProps}
+                                  style={getItemStyle(snapshotInner.isDragging, providedInner.draggableProps.style)}
                                 >
                                   <img
                                     key={`flip-${refIdx}-${orderIdx}`}
+                                    alt={`flip-${refIdx}-${orderIdx}`}
                                     src={URL.createObjectURL(
                                       new Blob([flip.pics[refIdx]], {
                                         type: 'image/jpeg',
@@ -209,23 +223,27 @@ export class FlipEditor extends Component {
                               )}
                             </Draggable>
                           ))}
-                          {orderIdx === 1 && <button onClick={this.handleClickShuffle}>Shuffle</button>}
+                          {orderIdx === 1 && (
+                            <button type="button" onClick={this.handleClickShuffle}>
+                              Shuffle
+                            </button>
+                          )}
                         </div>
                       )}
                     </Droppable>
                   </DragDropContext>
                 </div>
               ))}
             </div>
-            <button onClick={this.handleSubmitFlip} className="btn btn--primary">
+            <button type="button" onClick={this.handleSubmitFlip} className="btn btn--primary">
               Submit
             </button>
-            <pre>{this.state.flipHash}</pre>
+            <pre>{flipHash}</pre>
           </div>
         )}
         <h2>Fetched flips</h2>
         <input type="text" ref={this.flipHashRef} />
-        <button onClick={this.handleFetchFlip} className="btn">
+        <button type="button" onClick={this.handleFetchFlip} className="btn">
           Get Flip
         </button>
         <div className="row">
@@ -234,6 +252,7 @@ export class FlipEditor extends Component {
               {pics.map((picSrc, k) => (
                 <img
                   key={`df${i}${k}`}
+                  alt={`df${i}${k}`}
                   width={200}
                   src={URL.createObjectURL(new Blob([picSrc], {type: 'image/jpeg'}))}
                 />

renderer/providers/chat-provider.js

@@ -10,9 +10,9 @@ export const ChatProvider = ({children}) => {
     let ignore = false
 
     async function fetchChats() {
-      const chats = await fetchChatList()
+      const fetchedChats = await fetchChatList()
       if (!ignore) {
-        setChats(chats)
+        setChats(fetchedChats)
       }
     }