ExchangeRates - vojsal

fullstack/task/packages/server/src/entities/exchange-rate.model.ts

@@ -6,11 +6,14 @@ export class ExchangeRate {
     public country!: string;
 
     @Field(() => String)
-    public currncy!: string;
+    public currency!: string;
 
     @Field(() => Number)
     public amount!: number;
 
     @Field(() => String)
     public code!: string;
+
+    @Field(() => Number)
+    public rate!: number;
 }

fullstack/task/packages/server/src/entity-modules/exchange-rate/exchange-rate.resolver.ts

@@ -6,9 +6,9 @@ import { ExchangeRateService } from './exchange-rate.service';
 export class ExchangeRateResolver {
     constructor(private readonly exchangeRateService: ExchangeRateService) {}
 
-    // TODO: Implement a GraphQL Query that returns the exchange rates
-    @Query(() => String)
-    async exchangeRates(): Promise<String> {
-        return 'Hello';
+    @Query(() => [ExchangeRate])
+    async exchangeRates(): Promise<ExchangeRate[]> {
+        const rates: ExchangeRate[] = await this.exchangeRateService.getExchangeRates();
+        return rates;
     }
 }

fullstack/task/packages/server/src/entity-modules/exchange-rate/exchange-rate.service.ts

@@ -1,13 +1,33 @@
 import { Injectable } from '@nestjs/common';
 import { ExchangeRate } from '@cuid/entities';
+import fetch from 'node-fetch';
+
+const CNB_URL = 'https://www.cnb.cz/cs/financni_trhy/devizovy_trh/kurzy_devizoveho_trhu/denni_kurz.txt';
 
 @Injectable()
 export class ExchangeRateService {
     public getExchangeRates = async () => {
         const rates: ExchangeRate[] = [];
 
-        // TODO: Implement the fetching and parsing of the exchange rates.
-        // Use this method in the resolver.
+        // Fetch the exchange rates from CNB website
+        const response: Response = await fetch(CNB_URL);
+        const data: string = await response.text();
+
+        // Split the data into lines and remove header
+        const rateLines: string[] = data.trim().split('\n').splice(2);
+
+        // Loop through each line and push a new object to the array (wanted to use map, but since rates is a const, I use loop with Array.push instead)
+        for (const rateLine of rateLines) {
+            const [country, currency, amount, code, rate] = rateLine.split('|');
+            const currencyObject: ExchangeRate = {
+              country,
+              currency,
+              amount: parseInt(amount),
+              code,
+              rate: parseFloat(rate.replace(',', '.')),
+            };
+            rates.push(currencyObject);
+          }
 
         return rates;
     };

fullstack/task/packages/web/src/App.tsx

@@ -1,9 +1,30 @@
+import { useQuery, gql } from '@apollo/client';
+import ExchangeRateTable from './ExchangeRateTable';
+
+const EXCHANGE_RATES = gql`
+  query GetExchangeRates {
+    exchangeRates {
+      country
+      currency
+      amount
+      code
+      rate
+    }
+  }
+`;
+
 function App() {
-    // TODO: Add the FE for exchange rates here.
+    const { loading, error, data } = useQuery(EXCHANGE_RATES);
+
+    if (loading) return <p>Loading...</p>;
+    if (error) return <p>Error: {error.message}</p>;
+
+    const exchangeRatesData = data.exchangeRates;
 
     return (
         <div>
-            <p>Add the exchange rates here</p>
+            <h1>Exchange Rates</h1>
+            <ExchangeRateTable data={exchangeRatesData} />
         </div>
     );
 }

fullstack/task/packages/web/src/ExchangeRateTable.tsx

@@ -0,0 +1,58 @@
+interface ExchangeRate {
+  country: string;
+  currency: string;
+  amount: number;
+  code: string;
+  rate: number;
+}
+
+interface ExchangeRateTableProps {
+  data: ExchangeRate[];
+}
+
+const ExchangeRateTable: React.FC<ExchangeRateTableProps> = ({ data }) => {
+  return (
+    <table style={{ borderCollapse: 'collapse', width: '800px' }}>
+      <thead>
+        <tr>
+          <th style={tableHeaderStyle}>Country</th>
+          <th style={tableHeaderStyle}>Currency</th>
+          <th style={tableHeaderStyle}>Amount</th>
+          <th style={tableHeaderStyle}>Code</th>
+          <th style={tableHeaderStyle}>Rate</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((row, index) => (
+          <tr key={index} style={index % 2 === 0 ? evenRowStyle : oddRowStyle}>
+            <td style={tableCellStyle}>{row.country}</td>
+            <td style={tableCellStyle}>{row.currency}</td>
+            <td style={tableCellStyle}>{row.amount}</td>
+            <td style={tableCellStyle}>{row.code}</td>
+            <td style={tableCellStyle}>{row.rate}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const tableHeaderStyle: React.CSSProperties = {
+    borderBottom: '2px solid #ccc',
+    padding: '8px',
+    textAlign: "left",
+  };
+
+  const evenRowStyle: React.CSSProperties = {
+    backgroundColor: '#f2f2f2',
+  };
+
+  const oddRowStyle: React.CSSProperties = {
+    backgroundColor: '#ffffff',
+  };
+
+  const tableCellStyle: React.CSSProperties = {
+    padding: '8px',
+  };
+
+export default ExchangeRateTable;