text: import React, { useState } from 'react'
  import { BsPlus } from 'react-icons/bs'
  import Modal from '../../Modal'
  import ProjectForm from './ProjectForm'
  import firebase from '../../../firebase'
  
  function AddNewProject() {
      //  STATES
      const [showModal, setShowModal] = useState(false);
      const [projectName, setProjectName] = useState("");
  
      function handleSubmit(e) {
          e.preventDefault()
  
          if (projectName) {
              const projectsRef = firebase.firestore().collection('projects')
  
              projectsRef
                  .where('name', '==', projectName)
                  .get()
                  .then(querySnapshot => {
                      if (querySnapshot.empty) {
                          projectsRef
                              .add({
                                  name: projectName
                              })
                      } else {
                          alert('Project already  exists!')
                      }
                  })
              setShowModal(false)
              setProjectName('')
          }
  
      }
  
      return (
          <div className="AddNewProject">
              <span className="add" onClick={() => setShowModal(true)}><BsPlus size="15" /></span>
  
              <Modal showModal={showModal} setShowModal={setShowModal}>
                  <ProjectForm
                      handleSubmit={handleSubmit}
                      heading="New Project"
                      value={projectName}
                      setValue={setProjectName}
                      setShowModal={setShowModal}
                      confirmButtonText="Add Project" />
              </Modal>
          </div>
      )
  }
  export default AddNewProject;