From Class based to function based-v1

package.json

@@ -26,9 +26,9 @@
     "moment": "^2.22.2",
     "moment-duration-format": "^2.2.2",
     "prop-types": "^15.6.2",
-    "react": "^15.6.1",
+    "react": "^16.13.1",
     "react-csv-reader": "^1.2.2",
-    "react-dom": "^15.6.1",
+    "react-dom": "^16.13.1",
     "react-favicon": "0.0.13",
     "react-fontawesome": "^1.6.1",
     "react-modal": "^3.6.1",

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

@@ -2,7 +2,7 @@
  * the account index component
  *
  */
-import React, { Component } from 'react';
+import React from 'react';
 
 import { browserHistory } from 'react-router';
 // import Favicon from 'react-favicon';
@@ -11,28 +11,20 @@ import { browserHistory } from 'react-router';
 import './index.scss';
 // import favicon from '../../assets/images/favicon.png';
 
-export default class AccountHeader extends Component {
 
-	constructor(props) {
-		super(props);
-
-		this.handleLogout = this.handleLogout.bind(this);
-	}
-
-	handleLogout(e) {
+export default (props) => {
+	const handleLogout = (e) => {
 		e.preventDefault();
-		const { type } = this.props;
+		const { type } = props;
 		localStorage.removeItem('adminAccessToken');
 		window.location = '/';
 
 	}
-	render() {
-		return <section className='account-header'>
-			{/* <Favicon url={favicon}/> */}
-			{/* <img src={Logo} height={30}/>  */}
-			<h2 className='logo-text-account'>Social</h2>
-			<p className='text-center' style={{ position: 'absolute', width: '100%', top: '0', marginTop: '10px'}}>Admin</p>
-			<span><a href onClick={this.handleLogout}>Logout</a></span>
-		</section>;
-	}
+	return <section className='account-header'>
+		{/* <Favicon url={favicon}/> */}
+		{/* <img src={Logo} height={30}/>  */}
+		<h2 className='logo-text-account'>Social</h2>
+		<p className='text-center' style={{ position: 'absolute', width: '100%', top: '0', marginTop: '10px' }}>Admin</p>
+		<span><a href onClick={handleLogout}>Logout</a></span>
+	</section>;
 }

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

@@ -1,26 +1,23 @@
 /**
  * This component represents a sample image component for application
  */
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import DefaultImage from '../../assets/images/profile.png';
 import './index.scss';
 
-class CustomImage extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			image: this.props.image || DefaultImage
-		};
-	}
 
