Firebase crud

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="color-scheme" content="dark light">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

src/Routes.js

@@ -8,6 +8,7 @@ import HomeView from 'src/views/pages/HomeView';
 import Error404View from 'src/views/pages/Error404View';
 import Profile from 'src/components/Profile';
 import EventDefaultPage from 'src/views/pages/events/eventdefault';
+import Firebasecurd from "src/firebase/Firebasecurd"
 import IndividualEvent from './views/pages/events/individualEvent';
 import Register from './views/pages/register/Register';
 import CreateNewEvent from './components/CreateNewEvent';
@@ -30,6 +31,7 @@ const renderRoutes = () => (
       <Route path="/dashboard" exact render={() => <Navigation />} />
       <Route path="/profile" exact render={() => <Profile />} />
       <Route path="/events" exact render={() => <EventDefaultPage />} />
+      <Route path="/firebase" exact render={() => <Firebasecurd/>} />
       <Route path="/landing" exact render={() => <LandingPage />} />
       <Route
         path="/events/individual-event"

src/firebase/Curdui.js

@@ -0,0 +1,108 @@
+import React from "react";
+
+export default function Curdui(props) {
+    const {userData,setuserData,fetchdata,loading,AddUser,editRow,deleteRow}=props
+  return (
+    <div className="container">
+      <form id="addUpdateUser" className="container border border-4 my-4 w-50">
+          <h4 className="py-2 my-2">Add/Update User</h4>
+        <div className="my-3">
+          <input
+            type="text"
+            placeholder="First name"
+            value={userData.FirstName}
+            className="form-control"
+            id="exampleInputEmail1"
+            aria-describedby="emailHelp"
+            onChange={(e) => {
+                userData.FirstName = e.target.value;
+                setuserData({ ...userData });
+            }}
+            required
+            min='2'
+            />
+        </div>
+        <div className="mb-3">
+          <input
+            type="text"
+            placeholder="Last name"
+            value={userData.LastName}
+            className="form-control"
+            id="exampleInputPassword1"
+            onChange={(e) => {
+                userData.LastName = e.target.value;
+                setuserData({ ...userData });
+            }}
+            required
+            min="2"
+            />
+        </div>
+        <div className="py-3">
+        <button
+          className="btn btn-primary mx-2 my-2"
+          onClick={(e) => {
+              e.preventDefault();
+              AddUser();
+            }}
+            >
+          Add User
+        </button>
+        <button
+          className="btn btn-success mx-2 my-2"
+          onClick={(e) => {
+              e.preventDefault();
+              editRow();
+            }}
+            >
+          Update User
+        </button>
+        </div>
+      </form>
+        {loading ? <>loading...</> : null}
+            <h3>User Detail</h3>
+      <div className="container border border-4" style={{height:300,overflow:"scroll"}}>
+        <table className="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col">sno</th>
+              <th scope="col">First</th>
+              <th scope="col">Last</th>
+              <th scope="col">Handle</th>
+            </tr>
+          </thead>
+          <tbody className="">
+            {fetchdata?.map((row, id) => {
+              return (
+                <tr key={id}>
+                  <th scope="row">{id + 1}</th>
+                  <td>{row.FirstName}</td>
+                  <td>{row.LastName}</td>
+                  <td>
+                    <button
+                      className="btn btn-info mx-1"
+                      onClick={() => {
+                        setuserData({
+                          FirstName: row.FirstName,
+                          LastName: row.LastName,
+                          id: row.id,
+                        });
+                      }}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      className="btn btn-danger mx-1"
+                      onClick={() => deleteRow(row.id)}
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/firebase/Firebasecurd.js

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import Curdui from './Curdui';
+import { v4 as uuid } from 'uuid';
+import firebase from 'firebase/app';
+
+export default function Firebasecrud() {
+  const [fetchdata, setfetchdata] = useState([]);
+  const [loading, setloading] = useState(false);
+  const [ref, setref] = useState(null);
+  const [userData, setuserData] = useState({
+    id: '',
+    FirstName: '',
+    LastName: ''
+  });
+
+  const delay = async()=>{
+    setTimeout (() => {
+      if (firebase.app.length){
+         setref(firebase.app().firestore().collection('user'));
+         getUser();
+    }
+  });
+  }
+  useEffect(() => {
+    delay()
+  }, []);
+
+  const AddUser = () => {
+    console.log('add user');
+    userData.id = uuid();
+    console.log(userData);
+    ref
+      .doc(userData.id)
+      .set(userData)
+      .then(() => {
+        getUser();
+      })
+      .catch(err => console.log(err));
+  };
+
+  const getUser = () => {
+    setloading(true);
+    firebase.app().firestore().collection('user')
+    .get().then(item => {
+      const items = item.docs.map(doc => doc.data());
+      setfetchdata(items);
+      setloading(false);
+    });
+  };
+
+  const deleteRow = id => {
+    if (window.confirm(' Are you sure you want to delete')) {
+      ref
+        .doc(id)
+        .delete()
+        .then(() => {
+          getUser();
+        })
+        .catch(err => console.log(err));
+    }
+  };
+  const editRow = () => {
+    const updateData = {
+      id: userData.id,
+      FirstName: userData.FirstName,
+      LastName: userData.LastName
+    };
+    ref
+      .doc(userData.id)
+      .update(updateData)
+      .then(() => {
+        getUser();
+      })
+      .catch(err => console.log(err));
+  };
+
+  const props = {
+    userData,
+    setuserData,
+    fetchdata,
+    loading,
+    AddUser,
+    editRow,
+    deleteRow
+  };
+  return (
+    <div className="">
+      <Curdui {...props} />
+    </div>
+  );
+}

src/services/authService.js

@@ -13,7 +13,6 @@ class AuthService {
     messagingSenderId: '58409560329',
     appId: '1:58409560329:web:60ffc3c128d3b155a18bd8',
     measurementId: 'G-49RJ8QM95E'
-    // ...
   };
   // Configure FirebaseUI.
   uiConfig = {