feat: CZK Exchange Rates feature implemetation

fullstack/task/.yarnrc.yml

@@ -1,23 +1,23 @@
-nodeLinker: pnp
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: '@yarnpkg/plugin-workspace-tools'
-
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
-
-supportedArchitectures:
-  os:
-    - 'current'
-    - 'darwin'
-    - 'linux'
-    - 'win32'
-    - 'arm64'
-
-packageExtensions:
-  "babel-plugin-styled-components@2.1.4":
-    peerDependencies:
-      "@babel/core": "^7.0.0-0"
-  "styled-components@5.3.9":
-    peerDependencies:
-      "@babel/core": "^7.0.0-0"
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: '@yarnpkg/plugin-workspace-tools'
+
+yarnPath: .yarn/releases/yarn-3.2.3.cjs
+
+supportedArchitectures:
+  os:
+    - 'current'
+    - 'darwin'
+    - 'linux'
+    - 'win32'
+    - 'arm64'
+
+packageExtensions:
+  "babel-plugin-styled-components@2.1.4":
+    peerDependencies:
+      "@babel/core": "^7.0.0-0"
+  "styled-components@5.3.9":
+    peerDependencies:
+      "@babel/core": "^7.0.0-0"

fullstack/task/packages/client/package.json

@@ -4,6 +4,12 @@
     "version": "1.0.0",
     "dependencies": {
         "@apollo/client": "3.7.10",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^7.0.2",
+        "@mui/lab": "^7.0.0-beta.11",
+        "@mui/material": "^7.0.2",
+        "date-fns": "^4.1.0",
         "graphql": "16.6.0",
         "graphql-tag": "2.12.6",
         "graphql-ws": "5.12.0",

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

@@ -1,5 +1,45 @@
-function App() {
-    return <p>TODO</p>;
-}
+import React from 'react';
+import { Alert, CircularProgress, Container } from '@mui/material';
+import { useExchangeRates } from './hooks/useExchangeRates';
+import { Header } from './components/Header';
+import { RefreshButton } from './components/RefreshButton';
+import { ExchangeRatesTable } from './components/ExchangeRatesTable';
+
+const App: React.FC = () => {
+    const { loading, error, data, refetch } = useExchangeRates();
+    const [lastFetchedAt, setLastFetchedAt] = React.useState<string>();
+
+    React.useEffect(() => {
+        const ts = data?.exchangeRates?.[0]?.fetchedAt;
+        if (ts) setLastFetchedAt(ts);
+    }, [data]);
+
+    const handleRefresh = async () => {
+        const res = await refetch();
+        const ts = res.data?.exchangeRates?.[0]?.fetchedAt;
+        if (ts) setLastFetchedAt(ts);
+    };
+
+    const rates = data?.exchangeRates ?? [];
+
+    return (
+        <Container
+            maxWidth="md"
+            sx={{
+                py: 4,
+                backgroundColor: 'background.paper',
+                borderRadius: 2,
+            }}
+        >
+            <Header fetchedAt={lastFetchedAt} />
+            <RefreshButton onClick={handleRefresh} loading={loading} />
+
+            {loading && <CircularProgress />}
+            {error && <Alert severity="error">{error.message}</Alert>}
+
+            {!loading && !error && <ExchangeRatesTable rates={rates} />}
+        </Container>
+    );
+};
 
 export default App;