auth, trips and join trips
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
"use server";
|
||||
|
||||
import { registerSchema } from "./schemas";
|
||||
import { authService } from "@/server/services/auth.service";
|
||||
|
||||
export async function registerAction(formData: FormData) {
|
||||
const raw = {
|
||||
name: formData.get("name") as string,
|
||||
email: formData.get("email") as string,
|
||||
password: formData.get("password") as string,
|
||||
confirmPassword: formData.get("confirmPassword") as string,
|
||||
};
|
||||
|
||||
const result = registerSchema.safeParse(raw);
|
||||
if (!result.success) {
|
||||
return { error: result.error.issues[0].message };
|
||||
}
|
||||
|
||||
try {
|
||||
await authService.register({
|
||||
name: result.data.name,
|
||||
email: result.data.email,
|
||||
password: result.data.password,
|
||||
});
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { z } from "zod/v4";
|
||||
|
||||
export const loginSchema = z.object({
|
||||
email: z.email("Email tidak valid"),
|
||||
password: z.string().min(6, "Password minimal 6 karakter"),
|
||||
});
|
||||
|
||||
export const registerSchema = z.object({
|
||||
name: z.string().min(2, "Nama minimal 2 karakter"),
|
||||
email: z.email("Email tidak valid"),
|
||||
password: z.string().min(6, "Password minimal 6 karakter"),
|
||||
confirmPassword: z.string(),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Password tidak cocok",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
export type LoginInput = z.infer<typeof loginSchema>;
|
||||
export type RegisterInput = z.infer<typeof registerSchema>;
|
||||
@@ -0,0 +1,72 @@
|
||||
"use server";
|
||||
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { createTripSchema } from "./schemas";
|
||||
import { tripService } from "@/server/services/trip.service";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
export async function createTripAction(formData: FormData) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) {
|
||||
return { error: "Kamu harus login terlebih dahulu" };
|
||||
}
|
||||
|
||||
const raw = {
|
||||
title: formData.get("title") as string,
|
||||
description: formData.get("description") as string,
|
||||
mountain: formData.get("mountain") as string,
|
||||
location: formData.get("location") as string,
|
||||
date: formData.get("date") as string,
|
||||
maxParticipants: formData.get("maxParticipants") as string,
|
||||
price: formData.get("price") as string,
|
||||
image: formData.get("image") as string,
|
||||
};
|
||||
|
||||
const result = createTripSchema.safeParse(raw);
|
||||
if (!result.success) {
|
||||
return { error: result.error.issues[0].message };
|
||||
}
|
||||
|
||||
try {
|
||||
const trip = await tripService.createTrip({
|
||||
...result.data,
|
||||
date: new Date(result.data.date),
|
||||
organizerId: session.user.id,
|
||||
});
|
||||
revalidatePath("/trips");
|
||||
return { success: true, tripId: trip.id };
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function joinTripAction(tripId: string) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) {
|
||||
return { error: "Kamu harus login terlebih dahulu" };
|
||||
}
|
||||
|
||||
try {
|
||||
await tripService.joinTrip(tripId, session.user.id);
|
||||
revalidatePath(`/trips/${tripId}`);
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function cancelJoinAction(tripId: string) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) {
|
||||
return { error: "Kamu harus login terlebih dahulu" };
|
||||
}
|
||||
|
||||
try {
|
||||
await tripService.cancelJoin(tripId, session.user.id);
|
||||
revalidatePath(`/trips/${tripId}`);
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
export function SearchBar() {
|
||||
const router = useRouter();
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
function handleSearch(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (query.trim()) {
|
||||
router.push(`/trips?q=${encodeURIComponent(query.trim())}`);
|
||||
} else {
|
||||
router.push("/trips");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearch} className="mx-auto max-w-xl">
|
||||
<div className="flex overflow-hidden rounded-2xl bg-white/10 ring-1 ring-white/20 backdrop-blur-sm transition-all focus-within:bg-white/15 focus-within:ring-primary-400/50">
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Cari gunung, lokasi, atau trip..."
|
||||
className="flex-1 border-none bg-transparent px-5 py-3.5 text-sm text-white outline-none placeholder:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-primary-600 px-6 text-sm font-semibold text-white transition-colors hover:bg-primary-500"
|
||||
>
|
||||
Cari
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import Link from "next/link";
|
||||
import { formatRupiah, formatDate } from "@/lib/utils";
|
||||
|
||||
interface TripCardProps {
|
||||
id: string;
|
||||
title: string;
|
||||
mountain: string;
|
||||
location: string;
|
||||
date: Date | string;
|
||||
price: number;
|
||||
maxParticipants: number;
|
||||
participantCount: number;
|
||||
organizerName: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export function TripCard({
|
||||
id,
|
||||
title,
|
||||
mountain,
|
||||
location,
|
||||
date,
|
||||
price,
|
||||
maxParticipants,
|
||||
participantCount,
|
||||
organizerName,
|
||||
status,
|
||||
}: TripCardProps) {
|
||||
const spotsLeft = maxParticipants - participantCount;
|
||||
|
||||
return (
|
||||
<Link href={`/trips/${id}`} className="group block">
|
||||
<div className="rounded-2xl border border-neutral-200 bg-white p-5 transition-all group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-neutral-200/60">
|
||||
{/* Header */}
|
||||
<div className="mb-3 flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-bold text-neutral-800 group-hover:text-primary-700">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-0.5 text-sm text-neutral-500">{mountain}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
|
||||
status === "OPEN"
|
||||
? "bg-primary-100 text-primary-700"
|
||||
: status === "FULL"
|
||||
? "bg-amber-100 text-amber-700"
|
||||
: "bg-neutral-100 text-neutral-500"
|
||||
}`}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="space-y-1.5 text-sm text-neutral-600">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-secondary-500">📍</span> {location}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-secondary-500">📅</span> {formatDate(date)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-secondary-500">👤</span> {organizerName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
|
||||
<span className="text-lg font-bold text-primary-600">
|
||||
{formatRupiah(price)}
|
||||
</span>
|
||||
<span
|
||||
className={`text-xs font-semibold ${
|
||||
spotsLeft > 0 ? "text-secondary-600" : "text-amber-600"
|
||||
}`}
|
||||
>
|
||||
{spotsLeft > 0 ? `${spotsLeft} slot tersisa` : "Penuh"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { z } from "zod/v4";
|
||||
|
||||
export const createTripSchema = z.object({
|
||||
title: z.string().min(3, "Judul minimal 3 karakter"),
|
||||
description: z.string().optional(),
|
||||
mountain: z.string().min(2, "Nama gunung harus diisi"),
|
||||
location: z.string().min(2, "Lokasi harus diisi"),
|
||||
date: z.string().refine((val) => !isNaN(Date.parse(val)), "Tanggal tidak valid"),
|
||||
maxParticipants: z.coerce.number().min(1, "Minimal 1 peserta"),
|
||||
price: z.coerce.number().min(0, "Harga tidak valid"),
|
||||
image: z.string().optional(),
|
||||
});
|
||||
|
||||
export type CreateTripInput = z.infer<typeof createTripSchema>;
|
||||
Reference in New Issue
Block a user