Skip to content
Snippets Groups Projects
Commit 3756909b authored by Fionn McGoldrick's avatar Fionn McGoldrick
Browse files

Successfully connected applicaton to firebase. Tasks can be added to the...

Successfully connected applicaton to firebase. Tasks can be added to the database collection 'tasks', removed, and edited. All of which is updated successfully in my firebase database.
parent 0cce1ca3
No related branches found
No related tags found
No related merge requests found
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, FlatList, Text, StyleSheet, TouchableOpacity } from 'react-native'; import { View, TextInput, Button, FlatList, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { db } from './firebaseConfig';
import { collection, addDoc, getDocs, updateDoc, doc, deleteDoc } from 'firebase/firestore';
export default function App() { export default function App() {
const [task, setTask] = useState(''); const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]); const [tasks, setTasks] = useState([]);
const [editingId, setEditingId] = useState(null); const [editingId, setEditingId] = useState(null);
const addOrUpdateTask = () => { useEffect(() => {
fetchTasks();
}, []);
const fetchTasks = async () => {
try {
const querySnapshot = await getDocs(collection(db, 'tasks'));
const loadedTasks = querySnapshot.docs.map(doc => ({
id: doc.id,
text: doc.data().text
}));
setTasks(loadedTasks);
console.log("Tasks loaded:", loadedTasks.length);
} catch (error) {
console.error("Error fetching tasks:", error);
}
};
const addOrUpdateTask = async () => {
if (task.trim()) { if (task.trim()) {
if (editingId) { try {
// Update mode if (editingId) {
setTasks(tasks.map(t => t.id === editingId ? { ...t, text: task } : t)); // Update mode
setEditingId(null); const taskRef = doc(db, 'tasks', editingId);
} else { await updateDoc(taskRef, { text: task });
// Add mode console.log("Task updated:", editingId);
setTasks([...tasks, { id: Date.now().toString(), text: task }]); setEditingId(null);
} else {
// Add mode
const docRef = await addDoc(collection(db, 'tasks'), { text: task });
console.log("Task added with ID:", docRef.id);
}
await fetchTasks(); // always refetch
setTask('');
} catch (error) {
console.error("Error adding/updating task:", error);
} }
setTask('');
} }
}; };
const removeTask = (id) => { const removeTask = async (id) => {
await deleteDoc(doc(db, 'tasks', id));
setTasks(tasks.filter((t) => t.id !== id)); setTasks(tasks.filter((t) => t.id !== id));
if (editingId === id) { if (editingId === id) {
setTask(''); setTask('');
......
// firebaseConfig.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "AIzaSyBhYbz1Gb2nGdgOxZwcbSbxDUSVFD-bYhw",
authDomain: "expotodoapp-692af.firebaseapp.com",
projectId: "expotodoapp-692af",
storageBucket: "expotodoapp-692af.firebasestorage.app",
messagingSenderId: "948893841016",
appId: "1:948893841016:web:e91f5ddbd2c0121e839f8d",
measurementId: "G-4V1EBCR32D"
};
// Initialize Firebase app
const app = initializeApp(firebaseConfig);
// Export Firestore instance
export const db = getFirestore(app);
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment