Merge pull request #775 from isucon/evaluate-fix

[FE] evaluated Validate
isucon · Dec 7, 2024 · e5e8565 · e5e8565
2 parents a3b0c8e + 874f12a
commit e5e8565
Showing 1 changed file with 39 additions and 27 deletions.
diff --git 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,33 +55,40 @@ 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>
-    </Form>
+      </Form>
+    </>
   );
 };