chore: change prettier setup

adekbadek · Apr 12, 2020 · 59436c4 · 59436c4
1 parent 90425f5
commit 59436c4
Show file tree

Hide file tree

Showing 19 changed files with 172 additions and 2,455 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/.eslintrc → client/.eslintrc b/.eslintrc → client/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": ["standard", "standard-react", "react-app"],
+  "extends": ["standard", "standard-react", "react-app", "plugin:prettier/recommended"],
   "rules": {
     "comma-dangle": 0,
     "react/prop-types": 0,

diff --git a/client/.prettierignore b/client/.prettierignore
@@ -0,0 +1,5 @@
+*.md
+*.yml
+build
+public
+flow-typed
diff --git a/client/.prettierrc.js b/client/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  trailingComma: 'es5',
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  arrowParens: 'avoid',
+}
diff --git a/client/package.json b/client/package.json
@@ -63,6 +63,7 @@
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "eslint": "3.19.0",
+    "eslint-config-prettier": "^6.10.1",
     "eslint-config-react-app": "1.0.0-alpha.55afd862",
     "eslint-config-standard": "^10.2.1",
     "eslint-config-standard-react": "^5.0.0",
@@ -71,13 +72,15 @@
     "eslint-plugin-import": "2.2.0",
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-node": "^4.2.2",
+    "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "7.0.1",
     "eslint-plugin-standard": "^3.0.1",
     "flow-bin": "^0.59.0",
     "flow-typed": "^2.4.0",
     "inquirer": "3.0.6",
-    "jest": "20.0.3"
+    "jest": "20.0.3",
+    "prettier": "2.0.2"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles/",
@@ -87,7 +90,9 @@
     "test": "NODE_PATH=src node scripts/test.js --env=jsdom",
     "flow": "flow",
     "flow-typed": "flow-typed install --ignoreDeps dev",
