App.js

import React, { useState, useEffect } from 'react';
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() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
  const [editingId, setEditingId] = useState(null);

  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()) {
      try {
        if (editingId) {
          // Update mode
          const taskRef = doc(db, 'tasks', editingId);
          await updateDoc(taskRef, { text: task });
          console.log("Task updated:", editingId);
          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);
      }
    }
  };
  
  

  const removeTask = async (id) => {
    await deleteDoc(doc(db, 'tasks', id));
    setTasks(tasks.filter((t) => t.id !== id));
    if (editingId === id) {
      setTask('');
      setEditingId(null);
    }
  };

  const editTask = (id) => {
    const taskToEdit = tasks.find(t => t.id === id);
    if (taskToEdit) {
      setTask(taskToEdit.text);
      setEditingId(id);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter a task"
        value={task}
        onChangeText={setTask}
      />
      <Button title={editingId ? "Update Task" : "Add Task"} onPress={addOrUpdateTask} />
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.taskContainer}>
            <Text style={styles.task}>{item.text}</Text>
            <View style={styles.buttonRow}>
              <TouchableOpacity onPress={() => editTask(item.id)} style={styles.editButton}>
                <Text>Edit</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => removeTask(item.id)} style={styles.deleteButton}>
                <Text>Delete</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  input: {
    borderBottomWidth: 1,
    marginBottom: 10,
    padding: 8,
  },
  taskContainer: {
    backgroundColor: '#eee',
    borderRadius: 5,
    padding: 10,
    marginVertical: 5,
  },
  task: {
    fontSize: 18,
  },
  buttonRow: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 5,
  },
  editButton: {
    marginRight: 10,
    backgroundColor: '#d0e0ff',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 4,
  },
  deleteButton: {
    backgroundColor: '#ffd0d0',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 4,
  },
});