Adapt Frontend to use the Exchange application

Marek Czernek

2020-03-11 03eabde7bd1fcd1bf2027d3de27d1c33bee7b71c

Adapt Frontend to use the Exchange application

 mczernek-exchange-application/frontend/Dockerfile

New file
@@ -0,0 +1,12 @@
FROM ubi8/nodejs-12

COPY package.json .

RUN npm install

COPY public ./public
COPY src ./src

EXPOSE 3000

CMD npm start

 mczernek-exchange-application/frontend/src/Graph.js

@@ -33,8 +33,9 @@
        var maxYAxis = 0

        this.props.data.forEach(e => {
            if(e.value > maxYAxis) {
                maxYAxis = e.value 
            var floatValue = parseFloat(e.value);
            if(floatValue > maxYAxis) {
                maxYAxis = floatValue 
            }

            const date = new Date(e.date)
@@ -42,7 +43,7 @@
            conv.unshift({
                name: this.props.target,
                x: dateString,
                y: e.value
                y: floatValue
            })
        });

@@ -68,7 +69,7 @@
                        legendData={series.map(s => s.legendItem)}
                        legendPosition="bottom-left"
                        height={275}
                        maxDomain={{ y: maxYAxis + 1 }}
                        maxDomain={{ y: maxYAxis + 0.2 }}
                        minDomain={{ y: 0 }}
                        padding={{
                            bottom: 75, // Adjusted to accommodate legend
@@ -76,7 +77,7 @@
                            right: 50,
                            top: 50
                        }}
                        themeColor={ChartThemeColor.orange}
                        themeColor={ChartThemeColor.blue}
                        width={width}
                    >
                        <ChartAxis tickValues={[2, 3, 4]} />

 mczernek-exchange-application/frontend/src/HistoricalDataForm.js

@@ -35,7 +35,7 @@
            loading: true
        })

        fetch('http://localhost:8080')
        fetch('http://currency-exchange-app.apps.ocp-d43.dev.nextcle.com')
            .then(currencies => currencies.json())
            .then(currencies => this.setState({
                currencies, src: currencies[0], target: currencies[1], loading: false
@@ -68,8 +68,7 @@
            source: this.state.src,
            target: this.state.target
        }

        fetch('http://localhost:8080', {
        fetch('http://exchange-exchange-app.apps.ocp-d43.dev.nextcle.com/exchangeRate/historicalData', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
@@ -77,8 +76,11 @@
            },
            body: JSON.stringify(payload)
        })
            .then(exchangeData => exchangeData.json())
            .then(exchangeData => this.setState({ exchangeData }))
            .then(exchangeData => {
                exchangeData.json().then( json => {
                    this.setState({ exchangeData: json })
                })
            })
            .catch(err => console.log(err))
    };


 mczernek-exchange-application/frontend/src/SingleCurrencyExchange.js

@@ -36,7 +36,7 @@
            loading: true
        })

        fetch('http://localhost:8080')
        fetch('http://currency-exchange-app.apps.ocp-d43.dev.nextcle.com')
            .then(currencies => currencies.json())
            .then(currencies => this.setState({
                currencies, src: currencies[0], target: currencies[1], loading: false
@@ -65,16 +65,21 @@
        e.preventDefault();
        this.setState({ requestExchangeData: true })

        fetch(`http://localhost:8080/${this.state.src}`, {
            method: 'GET',
        const payload = {
            source: this.state.src,
            target: this.state.target
        }
        fetch("http://exchange-exchange-app.apps.ocp-d43.dev.nextcle.com/exchangeRate/singleCurrency", {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        })
            .then(exchangeData => exchangeData.json())
            .then(exchangeData => this.setState({ exchangeData }))
            .catch(err => console.log(err))
        .then(exchangeData => exchangeData.json().then(exchangeData => this.setState({exchangeData})))
        .catch(err => console.log(err))

    };

    render() {
@@ -158,7 +163,7 @@
                        <TextContent className="margin-separator">
                            <Text component={TextVariants.p} className="text-container">
                                <span className="currency-text">
                                    {exchangeData.targetSign}
                                    {exchangeData.sign}
                                </span>
                                {exchangeData.value * this.state.inputValue}
                            </Text>