前提
現在漫画考察サイトを作成しています。
https://manga-kousatu-net-takoyan33.vercel.app/
github
https://github.com/takoyan33/manga-kousatu.net
実現したいこと
firestoreを使っていいね機能を実現したい
(likesというレコードを作り、そこを+1して更新する)
発生している問題・エラーメッセージ
成功時のalertは出るが、いいね数は更新できませんでした。
他の部分(名前)は更新できるのですが、いいねだけできてない状態です。
likesは初期値をゼロにしています。
解決法がわかる方がいれば教えて頂きたいです。
該当のソースコード
import React from "react";
import { useEffect, useState, useCallback } from "react";
import Link from "next/link";
import { app, database, storage } from "../../firebaseConfig";
import {
collection,
getDocs,
doc,
updateDoc,
deleteDoc,
} from "firebase/firestore";
import { useRouter } from "next/router";
import { getAuth, updateProfile, deleteUser } from "firebase/auth";
import { MuiNavbar } from "../../layouts/components/MuiNavbar";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import { postImage } from "../api/upload";
import Typography from "@mui/material/Typography";
import Grid from "@material-ui/core/Grid";
import Head from "next/head";
import Image from "react-image-resizer";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import Nameauth from "../api/auth/Nameauth";
export default function Profile() {
const [ID, setID] = useState(null);
const [title, setTitle] = useState<string>("");
const [context, setContext] = useState<string>("");
const [file, setFile] = useState("");
const [categori, setCategori] = useState<string>("");
const [photoURL, setPhotoURL] = useState<string>();
const [displayName, setDisplayName] = useState<string>("");
const [createtime, setCreatetime] = useState<string>("");
const [isUpdate, setIsUpdate] = useState<boolean>(false);
const databaseRef = collection(database, "CRUD DATA");
//データベースを取得
const [createObjectURL, setCreateObjectURL] = useState(null);
const [firedata, setFiredata] = useState([]);
const [downloadURL, setDownloadURL] = useState<string>(null);
const [likecount, setLikecount] = useState(0);
const [image, setImage] = useState("");
const [result, setResult] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [userid, setUserid] = useState<string>(null);
const [netabare, setNetabare] = useState<string>("");
const [opentext, setOpentext] = useState<boolean>(false);
const styles = { whiteSpace: "pre-line" };
let router = useRouter();
const auth = getAuth();
const user = auth.currentUser;
useEffect(() => {
let token = sessionStorage.getItem("Token");
if (!token) {
router.push("/register");
} else {
getData();
}
}, []);
const getData = async () => {
//firestoreからデータ取得
await getDocs(databaseRef).then((response) => {
//コレクションのドキュメントを取得
setFiredata(
response.docs.map((data) => {
//配列なので、mapで展開する
return { ...data.data(), id: data.id };
//スプレッド構文で展開して、新しい配列を作成
})
);
});
};
const getID = (
//セットする
id,
title,
context,
downloadURL,
categori,
cratetime,
displayname,
createtime,
likes
) => {
setID(id);
setContext(context);
setTitle(title);
setDownloadURL(downloadURL);
setIsUpdate(true);
setCategori(categori);
setCreatetime(cratetime);
setDisplayName(displayname);
setLikecount(likes);
};
const deleteuser = async () => {
//userを削除する
if (user) {
deleteUser(user)
//user削除
.then(() => {
sessionStorage.removeItem("Token");
//tokenを削除
alert("退会しました。TOP画面に戻ります。");
router.push("/");
})
.catch((error) => {
console.log(error);
});
}
};
const handleClick = (id, likes) => {
setLikecount(likes + 1);
console.log(likecount);
let fieldToEdit = doc(database, "CRUD DATA", id);
updateDoc(fieldToEdit, {
likes: likecount,
})
.then(() => {
alert("いいねしました");
setLikecount(0);
getData();
})
.catch((err) => {
alert("失敗しました");
console.log(err);
});
};
const updatefields = () => {
//更新する
let fieldToEdit = doc(database, "CRUD DATA", ID);
//セットしたIDをセットする
updateDoc(fieldToEdit, {
title: title,
context: context.replace(/\r?\n/g, "\n"),
//改行を保存する
})
.then(() => {
alert("記事を更新しました");
setContext("");
setTitle("");
setIsUpdate(false);
getData();
})
.catch((err) => {
console.log(err);
});
};
const deleteDocument = (id) => {
//data.idを送っているのでidを受け取る
let fieldToEdit = doc(database, "CRUD DATA", id);
let checkSaveFlg = window.confirm("削除しても大丈夫ですか?");
//確認画面を出す
if (checkSaveFlg) {
deleteDoc(fieldToEdit)
//記事を削除する
.then(() => {
alert("記事を削除しました");
getData();
})
.catch((err) => {
alert("記事の削除に失敗しました");
});
} else {
router.push("/profile");
}
};
return (
<>
<Head>
<title>漫画考察.net</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<MuiNavbar />
<div className="max-w-7xl m-auto">
<h2 className="m-5 my-12 text-center text-2xl font-semibold">
プロフィール
</h2>
<p className="m-5">
ユーザー画像
{user && (
<Image
className="m-auto text-center max-w-sm"
height={100}
width={100}
src={user.photoURL}
/>
)}
</p>
<p className="m-5">名前: {user && <span>{user.displayName}</span>}</p>
<p className="m-5">
メールアドレス: {user && <span>{user.email}</span>}
</p>
<p className="m-5">過去の投稿</p>
<Grid container spacing={1}>
{firedata.map((data) => {
return (
<Grid key={data.id} className="flex m-auto">
{data.email == user.email && (
<Card className="lg:w-full w-4/5 my-4">
<p className="m-auto text-center">
<Image
className="m-auto text-center max-w-sm"
height={300}
width={300}
src={data.downloadURL}
/>
</p>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{data.title}
</Typography>
〜省略〜
いいね数:{data.likes}
<br></br>
<button
onClick={() => handleClick(data.id, data.likes)}
className=""
>
いいねする
</button>
</Typography>
</CardContent>
{user.email == data.email && (
<CardActions>
<Button
variant="outlined"
onClick={() =>
getID(
data.id,
data.categori,
data.createtime,
data.title,
data.downloadURL,
data.email,
data.displayname,
data.context,
data.likes
)
}
>
更新する
</Button>
<Button
variant="outlined"
key={data.id}
onClick={() => deleteDocument(data.id)}
>
削除する
</Button>
</CardActions>
)}
</Card>
)}
</Grid>
);
})}
</Grid>
<br></br>
<br></br>
{isUpdate && (
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "25ch" },
}}
noValidate
autoComplete="off"
>
<TextField
id="outlined-basic"
label="タイトル(最大20文字)"
variant="outlined"
type="text"
value={title}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setTitle(event.target.value)
}
/>
<br></br>
<TextField
label="内容(最大500文字)"
className="m-auto w-full"
id="filled-multiline-static"
multiline
rows={14}
type="text"
value={context}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setContext(event.target.value)
}
/>
<br></br>
<Button variant="outlined" onClick={updatefields}>
更新する
</Button>
<br></br>
</Box>
)}
</div>
</>
);
}