update database

BamaCharanChhandogi · Dec 29, 2023 · bae7dff · bae7dff
1 parent 86eb12a
commit bae7dff
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 145 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

diff --git a/src/Components/Navigtationbar.jsx b/src/Components/Navigtationbar.jsx
@@ -1,158 +1,179 @@
-import React,{useState} from 'react'
-import {Home,Notifications,Groups,QuestionAnswer, Search, Language, HomeOutlined, QuestionAnswerOutlined, Groups2Outlined, GroupsOutlined, NotificationsOutlined} from '@mui/icons-material';
-import './Navbar.css'
-import { Avatar, Button } from '@mui/material';
-import { logout, selectUser } from '../features/counter/userSlice';
-import db, { auth } from '../firebase';
-import { useSelector } from 'react-redux';
-import Modal from 'react-modal';
-import firebase from 'firebase/compat/app';
+import React, { useState } from "react";
+import {
+  Home,
+  Notifications,
+  Groups,
+  QuestionAnswer,
+  Search,
+  Language,
+  HomeOutlined,
+  QuestionAnswerOutlined,
+  Groups2Outlined,
+  GroupsOutlined,
+  NotificationsOutlined,
+} from "@mui/icons-material";
+import "./Navbar.css";
+import { Avatar, Button } from "@mui/material";
+import { logout, selectUser } from "../features/counter/userSlice";
+import db, { auth } from "../firebase";
+import { useSelector } from "react-redux";
+import Modal from "react-modal";
+import firebase from "firebase/compat/app";
 
 const styleForAvatar = {
-    'width':'32px',
-    'height':'32px'
-  };
+  width: "32px",
+  height: "32px",
+};
 
 function Navigtationbar() {
-    const user=useSelector(selectUser);
-    const [openModal, setOpenModal] = useState(false);
-    const [InputValue, setInputValue] = useState('');
-    const [inputUrl, setInputUrl] = useState('');
-
+  const user = useSelector(selectUser);
+  const [openModal, setOpenModal] = useState(false);
+  const [InputValue, setInputValue] = useState("");
+  const [inputUrl, setInputUrl] = useState("");
 
-    const handleQuestion = (e) => {
-      if(InputValue!=''){
-        e.preventDefault();
-        document.getElementById('quora').style.filter='blur(0px)';
-        setOpenModal(false);
-        db.collection('question').add({
-            question: InputValue,
-            PostImg: inputUrl,
-            postLike:0,
-            postDisLike:0,
-            timeStamp:firebase.firestore.Timestamp.now(),
-            userId: user.uid,
-            displayName: user.displayName,
-            userImg:user.photo
-        })
-        setInputValue('');
-        setInputUrl('');
-      }
-      else{
-        alert('Please enter a question');
-      }
-
-    };
+  const handleQuestion = (e) => {
+    if (InputValue != "") {
+      e.preventDefault();
+      document.getElementById("quora").style.filter = "blur(0px)";
+      setOpenModal(false);
+      db.collection("question").add({
+        question: InputValue,
+        PostImg: inputUrl,
+        postLike: 0,
+        postDisLike: 0,
+        timeStamp: firebase.firestore.Timestamp.now(),
+        userId: user.uid,
+        displayName: user.displayName,
+        userImg: user.photo,
+      });
+      setInputValue("");
+      setInputUrl("");
+    } else {
+      alert("Please enter a question");
+    }
+  };
   return (
-    <div className='navbar'>
-        <div className='logo'>
-            <img src='https://download.logo.wine/logo/Quora/Quora-Logo.wine.png' alt='logo'/>
+    <div className="navbar">
+      <div className="logo">
+        <img
+          src="https://download.logo.wine/logo/Quora/Quora-Logo.wine.png"
+          alt="logo"
+        />
+      </div>
+      <div className="menu">
+        <div className="nav-icon Home">
+          <HomeOutlined />
         </div>
-        <div className='menu'>
-            <div className='nav-icon Home'>
-            <HomeOutlined/>
-            </div>
-            <div className='nav-icon'>
-            <QuestionAnswerOutlined/>
-            </div>
-            <div className='nav-icon'>
-                <GroupsOutlined/>
-            </div>
-            <div className='nav-icon'>
-                <NotificationsOutlined/>
-            </div>
+        <div className="nav-icon">
+          <QuestionAnswerOutlined />
         </div>
-        <div className='nav-search'>
-            <Search/>
-            <input type='text' placeholder='Search Question'/>
+        <div className="nav-icon">
+          <GroupsOutlined />
         </div>
-        <div className='nav-remaining'>
-            <div className='profile-avatar'>
-                <Avatar style={styleForAvatar} src={user.photo}/>
-            </div>
-            <div className='nav-language'>
-            <Language sx={{fontSize:32}}/>
-            </div>
-            <div className='nav-button'>
-            <Button onClick={()=>{
-              document.getElementById('quora').style.filter='blur(8px)';
-              setOpenModal(true)
-              }}>Add a question</Button>
-            </div>
-            <div onClick={()=>{auth.signOut()}} className='logout-btn'>
-            <Button>Log Out</Button>
-            </div>
+        <div className="nav-icon">
+          <NotificationsOutlined />
         </div>
-        {/* Modal */}
-        <Modal
-          isOpen={openModal}
-          onRequestClose={() => setOpenModal(false)}
-          shouldCloseOnOverlayClick={false}
-          style={{
-            overlay: {
-              // width: '60%',
-              // height: '60%',
-              maxWidth: '60%', // Adjust as needed
-          maxHeight: '60%', // Adjust as needed
-          width: 'auto', // Adjust as needed
-          height: 'auto', // Adjust as needed
-              backgroundColor: "#c92c92",
-              zIndex: "1000",
-              top: "10%",
-              left: "24%",
-            },
-            content: {
-                WebkitOverflowScrolling: 'touch',
-                overflow: 'auto',
-                outline: "none",
-                margin: "-15px",
-            }
+      </div>
+      <div className="nav-search">
+        <Search />
+        <input type="text" placeholder="Search Question" />
+      </div>
+      <div className="nav-remaining">
+        <div className="profile-avatar">
+          <Avatar style={styleForAvatar} src={user.photo} />
+        </div>
+        <div className="nav-language">
+          <Language sx={{ fontSize: 32 }} />
+        </div>
+        <div className="nav-button">
+          <Button
+            onClick={() => {
+              document.getElementById("quora").style.filter = "blur(8px)";
+              setOpenModal(true);
+            }}
+          >
+            Add a question
+          </Button>
+        </div>
+        <div
+          onClick={() => {
+            auth.signOut();
           }}
+          className="logout-btn"
         >
-          <div className="modal__title">
-            <h5>Add Question</h5>
-          </div>
-          <div className="modal__info">
-            <Avatar
-              className="avatar"
-              src={user.photo}
-            />
-            {/* <p>{user.disPlayName ? user.disPlayName : user.email} asked</p> */}
-            <div className="modal__scope">
-              <p>{user.displayName}</p>
-            </div>
+          <Button>Log Out</Button>
+        </div>
+      </div>
+      {/* Modal */}
+      <Modal
+        isOpen={openModal}
+        onRequestClose={() => setOpenModal(false)}
+        shouldCloseOnOverlayClick={false}
+        style={{
+          overlay: {
+            // width: '60%',
+            // height: '60%',
+            maxWidth: "60%", // Adjust as needed
+            maxHeight: "60%", // Adjust as needed
+            width: "auto", // Adjust as needed
+            height: "auto", // Adjust as needed
+            backgroundColor: "#c92c92",
+            zIndex: "1000",
+            top: "10%",
+            left: "24%",
+          },
+          content: {
+            WebkitOverflowScrolling: "touch",
+            overflow: "auto",
+            outline: "none",
+            margin: "-15px",
+          },
+        }}
+      >
+        <div className="modal__title">
+          <h5>Add Question</h5>
+        </div>
+        <div className="modal__info">
+          <Avatar className="avatar" src={user.photo} />
+          {/* <p>{user.disPlayName ? user.disPlayName : user.email} asked</p> */}
+          <div className="modal__scope">
+            <p>{user.displayName}</p>
           </div>
-          <div className="modal__Field">
-            <input
+        </div>
+        <div className="modal__Field">
+          <input
             required
-              value={InputValue}
-              onChange={(e) => setInputValue(e.target.value)}
+            value={InputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            type="text"
+            placeholder="Start your question with 'What', 'How', 'Why', etc. "
+          />
+          <div className="modal__fieldLink">
+            <input
+              value={inputUrl}
+              onChange={(e) => setInputUrl(e.target.value)}
               type="text"
-              placeholder="Start your question with 'What', 'How', 'Why', etc. "
-            />
-            <div className="modal__fieldLink">
-              <input
-                value={inputUrl}
-                onChange={(e) => setInputUrl(e.target.value)}
-                type="text"
-                placeholder="Enter image link.."
-              ></input>
-            </div>
+              placeholder="Enter image link.."
+            ></input>
           </div>
-          <div className="modal__buttons">
-            <button className="cancel" onClick={()=>{
+        </div>
+        <div className="modal__buttons">
+          <button
+            className="cancel"
+            onClick={() => {
               setOpenModal(false);
-              document.getElementById('quora').style.filter='blur(0px)';
-            }}>
-              Cancel
-            </button>
-            <button type="sumbit" onClick={handleQuestion} className="add">
-              Add Question
-            </button>
-          </div>
-        </Modal>
+              document.getElementById("quora").style.filter = "blur(0px)";
+            }}
+          >
+            Cancel
+          </button>
+          <button type="sumbit" onClick={handleQuestion} className="add">
+            Add Question
+          </button>
+        </div>
+      </Modal>
     </div>
-  )
+  );
 }
 
-export default Navigtationbar
+export default Navigtationbar;
diff --git a/src/firebase.js b/src/firebase.js
@@ -3,15 +3,15 @@ import "firebase/compat/auth";
 import "firebase/compat/firestore";
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
-  apiKey: "AIzaSyAWbDm9oAZAkhSAFdYYaVrJZ7g5UT9kvWU",
-  authDomain: "quora-clone-64408.firebaseapp.com",
-  projectId: "quora-clone-64408",
-  storageBucket: "quora-clone-64408.appspot.com",
-  messagingSenderId: "729548785172",
-  appId: "1:729548785172:web:4ff0a701d52e666a300901",
-  measurementId: "G-V6MRE9H639"
+  apiKey: `${process.env.REACT_APP_API_KEY}`,
+  authDomain: `${process.env.REACT_APP_AUTH_DOMAIN}`,
+  projectId: `${process.env.REACT_APP_PROJECT_ID}`,
+  storageBucket: `${process.env.REACT_APP_STORAGE}`,
+  messagingSenderId: `${process.env.REACT_APP_MSI}`,
+  appId: `${process.env.REACT_APP_APP_ID}`,
 };
 
+console.log(firebaseConfig);
 const firebaseApp = firebase.initializeApp(firebaseConfig);
 const auth = firebase.auth();
 const provider = new firebase.auth.GoogleAuthProvider();
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ @@
     /build
     # misc
+    .env
     .DS_Store
     .env.local
     .env.development.local
@@ Expand Down @@