Merge branch 'main' into 217-チャンネル機能を作る

.github/workflows/storybook-test.yml

@@ -76,7 +76,9 @@ jobs:
         run: cd frontend && npm install
       - if: ${{ steps.cache-playwright.outputs.cache-hit != 'true' }}
         name: install playwright
-        run: cd frontend && npx playwright install --with-deps
+        run: cd frontend && npx playwright install
+      - name: install playwright deps
+        run: cd frontend && npx playwright install-deps
       - name: is storybook file exists
         run: cd frontend && make sb-ck-file
       - name: run storybook test

backend/prisma/schema.prisma

@@ -9,9 +9,10 @@ datasource db {
   provider = "postgresql"
   url      = env("DATABASE_URL")
 }
+
 // userの情報
 model User {
-  id              Int @id @default(autoincrement())
+  id              String @id @default(cuid())
   createdAt       DateTime @default(now())
   updatedAt       DateTime @updatedAt
   username        String @unique
@@ -21,9 +22,10 @@ model User {
   roomMembers     RoomMember[]
   userChatState   UserChatState[]
 }
+
 // userが所属しているchatRoomの集合を取得
 model ChatRoom {
-  id            Int @id @default(autoincrement())
+  id            String @id @default(cuid())
   createdAt     DateTime @default(now())
   updatedAt     DateTime @updatedAt
   roomName      String
@@ -34,22 +36,23 @@ model ChatRoom {
   roomMembers   RoomMember[]
   userChatState UserChatState[]
 }
+
 // チャットルームの管理者からbanされた時にこのテーブルに追加、時間が経ったら削除
 // ルームに入る際やチャットを送信するときに
 // このテーブルを都度チェックしてbanされてなかったらchatroomに入れる的な使い方
 // endedAtに終了時間を渡す感じで使う予定
-
 model UserChatState {
   @@id([chatRoomId, userId, userState])
-  chatRoomId      Int
-  userId          Int
+  chatRoomId      String
+  userId          String
   userState       UserChatStateCode
   createdAt       DateTime @default(now())
   updatedAt       DateTime @updatedAt
   endedAt         DateTime
   user            User @relation(fields: [userId],references: [id])
   chatRoom        ChatRoom @relation(fields: [chatRoomId],references: [id], onDelete: Cascade)
 }
+
 // chatRoomに参加するときはこのテーブルに追加する
 // 抜けたときは削除する
 // UserMutedInChatRoom,UserBannedInChatRoomの情報をこのテーブルに持たせれば良くねって思ってるそこのあなた
@@ -59,19 +62,20 @@ model RoomMember {
   @@id([userId, chatRoomId])
   joinedAt    DateTime @default(now())
   role        UserRole @default(USER)
-  userId      Int
-  chatRoomId  Int
+  userId      String
+  chatRoomId  String
   user        User @relation(fields: [userId],references: [id])
   chatRoom    ChatRoom @relation(fields: [chatRoomId],references: [id], onDelete: Cascade)
 }
+
 // chatRoomIdからそのchatRoomのmsg集合を取得したりする
 model Message {
-  id          Int @id @default(autoincrement())
+  id          String @id @default(cuid())
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
   content     String
-  userId      Int
-  chatRoomId  Int
+  userId      String
+  chatRoomId  String
   user        User @relation(fields: [userId],references: [id])
   chatRoom    ChatRoom @relation(fields: [chatRoomId],references: [id], onDelete: Cascade)
 }

backend/prisma/seed.ts

@@ -33,28 +33,28 @@ async function main() {
   const roomMember1 = await prisma.roomMember.upsert({
     where: {
       userId_chatRoomId: {
-        userId: 1,
-        chatRoomId: 1,
+        userId: user1.id,
+        chatRoomId: room.id,
       },
     },
     update: {},
     create: {
-      userId: 1,
-      chatRoomId: 1,
+      userId: user1.id,
+      chatRoomId: room.id,
       role: UserRole.OWNER,
     },
   });
   const roomMember2 = await prisma.roomMember.upsert({
     where: {
       userId_chatRoomId: {
-        userId: 2,
-        chatRoomId: 1,
+        userId: user2.id,
+        chatRoomId: room.id,
       },
     },
     update: {},
     create: {
-      userId: 2,
-      chatRoomId: 1,
+      userId: user2.id,
+      chatRoomId: room.id,
     },
   });
   console.log(user1, user2);

backend/src/events/events.gateway.ts

@@ -36,12 +36,12 @@ export class EventsGateway {
   }
 
   @SubscribeMessage('getPastMessages')
-  async handleGetPastMessages(client: Socket, authorId: number) {
+  async handleGetPastMessages(client: Socket, authorId: string) {
     console.log('getPastMessages');
     // Userテーブルのidでそのuserのmsgデータを全て取得
     const pastMessages = await this.prisma.message.findMany({
       where: {
-        userId: 1,
+        userId: authorId,
       },
     });
     console.log('mid', authorId);

backend/src/post-message/dto/message.dto.ts

@@ -4,6 +4,6 @@ import { ApiProperty } from '@nestjs/swagger';
 export class MessageDto {
   @ApiProperty({ example: 'test Message', description: 'test' })
   content: string;
-  @ApiProperty({ example: 1, description: 'test' })
-  authorId: number;
+  @ApiProperty({ example: 'id', description: 'test' })
+  authorId: string;
 }

backend/src/post-message/post-message.service.spec.ts

@@ -5,25 +5,28 @@ import { PrismaService } from '../prisma/prisma.service';
 import { PostMessageService } from './post-message.service';
 
 type Message = {
-  id: number;
+  id: string;
   createdAt: Date;
   updatedAt: Date;
   content: string;
-  authorId: number;
+  authorId: string;
 };
 const mockMsg: Message = {
-  id: 12,
+  id: '1',
   createdAt: new Date(),
   updatedAt: new Date(),
   content: 'nori',
-  authorId: 1,
+  authorId: '2',
 };
 
 const mockPrismaService = {
   message: {
     // PrismaService.createをmockMsgを返すだけの関数にした
     create: jest.fn().mockReturnValue(mockMsg),
   },
+  chatRoom: {
+    findUnique: jest.fn().mockReturnValue({ id: '1' }),
+  },
 };
 
 describe('PostMessageService', () => {

backend/src/post-message/post-message.service.ts

@@ -10,11 +10,15 @@ export class PostMessageService {
   constructor(private prisma: PrismaService) {}
 
   async postMessage(dto: MessageDto): Promise<Message> {
+    // TODO 消す。roomIdをベタ打ちしてたけど、idがランダムになるから,部屋名で検索してidを取得する
+    const room = await this.prisma.chatRoom.findUnique({
+      where: { roomName: 'hogeRoom' },
+    });
     const msg = await this.prisma.message.create({
       data: {
         userId: dto.authorId,
         content: dto.content,
-        chatRoomId: 1,
+        chatRoomId: room?.id || '',
       },
     });
     return msg;

backend/src/user/user.controller.ts

@@ -5,7 +5,7 @@ import { loginDto, signUpDto } from './dto/user.dto';
 import { UserService } from './user.service';
 // TODO front直したら消す
 type User = {
-  id: number;
+  id: string;
   createdAt: Date;
   updatedAt: Date;
   email: string;

frontend/src/features/chat/api/postMessage.ts

@@ -4,7 +4,7 @@ import { MessageDto } from '../types/MessageDto';
 
 import { BACKEND } from '../../../constants';
 
-export const postMessage = (authorId: number, msg: string) => {
+export const postMessage = (authorId: string, msg: string) => {
   const url = BACKEND + '/post-message';
 
   const msgDto: MessageDto = { content: msg, authorId: authorId };

frontend/src/features/chat/types/MessageDto.ts

@@ -2,7 +2,7 @@
 
 export type MessageDto = {
   content: string;
-  authorId: number;
+  authorId: string;
 };
 
 export type handleMessageDto = {

frontend/src/features/user/components/User.tsx

@@ -13,11 +13,7 @@ export const User = ({ children }: { children: ReactNode }) => {
 
   const UserInputArea = () => {
     if (userInfo) {
-      return (
-        <p>
-          id : {userInfo?.id}, name : {userInfo?.nickname}
-        </p>
-      );
+      return <p>name : {userInfo?.nickname}</p>;
     } else {
       return (
         <div style={{ margin: '10px auto 10px auto' }}>

frontend/src/features/user/types/UserDto.ts

@@ -10,6 +10,6 @@ export type LoginDto = {
 };
 
 export type UserInfo = {
-  id: number;
+  id: string;
   nickname: string;
 };