feat: store author details

.github/workflows/build.yml

@@ -30,9 +30,25 @@ jobs:
       - uses: actions/checkout@v3
       - run: npm ci
       - run: npm run test
-
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        directory: ["services/api"]
+    defaults:
+      run:
+        working-directory: ${{ matrix.directory }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: rrainn/[email protected]
+        with:
+          port: 8001
+      - run: npm ci
+      - run: npm run test:e2e
+
   build-api:
-    needs: [lint, test]
+    needs: [lint, test, e2e-test]
     if: github.ref == 'refs/heads/develop'
     uses: jbrunton/workflows/.github/workflows/build-image.yml@develop
     with:

client/src/components/messages/MessagesList.tsx

@@ -1,21 +1,28 @@
 import { List, ListIcon, ListItem } from '@chakra-ui/react'
 import React from 'react'
-import { Message } from '../../data/messages'
+import { Message, User } from '../../data/messages'
 import { UserIcon } from '../icons/User'
 
 export type MessagesListProps = {
-  messages: Message[]
+  data: {
+    messages: Message[]
+    authors: Record<string, User>
+  }
 }
 
-export const MessagesList: React.FC<MessagesListProps> = ({ messages }) => {
+export const MessagesList: React.FC<MessagesListProps> = ({ data: { messages, authors } }) => {
   return (
     <List spacing={3}>
-      {messages.map((message) => (
-        <ListItem key={message.id}>
-          <ListIcon as={UserIcon} color='green.500' />
-          {message.content}
-        </ListItem>
-      ))}
+      {messages.map((message) => {
+        const author = authors[message.authorId]
+        return (
+          <ListItem key={message.id}>
+            <ListIcon as={UserIcon} color='green.500' />
+            <span>{author?.name ?? 'Anon'}: </span>
+            {message.content}
+          </ListItem>
+        )
+      })}
     </List>
   )
 }

client/src/components/messages/MessagesWidget.tsx

@@ -13,7 +13,7 @@ export const MessagesWidget: React.FC<MessagesWidgetProps> = ({ roomId }) => {
   const accessToken = useAccessToken()
   const inputRef = useRef<HTMLInputElement>(null)
   const [content, setContent] = useState<string>('')
-  const { data: messages, isError } = useMessages(roomId, accessToken)
+  const { data, isError } = useMessages(roomId, accessToken)
   const { mutate, isLoading } = usePostMessage(roomId, content, accessToken)
   const [isSending, setIsSending] = useState<boolean>(false)
 
@@ -37,7 +37,7 @@ export const MessagesWidget: React.FC<MessagesWidgetProps> = ({ roomId }) => {
   }
   return (
     <div>
-      {messages && !isError && <MessagesList messages={messages} />}
+      {data && !isError && <MessagesList data={data} />}
       <Flex>
         <Input
           ref={inputRef}

client/src/data/messages.ts

@@ -6,6 +6,13 @@ export type Message = {
   id: string
   content: string
   time: number
+  authorId: string
+}
+
+export type User = {
+  id: string
+  name: string
+  picture: string
 }
 
 export const useMessages = (roomId: string, accessToken?: string) => {
@@ -16,10 +23,13 @@ export const useMessages = (roomId: string, accessToken?: string) => {
       },
     })
     if (response.ok) {
-      const messages = await response.json()
-      return messages as Message[]
+      const data = await response.json()
+      return data as { messages: Message[]; authors: Record<string, User> }
+    }
+    return {
+      messages: [],
+      authors: {},
     }
-    return []
   }
   return useQuery({
     queryKey: [`messages/${roomId}`],

docker-compose.yml

@@ -9,3 +9,13 @@ services:
     volumes:
       - "./docker/dynamodb:/home/dynamodblocal/data"
     working_dir: /home/dynamodblocal
+
+  dynamodb-test:
+    command: "-jar DynamoDBLocal.jar -inMemory -port 8001"
+    image: "amazon/dynamodb-local:latest"
+    container_name: dynamodb-test
+    ports:
+      - "8001:8001"
+    # volumes:
+    #   - "./docker/dynamodb:/home/dynamodblocal/data"
+    # working_dir: /home/dynamodblocal

services/api/package.json

@@ -15,8 +15,12 @@
     "start": "node dist/src/main",
     "start:dev": "NODE_ENV=development nest start --watch",
     "start:debug": "NODE_ENV=development nest start --debug --watch",
+    "db:init": "NODE_ENV=development ts-node ./scripts/db/init.ts",
+    "db:drop": "NODE_ENV=development ts-node ./scripts/db/drop.ts",
+    "db:test:drop": "NODE_ENV=test ts-node ./scripts/dropdb.ts",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
+    "test:int": "jest --config ./jest.int.config.js",
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
@@ -27,6 +31,7 @@
     "@aws-sdk/credential-provider-node": "3.238.0",
     "@aws-sdk/lib-dynamodb": "3.238.0",
     "@nestjs/common": "^9.0.0",
+    "@nestjs/config": "2.2.0",
     "@nestjs/core": "^9.0.0",
     "@nestjs/mapped-types": "*",
     "@nestjs/passport": "9.0.0",
@@ -59,6 +64,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "28.1.3",
+    "jest-mock-extended": "3.0.1",
     "prettier": "^2.3.2",
     "source-map-support": "^0.5.20",
     "supertest": "^6.1.3",

services/api/scripts/db/drop.ts

@@ -0,0 +1,14 @@
+import { DataModule } from '../../src/data/data.module';
+import { DynamoDBAdapter } from '../../src/data/adapters/dynamodb.adapter';
+import { runWithContext } from '../runWithContext';
+
+runWithContext({
+  rootModule: DataModule,
+  run: async (app, logger) => {
+    const db = app.get(DynamoDBAdapter);
+    const { TableDescription } = await db.destroy();
+    logger.log(
+      `Dropped table ${TableDescription?.TableName} (${TableDescription?.TableArn})`,
+    );
+  },
+});

services/api/scripts/db/init.ts

@@ -0,0 +1,14 @@
+import { DynamoDBAdapter } from '../../src/data/adapters/dynamodb.adapter';
+import { DataModule } from '../../src/data/data.module';
+import { runWithContext } from '../runWithContext';
+
+runWithContext({
+  rootModule: DataModule,
+  run: async (app, logger) => {
+    const db = app.get(DynamoDBAdapter);
+    const { TableDescription } = await db.create();
+    logger.log(
+      `Created table ${TableDescription?.TableName} (${TableDescription?.TableArn})`,
+    );
+  },
+});