{"size": 1805, "ext": "js", "max_stars_repo_path": "java-apps/bank-gateway/src/main/ui/src/components/screens/convertCurrencyResultScreen/convertCurrencyResultScreen.js", "max_stars_repo_name": "kecven/service-discovery-demo-parent", "max_stars_repo_stars_event_min_datetime": "2020-10-29T14:41:45.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-14T10:38:26.000Z", "max_issues_repo_path": "java-apps/bank-gateway/src/main/ui/src/components/screens/convertCurrencyResultScreen/convertCurrencyResultScreen.js", "max_issues_repo_name": "kecven/service-discovery-demo-parent", "max_issues_repo_issues_event_min_datetime": "2020-12-13T19:15:01.000Z", "max_issues_repo_issues_event_max_datetime": "2020-12-13T23:35:27.000Z", "max_forks_repo_path": "java-apps/bank-gateway/src/main/ui/src/components/screens/convertCurrencyResultScreen/convertCurrencyResultScreen.js", "max_forks_repo_name": "kecven/service-discovery-demo-parent", "max_forks_repo_forks_event_min_datetime": "2020-05-19T15:24:47.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-02T21:27:05.000Z"}
{"max_stars_count": 8, "max_issues_count": 1, "max_forks_count": 43, "avg_line_length": 41.0227272727, "max_line_length": 103, "alphanum_fraction": 0.6011080332}
import React, {useEffect, useState} from 'react';
import {useLocation} from "react-router-dom";
import ScreenWrapper from "../../components/screenWrapper";
import CardWrapper from "../../components/cardWrapper";
import styles from "./convertCurrencyResultScreen.module.css"
import ColoredMoney from "../../components/coloredMoney";

function ConvertCurrencyResultScreen({isError = false}) {

    let {search} = useLocation();
    const [data,setData] = useState({})

    useEffect(()=>{
        const searchParams = new URLSearchParams(search)
        const amount = searchParams.get("amount")
        const target = searchParams.get("target")
        const source = searchParams.get("source")
        const result = Number(searchParams.get("result") || "0")
        setData({amount,target,source,result})

    },[])// eslint-disable-line react-hooks/exhaustive-deps

    return (<ScreenWrapper>
            <CardWrapper className={`capitalize ${styles.card}`}>
                {isError && <h3>Something went wrong on out end 😢</h3>}

                {!isError && <>
                    <div className={`flexCenter ${styles.iconsContainer} iconMarginMedium`}>
                        <img src="/img/exchange.svg" className={`iconMedium ${styles.icon}`}
                             alt="grayscale exchange icon"/>
                        <img src="/img/exchange-color.svg" className={`iconMedium ${styles.iconColor}`}
                             alt=" colored exchange icon"/>
                    </div>
                    <h4>{data.amount} {data.source} Is Approximately</h4>
                    <ColoredMoney amount={data.result}>{data.result} {data.target}</ColoredMoney>
                </>}

            </CardWrapper>
        </ScreenWrapper>
    );
}

export default ConvertCurrencyResultScreen;
