Test task Alex Kislukhin

fullstack/task/packages/client/.env

@@ -0,0 +1 @@
+VITE_SERVER_URL=http://127.0.0.1:4001

fullstack/task/packages/client/README.md

@@ -0,0 +1,5 @@
+### Graphql Codegen
+
+To generate graphql types and hooks, run following command, from client root:
+
+`yarn graphql-codegen`

fullstack/task/packages/client/codegen.ts

@@ -0,0 +1,18 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+import 'dotenv/config';
+
+const config: CodegenConfig = {
+    schema: `${process.env.VITE_SERVER_URL}/graphql`,
+    documents: ['src/**/*.gql'],
+    generates: {
+        './src/__generated__/graphql.tsx': {
+            plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+            config: {
+                withHooks: true,
+            },
+        },
+    },
+    ignoreNoDocuments: true,
+};
+
+export default config;

fullstack/task/packages/client/package.json

@@ -4,6 +4,9 @@
     "version": "1.0.0",
     "dependencies": {
         "@apollo/client": "3.7.10",
+        "ag-grid-community": "^33.3.2",
+        "ag-grid-react": "^33.3.2",
+        "dotenv": "^16.5.0",
         "graphql": "16.6.0",
         "graphql-tag": "2.12.6",
         "graphql-ws": "5.12.0",
@@ -17,6 +20,11 @@
         "@babel/core": "7.23.0",
         "@dishboard/eslint-config": "1.0.0",
         "@dishboard/jest-config": "1.0.0",
+        "@graphql-codegen/cli": "^5.0.7",
+        "@graphql-codegen/client-preset": "^4.8.2",
+        "@graphql-codegen/typescript": "^4.1.6",
+        "@graphql-codegen/typescript-operations": "^4.6.1",
+        "@graphql-codegen/typescript-react-apollo": "^4.3.3",
         "@types/jest": "28.1.8",
         "@types/react": "18.0.17",
         "@types/react-dom": "18.0.6",

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

@@ -1,5 +1,7 @@
+import { ExchangeRateTable } from './components/ExchangeRateTable/ExchangeRateTable';
+
 function App() {
-    return <p>TODO</p>;
+    return <ExchangeRateTable />;
 }
 
 export default App;

fullstack/task/packages/client/src/components/ExchangeRateTable/ExchangeRateTable.tsx

@@ -0,0 +1,49 @@
+import { AgGridReact } from 'ag-grid-react';
+import { useMemo } from 'react';
+import { timeDiffToMinutes } from '../../utils/timeDiffToMinutes';
+import { useExchangeRateQuery } from '../../__generated__/graphql';
+
+export const ExchangeRateTable = () => {
+    const { loading, data, error } = useExchangeRateQuery();
+
+    const ratesWithTimeDiff = useMemo(() => {
+        if (!data) {
+            return [];
+        }
+
+        const date = new Date();
+
+        return data.exchangeRates.map((item) => ({
+            ...item,
+            fetched: timeDiffToMinutes(date, new Date(item.createdAtUtc)),
+        }));
+    }, [data?.exchangeRates]);
+
+    if (loading) {
+        return <div>loading...</div>;
+    }
+
+    if (error) {
+        return <div>oops! something went wrong</div>;
+    }
+
+    if (!data) {
+        return <div>No data found</div>;
+    }
+
+    return (
+        <div style={{ width: '100%', height: '500px' }}>
+            <AgGridReact
+                rowData={ratesWithTimeDiff}
+                columnDefs={[
+                    { field: 'country' },
+                    { field: 'currency' },
+                    { field: 'currencyCode' },
+                    { field: 'rate' },
+                    { field: 'fetched' },
+                ]}
+                defaultColDef={{ flex: 1 }}
+            />
+        </div>
+    );
+};

fullstack/task/packages/client/src/components/ExchangeRateTable/exchange-rate.gql

@@ -0,0 +1,9 @@
+query ExchangeRate {
+    exchangeRates {
+        currency
+        createdAtUtc
+        rate
+        country
+        currencyCode
+    }
+}

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

@@ -2,9 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import App from './App';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 const client = new ApolloClient({
-    uri: 'http://localhost:4000/graphql',
+    uri: `${import.meta.env.VITE_SERVER_URL}/graphql`,
     cache: new InMemoryCache(),
 });
 

fullstack/task/packages/client/src/utils/timeDiffToMinutes.ts

@@ -0,0 +1,11 @@
+export const timeDiffToMinutes = (now: Date, compareTo: Date): string => {
+    const diff = now.getTime() - compareTo.getTime();
+
+    const minutesDiff = Math.floor(diff / 1000 / 60);
+
+    if (minutesDiff <= 0) {
+        return '< minute ago';
+    }
+
+    return `${minutesDiff} minutes ago`;
+};

fullstack/task/packages/client/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_SERVER_URL: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

fullstack/task/packages/client/tsconfig.json

@@ -18,6 +18,6 @@
 
         "baseUrl": "./"
     },
