import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import {
getFirestore,
collection,
addDoc,
onSnapshot,
query,
doc,
setDoc
} from 'firebase/firestore';
import {
getAuth,
signInAnonymously,
onAuthStateChanged,
signInWithCustomToken
} from 'firebase/auth';
import { BookOpen, Send, ClipboardList, User, PlusCircle, CheckCircle, Clock, Trash2 } from 'lucide-react';
// Konfigurasi Firebase
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'guru-tugas-simple';
export default function App() {
const [user, setUser] = useState(null);
const [role, setRole] = useState(null); // 'guru' atau 'siswa'
const [tugas, setTugas] = useState([]);
const [jawaban, setJawaban] = useState([]);
const [view, setView] = useState('landing'); // landing, guru, siswa
// State Form Guru
const [judulTugas, setJudulTugas] = useState('');
const [deskripsiTugas, setDeskripsiTugas] = useState('');
const [deadline, setDeadline] = useState('');
// State Form Siswa
const [namaSiswa, setNamaSiswa] = useState('');
const [teksJawaban, setTeksJawaban] = useState('');
const [selectedTugasId, setSelectedTugasId] = useState(null);
// 1. Inisialisasi Auth (Perbaikan: Import dari firebase/auth)
useEffect(() => {
const initAuth = async () => {
try {
if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
await signInWithCustomToken(auth, __initial_auth_token);
} else {
await signInAnonymously(auth);
}
} catch (error) {
console.error("Auth error:", error);
}
};
initAuth();
const unsubscribe = onAuthStateChanged(auth, (user) => {
setUser(user);
});
return () => unsubscribe();
}, []);
// 2. Ambil Data (Tugas & Jawaban)
useEffect(() => {
if (!user) return;
const tugasRef = collection(db, 'artifacts', appId, 'public', 'data', 'daftar_tugas');
const unsubscribeTugas = onSnapshot(tugasRef, (snapshot) => {
const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setTugas(data);
}, (err) => console.error("Firestore Error (Tugas):", err));
const jawabanRef = collection(db, 'artifacts', appId, 'public', 'data', 'jawaban_siswa');
const unsubscribeJawaban = onSnapshot(jawabanRef, (snapshot) => {
const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setJawaban(data);
}, (err) => console.error("Firestore Error (Jawaban):", err));
return () => {
unsubscribeTugas();
unsubscribeJawaban();
};
}, [user]);
// Fungsi Guru: Buat Tugas Baru
const handleBuatTugas = async (e) => {
e.preventDefault();
if (!user || !judulTugas || !deskripsiTugas) return;
try {
await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'daftar_tugas'), {
judul: judulTugas,
deskripsi: deskripsiTugas,
tenggat: deadline,
createdAt: new Date().toISOString()
});
setJudulTugas('');
setDeskripsiTugas('');
setDeadline('');
} catch (err) {
console.error(err);
}
};
// Fungsi Siswa: Kirim Jawaban
const handleKirimJawaban = async (e) => {
e.preventDefault();
if (!user || !namaSiswa || !teksJawaban || !selectedTugasId) return;
try {
await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'jawaban_siswa'), {
tugasId: selectedTugasId,
nama: namaSiswa,
isi: teksJawaban,
waktuKumpul: new Date().toISOString()
});
setTeksJawaban('');
setSelectedTugasId(null);
alert("Jawaban Anda berhasil dikirim!");
} catch (err) {
console.error(err);
}
};
if (view === 'landing') {
return (
EduTask Online
Platform sederhana untuk mengelola tugas dan pengumpulan jawaban siswa secara praktis.
);
}
return (
{role === 'guru' ? (
{/* Form Buat Tugas */}
{/* Rekap Jawaban */}
Jawaban Masuk
{jawaban.length} Siswa
{jawaban.length === 0 ? (
Belum ada jawaban yang dikirimkan siswa.
) : (
{jawaban.sort((a,b) => new Date(b.waktuKumpul) - new Date(a.waktuKumpul)).map((j) => {
const t = tugas.find(task => task.id === j.tugasId);
return (
{j.nama}
Tugas: {t?.judul || 'Dihapus'}
{new Date(j.waktuKumpul).toLocaleDateString('id-ID')}
{j.isi}
);
})}
)}
Tugas Aktif
{tugas.length === 0 ? (
Semua Beres!
Saat ini tidak ada tugas yang perlu dikerjakan.
) : (
{tugas.sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)).map((t) => (
{t.judul}
{t.tenggat && (
Deadline: {t.tenggat}
)}
{t.deskripsi}
{selectedTugasId === t.id && (
)}
))}
)}
)}
);
}
No comments:
Post a Comment
Terima kasih telah mampir ke Blog yang amburadul ini