Task: Add Ant Design and Craco for react scripts ejected

client/src/App.less

@@ -0,0 +1 @@
+@import '~antd/dist/antd.less';

client/src/App.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import './App.less';
+import {gql, useQuery, useSubscription} from "@apollo/client";
+
+interface User {
+    id: number
+    code: string
+    name: string
+}
+
+interface Account {
+    id: number
+    code: string
+    balance: number
+    user: User
+}
+
+interface AccountResult {
+    fetchAccounts: Array<Account>
+}
+
+const ACCOUNTS = gql`
+    {
+        fetchAccounts {
+            id
+            code
+            balance
+            user {
+                code
+                name
+            }
+        }
+    }
+`
+
+const HELLO = gql`
+    subscription {
+        hello
+    }
+`
+
+function App() {
+    const {error, loading, data} = useQuery<AccountResult>(ACCOUNTS)
+    // const {error, loading, data} = useSubscription(HELLO)
+    console.log(data)
+    return (
+        <>
+            <h1>Accounts</h1>
+            {
+                loading || !data ? <p>Loading...</p> :
+                    data.fetchAccounts.map(account => (
+                            <>
+                                <div>Account ID: {account.id}</div>
+                                <div>Account Code: {account.code}</div>
+                                <div>Account User: {account.user.name}</div>
+                            </>
+                        )
+                    )
+                // <p>{`${data.hello}`}</p>
+            }
+        </>
+    );
+}
+
+export default App;

client/src/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.less';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+import {split, HttpLink, ApolloClient, InMemoryCache} from '@apollo/client';
+import {ApolloProvider} from '@apollo/client/react';
+import {getMainDefinition} from '@apollo/client/utilities';
+import {WebSocketLink} from '@apollo/client/link/ws';
+
+const APP_HOST = process.env.APP_HOST || 'localhost:8081'
+
+const httpLink = new HttpLink({
+    uri: `http://${APP_HOST}/graphql`
+});
+
+const wsLink = new WebSocketLink({
+    uri: `ws://${APP_HOST}/subscriptions`,
+    options: {
+        reconnect: true
+    }
+});
+
+const splitLink = split(
+    ({query}) => {
+        const definition = getMainDefinition(query);
+        return (
+            definition.kind === 'OperationDefinition' &&
+            definition.operation === 'subscription'
+        );
+    },
+    wsLink,
+    httpLink,
+);
+
+const client = new ApolloClient({
+    link: splitLink,
+    cache: new InMemoryCache()
+});
+
+ReactDOM.render(
+    <React.StrictMode>
+        <ApolloProvider client={client}>
+            <App/>
+        </ApolloProvider>
+    </React.StrictMode>,
+    document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

client/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

client/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';