import { initializeApp } from ‘firebase/app’;
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from ‘firebase/auth’;
import { getFirestore, collection, addDoc, getDocs, onSnapshot, doc, updateimport React, { useState, useEffect } from ‘react’;
Doc, deleteDoc, query, where } from ‘firebase/firestore’;
// Ensure these global variables are available in the Canvas environment
const appId = typeof __app_id !== ‘undefined’ ? __app_id : ‘default-app-id’;
const firebaseConfig = typeof __firebase_config !== ‘undefined’ ? JSON.parse(__firebase_config) : {};
const initialAuthToken = typeof __initial_auth_token !== ‘undefined’ ? __initial_auth_token : null;
// Initialize Firebase
let app, db, auth;
try {
app = initializeApp(firebaseConfig);
db = getFirestore(app);
auth = getAuth(app);
} catch (error) {
console.error(“Error initializing Firebase:”, error);
}
const App = () => {
const [naam, setNaam] = useState(”);
const [voornaam, setVoornaam] = useState(”);
const [emailadres, setEmailadres] = useState(”);
const [telefoonnummer, setTelefoonnummer] = useState(”);
const [mobielNummer, setMobielNummer] = useState(”);
const [straatNr, setStraatNr] = useState(”);
const [postnummer, setPostnummer] = useState(”);
const [plaats, setPlaats] = useState(”);
const [geboortedatum, setGeboortedatum] = useState(”);
const [inschrijvingGetekend, setInschrijvingGetekend] = useState(false);
const [vrijwilliger, setVrijwilliger] = useState(false);
const [personen, setPersonen] = useState([]);
const [loading, setLoading] = useState(true);
const [message, setMessage] = useState(”);
const [editModus, setEditModus] = useState(false);
const [currentPersonId, setCurrentPersonId] = useState(null);
const [userId, setUserId] = useState(null);
const [zoekterm, setZoekterm] = useState(”);
// New states for the custom delete confirmation modal
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [personToDeleteId, setPersonToDeleteId] = useState(null);
// Initialize authentication and listen for changes
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, async (user) => {
if (user) {
setUserId(user.uid);
} else {
try {
if (initialAuthToken) {
await signInWithCustomToken(auth, initialAuthToken);
} else {
await signInAnonymously(auth);
}
setUserId(auth.currentUser?.uid || crypto.randomUUID());
} catch (error) {
console.error(“Error signing in anonymously:”, error);
setMessage(“Authentication error. Please try again.”);
}
}
setLoading(false);
});
return () => unsubscribe();
}, []);
// Fetch personal data from Firestore
useEffect(() => {
if (!userId || !db) return;
const personenCollectionRef = collection(db, `artifacts/${appId}/users/${userId}/personen`);
const q = query(personenCollectionRef);
const unsubscribe = onSnapshot(q, (snapshot) => {
const data = snapshot.docs.map(doc => ({
id: doc.id,
…doc.data()
}));
setPersonen(data.sort((a, b) => a.naam.localeCompare(b.naam)));
}, (error) => {
console.error(“Error fetching data:”, error);
setMessage(“Error fetching data.”);
});
return () => unsubscribe();
}, [userId, db]);
const toonBericht = (msg, duur = 3000) => {
setMessage(msg);
setTimeout(() => setMessage(”), duur);
};
const resetForm = () => {
setNaam(”);
setVoornaam(”);
setEmailadres(”);
setTelefoonnummer(”);
setMobielNummer(”);
setStraatNr(”);
setPostnummer(”);
setPlaats(”);
setGeboortedatum(”);
setInschrijvingGetekend(false);
setVrijwilliger(false);
setEditModus(false);
setCurrentPersonId(null);
};
const handleOpslaanPersoon = async (e) => {
e.preventDefault();
if (!userId || !db) {
toonBericht(“User is not authenticated or database is not available.”);
return;
}
const nieuwePersoon = {
naam,
voornaam,
emailadres,
telefoonnummer,
mobielNummer,
straatNr,
postnummer,
plaats,
geboortedatum,
inschrijvingGetekend,
vrijwilliger,
createdAt: new Date().toISOString(),
};
try {
if (editModus && currentPersonId) {
const docRef = doc(db, `artifacts/${appId}/users/${userId}/personen`, currentPersonId);
await updateDoc(docRef, nieuwePersoon);
toonBericht(“Person successfully updated!”);
} else {
await addDoc(collection(db, `artifacts/${appId}/users/${userId}/personen`), nieuwePersoon);
toonBericht(“Person successfully added!”);
}
resetForm();
} catch (e) {
console.error(“Error saving/updating document: “, e);
toonBericht(“Error saving personal data.”);
}
};
const handleEditPersoon = (persoon) => {
setNaam(persoon.naam);
setVoornaam(persoon.voornaam);
setEmailadres(persoon.emailadres);
setTelefoonnummer(persoon.telefoonnummer);
setMobielNummer(persoon.mobielNummer);
setStraatNr(persoon.straatNr);
setPostnummer(persoon.postnummer);
setPlaats(persoon.plaats);
setGeboortedatum(persoon.geboortedatum);
setInschrijvingGetekend(persoon.inschrijvingGetekend);
setVrijwilliger(persoon.vrijwilliger || false);
setEditModus(true);
setCurrentPersonId(persoon.id);
window.scrollTo({ top: 0, behavior: ‘smooth’ });
};
// Function to open the delete confirmation modal
const confirmDelete = (id) => {
setPersonToDeleteId(id);
setShowDeleteModal(true);
};
// Function to execute the actual deletion after confirmation
const executeDelete = async () => {
setShowDeleteModal(false); // Close the modal
console.log(“Attempting to delete…”);
console.log(“User ID:”, userId);
console.log(“App ID:”, appId);
console.log(“Person ID to delete:”, personToDeleteId);
if (!userId || !db || !personToDeleteId) {
toonBericht(“Error: User, database or item missing for deletion.”);
console.error(“Deletion aborted: missing data (userId, db or personToDeleteId)”);
return;
}
try {
await deleteDoc(doc(db, `artifacts/${appId}/users/${userId}/personen`, personToDeleteId));
toonBericht(“Person successfully deleted!”);
resetForm();
setPersonToDeleteId(null); // Clear the ID after deletion
console.log(“Person successfully deleted from Firestore.”);
} catch (e) {
console.error(“Error deleting document: “, e);
toonBericht(“Error deleting personal data.”);
}
};
// Function to cancel the deletion
const cancelDelete = () => {
setShowDeleteModal(false);
setPersonToDeleteId(null);
};
// Filter the list of people based on the search term
const gefilterdePersonen = personen.filter(persoon => {
const zoekLowerCase = zoekterm.toLowerCase();
return (
(persoon.naam && persoon.naam.toLowerCase().includes(zoekLowerCase)) ||
(persoon.voornaam && persoon.voornaam.toLowerCase().includes(zoekLowerCase)) ||
(persoon.emailadres && persoon.emailadres.toLowerCase().includes(zoekLowerCase)) ||
(persoon.telefoonnummer && persoon.telefoonnummer.toLowerCase().includes(zoekLowerCase)) ||
(persoon.mobielNummer && persoon.mobielNummer.toLowerCase().includes(zoekLowerCase)) ||
(persoon.straatNr && persoon.straatNr.toLowerCase().includes(zoekLowerCase)) ||
(persoon.postnummer && persoon.postnummer.toLowerCase().includes(zoekLowerCase)) ||
(persoon.plaats && persoon.plaats.toLowerCase().includes(zoekLowerCase)) ||
(persoon.geboortedatum && persoon.geboortedatum.toLowerCase().includes(zoekLowerCase))
);
});
if (loading) {
return (
);
}
return (
Laden…
{/* User ID display */}
{userId && (
)}
{/* Header */}
{/* Message display */}
{message && (
{/* Zoekfunctie */}
{/* Lijst van persoonsgegevens */}
{/* Aangepast verwijderbevestigingsvenster */}
{showDeleteModal && (
)}
);
};
export default App;
Uw gebruikers-ID: {userId}
Persoonsgegevens App
Leden Digidak Peer
{message}
)}
{/* Personal data form */}
{editModus ? ‘Persoon bewerken’ : ‘Nieuwe Persoon Toevoegen’}
Zoek personen
{/* Vertaling hier */}
setZoekterm(e.target.value)}
className=”w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500″
placeholder=”Voer zoekterm in…”
/>
Opgeslagen Personen ({gefilterdePersonen.length})
{/* Vertaling hier */} {gefilterdePersonen.length === 0 ? (Geen personen gevonden met deze zoekterm.
) : (
{gefilterdePersonen.map((persoon) => (
))}
)}
{persoon.voornaam} {persoon.naam}
{persoon.emailadres && Email: {persoon.emailadres}} {persoon.telefoonnummer && Tel: {persoon.telefoonnummer}} {persoon.mobielNummer && Mobiel: {persoon.mobielNummer}} {persoon.straatNr && Adres: {persoon.straatNr}} {persoon.postnummer && {persoon.postnummer}} {persoon.plaats && {persoon.plaats}} {persoon.geboortedatum && Geb. datum: {persoon.geboortedatum}} Inschrijving: {persoon.inschrijvingGetekend ? ‘Ja’ : ‘Nee’} Vrijwilliger: {persoon.vrijwilliger ? ‘Ja’ : ‘Nee’}
Weet je zeker dat je deze persoon wilt verwijderen?