JavaScript
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> </> );}
0 コメント