From 53cb4c6359dc3780c075ceb4dea53739476b0b95 Mon Sep 17 00:00:00 2001
From: Albert Nikulshin <gotodno@gmail.com>
Date: Wed, 31 Jul 2019 18:13:02 +0300
Subject: [PATCH] Example with AJAX request

---
 .../default.xml                               |  6 ++
 .../ExtDynamicExchangeRates.tsx               | 70 +++++++++++++++++++
 .../ExtDynamicExchangeRates/utils/date.ts     |  6 ++
 .../ExtExchangeRates/ExtExchangeRates.tsx     |  4 +-
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.examples/default.xml
 create mode 100644 components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.tsx
 create mode 100644 components/ExtDynamicExchangeRates/utils/date.ts

diff --git a/components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.examples/default.xml b/components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.examples/default.xml
new file mode 100644
index 0000000..c3162af
--- /dev/null
+++ b/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"
+/>
diff --git a/components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.tsx b/components/ExtDynamicExchangeRates/ExtDynamicExchangeRates.tsx
new file mode 100644
index 0000000..0866347
--- /dev/null
+++ b/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] } }));
+        }
+    }
+}
diff --git a/components/ExtDynamicExchangeRates/utils/date.ts b/components/ExtDynamicExchangeRates/utils/date.ts
new file mode 100644
index 0000000..b7d7e52
--- /dev/null
+++ b/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;
+};
diff --git a/components/ExtExchangeRates/ExtExchangeRates.tsx b/components/ExtExchangeRates/ExtExchangeRates.tsx
index 8a8bd59..2b5b62d 100644
--- a/components/ExtExchangeRates/ExtExchangeRates.tsx
+++ b/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>