Skip to content

Commit c9929f3

Browse files
Sahil811Sahil811
committed
convert component from class based to function based
1 parent ce810e2 commit c9929f3

11 files changed

Lines changed: 196 additions & 257 deletions

File tree

‎package-lock.json‎

Lines changed: 20 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
"moment": "^2.22.2",
2727
"moment-duration-format": "^2.2.2",
2828
"prop-types": "^15.6.2",
29-
"react": "^15.6.1",
29+
"react": "^16.13.1",
3030
"react-csv-reader": "^1.2.2",
31-
"react-dom": "^15.6.1",
31+
"react-dom": "^16.13.1",
3232
"react-favicon": "0.0.13",
3333
"react-fontawesome": "^1.6.1",
3434
"react-modal": "^3.6.1",

‎src/client/app/components/AccountHeader/index.js‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* the account index component
33
*
44
*/
5-
import React, { Component } from 'react';
5+
import React from 'react';
66

77
import { browserHistory } from 'react-router';
88
// import Favicon from 'react-favicon';
@@ -11,28 +11,20 @@ import { browserHistory } from 'react-router';
1111
import './index.scss';
1212
// import favicon from '../../assets/images/favicon.png';
1313

14-
export default class AccountHeader extends Component {
1514

16-
constructor(props) {
17-
super(props);
18-
19-
this.handleLogout = this.handleLogout.bind(this);
20-
}
21-
22-
handleLogout(e) {
15+
export default (props) => {
16+
const handleLogout = (e) => {
2317
e.preventDefault();
24-
const { type } = this.props;
18+
const { type } = props;
2519
localStorage.removeItem('adminAccessToken');
2620
window.location = '/';
2721

2822
}
29-
render() {
30-
return <section className='account-header'>
31-
{/* <Favicon url={favicon}/> */}
32-
{/* <img src={Logo} height={30}/> */}
33-
<h2 className='logo-text-account'>Social</h2>
34-
<p className='text-center' style={{ position: 'absolute', width: '100%', top: '0', marginTop: '10px'}}>Admin</p>
35-
<span><a href onClick={this.handleLogout}>Logout</a></span>
36-
</section>;
37-
}
23+
return <section className='account-header'>
24+
{/* <Favicon url={favicon}/> */}
25+
{/* <img src={Logo} height={30}/> */}
26+
<h2 className='logo-text-account'>Social</h2>
27+
<p className='text-center' style={{ position: 'absolute', width: '100%', top: '0', marginTop: '10px' }}>Admin</p>
28+
<span><a href onClick={handleLogout}>Logout</a></span>
29+
</section>;
3830
}

‎src/client/app/components/Image/index.js‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
/**
22
* This component represents a sample image component for application
33
*/
4-
import React, { Component } from 'react';
4+
import React, { useEffect, useState } from 'react';
55
import PropTypes from 'prop-types';
66

77
import DefaultImage from '../../assets/images/profile.png';
88
import './index.scss';
99

10-
class CustomImage extends Component {
11-
constructor(props) {
12-
super(props);
13-
this.state = {
14-
image: this.props.image || DefaultImage
15-
};
16-
}
1710

18-
render() {
19-
const classNames = `litnite-image ${this.props.className && this.props.className}`;
20-
const { width=50, height=50 } = this.props;
21-
const { image } = this.state;
22-
return <img className={classNames} src={image} width={width} height={50} onError={() => this.setState({ image: DefaultImage })}/>
23-
}
11+
const CustomImage = (props) => {
12+
const [image, setImage] = useState("")
13+
useEffect(() => {
14+
setImage(props.image || DefaultImage)
15+
}, [props.image])
16+
17+
const classNames = `litnite-image ${props.className && props.className}`;
18+
const { width = 50, height = 50 } = props;
19+
20+
return <img className={classNames} src={image} width={width} height={50} onError={() => setState({ image: DefaultImage })} />
2421
}
2522

2623
CustomImage.propTypes = {

‎src/client/app/components/ImageThumbnail/index.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
/**
22
* this component represents the thumbnail image
33
*/
4-
import React, { Component } from 'react';
4+
import React from 'react';
55

66
//import assets
77
import EmptyThumbnail from '../../assets/images/profile.png';
88
import './index.scss';
99

10-
export default class ImageThumbnail extends Component {
11-
constructor(props) {
12-
super(props);
13-
}
14-
15-
render() {
16-
const { image=EmptyThumbnail, width=200, height=200, className } = this.props;
17-
const classes = `thumbnail-image ${className ? className : ''}`;
18-
return <img src={image} width={width} height={height} className={classes}/>
19-
}
10+
export default (props) => {
11+
const { image = EmptyThumbnail, width = 200, height = 200, className } = this.props;
12+
const classes = `thumbnail-image ${className ? className : ''}`;
13+
return <img src={image} width={width} height={height} className={classes} />
2014
}

‎src/client/app/components/NotFoundPage/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import { Container, Row, Col } from 'reactstrap';
33
import { Link } from 'react-router';
44

55
import './index.scss';
66

7-
export default () =>
7+
export default () =>
88
<Container className='container' id='notfoundcontainer'>
99
<Row>
1010
<Col className="">

‎src/client/app/index.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,11 @@ import 'bootstrap/dist/css/bootstrap.css';
77
import 'jquery/dist/jquery.js';
88
import 'bootstrap/dist/js/bootstrap.js';
99
import './styles/index.scss';
10-
class App extends React.Component {
11-
constructor (props) {
12-
super (props);
13-
}
1410

15-
render () {
16-
return getRoutes();
17-
}
11+
12+
const App = () => {
13+
return getRoutes()
1814
}
1915

20-
render (<App/>, document.getElementById ('app'));
16+
17+
render(<App />, document.getElementById('app'));

‎src/client/app/routes/Account/index.js‎

Lines changed: 39 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React, { useEffect } from 'react';
22
import { connect } from 'react-redux';
33
import FontAwesome from 'react-fontawesome';
44
import { browserHistory } from 'react-router';
@@ -11,74 +11,63 @@ import Image from '../../components/Image';
1111
import logo from '../../assets/images/logo.png';
1212
import './index.scss';
1313

14-
class Account extends Component {
15-
constructor(props) {
16-
super(props);
1714

18-
this.handleSwitch = this.handleSwitch.bind(this);
19-
this.handleLogout = this.handleLogout.bind(this);
20-
}
15+
const Account = (props) => {
2116

22-
handleSwitch(e) {
23-
const { triggerSwitchNavigation } = this.props;
24-
e.preventDefault();
25-
const name = e.target.name || e.target.id;
26-
browserHistory.push(`/${name}`);
27-
triggerSwitchNavigation(navigationIndexer[name]);
28-
}
29-
30-
componentWillMount() {
17+
useEffect(() => {
3118
// if (!localStorage.getItem('accessToken')) {
3219
// window.location = '/';
3320
// }
34-
}
35-
36-
componentDidMount() {
3721
document.title = 'Admin Account';
22+
}, [])
23+
24+
const handleSwitch = (e) => {
25+
const { triggerSwitchNavigation } = props;
26+
e.preventDefault();
27+
const name = e.target.name || e.target.id;
28+
browserHistory.push(`/${name}`);
29+
triggerSwitchNavigation(navigationIndexer[name]);
3830
}
3931

40-
handleLogout(e) {
32+
const handleLogout = (e) => {
4133
e.preventDefault();
42-
const { type } = this.props;
34+
const { type } = props;
4335
localStorage.removeItem('data');
4436
localStorage.removeItem('accessToken');
4537
window.location = '/';
4638

4739
}
48-
49-
render() {
50-
const { active } = this.props;
51-
return <section>
52-
<section className='leftNavigation'>
53-
<section className="navigationMenu">
54-
<p className='text-center'><Image image={logo} /></p>
55-
{/* <p className="navigationHeader">LOGGED USER</p>
40+
const { active } = props;
41+
return <section>
42+
<section className='leftNavigation'>
43+
<section className="navigationMenu">
44+
<p className='text-center'><Image image={logo} /></p>
45+
{/* <p className="navigationHeader">LOGGED USER</p>
5646
<i style={{ color: 'silver' }}>{localStorage.getItem('user')}</i> */}
57-
</section>
58-
<section className="navigationMenu">
59-
<p className="navigationHeader">Dashboard</p>
60-
<button name='dashboard' className={`navigationItem ${active === navigationIndexer.dashboard ? 'activeItem' : ''}`} onClick={this.handleSwitch}>
61-
<FontAwesome id='events' name="events" onClick={this.handleSwitch} />&nbsp; Dashboard
62-
</button>
63-
</section>
64-
<section className="navigationMenu">
65-
<p className="navigationHeader">Contact Us</p>
66-
<button name='contactUs' className={`navigationItem ${active === navigationIndexer.contactUs ? 'activeItem' : ''}`} onClick={this.handleSwitch}>
67-
<FontAwesome id='tournament' name="tournament" onClick={this.handleSwitch} />&nbsp; Contact Us
47+
</section>
48+
<section className="navigationMenu">
49+
<p className="navigationHeader">Dashboard</p>
50+
<button name='dashboard' className={`navigationItem ${active === navigationIndexer.dashboard ? 'activeItem' : ''}`} onClick={handleSwitch}>
51+
<FontAwesome id='events' name="events" onClick={handleSwitch} />&nbsp; Dashboard
6852
</button>
69-
</section>
70-
<section className="navigationMenu">
71-
<p className="navigationHeader">Account</p>
72-
<button name='logout' className={`navigationItem ${active === navigationIndexer.constants ? 'activeItem' : ''}`} onClick={this.handleLogout}>
73-
<FontAwesome id='logout' name="sign-out" onClick={this.handleSwitch} />&nbsp; Logout
53+
</section>
54+
<section className="navigationMenu">
55+
<p className="navigationHeader">Contact Us</p>
56+
<button name='contactUs' className={`navigationItem ${active === navigationIndexer.contactUs ? 'activeItem' : ''}`} onClick={handleSwitch}>
57+
<FontAwesome id='tournament' name="tournament" onClick={handleSwitch} />&nbsp; Contact Us
7458
</button>
75-
</section>
7659
</section>
77-
<section className='dynamicContainer'>
78-
{this.props.children || <Dashboard />}
60+
<section className="navigationMenu">
61+
<p className="navigationHeader">Account</p>
62+
<button name='logout' className={`navigationItem ${active === navigationIndexer.constants ? 'activeItem' : ''}`} onClick={handleLogout}>
63+
<FontAwesome id='logout' name="sign-out" onClick={handleSwitch} />&nbsp; Logout
64+
</button>
7965
</section>
80-
</section>;
81-
}
66+
</section>
67+
<section className='dynamicContainer'>
68+
{props.children || <Dashboard />}
69+
</section>
70+
</section>;
8271
}
8372

8473
const mapDispatchToProps = dispatch => {

0 commit comments

Comments
 (0)