App.render - Code Metrics - Inspection of "Bump dns-packet from 1.3.1 to 1.3.4" - expert-m/redux-class-decorators - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — master (#28)

unknown

created 2021-05-27 08:03 UTC

App.render B

↳ Parent: App

Complexity

Conditions

Size

Total Lines	56
Code Lines	50

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	50
dl	0
loc	56
c	0
b	0
f	0
rs	8.6363
cc	2

How to fix Long Method

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import PropTypes from 'prop-types'
import { Something, UserDetail, UserList } from './actions'


class App extends Component {
  componentDidMount() {
    this.props.getUserList()

    this.props.getUserDetail(1)

    this.props.getSomething(2)
    this.props.getSomething(5)
  }

  render() {
    const {
      userList,
      userDetail,
      something,
    } = this.props

    return (
      <div className="App">
        <div className="block">
          <h1>UserList</h1>

          {userList.loading && <div>Loading...</div>}
          {!!userList.value && userList.value.map((user, i) => (
            <div key={user.id}>
              {i + 1}. {user.first_name} {user.last_name}
            </div>
          ))}
        </div>

        <div className="block">

          <h1 className="App-title">UserDetail</h1>
          {userDetail.loading && <div>Loading...</div>}
          {!!userDetail.value && (
            <div>
              ID: {userDetail.value.id}<br />
              First name: {userDetail.value.first_name}<br />
              Last name: {userDetail.value.last_name}
            </div>
          )}
        </div>


        <div className="block">
          <h1 className="App-title">Something</h1>
          {something ? (
            <div>
              {something[2] && something[2].loading && <div>Loading...</div>}
              {something[2] && something[2].value &&
              <div>{something[2].value.name}</div>}
              {something[5] && something[5].loading && <div>Loading...</div>}
              {something[5] && something[5].value &&
              <div>{something[5].value.name}</div>}
            </div>
          ) : ''}
        </div>

        <a
          href="https://github.com/expert-m/redux-class-decorators/tree/master/examples/simple"
          target="_blank"
          rel="noopener noreferrer"
          className="link"
        >GitHub</a>
      </div>
    )
  }
}

App.propTypes = {
  userList: PropTypes.object,
  userDetail: PropTypes.object,
  something: PropTypes.object,
  getUserList: PropTypes.func,
  getUserDetail: PropTypes.func,
  getSomething: PropTypes.func,
}

const mapStateToProps = (state) => ({
  userList: state.users.list,
  userDetail: state.users.detail,
  something: state.something,
})

const mapDispatchToProps = (dispatch) => ({
  getUserList: bindActionCreators(UserList.get, dispatch),
  getUserDetail: bindActionCreators(UserDetail.get, dispatch),
  getSomething: bindActionCreators(Something.get, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(App)


1			import React, { Component } from 'react'
2			import { connect } from 'react-redux'
3			import { bindActionCreators } from 'redux'
4			import PropTypes from 'prop-types'
5			import { Something, UserDetail, UserList } from './actions'
6
7
8			class App extends Component {
9			componentDidMount() {
10			this.props.getUserList()
11
12			this.props.getUserDetail(1)
13
14			this.props.getSomething(2)
15			this.props.getSomething(5)
16			}
17
18			render() {
19			const {
20			userList,
21			userDetail,
22			something,
23			} = this.props
24
25			return (
26			<div className="App">
27			<div className="block">
28			<h1>UserList</h1>
29
30			{userList.loading && <div>Loading...</div>}
31			{!!userList.value && userList.value.map((user, i) => (
32			<div key={user.id}>
33			{i + 1}. {user.first_name} {user.last_name}
34			</div>
35			))}
36			</div>
37
38			<div className="block">
39
40			<h1 className="App-title">UserDetail</h1>
41			{userDetail.loading && <div>Loading...</div>}
42			{!!userDetail.value && (
43			<div>
44			ID: {userDetail.value.id}<br />
45			First name: {userDetail.value.first_name}<br />
46			Last name: {userDetail.value.last_name}
47			</div>
48			)}
49			</div>
50
51
52			<div className="block">
53			<h1 className="App-title">Something</h1>
54			{something ? (
55			<div>
56			{something[2] && something[2].loading && <div>Loading...</div>}
57			{something[2] && something[2].value &&
58			<div>{something[2].value.name}</div>}
59			{something[5] && something[5].loading && <div>Loading...</div>}
60			{something[5] && something[5].value &&
61			<div>{something[5].value.name}</div>}
62			</div>
63			) : ''}
64			</div>
65
66			<a
67			href="https://github.com/expert-m/redux-class-decorators/tree/master/examples/simple"
68			target="_blank"
69			rel="noopener noreferrer"
70			className="link"
71			>GitHub</a>
72			</div>
73			)
74			}
75			}
76
77			App.propTypes = {
78			userList: PropTypes.object,
79			userDetail: PropTypes.object,
80			something: PropTypes.object,
81			getUserList: PropTypes.func,
82			getUserDetail: PropTypes.func,
83			getSomething: PropTypes.func,
84			}
85
86			const mapStateToProps = (state) => ({
87			userList: state.users.list,
88			userDetail: state.users.detail,
89			something: state.something,
90			})
91
92			const mapDispatchToProps = (dispatch) => ({
93			getUserList: bindActionCreators(UserList.get, dispatch),
94			getUserDetail: bindActionCreators(UserDetail.get, dispatch),
95			getSomething: bindActionCreators(Something.get, dispatch),
96			})
97
98			export default connect(mapStateToProps, mapDispatchToProps)(App)
99

expert-m / redux-class-decorators

Pull Request — master (#28)

App.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like