add modal context

client/package.json

@@ -43,6 +43,7 @@
     "react-parallax": "^3.5.1",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "react-type-animation": "^2.1.2",
     "swiper": "^9.1.0"
   },

client/src/components/Loading.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import { PacmanLoader } from 'react-spinners'
 
 const Loading = () => {
   return (
     <div className="loading-container">
+      <PacmanLoader color="#36D7B7" size={25} />
       <p>Loading...</p>
     </div>
   )

client/src/components/Navigation.jsx

@@ -1,8 +1,12 @@
+import { useContext } from 'react'
 import { Nav, Navbar } from 'react-bootstrap'
 import { NAV_LINKS } from '../constants'
-import { ContactModal } from './'
+import { ContactModal } from '.'
+import { ModalContext } from '../context/ModalContext'
 
 const Navigation = () => {
+  const { openModal } = useContext(ModalContext)
+
   const { HOME, PROJECTS, ABOUT } = NAV_LINKS
 
   const navLinks = [HOME, PROJECTS, ABOUT].map((link) => (
@@ -23,9 +27,9 @@ const Navigation = () => {
       <Navbar.Collapse id="navbarResponsive">
         <Nav className="ms-auto dropstart text-end text-uppercase">
           {navLinks}
-          <Nav.Link>
+          <a className="nav-link contact-link" onClick={openModal}>
             <ContactModal triggerText="Contact" />
-          </Nav.Link>
+          </a>
         </Nav>
       </Navbar.Collapse>
     </Navbar>

client/src/components/PreFooter.jsx

@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { useContext } from 'react'
 import { Row, Col, Image } from 'react-bootstrap'
 import { motion } from 'framer-motion'
-import { ContactModal } from '../components'
+import { ContactModal } from '.'
+import { ModalContext } from '../context/ModalContext'
 import { fadeIn } from '../utils'
 import { PRE_FOOTER_BACKGROUND, PRE_FOOTER_GRAPHIC } from '../assets'
 
@@ -12,15 +13,7 @@ const PreFooterImage = ({ src, alt }) => (
 )
 
 const PreFooter = () => {
-  const [showModal, setShowModal] = useState(false)
-
-  const handleClick = () => {
-    setShowModal(true)
-  }
-
-  const handleClose = () => {
-    setShowModal(false)
-  }
+  const { openModal } = useContext(ModalContext)
 
   return (
     <Row className="overflow-hidden min-vh-50">
@@ -55,13 +48,9 @@ const PreFooter = () => {
                 className="button rounded-pill m-0 mt-4"
                 whileHover={{ scale: 1.1 }}
                 whileTap={{ scale: 0.9 }}
-                onClick={handleClick}
+                onClick={openModal}
               >
-                <ContactModal
-                  triggerText="Contact"
-                  show={showModal}
-                  handleClose={handleClose}
-                />
+                <ContactModal triggerText="Contact" />
               </motion.button>
             </Row>
           </Col>

client/src/context/ModalContext.jsx

@@ -0,0 +1,23 @@
+import React, { createContext, useState } from 'react'
+
+const ModalContext = createContext()
+
+const ModalProvider = ({ children }) => {
+  const [showModal, setShowModal] = useState(false)
+
+  const openModal = () => {
+    setShowModal(true)
+  }
+
+  const closeModal = () => {
+    setShowModal(false)
+  }
+
+  return (
+    <ModalContext.Provider value={{ showModal, openModal, closeModal }}>
+      {children}
+    </ModalContext.Provider>
+  )
+}
+
+export { ModalContext, ModalProvider }

client/src/index.js

@@ -5,14 +5,17 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import './styles/index.css'
 import App from './App'
-import { register } from './serviceWorkerRegistration'
+import { ModalProvider } from './context/ModalContext'
+// import { register } from './serviceWorkerRegistration'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <Router>
-      <App />
-    </Router>
+    <ModalProvider>
+      <Router>
+        <App />
+      </Router>
+    </ModalProvider>
   </React.StrictMode>,
 )
 
-register()
+// register()

client/src/styles/index.css

@@ -148,6 +148,10 @@ p {
   letter-spacing: 1.25px;
   font-weight: medium;
 }
+.contact-link {
+  cursor: pointer;
+}
+
 /*---- /BUTTONS ----*/
 
 /*---- CONTAINERS ----*/