From 8340083971568d76eeac4c35568567d4d74c8eb1 Mon Sep 17 00:00:00 2001
From: imamiya-masaki <imamiyagit@gmail.com>
Date: Sat, 7 Dec 2024 20:59:37 +0900
Subject: [PATCH 1/2] fix evaluate

---
 .../app/routes/client._index/driving-state/arrived.tsx    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/app/routes/client._index/driving-state/arrived.tsx b/frontend/app/routes/client._index/driving-state/arrived.tsx
index a39664cc..f88250d7 100644
--- a/frontend/app/routes/client._index/driving-state/arrived.tsx
+++ b/frontend/app/routes/client._index/driving-state/arrived.tsx
@@ -14,10 +14,15 @@ import confetti from "canvas-confetti";
 export const Arrived = ({ onEvaluated }: { onEvaluated: () => void }) => {
   const { data } = useClientContext();
   const [rating, setRating] = useState(0);
+  const [errorMessage, setErrorMessage] = useState<string>();
 
   const onClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     (e) => {
       e.preventDefault();
+      if (rating < 1 || rating > 5) {
+        setErrorMessage("評価は1から5の間でなければなりません。")
+        return;
+      }
       try {
         void fetchAppPostRideEvaluation({
           pathParams: {
@@ -50,6 +55,7 @@ export const Arrived = ({ onEvaluated }: { onEvaluated: () => void }) => {
   }, []);
 
   return (
+    <>
     <Form className="w-full h-full flex flex-col items-center justify-center max-w-md mx-auto">
       <div className="flex flex-col items-center gap-6 mb-14">
         <PinIcon className="size-[90px]" color={colors.red[500]} />
@@ -77,6 +83,8 @@ export const Arrived = ({ onEvaluated }: { onEvaluated: () => void }) => {
           評価して料金を支払う
         </Button>
       </div>
+      {errorMessage && <Text variant="danger" className="mt-2">{errorMessage}</Text>}
     </Form>
+    </>
   );
 };

From 874f12a96a61665a5420e58086ca0e1d97e83e35 Mon Sep 17 00:00:00 2001
From: imamiya-masaki <imamiyagit@gmail.com>
Date: Sat, 7 Dec 2024 21:02:05 +0900
Subject: [PATCH 2/2] fmt

---
 .../client._index/driving-state/arrived.tsx   | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/frontend/app/routes/client._index/driving-state/arrived.tsx b/frontend/app/routes/client._index/driving-state/arrived.tsx
index f88250d7..8d6a98e3 100644
--- a/frontend/app/routes/client._index/driving-state/arrived.tsx
+++ b/frontend/app/routes/client._index/driving-state/arrived.tsx
@@ -20,7 +20,7 @@ export const Arrived = ({ onEvaluated }: { onEvaluated: () => void }) => {
     (e) => {
       e.preventDefault();
       if (rating < 1 || rating > 5) {
-        setErrorMessage("評価は1から5の間でなければなりません。")
+        setErrorMessage("評価は1から5の間でなければなりません。");
         return;
       }
       try {
@@ -56,35 +56,39 @@ export const Arrived = ({ onEvaluated }: { onEvaluated: () => void }) => {
 
   return (
     <>
-    <Form className="w-full h-full flex flex-col items-center justify-center max-w-md mx-auto">
-      <div className="flex flex-col items-center gap-6 mb-14">
-        <PinIcon className="size-[90px]" color={colors.red[500]} />
-        <Text size="xl" bold>
-          目的地に到着しました
-        </Text>
-      </div>
-      <div className="flex flex-col items-center w-80">
-        <Text className="mb-4">今回のドライブはいかがでしたか？</Text>
-        <ClickableRating
-          name="rating"
-          rating={rating}
-          setRating={setRating}
-          className="mb-10"
-        />
-        {data?.fare && (
-          <Price pre="運賃" value={data.fare} className="mb-6"></Price>
+      <Form className="w-full h-full flex flex-col items-center justify-center max-w-md mx-auto">
+        <div className="flex flex-col items-center gap-6 mb-14">
+          <PinIcon className="size-[90px]" color={colors.red[500]} />
+          <Text size="xl" bold>
+            目的地に到着しました
+          </Text>
+        </div>
+        <div className="flex flex-col items-center w-80">
+          <Text className="mb-4">今回のドライブはいかがでしたか？</Text>
+          <ClickableRating
+            name="rating"
+            rating={rating}
+            setRating={setRating}
+            className="mb-10"
+          />
+          {data?.fare && (
+            <Price pre="運賃" value={data.fare} className="mb-6"></Price>
+          )}
+          <Button
+            variant="primary"
+            type="submit"
+            onClick={onClick}
+            className="w-full"
+          >
+            評価して料金を支払う
+          </Button>
+        </div>
+        {errorMessage && (
+          <Text variant="danger" className="mt-2">
+            {errorMessage}
+          </Text>
         )}
-        <Button
-          variant="primary"
-          type="submit"
-          onClick={onClick}
-          className="w-full"
-        >
-          評価して料金を支払う
-        </Button>
-      </div>
-      {errorMessage && <Text variant="danger" className="mt-2">{errorMessage}</Text>}
-    </Form>
+      </Form>
     </>
   );
 };