検索で1文字入力してからユーザを表示 (#706)

Author: nakaterm

web/app/chat/components/RoomList.tsx

@@ -3,6 +3,7 @@
 import { Box, List, Typography } from "@mui/material";
 import type { RoomOverview } from "common/types";
 import { useRouter, useSearchParams } from "next/navigation";
+import BackgroundText from "~/components/common/BackgroundText";
 import { HumanListItem } from "~/components/human/humanListItem";
 import RoomPage from "./RoomPage";
 
@@ -23,93 +24,85 @@ export function RoomList(props: RoomListProps) {
   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
+        <>
+          {roomsData && roomsData.length === 0 ? (
+            <BackgroundText text="まだ誰ともマッチングしていません。リクエストを送りましょう！" />
+          ) : (
+            <List>
+              {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}
-                      id={room.friendId}
-                      name={room.name}
-                      pictureUrl={room.thumbnail}
-                      rollUpName={true}
-                      lastMessage={room.lastMsg?.content}
-                      statusMessage="リクエストを受けました"
-                      unreadCount={room.unreadMessages}
-                    />
-                  </Box>
-                );
-              }
-              if (room.matchingStatus === "myRequest") {
+                      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 (
-                  <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>
+                  <Typography key={room.roomId} variant="body2" sx={{ mb: 1 }}>
+                    グループチャット: {room.name}
+                  </Typography>
                 );
-              }
-              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>
+              })}
+            </List>
+          )}
+        </>
       ) : (
         <RoomPage id={Number.parseInt(friendId)} />
       )}

web/app/friends/page.tsx

@@ -15,7 +15,7 @@ export default function Friends() {
   const [activeTab, setActiveTab] = useState("matching");
 
   return (
-    <div className="relative w-full">
+    <div className="relative h-full w-full">
       <div className="fixed top-12 flex h-10 w-full border-gray-200 border-b bg-white">
         <button
           type="button"
@@ -43,7 +43,7 @@ export default function Friends() {
         </button>
       </div>
 
-      <div className="pt-10 text-center text-gray-700 text-lg">
+      <div className="h-full pt-10 text-center text-gray-700 text-lg">
         {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
       </div>
     </div>

web/app/home/components/NoMoreUser.tsx

@@ -15,7 +15,7 @@ import { useAboutMe, useRecommended } from "~/api/user";
 import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
-import NoMoreUser from "./components/NoMoreUser";
+import BackgroundText from "../../components/common/BackgroundText";
 import PersonDetailedMenu from "./components/PersonDetailedMenu";
 import RoundButton from "./components/RoundButton";
 
@@ -121,7 +121,7 @@ export default function Home() {
     return <FullScreenCircularProgress />;
   }
   if (recommended.size() === 0 && loading === false) {
-    return <NoMoreUser />;
+    return <BackgroundText text="「いいね！」を送るユーザーがいません。" />;
   }
   if (error) throw error;
 

web/app/home/page.tsx

@@ -6,6 +6,7 @@ import { useAll, useMatched, useMyID, usePendingFromMe } from "~/api/user";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import Search from "~/components/search/search";
 import Table from "~/components/search/table";
+import BackgroundText from "../../components/common/BackgroundText";
 
 export default function SearchPage({
   searchParams,
@@ -54,14 +55,17 @@ export default function SearchPage({
   );
 
   return (
-    <div className="flex justify-center">
-      <div className="w-full">
-        <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
-        <Search placeholder="検索" setSearchString={setQuery} />
-        {users ? (
-          <Table users={users} canRequest={canRequest} />
+    <div className="flex h-full flex-col justify-center gap-2 p-4">
+      <Search placeholder="検索" setSearchString={setQuery} />
+      <div className="flex-1">
+        {query !== "" ? (
+          users.length > 0 ? (
+            <Table users={users} canRequest={canRequest} />
+          ) : (
+            <BackgroundText text="ユーザが見つかりません" />
+          )
         ) : (
-          <span>ユーザーが見つかりません</span>
+          <BackgroundText text="ユーザ名・授業名・タグ名で検索してみましょう" />
         )}
       </div>
     </div>

web/app/search/page.tsx

@@ -0,0 +1,7 @@
+export default function BackgroundText({ text }: { text: string }) {
+  return (
+    <div className="flex h-full items-center justify-center px-4 text-center">
+      <p className="text-2xl text-gray-500">{text}</p>
+    </div>
+  );
+}

web/components/common/BackgroundText.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { deleteMatch } from "~/api/match";
 import { useMatched } from "~/api/user";
+import BackgroundText from "../common/BackgroundText";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
 import { useModal } from "../common/modal/ModalProvider";
 import { HumanListItem } from "../human/humanListItem";
@@ -15,16 +16,14 @@ export default function Matchings() {
   if (error) throw error;
 
   return (
-    <div>
+    <div className="h-full">
       {data && data.length === 0 && (
-        <p className="p-4 text-lg">
-          誰ともマッチングしていません。 リクエストを送りましょう！
-        </p>
+        <BackgroundText text="まだ誰ともマッチングしていません。リクエストを送りましょう！" />
       )}
       {current === "loading" ? (
         <FullScreenCircularProgress />
       ) : (
-        <ul className="mt-4 space-y-4">
+        <ul className="space-y-4">
           {data?.map((matchedUser) =>
             matchedUser.id === 0 ? (
               //メモ帳

web/components/match/matching.tsx

@@ -21,19 +21,17 @@ export default function Search({ placeholder, setSearchString }: Props) {
   }
 
   return (
-    <div className="relative mr-5 ml-5 flex flex-1 flex-shrink-0">
-      <label htmlFor="search" className="sr-only">
-        Search
-      </label>
+    <label className="input input-bordered flex items-center gap-2">
+      <MdOutlineSearch className="text-gray-500" />
       <input
-        className=" block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-none placeholder:text-gray-500 focus:border-primary focus:ring-1 focus:ring-primary"
+        type="text"
+        className="grow"
         placeholder={placeholder}
         onChange={(e) => {
           handleSearch(e.target.value);
         }}
         defaultValue={searchParams.get("query")?.toString()}
       />
-      <MdOutlineSearch className="-translate-y-1/2 absolute top-1/2 left-3 h-[18px] w-[18px] text-gray-500 peer-focus:text-gray-900" />
-    </div>
+    </label>
   );
 }