From 25546545d66c700bf0844c833c9cdd3eedfed6f2 Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Fri, 6 Dec 2024 15:41:17 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E7=9B=AE=E6=A8=99=E3=81=AB=E6=8A=95?= =?UTF-8?q?=E7=A8=BF=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?=E3=81=97=E3=81=A6=E5=AE=8C=E4=BA=86=E6=8A=95=E7=A8=BF=E3=82=92?= =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E3=81=97=E3=81=A6=E4=BD=9C=E6=88=90?= =?UTF-8?q?=E3=81=99=E3=82=8B=E6=A9=9F=E8=83=BD=E3=82=92=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/DashBoard/DashBoard.tsx | 6 +- src/Components/PostModal/PostModal.tsx | 186 +++++++++++++++++++++++++ src/Components/Progress/Progress.tsx | 2 + 3 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 src/Components/PostModal/PostModal.tsx diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx index 8cd14ee..a3fdf13 100644 --- a/src/Components/DashBoard/DashBoard.tsx +++ b/src/Components/DashBoard/DashBoard.tsx @@ -9,6 +9,7 @@ import styles from "./DashBoard.module.scss"; export default function DashBoard() { const [successResults, setSuccessResults] = useState([]); const [failedResults, setFailedResults] = useState([]); + const [pendingResults, setPendingResults] = useState([]); const [noResult, setNoResult] = useState(false); useEffect(() => { @@ -16,13 +17,15 @@ export default function DashBoard() { .then((data) => { if ( data.successResults.length === 0 && - data.failedResults.length === 0 + data.failedResults.length === 0 && + data.pendingResults.length === 0 ) { setNoResult(true); } else { console.log(data); setSuccessResults(data.successResults); setFailedResults(data.failedResults); + setPendingResults(data.pendingResults); } }) .catch((error) => { @@ -43,6 +46,7 @@ export default function DashBoard() { )} diff --git a/src/Components/PostModal/PostModal.tsx b/src/Components/PostModal/PostModal.tsx new file mode 100644 index 0000000..e77c5a4 --- /dev/null +++ b/src/Components/PostModal/PostModal.tsx @@ -0,0 +1,186 @@ +"use client"; +import { appCheckToken, functionsEndpoint } from "@/app/firebase"; +import { Post } from "@/types/types"; +import { uploadImage } from "@/utils/Uploader"; +import { useUser } from "@/utils/UserContext"; +import { Add } from "@mui/icons-material"; +import { + Button, + DialogContent, + DialogTitle, + Input, + Modal, + ModalDialog, + Stack, +} from "@mui/joy"; +import Box from "@mui/material/Box"; +import LinearProgress from "@mui/material/LinearProgress"; +import Typography from "@mui/material/Typography"; +import React, { ChangeEvent, useState } from "react"; + +export default function PostModal({ goalId }: { goalId: string }) { + const [open, setOpen] = useState(false); + const [text, setText] = useState(""); + const [image, setImage] = useState(null); + const [error, setError] = useState(""); + const [progress, setProgress] = useState(100); + const { user } = useUser(); + + const handleTextChange = (event: ChangeEvent) => { + setText(event.target.value); + }; + + const handleImageChange = (event: ChangeEvent) => { + const selectedFile = event.target.files?.[0]; + setImage(selectedFile || null); + setError(""); + }; + + const handleUpload = () => { + if (!image) { + setError("ファイルが選択されていません"); + return; + } + + uploadImage( + image, + (percent) => setProgress(percent), + (errorMsg) => setError(errorMsg), + async (url, hash) => { + console.log("Image is saved at:", url); + console.log("Generated storage path hash:", hash); + + const postData: Post = { + userId: user ? user.uid : "", + storedId: url, + text: text, + goalId: goalId, + submittedAt: new Date(), + }; + + try { + const response = await fetch(`${functionsEndpoint}/post/`, { + method: "POST", + headers: { + "X-Firebase-AppCheck": appCheckToken, + "Content-Type": "application/json", + }, + body: JSON.stringify(postData), + }); + + if (!response.ok) { + throw new Error("データの送信に失敗しました"); + } + + setProgress(100); // アップロード完了の進捗を表示 + const data = await response.json(); + console.log("Post created:", data); + + // 投稿作成後にモーダルを閉じる + setOpen(false); + setText(""); // 入力フィールドをリセット + setImage(null); // 画像をリセット + } catch (err) { + setError("データの送信に失敗しました"); + console.error(err); + } + } + ); + }; + + // 以下のJoy UIによるエラーを無効化 + try { + const consoleError = console.error; + console.error = (...args) => { + if (args[0]?.includes("Accessing element.ref was removed")) { + return; + } + consoleError(...args); + }; + } catch { + console.error("Failed to disable Joy UI error"); + } + + return ( + <> + + + setOpen(false)} + keepMounted + disablePortal + > + + 投稿を作成 + 投稿内容と画像を入力してください。 +
e.preventDefault()}> + + 投稿内容を入力 + {error && {error}} + + + {progress !== 100 && } + + + + + +
+ + + + ); +} + +interface LinearProgressWithLabelProps { + value: number; +} + +const LinearProgressWithLabel: React.FC = ({ + value, +}) => { + return ( + + + + + + {`${Math.round( + value + )}%`} + + + ); +}; diff --git a/src/Components/Progress/Progress.tsx b/src/Components/Progress/Progress.tsx index ef66fce..0222ce9 100644 --- a/src/Components/Progress/Progress.tsx +++ b/src/Components/Progress/Progress.tsx @@ -14,6 +14,7 @@ import Stepper from "@mui/joy/Stepper"; import Typography, { typographyClasses } from "@mui/joy/Typography"; import { Divider } from "@mui/material"; import { ReactNode, useEffect, useState } from "react"; +import PostModal from "../PostModal/PostModal"; interface ProgressProps { successResults?: SuccessResult[]; @@ -188,6 +189,7 @@ const pendingStep = (result: GoalWithId, userName: string) => { goalText={result.text} resultType="pending" /> + ); From 47577717c08457ba9c787bde0546afc37c8991c8 Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Fri, 6 Dec 2024 16:54:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fixup!=20=E7=9B=AE=E6=A8=99=E3=81=AB?= =?UTF-8?q?=E6=8A=95=E7=A8=BF=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0=E3=81=97=E3=81=A6=E5=AE=8C=E4=BA=86=E6=8A=95=E7=A8=BF?= =?UTF-8?q?=E3=82=92=E3=83=AA=E3=83=B3=E3=82=AF=E3=81=97=E3=81=A6=E4=BD=9C?= =?UTF-8?q?=E6=88=90=E3=81=99=E3=82=8B=E6=A9=9F=E8=83=BD=E3=82=92=E5=AE=9F?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/GoalModal/GoalModal.tsx | 4 +- src/Components/PostForm/PostForm.tsx | 129 ------------------------- src/Components/PostModal/PostModal.tsx | 23 ++--- src/app/page.tsx | 2 - 4 files changed, 11 insertions(+), 147 deletions(-) delete mode 100644 src/Components/PostForm/PostForm.tsx diff --git a/src/Components/GoalModal/GoalModal.tsx b/src/Components/GoalModal/GoalModal.tsx index 96bb4d4..44939af 100644 --- a/src/Components/GoalModal/GoalModal.tsx +++ b/src/Components/GoalModal/GoalModal.tsx @@ -24,7 +24,7 @@ export default function GoalModal() { event.preventDefault(); const postData: Goal = { - userId: user ? user.uid : "", + userId: user?.uid as string, text: text, deadline: new Date(dueDate), }; @@ -95,7 +95,7 @@ export default function GoalModal() { aria-describedby="create-goal-description" > 目標を作成 - 自分の目標を入力してください. + 目標を入力してください
(null); - const [imageUrl, setImageUrl] = useState(""); - const [text, setText] = useState(""); - const [error, setError] = useState(""); - const [progress, setProgress] = useState(100); - const { user } = useUser(); - - const handleImageChange = (event: ChangeEvent) => { - const selectedFile = event.target.files?.[0]; - setImage(selectedFile || null); - setError(""); - }; - - const handleTextChange = (event: ChangeEvent) => { - setText(event.target.value); - }; - - const handleUpload = () => { - if (!image) { - setError("ファイルが選択されていません"); - return; - } - - // アップロード開始 - uploadImage( - image, - (percent) => setProgress(percent), - (errorMsg) => setError(errorMsg), - async (url, hash) => { - setImageUrl(url); - console.log("Image is save at:", url); - console.log("Generated storage path hash:", hash); - - const postData: Post = { - userId: user ? user.uid : "", - storedId: url, // TODO: トークン管理ができるまではurlをそのまま管理 - text: text, - goalId: "temp", // TODO: 実際のgoalIdを入れる - submittedAt: new Date(), - }; - - try { - const response = await fetch(`${functionsEndpoint}/post/`, { - method: "POST", - headers: { - "X-Firebase-AppCheck": appCheckToken, - "Content-Type": "application/json", - }, - body: JSON.stringify(postData), - }); - - if (!response.ok) { - throw new Error("データの送信に失敗しました"); - } - - setProgress(100); // アップロード完了の進捗を表示 - const data = await response.json(); - console.log("Success:", data); - } catch (err) { - setError("データの送信に失敗しました"); - console.error(err); - } - } - ); - }; - - return ( -
- 投稿内容を入力 - {error && {error}} - - - - - - - - {progress !== 100 && } - - {imageUrl && ( - - アップロード完了: - - )} -
- ); -} - -interface LinearProgressWithLabelProps { - value: number; -} - -const LinearProgressWithLabel: React.FC = ({ - value, -}) => { - return ( - - - - - - {`${Math.round( - value - )}%`} - - - ); -}; diff --git a/src/Components/PostModal/PostModal.tsx b/src/Components/PostModal/PostModal.tsx index e77c5a4..47b748a 100644 --- a/src/Components/PostModal/PostModal.tsx +++ b/src/Components/PostModal/PostModal.tsx @@ -47,11 +47,8 @@ export default function PostModal({ goalId }: { goalId: string }) { (percent) => setProgress(percent), (errorMsg) => setError(errorMsg), async (url, hash) => { - console.log("Image is saved at:", url); - console.log("Generated storage path hash:", hash); - const postData: Post = { - userId: user ? user.uid : "", + userId: user?.uid as string, storedId: url, text: text, goalId: goalId, @@ -72,14 +69,13 @@ export default function PostModal({ goalId }: { goalId: string }) { throw new Error("データの送信に失敗しました"); } - setProgress(100); // アップロード完了の進捗を表示 + setProgress(100); const data = await response.json(); console.log("Post created:", data); - // 投稿作成後にモーダルを閉じる + setImage(null); + setText(""); setOpen(false); - setText(""); // 入力フィールドをリセット - setImage(null); // 画像をリセット } catch (err) { setError("データの送信に失敗しました"); console.error(err); @@ -110,7 +106,7 @@ export default function PostModal({ goalId }: { goalId: string }) { onClick={() => setOpen(true)} disabled={!user || user?.loginType === "Guest"} > - Create Post + 写真を撮って完了する - 投稿を作成 - 投稿内容と画像を入力してください。 + 完了投稿を作成 + 投稿コメントと画像を入れてください e.preventDefault()}> - 投稿内容を入力 {error && {error}} @@ -153,7 +148,7 @@ export default function PostModal({ goalId }: { goalId: string }) { disabled={!user || user?.loginType === "Guest"} onClick={handleUpload} > - Create Post + 投稿 diff --git a/src/app/page.tsx b/src/app/page.tsx index 0dc78a4..3f610a6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,6 @@ "use client"; import DashBoard from "@/Components/DashBoard/DashBoard"; import GoalModal from "@/Components/GoalModal/GoalModal"; -import PostForm from "@/Components/PostForm/PostForm"; import { requestPermission, revokePermission, @@ -12,7 +11,6 @@ export default function Top() { return ( <> -