feat: add dev env

.env.local.example

@@ -1,11 +1,20 @@
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
-NEXT_PUBLIC_FIREBASE_API_KEY=""
-NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="xxx.firebaseapp.com"
-NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
-NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="xxx.appspot.com"
-NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=""
-NEXT_PUBLIC_FIREBASE_APP_ID=""
+# 本番
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=
 
-BASIC_AUTH_USERNAME=""
-BASIC_AUTH_PASSWORD=""
+# 開発
+NEXT_PUBLIC_DEV_FIREBASE_API_KEY=
+NEXT_PUBLIC_DEV_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_DEV_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_DEV_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_DEV_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_DEV_FIREBASE_APP_ID=
+
+BASIC_AUTH_USERNAME=
+BASIC_AUTH_PASSWORD=

src/app/ProdUserList.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import { prodDb } from "@/lib/firebase"
+
+import UserList from "./components/UserList"
+
+export const ProdUserList = () => {
+  return <UserList db={prodDb} />
+}

src/app/components/UserList.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import {
+  Firestore,
   addDoc,
   collection,
   deleteDoc,
@@ -13,9 +14,7 @@ import {
 import React, { useEffect, useState } from "react"
 import { MdOutlineLocalCafe } from "react-icons/md"
 import { fakerJA as faker } from "@faker-js/faker"
-import { nanoid } from "nanoid"
-
-import { db } from "@/lib/firebase"
+import { customAlphabet, nanoid } from "nanoid"
 
 type User = {
   id: string
@@ -32,12 +31,17 @@ type User = {
   homepageLink: string
 }
 
-const UserList = () => {
+type UserListProps = {
+  db: Firestore
+}
+
+const UserList = ({ db }: UserListProps) => {
   const [users, setUsers] = useState<User[]>([])
 
   useEffect(() => {
     const unsubscribe = onSnapshot(collection(db, "users"), (querySnapshot) => {
       querySnapshot.docChanges().forEach((change) => {
+        console.log(change)
         if (change.type === "added") {
           const data = change.doc.data()
           setUsers((users) => [...users, { id: change.doc.id, ...data } as User])
@@ -55,15 +59,17 @@ const UserList = () => {
     })
 
     return () => unsubscribe()
-  }, [])
+  }, [db])
 
   const kanpai = async (meId: string, targetId: string) => {
-    console.log(meId, targetId)
     const cheerUserIds = users.find((user) => user.id === meId)?.cheerUserIds ?? []
-    console.log(db, cheerUserIds, targetId)
+    const targetUser = users.find((user) => user.id === targetId)
+    if (targetUser == null) {
+      return
+    }
     await updateDoc(doc(db, "users", meId), {
-      cheerUserIds: [...cheerUserIds, targetId],
-      lastCheersUserId: targetId,
+      cheerUserIds: [...cheerUserIds, targetUser.bleUserId],
+      lastCheersUserId: targetUser.bleUserId,
     })
     await addDoc(collection(db, "cheers"), {
       fromUserId: meId,
@@ -118,7 +124,7 @@ const UserList = () => {
   }
 
   const [userId, setUserId] = useState("")
-  const [bleUserId, setBleUserId] = useState("ABCDEF")
+  // const [bleUserId, setBleUserId] = useState("ABCDEF")
   const [name, setName] = useState("ななし")
   const [location, setLocation] = useState("関東")
   const [profileImageUrl, setProfileImageUrl] = useState(
@@ -131,6 +137,7 @@ const UserList = () => {
 
   const createUser = async () => {
     const docId = userId === "" ? nanoid() : userId
+    const bleUserId = customAlphabet("1234567890ABCDEF")(6)
     await setDoc(doc(db, "users", docId), {
       id: docId,
       bleUserId,

src/app/dev/DevUserList.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import { devDb } from "@/lib/firebase/dev"
+
+import UserList from "../components/UserList"
+
+export const DevUserList = () => {
+  return <UserList db={devDb} />
+}

src/app/dev/page.tsx

@@ -0,0 +1,18 @@
+import { DevUserList } from "./DevUserList"
+
+const Dev = () => {
+  return (
+    <main>
+      <div className="m-4">
+        <DevUserList />
+      </div>
+    </main>
+  )
+}
+
+export default Dev
+
+export const metadata = {
+  title: "Kanpai! Debugger",
+  description: "Kanpai! Debugger",
+}

src/app/page.tsx

@@ -1,10 +1,10 @@
-import UserList from "./components/UserList"
+import { ProdUserList } from "./ProdUserList"
 
 const Index = () => {
   return (
     <main>
       <div className="m-4">
-        <UserList />
+        <ProdUserList />
       </div>
     </main>
   )

src/lib/firebase/config.ts

@@ -0,0 +1,17 @@
+export const prodConfig = {
+  apiKey: process.env["NEXT_PUBLIC_FIREBASE_API_KEY"],
+  authDomain: process.env["NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN"],
+  projectId: process.env["NEXT_PUBLIC_FIREBASE_PROJECT_ID"],
+  storageBucket: process.env["NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET"],
+  messagingSenderId: process.env["NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID"],
+  appId: process.env["NEXT_PUBLIC_FIREBASE_APP_ID"],
+}
+
+export const devConfig = {
+  apiKey: process.env["NEXT_PUBLIC_FDEV_IREBASE_API_KEY"],
+  authDomain: process.env["NEXT_PUBLIC_DEV_FIREBASE_AUTH_DOMAIN"],
+  projectId: process.env["NEXT_PUBLIC_DEV_FIREBASE_PROJECT_ID"],
+  storageBucket: process.env["NEXT_PUBLIC_DEV_FIREBASE_STORAGE_BUCKET"],
+  messagingSenderId: process.env["NEXT_PUBLIC_DEV_FIREBASE_MESSAGING_SENDER_ID"],
+  appId: process.env["NEXT_PUBLIC_DEV_FIREBASE_APP_ID"],
+}

src/lib/firebase/dev.ts

@@ -0,0 +1,8 @@
+import { initializeApp } from "firebase/app"
+import { getFirestore } from "firebase/firestore"
+
+import { devConfig } from "./config"
+
+export const devApp = initializeApp(devConfig)
+
+export const devDb = getFirestore(devApp)

src/lib/firebase/index.ts

@@ -1,15 +1,8 @@
 import { initializeApp } from "firebase/app"
 import { getFirestore } from "firebase/firestore"
 
-const firebaseConfig = {
-  apiKey: process.env["NEXT_PUBLIC_FIREBASE_API_KEY"],
-  authDomain: process.env["NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN"],
-  projectId: process.env["NEXT_PUBLIC_FIREBASE_PROJECT_ID"],
-  storageBucket: process.env["NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET"],
-  messagingSenderId: process.env["NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID"],
-  appId: process.env["NEXT_PUBLIC_FIREBASE_APP_ID"],
-}
+import { prodConfig } from "./config"
 
-export const app = initializeApp(firebaseConfig)
+export const prodApp = initializeApp(prodConfig)
 
-export const db = getFirestore(app)
+export const prodDb = getFirestore(prodApp)