Merge branch 'main' into search

Author: RRRyoma

web/app/chat/page.tsx

@@ -8,6 +8,14 @@ import RoomList from "~/components/chat/RoomList";
 import { RoomWindow } from "~/components/chat/RoomWindow";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 
+export default function Chat() {
+  return (
+    <Suspense fallback={<FullScreenCircularProgress />}>
+      <ChatListContent />
+    </Suspense>
+  );
+}
+
 function ChatListContent() {
   const searchParams = useSearchParams();
 
@@ -28,11 +36,3 @@ function ChatListContent() {
     <RoomList roomsData={state.data} />
   );
 }
-
-export default function Chat() {
-  return (
-    <Suspense fallback={<FullScreenCircularProgress />}>
-      <ChatListContent />
-    </Suspense>
-  );
-}

web/components/BottomBar.tsx

@@ -1,98 +1,67 @@
-import ChatIcon from "@mui/icons-material/Chat";
-import HomeIcon from "@mui/icons-material/Home";
-import PeopleIcon from "@mui/icons-material/People";
-import SearchIcon from "@mui/icons-material/Search";
-import SettingsIcon from "@mui/icons-material/Settings";
-import { BottomNavigation, BottomNavigationAction, Box } from "@mui/material";
 import Link from "next/link";
+import { MdHome } from "react-icons/md";
+import { MdPeople } from "react-icons/md";
+import { MdChat } from "react-icons/md";
+import { MdSettings } from "react-icons/md";
 
 type Props = {
   activeTab: "0_home" | "1_friends" | "2_chat" | "3_settings" | "4_search";
 };
 
+function BottomBarCell({
+  label,
+  href,
+  iconComponent,
+  isActive,
+}: {
+  label: string;
+  href: string;
+  iconComponent: React.ReactNode;
+  isActive: boolean;
+}) {
+  return (
+    <Link
+      href={href}
+      className={`focus:bg-gray-300 ${isActive ? "active text-primary" : "text-secondary"}`}
+    >
+      {iconComponent}
+      <span
+        className={`text-xs ${isActive ? "text-primary" : "text-gray-500"}`}
+      >
+        {label}
+      </span>
+    </Link>
+  );
+}
+
 export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
-    <Box sx={{ position: "fixed", bottom: 0, left: 0, right: 0 }}>
-      {/* TODO: 単に Viewer として BottomNavigation を使用しているので Box 等で置き換える */}
-      <BottomNavigation
-        showLabels
-        value={activeTab}
-        sx={{
-          width: "100%",
-          bottom: 0,
-          borderTop: "1px solid",
-          borderColor: "primary.main",
-        }}
-      >
-        <BottomNavigationAction
-          component={Link}
-          href="/home"
-          label="Home"
-          icon={
-            <HomeIcon
-              sx={{
-                color:
-                  activeTab === "0_home" ? "primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/friends"
-          label="Friends"
-          icon={
-            <PeopleIcon
-              sx={{
-                color:
-                  activeTab === "1_friends" ? "primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/chat"
-          label="Chat"
-          icon={
-            <ChatIcon
-              sx={{
-                color:
-                  activeTab === "2_chat" ? "#primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/settings"
-          label="Settings"
-          icon={
-            <SettingsIcon
-              sx={{
-                color:
-                  activeTab === "3_settings"
-                    ? "primary.main"
-                    : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/search"
-          label="Search"
-          icon={
-            <SearchIcon
-              sx={{
-                color:
-                  activeTab === "4_search" ? "primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-      </BottomNavigation>
-    </Box>
+    <div className="btm-nav flex max-h-14 w-full flex-row">
+      <BottomBarCell
+        label="Home"
+        href="/home"
+        isActive={activeTab === "0_home"}
+        iconComponent={<MdHome className="text-2xl" />}
+      />
+      <BottomBarCell
+        label="Friends"
+        href="/friends"
+        isActive={activeTab === "1_friends"}
+        iconComponent={<MdPeople className="text-2xl" />}
+      />
+      <BottomBarCell
+        label="Chat"
+        href="/chat"
+        isActive={activeTab === "2_chat"}
+        iconComponent={<MdChat className="text-2xl" />}
+      />
+      <BottomBarCell
+        label="Settings"
+        href="/settings"
+        isActive={activeTab === "3_settings"}
+        iconComponent={<MdSettings className="text-2xl" />}
+      />
+    </div>
   );
 }

web/firebase/auth/lib.ts

@@ -5,25 +5,19 @@ import { app } from "../config";
 
 export class ErrUnauthorized extends Error {}
 
-let user: User;
-let token: string;
-
 const auth = getAuth(app);
-onAuthStateChanged(auth, async (u: User | null) => {
-  if (u != null) {
-    user = u;
-    token = await user.getIdToken();
-  }
-});
 
-async function refreshToken() {
-  token = await user.getIdToken(true);
-}
+// 認証状態の完了を待機するためのPromiseを作成
+const token = new Promise<string>((resolve) => {
+  onAuthStateChanged(auth, async (u: User | null) => {
+    if (u != null) {
+      resolve(await u.getIdToken());
+    }
+  });
+});
 
 export async function getIdToken(): Promise<IDToken> {
-  if (token) return token;
-  await refreshToken();
-  return token;
+  return await token;
 }
 
 type RequestMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
@@ -39,19 +33,19 @@ export async function credFetch(
   path: string,
   body?: unknown,
 ): Promise<Response> {
-  const idToken = await getIdToken();
+  let idToken = await getIdToken();
   const init: RequestInit = { method };
   if (body) {
     init.body = JSON.stringify(body);
     init.headers = {
       "Content-Type": "application/json",
     };
   }
-
   let res = await fetch(`${path}?token=${idToken}`, init);
+
   if (res.status === 401) {
-    await refreshToken();
-    res = await fetch(`${path}?token=${idToken}`);
+    idToken = await getIdToken();
+    res = await fetch(`${path}?token=${idToken}`, init);
   }
 
   return res;