チャットでの画像のアップロード HELP(CSS): 画像が同一行に複数個表示される (#503)

<!--変更したい場合は、`/.github/pull_request_template.md` を修正して下さい。-->
# PRの概要
Chat で画像を送信できるように

## TODO
- 画像の縦横比が 1:1 でない場合画像が stretch するので、なんとかする
- 画像を同一行に複数表示しないようにする
- 画像を圧縮して送る

## 影響範囲

データベース

## 動作要件

データベースの更新

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->

## レビューリクエストを出す前にチェック！

- [x] 改めてセルフレビューしたか
- [ ] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [x] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: aster-void

Makefile

@@ -16,14 +16,17 @@ setup-ci:
 	make generate-sql
 
 sync: sync-server sync-web sync-root sync-common
-	bunx lefthook install || true
 	@echo '----------------------------------------------------------------------------------------------------------'
 	@echo '| Most work is done. now running prisma-generate-sql (which might fail if .env.dev is not set configured)|'
 	@echo '----------------------------------------------------------------------------------------------------------'
 	make generate-sql || true
 
 generate-sql:
-	@cd server; bun run prisma-generate-sql
+	@cd server; \
+		if command -v dotenv && command -v prisma; \
+		then dotenv -e .env.dev -- prisma generate --sql; \
+		else bunx dotenv -e .env.dev -- bunx prisma generate --sql; \
+		fi
 
 start: start-all # build -> serve
 build: build-server build-web
@@ -59,7 +62,7 @@ docker-watch:
 	docker compose up --build --watch
 
 seed:
-	cd server; bunx prisma db seed
+	cd server; if command -v prisma; then prisma db seed; else bunx prisma db seed; fi
 
 ## server/.envをDATABASE_URL=postgres://user:password@localhost:5432/databaseにしてから行う
 dev-db: export DATABASE_URL=$(LOCAL_DB)
@@ -79,12 +82,9 @@ dev-db:
 		sleep 1; \
 	done
 	@echo "PostgreSQL is ready. Running seed..."
-	@cd server; \
-		if command -v prisma; then\
-			prisma generate; prisma db push;\
-		else \
-			bunx prisma generate; bunx prisma db push;\
-		fi
+	@cd server; if command -v prisma; then \
+		prisma generate; prisma db push; else \
+		bunx prisma generate; bunx prisma db push; fi
 	@make seed
 	@echo "Seeding completed."
 

bun.lockb

@@ -126,6 +126,7 @@ export const MessageSchema = z.object({
   creator: UserIDSchema,
   createdAt: z.date(),
   content: ContentSchema,
+  isPicture: z.boolean(),
   edited: z.boolean(),
 });
 
@@ -172,6 +173,8 @@ export const PersonalizedDMRoomSchema = z.object({
   name: NameSchema,
   thumbnail: z.string(),
   matchingStatus: MatchingStatusSchema,
+  unreadMessages: z.number(),
+  friendId: z.number(),
 });
 
 export const SharedRoomSchema = z.object({

common/zod/schemas.ts

@@ -29,6 +29,7 @@
             openssl
             lefthook
             pkgs.prisma
+            dotenv-cli
           ] ++ [
             rust-pkgs
           ];

flake.nix

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepare": "lefthook install"
   },
   "keywords": [],
   "author": "",

package.json

@@ -7,8 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "bun --watch src/main.ts",
     "build": "tsc",
-    "serve": "bun target/main.js",
-    "prisma-generate-sql": "bunx dotenv -e .env.dev -- prisma generate --sql"
+    "serve": "bun target/main.js"
   },
   "prisma": {
     "seed": "bun src/seeds/seed-test.ts"

server/package.json

@@ -42,12 +42,17 @@ model User {
   interests      Interest[]
 }
 
-// プロフィールの画像。
 model Avatar {
   guid String @id
   data Bytes
 }
 
+model Picture {
+  hash     String @id
+  data     Bytes
+  key      String // password
+}
+
 model InterestSubject {
   id       Int        @id @default(autoincrement())
   name     String
@@ -122,8 +127,6 @@ enum MatchingStatus {
   REJECTED
 }
 
-// TODO: lazy load MessageLog s.t. it doesn't need to be loaded on Overview query.
-// https://www.prisma.io/docs/orm/prisma-client/queries/select-fields
 model SharedRoom {
   id        Int       @id @default(autoincrement())
   thumbnail String // URL to thumbnail picture
@@ -134,10 +137,11 @@ model SharedRoom {
 
 model Message {
   id           Int           @id @default(autoincrement())
-  creator      Int // refers to UserId
+  creator      Int           // refers to UserId
   createdAt    DateTime      @default(now()) // @readonly
   edited       Boolean       @default(false)
   content      String
+  isPicture    Boolean       // iff the message is a picture. if true, then content is a url of picture.
   read         Boolean       @default(false)
   relation     Relationship? @relation(fields: [relationId], references: [id], onDelete: Cascade)
   relationId   Int?

server/prisma/schema.prisma

@@ -151,13 +151,14 @@ export async function markAsRead(
  **/
 export async function sendDM(
   relation: RelationshipID,
-  content: Omit<Message, "id">,
+  content: Omit<Omit<Message, "id">, "isPicture">,
 ): Promise<Result<Message>> {
   try {
     const message = await prisma.message.create({
       data: {
         // isPicture: false, // todo: bring it back
         relationId: relation,
+        isPicture: false,
         read: false,
         ...content,
       },
@@ -167,6 +168,26 @@ export async function sendDM(
     return Err(e);
   }
 }
+/**
+this doesn't create the image. use uploadPic in database/picture.ts to create the image.
+**/
+export async function createImageMessage(
+  sender: UserID,
+  relation: RelationshipID,
+  url: string,
+) {
+  return prisma.message
+    .create({
+      data: {
+        creator: sender,
+        relationId: relation,
+        content: url,
+        isPicture: true,
+      },
+    })
+    .then((val) => Ok(val))
+    .catch((err) => Err(err));
+}
 
 export async function createSharedRoom(
   room: InitRoom,

server/src/database/chat.ts

@@ -2,22 +2,54 @@ import { Err, Ok, type Result } from "common/lib/result";
 import type { GUID } from "common/types";
 import { prisma } from "./client";
 
+/**
+ * @returns URL of the uploaded file.
+ * @throws on database conn fail.
+ **/
+export async function uploadPic(
+  hash: string,
+  buf: Buffer,
+  passkey: string,
+): Promise<string> {
+  await prisma.picture.upsert({
+    where: { hash },
+    create: { hash, data: buf, key: passkey },
+    update: { data: buf, key: passkey },
+  });
+  const url = `/picture/${hash}?key=${passkey}`;
+  return url;
+}
+
+export async function getPic(hash: string, passkey: string) {
+  return prisma.picture
+    .findUnique({
+      where: {
+        hash,
+        key: passkey,
+      },
+    })
+    .then((val) => val?.data);
+}
+
 /**
  * is safe to await.
  * @returns URL of the file.
  **/
-export async function set(guid: GUID, buf: Buffer): Promise<Result<string>> {
+export async function setProf(
+  guid: GUID,
+  buf: Buffer,
+): Promise<Result<string>> {
   return prisma.avatar
     .upsert({
       where: {
-        guid: guid,
+        guid,
       },
       create: { guid, data: buf },
       update: { data: buf },
     })
     .then(() => {
       // ?update=${date} is necessary to let the browsers properly cache the image.
-      const pictureUrl = `/picture/${guid}?update=${new Date().getTime()}`;
+      const pictureUrl = `/picture/profile/${guid}?update=${new Date().getTime()}`;
       return Ok(pictureUrl);
     })
     .catch((err) => {
@@ -27,7 +59,7 @@ export async function set(guid: GUID, buf: Buffer): Promise<Result<string>> {
 }
 
 // is await-safe.
-export async function get(guid: GUID): Promise<Result<Buffer>> {
+export async function getProf(guid: GUID): Promise<Result<Buffer>> {
   return prisma.avatar
     .findUnique({
       where: { guid },

server/src/database/picture.ts

@@ -10,7 +10,7 @@ import type {
   ShareRoomID,
 } from "common/types";
 import * as db from "../database/chat";
-import { areAllMatched, areMatched, getRelation } from "../database/matches";
+import { areAllMatched, getRelation } from "../database/matches";
 import { getUserByID } from "../database/users";
 import * as http from "./share/http";
 
@@ -48,7 +48,7 @@ export async function sendDM(
     );
 
   // they are now MATCHED
-  const msg: Omit<Message, "id"> = {
+  const msg: Omit<Omit<Message, "id">, "isPicture"> = {
     creator: from,
     createdAt: new Date(),
     edited: false,
@@ -73,8 +73,14 @@ export async function getDM(
 
   const friendData = await getUserByID(friend);
   if (!friendData.ok) return http.notFound("friend not found");
+  const unreadCount = db.unreadMessages(user, rel.value.id).then((val) => {
+    if (val.ok) return val.value;
+    throw val.error;
+  });
 
   const personalized: PersonalizedDMRoom & DMRoom = {
+    unreadMessages: await unreadCount,
+    friendId: friendData.value.id,
     name: friendData.value.name,
     thumbnail: friendData.value.pictureUrl,
     matchingStatus: