From 01f6a0f4288ecbbecb4876b9c46461a2769f7404 Mon Sep 17 00:00:00 2001
From: Md Amaan <mdamaan853@gmail.com>
Date: Thu, 10 Jun 2021 16:18:13 +0530
Subject: [PATCH 1/2] Firebase crud

---
 public/index.html            |   1 +
 src/Routes.js                |   2 +
 src/firebase/Curdui.js       | 108 +++++++++++++++++++++++++++++++++++
 src/firebase/Firebasecurd.js |  91 +++++++++++++++++++++++++++++
 src/services/authService.js  |  10 +++-
 5 files changed, 209 insertions(+), 3 deletions(-)
 create mode 100644 src/firebase/Curdui.js
 create mode 100644 src/firebase/Firebasecurd.js

diff --git a/public/index.html b/public/index.html
index 27192ef..4ab5ca6 100755
--- a/public/index.html
+++ b/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"
diff --git a/src/Routes.js b/src/Routes.js
index 5d6a594..73a7adf 100755
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -8,6 +8,7 @@ import HomeView from 'src/views/pages/HomeView';
 import Error404View from 'src/views/pages/Error404View';
 import Badge from 'src/components/Badge';
 import EventDefaultPage from 'src/views/pages/events/eventdefault';
+import Firebasecurd from "src/firebase/Firebasecurd"
 
 const renderRoutes = () => (
   <Suspense fallback={<LoadingScreen />}>
@@ -25,6 +26,7 @@ const renderRoutes = () => (
       <Route path="/profile" exact render={() => <Badge />} />
 
       <Route path="/events" exact render={() => <EventDefaultPage />} />
+      <Route path="/firebase" exact render={() => <Firebasecurd/>} />
       <Route path="*" exact render={() => <Error404View />} />
     </Switch>
   </Suspense>
diff --git a/src/firebase/Curdui.js b/src/firebase/Curdui.js
new file mode 100644
index 0000000..f558713
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/firebase/Firebasecurd.js b/src/firebase/Firebasecurd.js
new file mode 100644
index 0000000..9c16cf5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/services/authService.js b/src/services/authService.js
index 8597806..9a56319 100755
--- a/src/services/authService.js
+++ b/src/services/authService.js
@@ -6,9 +6,13 @@ import firebase from 'firebase';
 class AuthService {
   // Configure Firebase.
   config = {
-    apiKey: 'AIzaSyBogaqI7q74Wml7AD90VVm_89o1cgFFQCo',
-    authDomain: 'code-for-cause-leaders.firebaseapp.com',
-    projectId: 'code-for-cause-leaders'
+    apiKey: "AIzaSyDwQ_BVaf3LXTqCjEUZk_al7bEdSbM3XIc",
+    authDomain: "crudoperation-7e481.firebaseapp.com",
+    projectId: "crudoperation-7e481",
+    storageBucket: "crudoperation-7e481.appspot.com",
+    messagingSenderId: "615119619499",
+    appId: "1:615119619499:web:7a81027209c502106bfeee",
+    measurementId: "G-10JP8V60VE"
     // ...
   };
 

From eb048daedadb79d88e51c11b7cbbe066abd708e3 Mon Sep 17 00:00:00 2001
From: Md Amaan <mdamaan853@gmail.com>
Date: Sun, 13 Jun 2021 14:41:25 +0530
Subject: [PATCH 2/2] config

---
 src/services/authService.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/services/authService.js b/src/services/authService.js
index 9a56319..42fe836 100755
--- a/src/services/authService.js
+++ b/src/services/authService.js
@@ -6,14 +6,13 @@ import firebase from 'firebase';
 class AuthService {
   // Configure Firebase.
   config = {
-    apiKey: "AIzaSyDwQ_BVaf3LXTqCjEUZk_al7bEdSbM3XIc",
-    authDomain: "crudoperation-7e481.firebaseapp.com",
-    projectId: "crudoperation-7e481",
-    storageBucket: "crudoperation-7e481.appspot.com",
-    messagingSenderId: "615119619499",
-    appId: "1:615119619499:web:7a81027209c502106bfeee",
-    measurementId: "G-10JP8V60VE"
-    // ...
+    apiKey: 'AIzaSyBogaqI7q74Wml7AD90VVm_89o1cgFFQCo',
+    authDomain: 'code-for-cause-leaders.firebaseapp.com',
+    projectId: 'code-for-cause-leaders',
+    storageBucket: 'code-for-cause-leaders.appspot.com',
+    messagingSenderId: '58409560329',
+    appId: '1:58409560329:web:60ffc3c128d3b155a18bd8',
+    measurementId: 'G-49RJ8QM95E'
   };
 
   // Configure FirebaseUI.