Пример компонента с AJAX

components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.examples/default.xml

@@ -0,0 +1,6 @@
+<ExtDynamicExchangeRates
+  data-supply="exchangeratesapi.io"
+  data-source="https://master.turboext.net"
+  data-currency="RUB"
+  data-date="1564497455735"
+/>

components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import { getOffsetFrom } from './utils/date';
+import { ExtExchangeRates } from '../ExtExchangeRates/ExtExchangeRates';
+import { formatDate } from '../ExtExchangeRates/utils/date';
+
+interface IState {
+    rates: Record<string, Record<string, number>>;
+}
+
+interface IProps {
+    'data-source': string;
+    'data-currency': string;
+    'data-supply': string;
+    'data-date': number;
+}
+
+export class ExtDynamicExchangeRates extends React.Component<IProps, IState> {
+    public state = {
+        rates: {
+            previous: {},
+            latest: {}
+        }
+    }
+
+    public componentDidMount(): void {
+        this.getRates();
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <ExtExchangeRates
+                data-before={this.state.rates.previous}
+                data-date={this.props['data-date']}
+                data-supply={this.props['data-supply']}
+                data-today={this.state.rates.latest}
+            />
+        );
+    }
+
+    private getPeriod(): Date[] {
+        const endDate = new Date(this.props['data-date']);
+
+        return [
+            getOffsetFrom(endDate, 1),
+            endDate
+        ];
+    }
+
+    private getRates(): void {
+        const [
+            startDate,
+            endDate
+        ] = this.getPeriod().map(formatDate);
+        const source = this.props['data-source'];
+        const currency = this.props['data-currency'];
+
+        if (typeof window !== 'undefined') {
+            fetch(`${source}/exchange/history?start_at=${startDate}&end_at=${endDate}&base=${currency}`)
+                .then(response => {
+                    if (!response.ok) {
+                        return Promise.reject(response);
+                    }
+
+                    return response.json();
+                })
+                .then(({ rates }) => this.setState({ rates: { latest: rates[startDate], previous: rates[endDate] } }));
+        }
+    }
+}

components/ExtDynamicExchangeRates/utils/date.ts

@@ -0,0 +1,6 @@
+export const getOffsetFrom = (date: Date, daysOffset: number = 0): Date => {
+    const result = new Date();
+    result.setDate(date.getDate() - daysOffset);
+
+    return result;
+};

components/ExtExchangeRates/ExtExchangeRates.tsx

@@ -39,11 +39,13 @@ export class ExtExchangeRates extends React.PureComponent<IProps, IState> {
     }
 
     public render(): JSX.Element {
+        const date = new Date(this.props['data-date']);
+
         return (
             <div className="ext-exchange-rates">
                 { this.renderRates() }
                 <div className="ext-exchange-rates__description">
-                    Курсы валют на {formatDate(new Date())} <br />
+                    Курсы валют на {formatDate(date)} <br />
                     по данным {this.props['data-supply']}
                 </div>
             </div>