-    "postinstall": "npm run flow-typed"
+    "postinstall": "npm run flow-typed",
+    "lint": "eslint ./src",
+    "format": "prettier './src/**/*.{js,jsx}' --write"
   },
   "jest": {
     "collectCoverageFrom": [

diff --git a/client/src/__test__/utils.test.js b/client/src/__test__/utils.test.js
@@ -2,10 +2,7 @@
 
 import moment from 'moment'
 
-import {
-  getRangesForDate,
-  getPointNames,
-} from 'utils/time.js'
+import { getRangesForDate, getPointNames } from 'utils/time.js'
 import {
   times,
   hashCode,
@@ -14,16 +11,10 @@ import {
 } from 'utils/aux.js'
 
 it('getRangesForDate', () => {
-  const range = {start: '2017-05-01', end: '2017-05-19', name: 'Zumbo'}
-  expect(
-    getRangesForDate(moment('2017-05-09'), [range])
-  ).toBeTruthy()
-  expect(
-    getRangesForDate(moment('2017-04-09'), [range])
-  ).toEqual([])
-  expect(
-    getRangesForDate(moment('2016-05-09'), [range])
-  ).toEqual([])
+  const range = { start: '2017-05-01', end: '2017-05-19', name: 'Zumbo' }
+  expect(getRangesForDate(moment('2017-05-09'), [range])).toBeTruthy()
+  expect(getRangesForDate(moment('2017-04-09'), [range])).toEqual([])
+  expect(getRangesForDate(moment('2016-05-09'), [range])).toEqual([])
 })
 
 it('getPointNames', () => {
@@ -58,15 +49,13 @@ it('getColorFromStringFunc', () => {
 })
 
 it('getCellStyles', () => {
-  const ranges = [
-    {name: 'One'},
-    {name: 'Two'},
-  ]
-  const names = [
-    'Some',
-    'Names',
-    'Here,',
-  ]
+  const ranges = [{ name: 'One' }, { name: 'Two' }]
+  const names = ['Some', 'Names', 'Here,']
   expect(getCellStyles(ranges, names)).toMatchSnapshot()
-  expect(getCellStyles(ranges.map(v => ({...v, isOnHold: true})), names)).toMatchSnapshot()
+  expect(
+    getCellStyles(
+      ranges.map(v => ({ ...v, isOnHold: true })),
+      names
+    )
+  ).toMatchSnapshot()
 })
diff --git a/client/src/components/TimeViewer/Calendar.jsx b/client/src/components/TimeViewer/Calendar.jsx
@@ -32,35 +32,50 @@ export default (props: TimeViewProps) => {
                 const date = moment(startDate).add(dayIndex, 'days')
 
                 const rangesData = getRangesForDate(date, props.ranges)
-                const rangesNames = pluck('name', rangesData.map(({name}) => ({name})))
+                const rangesNames = pluck(
+                  'name',
+                  rangesData.map(({ name }) => ({ name }))
+                )
 
-                const dayName = weekIndex === 0 && weekdayIndex % 2 !== 0 && date.format('ddd')
-                const monthName = weekdayIndex === 0 && date.date() <= 7 && date.format('MMM')
+                const dayName =
+                  weekIndex === 0 &&
+                  weekdayIndex % 2 !== 0 &&
+                  date.format('ddd')
+                const monthName =
+                  weekdayIndex === 0 && date.date() <= 7 && date.format('MMM')
                 return (
                   <div
                     key={weekdayIndex}
                     className={cx(
                       CELL_CLASSNAME,
-                      {[`${CELL_CLASSNAME}--display-name`]: dayName || monthName},
-                      {[`${CELL_CLASSNAME}--display-day-name`]: dayName},
-                      {[`${CELL_CLASSNAME}--display-month-name`]: monthName},
-                      {[`${CELL_CLASSNAME}--today`]: moment().isSame(date, 'day')},
-                      {[`${CELL_CLASSNAME}--border-top`]: date.date() === 1},
+                      {
+                        [`${CELL_CLASSNAME}--display-name`]:
+                          dayName || monthName,
+                      },
+                      { [`${CELL_CLASSNAME}--display-day-name`]: dayName },
+                      { [`${CELL_CLASSNAME}--display-month-name`]: monthName },
+                      {
+                        [`${CELL_CLASSNAME}--today`]: moment().isSame(
+                          date,
+                          'day'
+                        ),
+                      },
+                      { [`${CELL_CLASSNAME}--border-top`]: date.date() === 1 }
                     )}
                     data-dayname={dayName || ''}
                     data-monthname={monthName || ''}
                     style={getCellStyles(rangesData, rangesNames)}
-                    >
-                    {(!!rangesNames.length) && <span
-                      className='tooltip'
-                      data-info={
-                        `${
-                          date.format('DD MMM')
-                        }${
-                          rangesNames.length ? ` | ${rangesNames.join(', ')}` : ''
-                        }`
-                      }
-                    />}
+                  >
+                    {!!rangesNames.length && (
+                      <span
+                        className='tooltip'
+                        data-info={`${date.format('DD MMM')}${
+                          rangesNames.length
+                            ? ` | ${rangesNames.join(', ')}`
+                            : ''
+                        }`}
+                      />
+                    )}
                   </div>
                 )
               })}

diff --git a/client/src/components/TimeViewer/Gantt.jsx b/client/src/components/TimeViewer/Gantt.jsx
@@ -13,27 +13,30 @@ const ROW_HEIGHT = 23
 const CLASSNAME_BASE = 'gantt'
 const MONTH_DAYS_NAMES = moment.monthsShort()
 
-const getDayYearPercentage = (days: number) => Math.round(days * 100 / DAYS_IN_YEAR)
+const getDayYearPercentage = (days: number) =>
+  Math.round((days * 100) / DAYS_IN_YEAR)
 
 export default (props: TimeViewProps) => {
   const containerHeight = props.ranges.length * ROW_HEIGHT
   const monthIndex = props.startDate.month()
   return (
-    <div
-      className='posr oh pt3'
-    >
+    <div className='posr oh pt3'>
       <div className={cx('posa', `${CLASSNAME_BASE}__months`)}>
         {MONTH_DAYS_NAMES.map((v, i) => (
           <div
             key={i}
             className={`posa ${CLASSNAME_BASE}__months__item`}
             style={{
               left: `${getDayYearPercentage(
-                moment(props.startDate).add(i, 'months').diff(props.startDate, 'days')
+                moment(props.startDate)
+                  .add(i, 'months')
+                  .diff(props.startDate, 'days')
               )}%`,
               height: `${containerHeight}px`,
             }}
-          >{MONTH_DAYS_NAMES[(monthIndex + i) % MONTH_DAYS_NAMES.length]}</div>
+          >
+            {MONTH_DAYS_NAMES[(monthIndex + i) % MONTH_DAYS_NAMES.length]}
+          </div>
         ))}
       </div>
       <div
@@ -43,30 +46,36 @@ export default (props: TimeViewProps) => {
         }}
       >
         {props.ranges.map((range, i) => {
-          const diffDaysFromStart = moment(range.start).diff(props.startDate, 'days')
-          const diffDaysToEnd = moment(range.end || undefined).diff(props.startDate, 'days')
+          const diffDaysFromStart = moment(range.start).diff(
+            props.startDate,
+            'days'
+          )
+          const diffDaysToEnd = moment(range.end || undefined).diff(
+            props.startDate,
+            'days'
+          )
           const left = Math.max(0, getDayYearPercentage(diffDaysFromStart))
           const width = getDayYearPercentage(diffDaysToEnd) - left
           return (
             <div
               key={i}
-              className={cx(
-                'posa',
-                CLASSNAME_BASE,
-                {
-                  [`${CLASSNAME_BASE}--on-hold`]: range.isOnHold,
-                  [`${CLASSNAME_BASE}--current`]: !range.end,
-                }
-              )}
-              title={`${range.name}${(range.start && range.end) ? ` (${range.start} - ${range.end})` : ''}`}
+              className={cx('posa', CLASSNAME_BASE, {
+                [`${CLASSNAME_BASE}--on-hold`]: range.isOnHold,
+                [`${CLASSNAME_BASE}--current`]: !range.end,
+              })}
+              title={`${range.name}${
+                range.start && range.end
+                  ? ` (${range.start} - ${range.end})`
+                  : ''
+              }`}
               style={{
                 top: `${i * ROW_HEIGHT}px`,
                 width: `${width}%`,
                 height: `${ROW_HEIGHT * 0.85}px`,
                 left: `${left}%`,
               }}
             >
-              <BookLink book={{id: range.bookId, title: range.name}} />
+              <BookLink book={{ id: range.bookId, title: range.name }} />
             </div>
           )
         })}

diff --git a/client/src/components/TimeViewer/index.js b/client/src/components/TimeViewer/index.js
@@ -54,10 +54,7 @@ const TimeViewer = () => {
   }))
 
   const [startDate, setStartDate] = useState(
-    moment()
-      .startOf(TIMESCALE)
-      .subtract(1, 'year')
-      .add(1, TIMESCALE)
+    moment().startOf(TIMESCALE).subtract(1, 'year').add(1, TIMESCALE)
   )
   const [modeIndex, setModeIndex] = useState(0)
 
@@ -83,9 +80,7 @@ const TimeViewer = () => {
         </button>
         <span className='ph4 time-viewer__dates'>
           {startDate.format("MMM 'YY")} -{' '}
-          {moment(endDate)
-            .subtract(1, 'month')
-            .format("MMM 'YY")}
+          {moment(endDate).subtract(1, 'month').format("MMM 'YY")}
           &nbsp;
           <span
             title={`${readInCurrentYear} books read in ${moment(

diff --git a/client/src/index.js b/client/src/index.js
@@ -14,7 +14,7 @@ import {
   AsyncMain,
   AsyncBook,
   AsyncAuth,
-  AsyncUserSettings
+  AsyncUserSettings,
 } from 'components/AsyncLoaded'
 
 import {
@@ -46,7 +46,4 @@ const App = () => (
   </Provider>
 )
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-)
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/client/src/store/reducers/booksReducer.js b/client/src/store/reducers/booksReducer.js
@@ -8,13 +8,18 @@ const initialState = {
   books: [],
 }
 
-export default (state: BooksState = initialState, action: Action): BooksState => {
-  const {payload} = action
+export default (
+  state: BooksState = initialState,
+  action: Action
+): BooksState => {
+  const { payload } = action
   switch (action.type) {
     case 'SET_BOOKS':
-      return merge(state, {...payload})
+      return merge(state, { ...payload })
     case 'ADD_BOOK':
-      return merge(state, {books: uniqBy(prop('id'), [...state.books, action.payload.book])})
+      return merge(state, {
+        books: uniqBy(prop('id'), [...state.books, action.payload.book]),
+      })
     case 'FLUSH_STORE':
       return initialState
     default:

diff --git a/client/src/store/reducers/uiReducer.js b/client/src/store/reducers/uiReducer.js
@@ -13,16 +13,16 @@ const initialState = {
 }
 
 export default (state: UiState = initialState, action: Action): UiState => {
-  const {payload} = action
+  const { payload } = action
   switch (action.type) {
     case 'SET_FLASH_MESSAGE':
-      return merge(state, {message: payload})
+      return merge(state, { message: payload })
     case 'SET_LOADER_STATE':
-      return merge(state, {displayLoader: payload})
+      return merge(state, { displayLoader: payload })
     case 'SET_FILTER_INPUT':
-      return merge(state, {filterInput: payload})
+      return merge(state, { filterInput: payload })
     case 'SET_FILTER_TYPE':
-      return merge(state, {filterType: payload})
+      return merge(state, { filterType: payload })
     default:
       return state
   }

diff --git a/client/src/store/reducers/userReducer.js b/client/src/store/reducers/userReducer.js
@@ -9,7 +9,7 @@ type State = User | {}
 const initialState = {}
 
 export default (state: State = initialState, action: Action): State => {
-  const {payload} = action
+  const { payload } = action
   switch (action.type) {
     case 'SET_USER_DATA':
       return merge(state, payload)

diff --git a/client/src/store/selectors/index.js b/client/src/store/selectors/index.js
@@ -17,6 +17,5 @@ export const filteredBooksSelector = (state: Store) => {
   }
 }
 
-export const bookById = (state: Store) => (bookId: string) => (
+export const bookById = (state: Store) => (bookId: string) =>
   find(book => book.id === Number(bookId), state.books.books)
-)
diff --git a/client/src/utils/aux.js b/client/src/utils/aux.js
@@ -45,10 +45,7 @@ export const getColorFromStringFunc = (str: string, bias?: string): string => {
 export const getColorFromString = memoize(getColorFromStringFunc)
 
 export const dimColor = (colorCode: string) =>
-  color(colorCode)
-    .desaturate(0.85)
-    .alpha(0.5)
-    .string()
+  color(colorCode).desaturate(0.85).alpha(0.5).string()
 
 export const getHeadersAndCols = (filterType: string) => {
   const omissions = FILTERS_TABLE_OMISSIONS[filterType] || []