-	render() {
-		const classNames = `litnite-image ${this.props.className && this.props.className}`;
-		const { width=50, height=50 } = this.props;
-		const { image } = this.state;
-		return <img className={classNames} src={image} width={width} height={50} onError={() => this.setState({ image: DefaultImage })}/>
-	}
+const CustomImage = (props) => {
+	const [image, setImage] = useState("")
+	useEffect(() => {
+		setImage(props.image || DefaultImage)
+	}, [props.image])
+
+	const classNames = `litnite-image ${props.className && props.className}`;
+	const { width = 50, height = 50 } = props;
+
+	return <img className={classNames} src={image} width={width} height={50} onError={() => setState({ image: DefaultImage })} />
 }
 
 CustomImage.propTypes = {

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

@@ -1,20 +1,14 @@
 /**
  * this component represents the thumbnail image
  */
-import React, { Component } from 'react';
+import React from 'react';
 
 //import assets
 import EmptyThumbnail from '../../assets/images/profile.png';
 import './index.scss';
 
-export default class ImageThumbnail extends Component {
-	constructor(props) {
-		super(props);
-	}
-
-	render() {
-		const { image=EmptyThumbnail, width=200, height=200, className } = this.props;
-		const classes = `thumbnail-image ${className ? className : ''}`;
-		return <img src={image} width={width} height={height} className={classes}/>
-	}
+export default (props) => {
+	const { image = EmptyThumbnail, width = 200, height = 200, className } = this.props;
+	const classes = `thumbnail-image ${className ? className : ''}`;
+	return <img src={image} width={width} height={height} className={classes} />
 }

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

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Container, Row, Col } from 'reactstrap';
 import { Link } from 'react-router';
 
 import './index.scss';
 
-export default () => 
+export default () =>
 	<Container className='container' id='notfoundcontainer'>
 		<Row>
 			<Col className="">

src/client/app/index.js

@@ -7,14 +7,11 @@ import 'bootstrap/dist/css/bootstrap.css';
 import 'jquery/dist/jquery.js';
 import 'bootstrap/dist/js/bootstrap.js';
 import './styles/index.scss';
-class App extends React.Component {
-	constructor (props) {
-		super (props);
-	}
 
-	render () {
-		return getRoutes();
-	}
+
+const App = () => {
+	return getRoutes()
 }
 
-render (<App/>, document.getElementById ('app'));
+
+render(<App />, document.getElementById('app'));

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import FontAwesome from 'react-fontawesome';
 import { browserHistory } from 'react-router';
@@ -11,74 +11,63 @@ import Image from '../../components/Image';
 import logo from '../../assets/images/logo.png';
 import './index.scss';
 
-class Account extends Component {
-	constructor(props) {
-		super(props);
 
-		this.handleSwitch = this.handleSwitch.bind(this);
-		this.handleLogout = this.handleLogout.bind(this);
-	}
+const Account = (props) => {
 
-	handleSwitch(e) {
-		const { triggerSwitchNavigation } = this.props;
-		e.preventDefault();
-		const name = e.target.name  || e.target.id;
-		browserHistory.push(`/${name}`);
-		triggerSwitchNavigation(navigationIndexer[name]);
-	}
-
-	componentWillMount() {
+	useEffect(() => {
 		// if (!localStorage.getItem('accessToken')) {
 		// 	window.location = '/';
 		// }
-	}
-
-	componentDidMount() {
 		document.title = 'Admin Account';
+	}, [])
+
+	const handleSwitch = (e) => {
+		const { triggerSwitchNavigation } = props;
+		e.preventDefault();
+		const name = e.target.name || e.target.id;
+		browserHistory.push(`/${name}`);
+		triggerSwitchNavigation(navigationIndexer[name]);
 	}
 
-	handleLogout(e) {
+	const handleLogout = (e) => {
 		e.preventDefault();
-		const { type } = this.props;
+		const { type } = props;
 		localStorage.removeItem('data');
 		localStorage.removeItem('accessToken');
 		window.location = '/';
 
 	}
-
-	render() {
-		const { active } = this.props;
-		return <section>
-			<section className='leftNavigation'>
-				<section className="navigationMenu">
-					<p className='text-center'><Image image={logo} /></p>
-					{/* <p className="navigationHeader">LOGGED USER</p>
+	const { active } = props;
+	return <section>
+		<section className='leftNavigation'>
+			<section className="navigationMenu">
+				<p className='text-center'><Image image={logo} /></p>
+				{/* <p className="navigationHeader">LOGGED USER</p>
 					<i style={{ color: 'silver' }}>{localStorage.getItem('user')}</i> */}
-				</section>
-				<section className="navigationMenu">
-					<p className="navigationHeader">Dashboard</p>
-					<button name='dashboard' className={`navigationItem ${active === navigationIndexer.dashboard ? 'activeItem' : ''}`} onClick={this.handleSwitch}>
-						<FontAwesome id='events' name="events" onClick={this.handleSwitch} />&nbsp; Dashboard
-					</button>
-				</section>
-				<section className="navigationMenu">
-					<p className="navigationHeader">Contact Us</p>
-					<button name='contactUs' className={`navigationItem ${active === navigationIndexer.contactUs ? 'activeItem' : ''}`} onClick={this.handleSwitch}>
-						<FontAwesome id='tournament' name="tournament" onClick={this.handleSwitch} />&nbsp; Contact Us
+			</section>
+			<section className="navigationMenu">
+				<p className="navigationHeader">Dashboard</p>
+				<button name='dashboard' className={`navigationItem ${active === navigationIndexer.dashboard ? 'activeItem' : ''}`} onClick={handleSwitch}>
+					<FontAwesome id='events' name="events" onClick={handleSwitch} />&nbsp; Dashboard
 					</button>
-				</section>
-				<section className="navigationMenu">
-					<p className="navigationHeader">Account</p>
-					<button name='logout' className={`navigationItem ${active === navigationIndexer.constants ? 'activeItem' : ''}`} onClick={this.handleLogout}>
-						<FontAwesome id='logout' name="sign-out" onClick={this.handleSwitch} />&nbsp; Logout
+			</section>
+			<section className="navigationMenu">
+				<p className="navigationHeader">Contact Us</p>
+				<button name='contactUs' className={`navigationItem ${active === navigationIndexer.contactUs ? 'activeItem' : ''}`} onClick={handleSwitch}>
+					<FontAwesome id='tournament' name="tournament" onClick={handleSwitch} />&nbsp; Contact Us
 					</button>
-				</section>
 			</section>
-			<section className='dynamicContainer'>
-				{this.props.children || <Dashboard />}
+			<section className="navigationMenu">
+				<p className="navigationHeader">Account</p>
+				<button name='logout' className={`navigationItem ${active === navigationIndexer.constants ? 'activeItem' : ''}`} onClick={handleLogout}>
+					<FontAwesome id='logout' name="sign-out" onClick={handleSwitch} />&nbsp; Logout
+					</button>
 			</section>
-		</section>;
-	}
+		</section>
+		<section className='dynamicContainer'>
+			{props.children || <Dashboard />}
+		</section>
+	</section>;
 }
 
 const mapDispatchToProps = dispatch => {

src/client/app/routes/ContactUs/index.js

@@ -1,7 +1,7 @@
 /**
  * feedbacks listing component page route
  */
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Table } from 'reactstrap';
 import { toast, ToastContainer } from 'react-toastify';
@@ -15,30 +15,18 @@ import {
 } from '../../redux/actions';
 import './index.scss';
 
-class ContactUs extends Component {
+const ContactUs = (props) => {
+    const [tournament, setTournament] = useState([])
 
-    constructor(props) {
-        super(props);
-
-        this.tournament = [];
-
-        this.prepareBulkCSVData = this.prepareBulkCSVData.bind(this);
-    }
-
-    componentDidUpdate() {
-        const { triggerSwitchNavigation } = this.props;
+    useEffect(() => {
+        const { triggerSwitchNavigation } = props;
         document.title = 'Contact Us';
         triggerSwitchNavigation(navigationIndexer.contactUs);
-    }
 
-    componentDidMount() {
-        const { triggerSwitchNavigation } = this.props;
-        document.title = 'Contact Us';
-        triggerSwitchNavigation(navigationIndexer.contactUs);
-    }
+    }, [])
 
-    prepareBulkCSVData(data) {
-        const { props: { triggerGenericCreateEntity } } = this;
+    const prepareBulkCSVData = (data) => {
+        const { triggerGenericCreateEntity } = props;
         console.log(data);
         const refactoredRequestData = [];
         const mappings = {
@@ -67,37 +55,35 @@ class ContactUs extends Component {
                 refactoredRequestData.push(instance);
             }
         });
-     console.log(refactoredRequestData);
+        console.log(refactoredRequestData);
         triggerGenericCreateEntity(refactoredRequestData);
     }
+    const {
+        fetching,
+        contactus: {
+            success,
+            error,
+        },
+        triggerNullifyError,
+        triggerNullifySuccess,
+    } = props;
 
-    render() {
-        const {
-            fetching,
-            contactus: {
-                success,
-                error,
-            },
-            triggerNullifyError,
-            triggerNullifySuccess,
-        } = this.props;
-
-        if (error) {
-            toast.dismiss();
-            triggerNullifyError();
-            toast.error(error);
-        }
-        if (success) {
-            toast.dismiss();
-            triggerNullifySuccess();
-            toast.success(success);
-        }
-        return <section>
-            This is the contact us page
-        </section>;
+    if (error) {
+        toast.dismiss();
+        triggerNullifyError();
+        toast.error(error);
+    }
+    if (success) {
+        toast.dismiss();
+        triggerNullifySuccess();
+        toast.success(success);
     }
+    return <section>
+        This is the contact us page
+    </section>;
 }
 
+
 const mapDispatchToProps = dispatch => {
     return {
         triggerSwitchNavigation: active => dispatch(switchNavigation({ active })),