style(lint): fix lint issues

sohomang · Mar 9, 2019 · 6261879 · 6261879
1 parent 31a2be0
commit 6261879
Show file tree

Hide file tree

Showing 432 changed files with 3,287 additions and 3,261 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -34,7 +34,7 @@ module.exports = {
     'compat/compat': 'error',
     'comma-dangle': ['error', 'always-multiline'],
     // 'prettier/prettier': 0,
-    'react/boolean-prop-naming': 'error',
+    'react/boolean-prop-naming': ['error', { rule: '^(is|has|will|(.*)On)[A-Z]([A-Za-z0-9]?)+' }],
     'react/forbid-prop-types': 0,
     'react-hooks/rules-of-hooks': 'error',
     'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],

diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js
@@ -18,7 +18,7 @@ const StyledList = styled(List)`
 class Activity extends Component {
   cache = new CellMeasurerCache({
     fixedWidth: true,
-    minHeight: 52
+    minHeight: 52,
   })
 
   componentDidUpdate() {
@@ -49,12 +49,12 @@ class Activity extends Component {
     const renderRow = ({ index, key, style, parent }) => {
       const item = currentActivity[index]
       return (
-        <CellMeasurer key={key} cache={this.cache} parent={parent} columnIndex={0} rowIndex={index}>
+        <CellMeasurer key={key} cache={this.cache} columnIndex={0} parent={parent} rowIndex={index}>
           <div style={style}>
             {item.title ? (
-              <Box pl={4} mt={4}>
+              <Box mt={4} pl={4}>
                 <Heading.h4 fontWeight="normal">
-                  <FormattedDate day="2-digit" month="short" year="numeric" value={item.title} />
+                  <FormattedDate day="2-digit" month="short" value={item.title} year="numeric" />
                 </Heading.h4>
                 <Bar my={1} />
               </Box>
@@ -65,7 +65,7 @@ class Activity extends Component {
                   currencyName,
                   currentTicker,
                   showActivityModal,
-                  ticker
+                  ticker,
                 }}
               />
             )}
@@ -78,14 +78,14 @@ class Activity extends Component {
         {({ width, height }) => {
           return (
             <StyledList
-              pr={4}
               ref={ref => (this._list = ref)}
-              width={width}
+              deferredMeasurementCache={this.cache}
               height={height}
+              pr={4}
+              rowCount={currentActivity.length}
               rowHeight={this.cache.rowHeight}
               rowRenderer={renderRow}
-              rowCount={currentActivity.length}
-              deferredMeasurementCache={this.cache}
+              width={width}
             />
           )
         }}
@@ -113,13 +113,13 @@ class Activity extends Component {
 }
 
 Activity.propTypes = {
-  intl: intlShape.isRequired,
   activity: PropTypes.object.isRequired,
-  currentActivity: PropTypes.array.isRequired,
   currencyName: PropTypes.string,
+  currentActivity: PropTypes.array.isRequired,
   currentTicker: PropTypes.object,
+  intl: intlShape.isRequired,
+  showActivityModal: PropTypes.func.isRequired,
   ticker: PropTypes.object.isRequired,
-  showActivityModal: PropTypes.func.isRequired
 }
 
 export default injectIntl(Activity)
diff --git a/app/components/Activity/ActivityActions/ActivityActions.js b/app/components/Activity/ActivityActions/ActivityActions.js
@@ -18,36 +18,36 @@ const ActivityActions = ({
   intl,
   ...rest
 }) => (
-  <Flex as="nav" alignItems="center" {...rest}>
+  <Flex alignItems="center" as="nav" {...rest}>
     <ActivitySearch
-      width={13 / 16}
       placeholder={intl.formatMessage({ ...messages.search_placeholder })}
       searchQuery={searchQuery}
       updateActivitySearchQuery={updateActivitySearchQuery}
+      width={13 / 16}
     />
 
     <ActivityFilter
-      width={2.5 / 16}
+      changeFilter={changeFilter}
       filter={filter}
       filters={filters}
-      changeFilter={changeFilter}
       mr={1}
+      width={2.5 / 16}
     />
 
-    <Flex as="section" alignItems="center" ml={3}>
+    <Flex alignItems="center" as="section" ml={3}>
       <ActivityRefresh onClick={fetchActivityHistory} />
     </Flex>
   </Flex>
 )
 
 ActivityActions.propTypes = {
+  changeFilter: PropTypes.func.isRequired,
+  fetchActivityHistory: PropTypes.func.isRequired,
   filter: PropTypes.string.isRequired,
   filters: PropTypes.array.isRequired,
   intl: intlShape.isRequired,
   searchQuery: PropTypes.string,
-  changeFilter: PropTypes.func.isRequired,
-  fetchActivityHistory: PropTypes.func.isRequired,
-  updateActivitySearchQuery: PropTypes.func.isRequired
+  updateActivitySearchQuery: PropTypes.func.isRequired,
 }
 
 export default injectIntl(ActivityActions)
diff --git a/app/components/Activity/ActivityActions/ActivityFilter.js b/app/components/Activity/ActivityActions/ActivityFilter.js
@@ -7,19 +7,19 @@ const ActivityFilter = ({ changeFilter, filter, filters, ...rest }) => {
   const items = filters.map(f => {
     return {
       key: f.key,
-      value: f.name
+      value: f.name,
     }
   })
 
   return (
     <Form {...rest}>
       <Select
         field="activity-filter"
+        highlightOnValid={false}
         id="activity-filter"
-        items={items}
         initialSelectedItem={filter}
+        items={items}
         onValueSelected={changeFilter}
-        highlightOnValid={false}
       />
     </Form>
   )
@@ -28,11 +28,11 @@ const ActivityFilter = ({ changeFilter, filter, filters, ...rest }) => {
 ActivityFilter.propTypes = {
   changeFilter: PropTypes.func.isRequired,
   filter: PropTypes.string,
-  filters: PropTypes.array
+  filters: PropTypes.array,
 }
 
 ActivityFilter.defaultProps = {
-  filters: []
+  filters: [],
 }
 
 export default ActivityFilter
diff --git a/app/components/Activity/ActivityActions/ActivityRefresh.js b/app/components/Activity/ActivityActions/ActivityRefresh.js
@@ -14,7 +14,7 @@ const StyledButton = styled(Button)`
   }
 `
 StyledButton.propTypes = {
-  active: PropTypes.bool
+  active: PropTypes.bool,
 }
 
 const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => {
@@ -41,13 +41,13 @@ const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => {
 
   return (
     <StyledButton
-      variant="secondary"
-      size="small"
-      active={status === 'fetching'}
-      onClick={handleClick}
       ref={buttonRef}
+      active={status === 'fetching'}
       className="hint--bottom-left"
       data-hint={intl.formatMessage({ ...messages.refresh_button_hint })}
+      onClick={handleClick}
+      size="small"
+      variant="secondary"
       {...rest}
     >
       {status === 'fetching' ? <Spinner /> : <Sync height="16px" width="16px" />}
@@ -56,7 +56,7 @@ const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => {
 })
 
 ActivityRefresh.propTypes = {
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 export default ActivityRefresh
diff --git a/app/components/Activity/ActivityActions/ActivitySearch.js b/app/components/Activity/ActivityActions/ActivitySearch.js
@@ -11,22 +11,22 @@ const ActivitySearch = ({ searchQuery, placeholder, updateActivitySearchQuery, .
     <Form {...rest}>
       <Input
         field="activity-search"
+        highlightOnValid={false}
         id="activity-search"
-        type="search"
-        placeholder={placeholder}
         initialValue={searchQuery}
-        onValueChange={setValue}
-        highlightOnValid={false}
         mr={2}
+        onValueChange={setValue}
+        placeholder={placeholder}
+        type="search"
       />
     </Form>
   )
 }
 
 ActivitySearch.propTypes = {
-  searchQuery: PropTypes.string,
   placeholder: PropTypes.string.isRequired,
-  updateActivitySearchQuery: PropTypes.func.isRequired
+  searchQuery: PropTypes.string,
+  updateActivitySearchQuery: PropTypes.func.isRequired,
 }
 
 export default ActivitySearch
diff --git a/app/components/Activity/ActivityActions/messages.js b/app/components/Activity/ActivityActions/messages.js
@@ -3,5 +3,5 @@ import { defineMessages } from 'react-intl'
 /* eslint-disable max-len */
 export default defineMessages({
   search_placeholder: 'Search Activity',
-  refresh_button_hint: 'Refresh activity list'
+  refresh_button_hint: 'Refresh activity list',
 })
diff --git a/app/components/Activity/ActivityListItem.js b/app/components/Activity/ActivityListItem.js
@@ -11,7 +11,7 @@ import Clock from 'components/Icon/Clock'
 import Zap from 'components/Icon/Zap'
 import { Text } from 'components/UI'
 
-const ZapIcon = () => <Zap width="1.6em" height="1.6em" />
+const ZapIcon = () => <Zap height="1.6em" width="1.6em" />
 
 const ActivityIcon = ({ activity }) => {
   switch (activity.type) {
@@ -27,26 +27,26 @@ const ActivityIcon = ({ activity }) => {
 }
 
 ActivityIcon.propTypes = {
-  activity: PropTypes.object.isRequired
+  activity: PropTypes.object.isRequired,
 }
 
 export default class ActivityListItem extends PureComponent {
   static propTypes = {
+    activity: PropTypes.object.isRequired,
+    currencyName: PropTypes.string,
     currentTicker: PropTypes.object,
     showActivityModal: PropTypes.func.isRequired,
-    currencyName: PropTypes.string,
     ticker: PropTypes.object.isRequired,
-    activity: PropTypes.object.isRequired
   }
 
   render() {
     const { activity, currencyName, currentTicker, ticker, showActivityModal, ...rest } = this.props
     return (
-      <Flex justifyContent="space-between" alignItems="center" {...rest}>
-        <Text width={24} color="gray" textAlign="center" mr={10}>
+      <Flex alignItems="center" justifyContent="space-between" {...rest}>
+        <Text color="gray" mr={10} textAlign="center" width={24}>
           <ActivityIcon activity={activity} />
         </Text>
-        <Box width={1} css={!activity.sending ? { cursor: 'pointer' } : null}>
+        <Box css={activity.sending ? null : { cursor: 'pointer' }} width={1}>
           {activity.type === 'transaction' && <Transaction transaction={activity} />}
           {activity.type === 'invoice' && <Invoice invoice={activity} />}
           {activity.type === 'payment' && <Payment payment={activity} />}

diff --git a/app/components/Activity/ActivityModal/ActivityModal.js b/app/components/Activity/ActivityModal/ActivityModal.js
@@ -10,9 +10,9 @@ export default class ActivityModal extends React.PureComponent {
     item: PropTypes.object,
     networkInfo: PropTypes.shape({
       id: PropTypes.string,
-      name: PropTypes.string
+      name: PropTypes.string,
     }),
-    showNotification: PropTypes.func.isRequired
+    showNotification: PropTypes.func.isRequired,
   }
 
   render() {
@@ -25,16 +25,16 @@ export default class ActivityModal extends React.PureComponent {
     const MODAL_COMPONENTS = {
       transaction: {
         component: TransactionModal,
-        props: { item, networkInfo }
+        props: { item, networkInfo },
       },
       payment: {
         component: PaymentModal,
-        props: { item }
+        props: { item },
       },
       invoice: {
         component: InvoiceModal,
-        props: { item, showNotification }
-      }
+        props: { item, showNotification },
+      },
     }
 
     const SpecificModal = MODAL_COMPONENTS[item.type].component

diff --git a/app/components/Activity/Invoice/Invoice.js b/app/components/Activity/Invoice/Invoice.js
@@ -8,15 +8,15 @@ import messages from './messages'
 
 const Invoice = ({ invoice, showActivityModal, currencyName, intl }) => (
   <Flex
-    justifyContent="space-between"
     alignItems="center"
+    justifyContent="space-between"
     onClick={() => showActivityModal('INVOICE', invoice.payment_request)}
     py={2}
   >
     <Box
-      width={3 / 4}
       className="hint--top-right"
       data-hint={intl.formatMessage({ ...messages[invoice.settled ? 'type_paid' : 'type_unpaid'] })}
+      width={3 / 4}
     >
       <Text mb={1}>
         <FormattedMessage {...messages[invoice.settled ? 'received' : 'requested']} />
@@ -29,27 +29,27 @@ const Invoice = ({ invoice, showActivityModal, currencyName, intl }) => (
     </Box>
 
     <Box
-      width={1 / 4}
       className="hint--top-left"
       data-hint={intl.formatMessage({ ...messages.amount })}
+      width={1 / 4}
     >
-      <Text mb={1} textAlign="right" color="superGreen">
+      <Text color="superGreen" mb={1} textAlign="right">
         {'+ '}
         <CryptoValue value={invoice.value} />
         <i> {currencyName}</i>
       </Text>
-      <Text textAlign="right" color="gray" fontSize="xs" fontWeight="normal">
-        <FiatValue value={invoice.value} style="currency" />
+      <Text color="gray" fontSize="xs" fontWeight="normal" textAlign="right">
+        <FiatValue style="currency" value={invoice.value} />
       </Text>
     </Box>
   </Flex>
 )
 
 Invoice.propTypes = {
+  currencyName: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
   invoice: PropTypes.object.isRequired,
   showActivityModal: PropTypes.func.isRequired,
-  currencyName: PropTypes.string.isRequired
 }
 
 export default injectIntl(Invoice)
diff --git a/app/components/Activity/Invoice/messages.js b/app/components/Activity/Invoice/messages.js
@@ -6,5 +6,5 @@ export default defineMessages({
   requested: 'Requested payment',
   type_paid: 'Lightning invoice (paid)',
   type_unpaid: 'Lightning invoice (unpaid)',
-  amount: 'Invoice amount'
+  amount: 'Invoice amount',
 })
diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.js b/app/components/Activity/InvoiceModal/InvoiceModal.js
@@ -11,7 +11,7 @@ export default class InvoiceModal extends React.PureComponent {
     /** Invoice */
     item: PropTypes.object.isRequired,
     /** Show a notification. */
-    showNotification: PropTypes.func.isRequired
+    showNotification: PropTypes.func.isRequired,
   }
 
   render() {
@@ -21,13 +21,13 @@ export default class InvoiceModal extends React.PureComponent {
       <Panel {...rest}>
         <Panel.Header>
           <Header
+            logo={<Lightning height="45px" width="45px" />}
+            subtitle={<FormattedMessage {...messages.subtitle} />}
             title={
               <FormattedMessage
                 {...messages[item.settled ? 'title_received' : 'title_requested']}
               />
             }
-            subtitle={<FormattedMessage {...messages.subtitle} />}
-            logo={<Lightning height="45px" width="45px" />}
           />
           <Bar mt={2} />
         </Panel.Header>

diff --git a/app/components/Activity/InvoiceModal/messages.js b/app/components/Activity/InvoiceModal/messages.js
@@ -12,5 +12,5 @@ export default defineMessages({
   status: 'Status',
   not_paid: 'Not Paid',
   paid: 'Paid',
-  current_value: 'Current value'
+  current_value: 'Current value',
 })