static generation

common/package.json

@@ -1,5 +1,7 @@
 {
   "name": "common",
+  "private": true,
+  "version": "1.0.0",
   "type": "module",
   "devDependencies": {
     "@types/bun": "latest"

package.json

@@ -1,5 +1,6 @@
 {
   "name": "course-mate",
+  "private": true,
   "version": "1.0.0",
   "author": "",
   "main": "index.js",

render.yaml

@@ -0,0 +1,33 @@
+# Exported from Render on 2025-02-15T11:38:48Z
+services:
+- type: web
+  name: CourseMate
+  runtime: static
+  repo: https://github.com/ut-code/CourseMate
+  branch: make-it-ssg
+  envVars:
+  - key: BUN_VERSION
+    sync: false # Render Dashboard https://render.com/docs/blueprint-spec#prompting-for-secret-values
+  - key: SKIP_INSTALL_DEPS
+    sync: false
+  - key: NEXT_PUBLIC_ALLOW_ANY_MAIL_ADDR
+    sync: false
+  - key: NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
+    sync: false
+  - key: NEXT_PUBLIC_FIREBASE_APP_ID
+    sync: false
+  - key: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
+    sync: false
+  - key: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
+    sync: false
+  - key: NEXT_PUBLIC_FIREBASE_PROJECT_ID
+    sync: false
+  - key: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
+    sync: false
+  - key: NEXT_PUBLIC_FIREBASE_API_KEY
+    sync: false
+  - key: NEXT_PUBLIC_API_ENDPOINT
+    sync: false
+  buildCommand: bun install --filter "web" && cd web && bun run build
+  staticPublishPath: web/out
+version: "1"

server/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "course-mate",
+  "name": "server",
+  "private": true,
   "version": "1.0.0",
   "description": "",
   "main": "src/index.ts",

web/components/chat/MessageInput.tsx → web/app/chat/components/MessageInput.tsx

@@ -1,5 +1,5 @@
 import ImageIcon from "@mui/icons-material/Image";
-import { sendImageTo } from "../../api/image";
+import { sendImageTo } from "~/api/image";
 
 import type { DMOverview, SendMessage, UserID } from "common/types";
 import { parseContent } from "common/zod/methods";

web/components/chat/RoomHeader.tsx → web/app/chat/components/RoomHeader.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { MdArrowBack } from "react-icons/md";
-import UserAvatar from "../human/avatar";
+import UserAvatar from "~/components/human/avatar";
 
 type Props = {
   room: {

web/app/chat/components/RoomList.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { Box, List, Typography } from "@mui/material";
+import type { RoomOverview } from "common/types";
+import { useRouter, useSearchParams } from "next/navigation";
+import { HumanListItem } from "~/components/human/humanListItem";
+import RoomPage from "./RoomPage";
+
+type RoomListProps = {
+  roomsData: RoomOverview[] | null;
+};
+
+export function RoomList(props: RoomListProps) {
+  const { roomsData } = props;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const friendId = searchParams.get("friendId");
+
+  const openRoom = (room: Extract<RoomOverview, { isDM: true }>) => {
+    router.push(`/chat?friendId=${room.friendId}`);
+  };
+
+  return (
+    <>
+      {!friendId ? (
+        <List disablePadding>
+          <p
+            style={{
+              marginLeft: "40px",
+              marginRight: "40px",
+            }}
+          >
+            {roomsData && roomsData.length === 0 && (
+              <>
+                誰ともマッチングしていません。
+                <br />
+                リクエストを送りましょう！
+              </>
+            )}
+          </p>
+          {roomsData?.map((room) => {
+            if (room.isDM) {
+              if (room.matchingStatus === "otherRequest") {
+                return (
+                  <Box
+                    key={room.friendId}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openRoom(room);
+                    }}
+                  >
+                    <HumanListItem
+                      key={room.friendId}
+                      id={room.friendId}
+                      name={room.name}
+                      pictureUrl={room.thumbnail}
+                      rollUpName={true}
+                      lastMessage={room.lastMsg?.content}
+                      statusMessage="リクエストを受けました"
+                      unreadCount={room.unreadMessages}
+                    />
+                  </Box>
+                );
+              }
+              if (room.matchingStatus === "myRequest") {
+                return (
+                  <Box
+                    key={room.friendId}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openRoom(room);
+                    }}
+                  >
+                    <HumanListItem
+                      key={room.friendId}
+                      id={room.friendId}
+                      name={room.name}
+                      pictureUrl={room.thumbnail}
+                      rollUpName={true}
+                      lastMessage={room.lastMsg?.content}
+                      statusMessage="リクエスト中 メッセージを送りましょう！"
+                      unreadCount={room.unreadMessages}
+                    />
+                  </Box>
+                );
+              }
+              return (
+                <Box
+                  key={room.friendId}
+                  onClick={() => {
+                    openRoom(room);
+                  }}
+                >
+                  <HumanListItem
+                    key={room.friendId}
+                    id={room.friendId}
+                    name={room.name}
+                    pictureUrl={room.thumbnail}
+                    rollUpName={true}
+                    lastMessage={room.lastMsg?.content}
+                    unreadCount={room.unreadMessages}
+                  />
+                </Box>
+              );
+            }
+            return (
+              <Typography key={room.roomId} variant="body2" sx={{ mb: 1 }}>
+                グループチャット: {room.name}
+              </Typography>
+            );
+          })}
+        </List>
+      ) : (
+        <RoomPage id={Number.parseInt(friendId)} />
+      )}
+    </>
+  );
+}
+
+export default RoomList;

web/app/chat/[id]/page.tsx → web/app/chat/components/RoomPage.tsx

@@ -3,11 +3,10 @@ import type { DMRoom, PersonalizedDMRoom } from "common/types";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import * as chat from "~/api/chat/chat";
-import { RoomWindow } from "~/components/chat/RoomWindow";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
+import { RoomWindow } from "./RoomWindow";
 
-export default function Page({ params }: { params: { id: string } }) {
-  const id = Number.parseInt(params.id);
+export default function RoomPage({ id }: { id: number }) {
   const [room, setRoom] = useState<(DMRoom & PersonalizedDMRoom) | null>(null);
   const [loading, setLoading] = useState(true);
 

web/components/chat/RoomWindow.tsx → web/app/chat/components/RoomWindow.tsx

@@ -8,8 +8,8 @@ import { useMessages } from "~/api/chat/hooks";
 import { API_ENDPOINT } from "~/api/internal/endpoints";
 import request from "~/api/request";
 import { useMyID } from "~/api/user";
-import { handlers } from "../SSEProvider";
-import Dots from "../common/Dots";
+import Dots from "~/components/common/Dots";
+import { handlers } from "../../../components/SSEProvider";
 import { MessageInput } from "./MessageInput";
 import { RoomHeader } from "./RoomHeader";
 

web/app/chat/page.tsx

@@ -1,16 +1,11 @@
 "use client";
 
-import { Suspense } from "react";
 import { useRoomsOverview } from "~/api/chat/hooks";
-import RoomList from "~/components/chat/RoomList";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
+import RoomList from "./components/RoomList";
 
 export default function Chat() {
-  return (
-    <Suspense fallback={<FullScreenCircularProgress />}>
-      <ChatListContent />
-    </Suspense>
-  );
+  return <ChatListContent />;
 }
 
 function ChatListContent() {

web/app/signup/steps/step3_confirmation.tsx

@@ -22,9 +22,9 @@ export default function Confirmation({
       <div className="px-8 py-2">
         <h1 className="mb-2 text-xl">確認(3/5)</h1>
         <p>以下の内容で登録する場合は「次へ」を押してください。</p>
-        <div className="p-6 space-y-10">
-          <div className="w-6/6 mx-auto">
-            <h3 className="text-xl font-bold mb-2">プロフィール画像</h3>
+        <div className="space-y-10 p-6">
+          <div className="mx-auto w-6/6">
+            <h3 className="mb-2 font-bold text-xl">プロフィール画像</h3>
             <div className="card bg-white p-6">
               <UserAvatar
                 pictureUrl={Step2Data.pictureUrl}
@@ -33,8 +33,8 @@ export default function Confirmation({
               />
             </div>
           </div>
-          <div className="w-6/6 mx-auto">
-            <h3 className="text-xl font-bold mb-2">基本情報</h3>
+          <div className="mx-auto w-6/6">
+            <h3 className="mb-2 font-bold text-xl">基本情報</h3>
             <div className="card bg-white p-6">
               <p>名前：　　{Step1Data.name}</p>
               <p>学年：　　{Step1Data.grade}</p>
@@ -44,8 +44,8 @@ export default function Confirmation({
               </p>
             </div>
           </div>
-          <div className="w-6/6 mx-auto">
-            <h3 className="text-xl font-bold mb-2">自己紹介</h3>
+          <div className="mx-auto w-6/6">
+            <h3 className="mb-2 font-bold text-xl">自己紹介</h3>
             <div className="card bg-white p-6">
               <p className="pt-2">{Step1Data.intro}</p>
             </div>