-    "include": ["src"],
+    "include": ["src", "codegen.ts"],
     "references": [{ "path": "./tsconfig.node.json" }]
 }

fullstack/task/packages/client/tsconfig.node.json

@@ -5,5 +5,5 @@
         "moduleResolution": "Node",
         "allowSyntheticDefaultImports": true
     },
-    "include": ["vite.config.ts"]
+    "include": ["vite.config.ts", "codegen.ts"]
 }

fullstack/task/packages/server/.env

@@ -9,3 +9,5 @@ GQL_PLAYGROUND=true
 GQL_INTROSPECTION=true
 
 PORT=4001
+
+CNB_API_URL=https://api.cnb.cz/cnbapi

fullstack/task/packages/server/README.md

@@ -24,10 +24,14 @@ Run `docker login`.
 
 ### 4. Create and start the database
 
-- If this is your first-time setup - run `yarn server db-create` (from the root workspace `fullstack/task`). This will create (and overwrite!) a docker container for the database.
-- Otherwise, run the docker container that was created during the first-time setup.
+-   If this is your first-time setup - run `yarn server db-create` (from the root workspace `fullstack/task`). This will create (and overwrite!) a docker container for the database.
+-   Otherwise, run the docker container that was created during the first-time setup.
 
-### 5. Start the server
+### 5. Boot up a Redis instance
+
+Run `docker-compose up -d` from the root of server.
+
+### 6. Start the server
 
 Run `yarn server start` from the root workspace.
 
@@ -41,6 +45,6 @@ First, generate the migration. Make sure to use a descriptive name, like in a co
 yarn server migration -c generate --name migration-name
 ```
 
-This will create a file describing all the changes to the database, s.t. it can be replicated or reverted easily. 
+This will create a file describing all the changes to the database, s.t. it can be replicated or reverted easily.
 
 All pending migrations are ran automatically when the server starts.

fullstack/task/packages/server/docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  redis:
+    image: redis:latest
+    container_name: redis
+    ports:
+      - '6379:6379'

fullstack/task/packages/server/package.json

@@ -24,7 +24,7 @@
         "@tuya/tuya-connector-nodejs": "2.1.2",
         "apollo-server-core": "3.11.1",
         "apollo-server-express": "3.10.2",
-        "axios": "1.3.4",
+        "axios": "^1.10.0",
         "bcrypt": "5.1.0",
         "class-transformer": "0.5.1",
         "class-validator": "0.13.2",
@@ -36,6 +36,7 @@
         "graphql": "16.6.0",
         "graphql-subscriptions": "2.0.0",
         "graphql-ws": "5.12.0",
+        "ioredis": "^5.6.1",
         "mqtt": "4.3.7",
         "passport": "0.6.0",
         "passport-jwt": "4.0.1",

fullstack/task/packages/server/schema.gql

@@ -2,14 +2,16 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
 # ------------------------------------------------------
 
-type Example {
+type ExchangeRate {
   id: ID!
   createdAtUtc: DateTime!
   updatedAtUtc: DateTime
   deleteDateUtc: DateTime
   version: Int!
-  name: String!
-  value: String!
+  country: String!
+  currency: String!
+  currencyCode: String!
+  rate: Float!
 }
 
 """
@@ -18,15 +20,5 @@ A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date
 scalar DateTime
 
 type Query {
-  exchangeRates: String!
-  exampleByName(name: String!): Example
-}
-
-type Mutation {
-  createExample(data: CreateExampleInputType!): Example!
-}
-
-input CreateExampleInputType {
-  name: String!
-  value: String!
+  exchangeRates: [ExchangeRate!]!
 }

fullstack/task/packages/server/src/app.module.ts

@@ -3,8 +3,8 @@ import { ConfigModule } from '@nestjs/config';
 import { GraphQLModule } from '@nestjs/graphql';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { graphqlConfig, typeormConfig } from './config';
-import { modules } from './entity-modules';
 import { ExchangeRateModule } from './services/exchange-rate/exchange-rate.module';
+import { RedisService } from './redis/redis.service';
 
 @Module({
     imports: [
@@ -14,8 +14,8 @@ import { ExchangeRateModule } from './services/exchange-rate/exchange-rate.modul
         TypeOrmModule.forRoot(typeormConfig),
         GraphQLModule.forRoot(graphqlConfig),
         ExchangeRateModule,
-        ...modules,
     ],
     controllers: [],
+    providers: [RedisService],
 })
 export class AppModule {}