From e1da2e7cbed5566327fc3aa1c15900ac7c6dfff8 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Sat, 16 Nov 2024 16:29:57 +0000 Subject: [PATCH 1/3] =?UTF-8?q?toast=E3=81=AB=E5=87=BA=E3=81=97=E3=81=A6?= =?UTF-8?q?=E3=81=84=E3=81=9F=E8=A1=A8=E7=A4=BA=E3=82=92=E3=83=80=E3=82=A4?= =?UTF-8?q?=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=AB=E5=8F=8E=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/app/camera/page.tsx | 13 +++++++------ app/src/components/view/PointDialog.tsx | 10 ++++++++-- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/app/src/app/camera/page.tsx b/app/src/app/camera/page.tsx index df48474..5e199b1 100644 --- a/app/src/app/camera/page.tsx +++ b/app/src/app/camera/page.tsx @@ -15,7 +15,6 @@ import { import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { Toaster } from "@/components/ui/sonner"; import { LoadingSpinner } from "@/components/view/LoadingSpinner"; import { PointDialog } from "@/components/view/PointDialog"; import { useOpenPointDialog, usePointDialog } from "@/lib/atom"; @@ -24,7 +23,6 @@ import imageCompression from "browser-image-compression"; import type React from "react"; import { useEffect, useRef, useState } from "react"; import { Camera, type CameraType } from "react-camera-pro"; -import { toast } from "sonner"; import AddImageIcon from "../../../public/icons/icon-add-image.svg"; import RotateCameraIcon from "../../../public/icons/icon-rotate-camera.svg"; import ShutterIcon from "../../../public/icons/icon-shutter.svg"; @@ -92,6 +90,7 @@ const CameraApp = () => { const [isPointDialogOpen, _] = usePointDialog(); const openDialog = useOpenPointDialog(); const [loginUser, setLoginUser] = useState(); + const [message, setMessage] = useState(""); useEffect(() => { const getDevices = async () => { @@ -232,7 +231,9 @@ const CameraApp = () => { const percentSimilarity = Math.floor(data.similarity * 100); - const message = `${data.text} 類似度 ${percentSimilarity}% スコア: ${data.score} ランキングから順位を確認しましょう!`; + setMessage( + `キャプション: ${data.text} \n類似度: ${percentSimilarity}% スコア: ${data.score} \nランキングから順位を確認しましょう!`, + ); const newAssignments = assignments.map((assignment) => { if (assignment.assignmentId === data.assignmentId) { assignment.isAnswered = true; @@ -250,7 +251,6 @@ const CameraApp = () => { openDialog(); } setIsUploading(false); - toast(message); setAssignments(newAssignments); if (newAssignments.every((assignment) => assignment.isAnswered)) { @@ -280,7 +280,9 @@ const CameraApp = () => { return ( <> - {isPointDialogOpen && } + {isPointDialogOpen && ( + + )} {isActive ? ( <>
@@ -386,7 +388,6 @@ const CameraApp = () => { ) : ( )} - ); }; diff --git a/app/src/components/view/PointDialog.tsx b/app/src/components/view/PointDialog.tsx index edecc93..c6f000d 100644 --- a/app/src/components/view/PointDialog.tsx +++ b/app/src/components/view/PointDialog.tsx @@ -40,7 +40,7 @@ export function PointDialog({ title: customTitle || "撮影に成功しました!", icon: Camera, iconColor: "text-green-500", - message: customMessage || "素晴らしい写真です!", + message: customMessage || "ポイントを獲得しました!", subMessage: customSubMessage || "ポイントを獲得しました!", }, ranking: { @@ -85,7 +85,13 @@ export function PointDialog({

{message}

-

{subMessage}

+
+ dangerouslySetInnerHTML={{ + __html: subMessage.replace(/\n/g, "
"), + }} + />