243 lines
8.7 KiB
TypeScript
243 lines
8.7 KiB
TypeScript
/**
|
|
* File: page.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-11-29
|
|
* Purpose: Create forum discussion page for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { useFetch } from '@/hooks/useFetch';
|
|
import { uploadFile, isAllowedFileType, formatFileSize, UploadedFile } from '@/lib/upload';
|
|
|
|
interface ClassData {
|
|
id: string;
|
|
name: string;
|
|
code: string;
|
|
}
|
|
|
|
export default function NewForumPage() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const classId = searchParams.get('classId');
|
|
const [loading, setLoading] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
title: '',
|
|
content: '',
|
|
classId: '',
|
|
});
|
|
const [attachments, setAttachments] = useState<UploadedFile[]>([]);
|
|
const { data: classes } = useFetch<ClassData[]>('/api/classes');
|
|
|
|
useEffect(() => {
|
|
if (classId) {
|
|
setFormData(prev => ({ ...prev, classId }));
|
|
}
|
|
}, [classId, classes ]);
|
|
|
|
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = e.target.files;
|
|
if (!files) return;
|
|
|
|
const newAttachments: UploadedFile[] = [];
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
|
|
if (!isAllowedFileType(file)) {
|
|
alert(`File ${file.name} tidak diizinkan. Hanya PDF, Word, dan file gambar yang diperbolehkan.`);
|
|
continue;
|
|
}
|
|
|
|
if (file.size > 10 * 1024 * 1024) { // 10MB limit
|
|
alert(`File ${file.name} terlalu besar. Maksimal ukuran file adalah 10MB.`);
|
|
continue;
|
|
}
|
|
|
|
try {
|
|
const uploadedFile = await uploadFile(file, 'forum-attachments');
|
|
newAttachments.push(uploadedFile);
|
|
} catch (error) {
|
|
console.error('Error uploading file:', error);
|
|
alert(`Gagal mengupload file ${file.name}`);
|
|
}
|
|
}
|
|
|
|
setAttachments(prev => [...prev, ...newAttachments]);
|
|
};
|
|
|
|
const removeAttachment = (index: number) => {
|
|
setAttachments(prev => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/forums', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
title: formData.title,
|
|
description: formData.content,
|
|
type: formData.classId && formData.classId !== 'general' ? 'CLASS' : 'GENERAL',
|
|
classId: formData.classId && formData.classId !== 'general' ? formData.classId : undefined,
|
|
attachments: attachments,
|
|
}),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
router.push(formData.classId && formData.classId !== 'general' ? `/dashboard/forum/${formData.classId}` : '/dashboard/forum/umum');
|
|
} else {
|
|
console.error('Failed to create forum:', result.message);
|
|
// You could show an error message to the user here
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating forum:', error);
|
|
// You could show an error message to the user here
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-white">Buat Diskusi Baru</h1>
|
|
<p className="text-gray-400">Mulai percakapan dengan komunitas</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title" className="text-gray-300">
|
|
Judul Diskusi
|
|
</Label>
|
|
<Input
|
|
id="title"
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
|
required
|
|
placeholder="Apa yang ingin Anda diskusikan?"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="class" className="text-gray-300">
|
|
Pilih Kelas
|
|
</Label>
|
|
<Select
|
|
value={formData.classId}
|
|
onValueChange={(value) => setFormData({ ...formData, classId: value })}
|
|
>
|
|
<SelectTrigger className="bg-white/10 border-white/20 text-white">
|
|
<SelectValue placeholder="Pilih kelas atau forum umum" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="general">Forum Umum</SelectItem>
|
|
{classes?.map((classItem) => (
|
|
<SelectItem key={classItem.id} value={classItem.id}>
|
|
{classItem.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="content" className="text-gray-300">
|
|
Isi Diskusi
|
|
</Label>
|
|
<Textarea
|
|
id="content"
|
|
rows={6}
|
|
value={formData.content}
|
|
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
|
required
|
|
placeholder="Tuliskan detail diskusi Anda di sini..."
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="attachments" className="text-gray-300">
|
|
Lampiran (PDF, Word, Gambar)
|
|
</Label>
|
|
<Input
|
|
id="attachments"
|
|
type="file"
|
|
multiple
|
|
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif"
|
|
onChange={handleFileUpload}
|
|
className="bg-white/10 border-white/20 text-white file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-gold-500 file:text-white hover:file:bg-gold-600"
|
|
/>
|
|
<p className="text-xs text-gray-400">
|
|
Maksimal 10MB per file. Format yang diizinkan: PDF, Word, JPG, PNG, GIF
|
|
</p>
|
|
|
|
{attachments.length > 0 && (
|
|
<div className="space-y-2 mt-3">
|
|
<p className="text-sm text-gray-300">File yang diupload:</p>
|
|
{attachments.map((file, index) => (
|
|
<div key={file.id} className="flex items-center justify-between bg-white/5 rounded-lg p-3 border border-white/10">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 bg-gold-500/20 rounded flex items-center justify-center">
|
|
<svg className="w-4 h-4 text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-white font-medium">{file.originalName}</p>
|
|
<p className="text-xs text-gray-400">{formatFileSize(file.size)}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeAttachment(index)}
|
|
className="text-red-400 hover:text-red-300 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pt-4 flex justify-end space-x-3">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => router.back()}
|
|
disabled={loading}
|
|
className="text-gray-300 hover:text-white"
|
|
>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="bg-gold-500 hover:bg-gold-600 text-navy-900"
|
|
>
|
|
{loading ? 'Menyimpan...' : 'Buat Diskusi'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
} |