upgrading to functional components

Author: Saulo Benigno

.idea/workspace.xml

@@ -1,44 +1,24 @@
-import React, { Component } from 'react';
+import React, {useState} from 'react';
 import './index.css';
 import Header from './components/Header';
 import Form from './components/Form';
 import Table from './components/Table';
 
-class App extends Component {
+const App = () => {
 
-    constructor() {
-        super();
-        this.state = {
-            days: 10,
-            symbol: '',
-            algo: '',
-        };
-    }
-
-    onChangeSymbol(newSymbol) {
-        this.setState({symbol: newSymbol})
-    }
-
-    onChangeAlgo(newAlgo) {
-        this.setState({algo: newAlgo})
-    }
-
-    onChangeDays(newDays) {
-        this.setState({days: newDays})
-    }
-
-    render() {
+    const [days, setDays] = useState('10');
+    const [symbol, setSymbol] = useState('');
+    const [algo, setAlgo] = useState('all');
 
         return (
             <div>
                 <Header />
-                <Form   changeSymbol={this.onChangeSymbol.bind(this)}
-                        changeAlgo={this.onChangeAlgo.bind(this)}
-                        changeDays={this.onChangeDays.bind(this)} />
-                <Table symbol={this.state.symbol} algo={this.state.algo} days={this.state.days} />
+                <Form   changeSymbol={setSymbol.bind(this)}
+                        changeAlgo={setAlgo.bind(this)}
+                        changeDays={setDays.bind(this)} />
+                <Table symbol={symbol} algo={algo} days={days} />
             </div>
-        );
-    }
+        )
 }
 
 export default App;

public/data/social_types.json renamed to public/data/socials.json

@@ -1,13 +1,13 @@
 import React from 'react'
 
-export default class Header extends React.Component {
+const Header = () =>{
 
-    render() {
-        return (
-            <div>
-                <h3>Social Media - Stock Market</h3>
-            </div>
-        )
-    }
+    return (
+        <div>
+            <h3>Social Media - Stock Market</h3>
+        </div>
+    )
 
 }
+
+export default Header;

src/App.js

@@ -1,92 +1,85 @@
-import React from "react";
+import React, {useEffect, useState} from 'react';
 import api from "../services/api";
 
-export default class Table extends React.Component {
+const Table = (props) => {
 
-    state = {
-        dates: [],
-        social_types: []
-    }
+    const [dates, setDates] = useState([]);
+    const [social_media, setSocialMedia] = useState('');
+    const [social_type, setSocialType] = useState('');
+    const [social_logo, setSocialLogo] = useState('');
 
-    componentDidMount() {
+    useEffect(() =>  {
 
         api.get("./data/dates.json")
             .then((response) => {
-                this.setState({dates: response.data})
+                setDates(response.data)
+
             } )
             .catch((err) => {
                 console.error("ops! error: " + err);
             });
 
-        api.get("./data/social_types.json")
+        api.get("./data/socials.json")
             .then((response) => {
-                this.setState({social_types: response.data})
+                const data = response.data.filter(social => social.Symbol.includes(props.symbol))
+                setSocialMedia(data.map(function (img) { return img['Media']; }));
+                setSocialType(data.map(function (img) { return img['Type']; }));
+                setSocialLogo(data.map(function (img) { return img['Img']; }));
             } )
             .catch((err) => {
                 console.error("ops! error: " + err);
             });
 
+    }, [props]);
 
-    }
-
-
-    render() {
-
-        let { social_types } = this.state
-        social_types = (social_types.filter(social => social.Symbol.includes(this.props.symbol)));
-
-        let social_media = social_types.map(function (img) { return img['Media']; });
-        let social_type = social_types.map(function (img) { return img['Type']; });
-        let social_logo = social_types.map(function (img) { return img['Img']; });
-        let prices  = [];
-        let counts  = [];
-
-        function randomDate(start, end) {
-            start = new Date(2020, 1, 1);
-            end = new Date();
-            return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toISOString().split('T')[0];
-        }
+    if (props.symbol !== "") {
 
-        const fetchData = (symbol, socialType) => {
-            stockPriceGenerator(symbol, randomDate());
-            socialMediaCountGenerator(symbol, socialType);
-        }
+            let prices  = [];
+            let counts  = [];
 
-        let number1 = Math.round(Math.random() * (this.props.days - 1) + 1);
-        let number2 = number1 + parseInt(this.props.days);
+            const randomDate = (start, end) => {
+                start = new Date(2020, 1, 1);
+                end = new Date();
+                return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toISOString().split('T')[0];
+            }
 
-        const { dates } = this.state
+            const fetchData = (symbol, socialType) => {
+                stockPriceGenerator(symbol, randomDate());
+                socialMediaCountGenerator(symbol, socialType);
+            }
 
-        const stockPriceGenerator = (symbol, date) => {
-            dates.slice(number1,number2).map(date => (
-                prices.push({'stock_price': Math.round(Math.random() * 100)})
-            ));
-        }
+            let number1 = Math.round(Math.random() * (props.days - 1) + 1);
+            let number2 = number1 + parseInt(props.days);
 
-        const socialMediaCountGenerator = (symbol, socialType) => {
-            dates.slice(number1,number2).map(date => (
-                counts.push({'media_count': Math.round(Math.random() * 10)})
-            ));
-        }
+            const socialMediaCountGenerator = (symbol, socialType) => {
+                dates.slice(number1,number2).map(date => (
+                    counts.push({'media_count': Math.round(Math.random() * 10)})
+                ));
+            }
 
-        const recommendationAlgorithm = (stockPrice, socialCounts) => {
-            if (this.props.algo !== 'all' && this.props.algo !== '')
-                return this.props.algo;
+            const recommendationAlgorithm = (stockPrice, socialCounts) => {
+                if (props.algo !== 'all' && props.algo !== '')
+                    return props.algo;
 
-            if (stockPrice > socialCounts*5)
-                return 'sell'
+                if (stockPrice > socialCounts*5)
+                    return 'sell'
 
-            if (stockPrice < socialCounts*3)
-                return 'buy'
+                if (stockPrice < socialCounts*3)
+                    return 'buy'
                 return 'hold'
-        }
+            }
 
-        if (this.props.symbol !== "") {
+            const stockPriceGenerator = (symbol, date) => {
+                dates.slice(number1,number2).map(date => (
+                    prices.push({'stock_price': Math.round(Math.random() * 100)})
+                ));
+            }
 
-            fetchData(this.props.symbol, social_type);
             document.getElementById("algo").style.visibility = 'visible';
             document.getElementById("days").style.visibility = 'visible';
 
+            fetchData(props.symbol,social_type);
+
             return (
                 <div>
                     <center>
@@ -110,7 +103,7 @@ export default class Table extends React.Component {
                                             <img src={social_logo} width="24" alt={social_media + ' logo'} title={social_media} /> {social_media}
                                         </td>
                                         <td>
-                                            {this.props.symbol}
+                                            {props.symbol}
                                         </td>
                                         <td>
                                             {date.date}
@@ -141,6 +134,6 @@ export default class Table extends React.Component {
         }
 
 
-    }
+}
 
-}
+export default Table;

src/components/Header.jsx

@@ -2,4 +2,4 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-ReactDOM.render(<React.StrictMode><App/></React.StrictMode>, document.getElementById('root'));
+ReactDOM.render(<App/>, document.getElementById('root'));