ベース
- ルールが初期設定では 読み書き権限がfalseになっておりエラーになる
"use client";
import React, { useEffect, useState } from "react";
import { auth, db } from "../../../../lib/firebase";
import { collection, addDoc, query, where, getDocs } from "firebase/firestore";
const Page = () => {
const [inputText, setInputText] = useState(""); // 入力されたテキストを保持するstate
const [memos, setMemos] = useState([]); // メモのリストを保持するstate
useEffect(() => {
const fetchMemos = async () => {
const user = auth.currentUser;
if (user) {
const userId = user.uid;
try {
const q = query(collection(db, "memos"), where("userId", "==", userId));
const querySnapshot = await getDocs(q);
const memosData = querySnapshot.docs.map((doc) => doc.data().title);
setMemos(memosData);
} catch (error) {
console.error("Error fetching memos: ", error);
}
}
};
fetchMemos();
}, []);
// フォームの送信時にメモを追加する関数
const handleSubmit = async (e) => {
e.preventDefault();
if (inputText.trim() !== "") {
const user = auth.currentUser;
if (user) {
const userId = user.uid;
const value = {
title: inputText,
userId: userId, // ユーザーIDを追加
};
try {
await addDoc(collection(db, "memos"), value); // Firestoreにメモを追加
setInputText(""); // 入力欄をクリア
console.log("Document successfully written!");
} catch (error) {
console.error("Error writing document: ", error);
}
}
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="入力してください"
className="border"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
/>
<button type="submit">追加</button>
</form>
<div>
<ul>
{memos.map((memo, index) => (
<li key={index}>{memo}</li>
))}
</ul>
</div>
</div>
);
};
export default Page;
- userId フィールド (string) を作り、そこに userUID を入れるようにする
- これにより auth との紐づけができる
← Go home