Message UI (#589)

# PRの概要
チャット画面の軽微な修正

## 具体的な変更内容
各メッセージの３点バーをメッセージの横に配置
メッセージ幅を画面の70%以内に制限
アルファベットのみの文でも文字が画面オーバーしないようにword-breakをbreak-allに変更

## 影響範囲
RoomWindowを使う範囲

## 動作要件

## 補足

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

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

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

---------

Co-authored-by: naka-12 <[email protected]>

Author: RRRyoma

web/api/user.ts

@@ -24,7 +24,10 @@ export function useAll(): Hook<UserWithCoursesAndSubjects[]> {
 }
 export function useRecommended(): UseHook<UserWithCoursesAndSubjects[]> {
   const url = endpoints.recommendedUsers;
-  return useAuthorizedData<UserWithCoursesAndSubjects[]>(url);
+  return useAuthorizedData<UserWithCoursesAndSubjects[]>(
+    url,
+    z.array(UserWithCoursesAndSubjectsSchema),
+  );
 }
 export function useMatched(): Hook<UserWithCoursesAndSubjects[]> {
   return useCustomizedSWR("users::matched", matched, UserListSchema);

web/components/chat/RoomWindow.tsx

@@ -215,11 +215,11 @@ export function RoomWindow(props: Props) {
                     </div>
                   ) : (
                     <div
-                      className={`rounded-xl p-2 shadow ${
+                      className={`rounded-xl p-2 flex max-w-[70vw] shadow ${
                         m.creator === myId ? "bg-secondary" : "bg-white"
                       }`}
                     >
-                      <p className="whitespace-pre-wrap break-words">
+                      <p className="whitespace-pre-wrap break-all">
                         {m.content}
                       </p>
                       {m.creator === myId && (

web/hooks/useData.ts

@@ -34,19 +34,24 @@ export default function useData<T>(url: string) {
   return { data, isLoading, error, reload };
 }
 
-async function safeReadData<T>(url: string): Promise<Result<T>> {
+async function safeReadData<T>(
+  url: string,
+  schema: Zod.Schema<T>,
+): Promise<Result<T>> {
   try {
     const res = await credFetch("GET", url);
-    const result = await res.json();
-    // TODO: zod
+    const data = await res.json();
+    const result = schema.parse(data);
     return Ok(result);
   } catch (e) {
+    console.error(`
+      safeReadData: Schema Parse Error | in incoming data | Error: ${e}`);
     return Err(e);
   }
 }
 
 // TODO: refactor this to look better.
-export function useAuthorizedData<T>(url: string) {
+export function useAuthorizedData<T>(url: string, schema: Zod.Schema<T>) {
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
@@ -55,7 +60,7 @@ export function useAuthorizedData<T>(url: string) {
     setLoading(true);
     setError(null);
 
-    const result = await safeReadData<T>(url);
+    const result = await safeReadData<T>(url, schema);
     if (result.ok) {
       setData(result.value);
       setLoading(false);
@@ -64,7 +69,7 @@ export function useAuthorizedData<T>(url: string) {
     setError(result.error as Error);
     setData(null);
     setLoading(false);
-  }, [url]);
+  }, [url, schema]);
 
   useEffect(() => {
     reload();