auth, trips and join trips

2026-04-16 14:51:54 +07:00
parent de0d1c5413
commit 237caad488
49 changed files with 11343 additions and 334 deletions
@@ -0,0 +1,110 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { joinTripAction, cancelJoinAction } from "@/features/trip/actions";
+
+interface JoinTripButtonProps {
+  tripId: string;
+  isLoggedIn: boolean;
+  isOrganizer: boolean;
+  isJoined: boolean;
+  isFull: boolean;
+  tripStatus: string;
+}
+
+export function JoinTripButton({
+  tripId,
+  isLoggedIn,
+  isOrganizer,
+  isJoined,
+  isFull,
+  tripStatus,
+}: JoinTripButtonProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  if (!isLoggedIn) {
+    return (
+      <Link
+        href="/login"
+        className="block w-full rounded-xl bg-primary-600 py-3 text-center text-sm font-bold text-white shadow-lg shadow-primary-600/20 hover:bg-primary-700"
+      >
+        Login untuk Join Trip
+      </Link>
+    );
+  }
+
+  if (isOrganizer) {
+    return (
+      <div className="rounded-xl bg-secondary-50 py-3 text-center text-sm font-medium text-secondary-700">
+        Kamu adalah organizer trip ini
+      </div>
+    );
+  }
+
+  if (tripStatus !== "OPEN" && !isJoined) {
+    return (
+      <div className="rounded-xl bg-neutral-100 py-3 text-center text-sm font-medium text-neutral-500">
+        Trip tidak tersedia untuk pendaftaran
+      </div>
+    );
+  }
+
+  async function handleJoin() {
+    setLoading(true);
+    setError("");
+    const result = await joinTripAction(tripId);
+    setLoading(false);
+    if (result.error) {
+      setError(result.error);
+    } else {
+      router.refresh();
+    }
+  }
+
+  async function handleCancel() {
+    setLoading(true);
+    setError("");
+    const result = await cancelJoinAction(tripId);
+    setLoading(false);
+    if (result.error) {
+      setError(result.error);
+    } else {
+      router.refresh();
+    }
+  }
+
+  return (
+    <div>
+      {error && (
+        <div className="mb-3 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
+          {error}
+        </div>
+      )}
+      {isJoined ? (
+        <button
+          onClick={handleCancel}
+          disabled={loading}
+          className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
+        >
+          {loading ? "Memproses..." : "Batal Ikut"}
+        </button>
+      ) : (
+        <button
+          onClick={handleJoin}
+          disabled={loading || isFull}
+          className="w-full rounded-xl bg-primary-600 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:opacity-50"
+        >
+          {loading
+            ? "Memproses..."
+            : isFull
+            ? "Trip Sudah Penuh"
+            : "Join Trip Sekarang"}
+        </button>
+      )}
+    </div>
+  );
+}