orchetera/template/src/pages/DashboardPage.bak.jsx

Welcome to **Orchetera** — your orchestration tool to kickstart Firebase-ready projects with ease!

import React, { useEffect, useState } from "react";
import { db } from "../firebase";
import {
  collection,
  getDocs,
  addDoc,
  updateDoc,
  deleteDoc,
  doc,
} from "firebase/firestore";
import {
  Container,
  Typography,
  Box,
  TextField,
  Button,
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody,
  IconButton,
} from "@mui/material";
import { Delete, Edit } from "@mui/icons-material";
import DataTable from "alchevera";

const DashboardPage = () => {
  const [items, setItems] = useState([]);
  const [newData, setNewData] = useState("");

  const colRef = collection(db, "testing");

  const fetchData = async () => {
    const snapshot = await getDocs(colRef);
    const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
    setItems(data);
  };

  const addItem = async () => {
    await addDoc(colRef, { name: newData });
    setNewData("");
    fetchData();
  };

  const updateItem = async (id, name) => {
    const itemRef = doc(db, "testing", id);
    await updateDoc(itemRef, { name: name + " (updated)" });
    fetchData();
  };

  const deleteItem = async (id) => {
    const itemRef = doc(db, "testing", id);
    await deleteDoc(itemRef);
    fetchData();
  };

  useEffect(() => {
    fetchData();
  });

  const dataSource = [
    { name: "Alice", age: 28 },
    { name: "Bob", age: 34 },
  ];

  const dataModel = [
    { key: "name", label: "Nama" },
    { key: "age", label: "Umur" },
  ];

  return (
    <Container>
      <Box mt={4}>
        <Typography variant="h4" gutterBottom>
          Dashboard
        </Typography>

        <DataTable
          dataSource={dataSource}
          dataModel={dataModel}
          stream={true}
        />

        <Box display="flex" gap={2} mb={2}>
          <TextField
            label="New Item"
            value={newData}
            onChange={(e) => setNewData(e.target.value)}
            fullWidth
          />
          <Button variant="contained" onClick={addItem}>
            Add
          </Button>
        </Box>

        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell>Aksi</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map(({ id, name }) => (
              <TableRow key={id}>
                <TableCell>{name}</TableCell>
                <TableCell>
                  <IconButton onClick={() => updateItem(id, name)}>
                    <Edit />
                  </IconButton>
                  <IconButton onClick={() => deleteItem(id)}>
                    <Delete />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Box>
    </Container>
  );
};

export default DashboardPage;