Add NoResultsModal

client/src/App.js

@@ -3,6 +3,7 @@ import CNavbar from './components/navbar/CNavbar';
 import './App.css';
 import Main from './components/Main';
 import SearchModal from './components/search/SearchModal';
+import NoResultsModal from './components/queryResult/NoResultsModal';
 
 const App = () => {
   return (
@@ -10,6 +11,7 @@ const App = () => {
       <CNavbar />
       <Main />
       <SearchModal />
+      <NoResultsModal />
     </div>
   );
 };

client/src/components/queryResult/NoResultsModal.js

+import React from 'react';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import { useDispatch, useSelector } from 'react-redux';
+import { closeNoResultModal, selectNoResultModalOpen, selectQuery } from '../navbar/querySlice';
+import Card from 'react-bootstrap/Card';
+
+export default function NoResultsModal(props) {
+  const dispatch = useDispatch();
+  const noResultModalOpen = useSelector(selectNoResultModalOpen);
+
+  // Function to close modal
+  const handleClose = () => dispatch(closeNoResultModal());
+
+  return (
+    <Modal
+      show={noResultModalOpen}
+      onHide={handleClose}
+      backdrop="static"
+      keyboard={false}
+      size="lg"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>No results!</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Card.Text>Your query produced no results.</Card.Text>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

client/src/components/search/SearchModal.js

@@ -128,14 +128,7 @@ export default function SearchModal() {
 
   return (
     <Form inline>
-      <Modal
-        show={showModal}
-        onHide={handleClose}
-        backdrop="static"
-        keyboard={false}
-        animation={false}
-        size="lg"
-      >
+      <Modal show={showModal} onHide={handleClose} backdrop="static" keyboard={false} size="lg">
         <Modal.Header closeButton>
           <Modal.Title>Advanced Search</Modal.Title>
         </Modal.Header>