├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── setupTests.js
    ├── App.test.js
    ├── reportWebVitals.js
    ├── index.js
    ├── components
    │   ├── Board.js
    │   ├── NavBar.js
    │   ├── searchModal.js
    │   └── formModal.js
    ├── App.css
    └── App.js
├── .gitignore
├── README.md
├── package.json
└── .eslintcache


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alitahir4024/note-taking-app-reactjs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alitahir4024/note-taking-app-reactjs/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alitahir4024/note-taking-app-reactjs/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import reportWebVitals from "./reportWebVitals";
 5 | 
 6 | ReactDOM.render(<App />, document.getElementById("root"));
 7 | 
 8 | // If you want to start measuring performance in your app, pass a function
 9 | // to log results (for example: reportWebVitals(console.log))
10 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
11 | reportWebVitals();
12 | 


--------------------------------------------------------------------------------
/src/components/Board.js:
--------------------------------------------------------------------------------
 1 | const Board = ({ notesData }) => {
 2 |   return (
 3 |     <main className="Board">
 4 |       {notesData.map((noteObj, noteIndex) => {
 5 |         return (
 6 |           <div className="note" key={noteIndex}>
 7 |             <div className="note-text">
 8 |               <h1>{noteObj.noteMainTitle}</h1>
 9 |               <h3>{noteObj.noteSubTitle}</h3>
10 |               <p>{noteObj.noteDescription}</p>
11 |             </div>
12 |           </div>
13 |         );
14 |       })}
15 |     </main>
16 |   );
17 | };
18 | 
19 | export default Board;
20 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Note Taking App ReactJS.
 2 | 
 3 | Note Taking App developed using ReactJS and its features.
 4 | 
 5 | ## Technologies Used:
 6 | 
 7 | * HTML.
 8 | * CSS.
 9 | * ReactJS.
10 | * React Hooks.
11 | * Functional Components.
12 | * React Responsive Modal.
13 | 
14 | ## Silent Features:
15 | 
16 | * User can add unlimited notes.
17 | * User can add main and sub title and also some description of the note.
18 | * User can search between the notes based on the note main titile.
19 | * Modal is used for serching and adding the notes.
20 | 
21 | ## Project Preview:
22 | 
23 | [Note Taking App](https://alitahir4024.github.io/note-taking-app-reactjs/)
24 | 


--------------------------------------------------------------------------------
/src/components/NavBar.js:
--------------------------------------------------------------------------------
 1 | import { FaPlus, FaSearch, FaSyncAlt } from "react-icons/fa";
 2 | 
 3 | const NavBar = ({
 4 |   showFormModalFunction,
 5 |   noteClearanceFunction,
 6 |   showSearchModalFunction,
 7 | }) => {
 8 |   return (
 9 |     <nav className="NavBar">
10 |       <h1>NOTELY</h1>
11 |       <div className="actions">
12 |         <FaPlus className="action-icon" onClick={showFormModalFunction} />
13 |         <FaSearch className="action-icon" onClick={showSearchModalFunction} />
14 |         <FaSyncAlt className="action-icon" onClick={noteClearanceFunction} />
15 |       </div>
16 |     </nav>
17 |   );
18 | };
19 | 
20 | export default NavBar;
21 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 |     <title>Note Taking App ReactJS</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/components/searchModal.js:
--------------------------------------------------------------------------------
 1 | import "react-responsive-modal/styles.css";
 2 | import { Modal } from "react-responsive-modal";
 3 | 
 4 | const SearchModal = (props) => {
 5 |   return (
 6 |     <Modal
 7 |       open={props.searchModalShowStatement}
 8 |       onClose={props.closeSearchModalFunction}
 9 |       classNames={{
10 |         modal: "react_responsive_modal_1 react_responsive_modal_2",
11 |         closeIcon: "form_close_btn",
12 |       }}
13 |       center
14 |     >
15 |       <div className="form_modal search_modal">
16 |         <h1>Search Note</h1>
17 |         <form onSubmit={props.noteSearchFunction}>
18 |           <input
19 |             type="text"
20 |             name="search-input"
21 |             placeholder="Search By name"
22 |             onChange={props.noteSearchQueryFunction}
23 |             value={props.searchQueryValue}
24 |             required
25 |           />
26 |           <button type="submit" onClick={props.closeSearchModalFunction}>
27 |             Search Note
28 |           </button>
29 |         </form>
30 |       </div>
31 |     </Modal>
32 |   );
33 | };
34 | 
35 | export default SearchModal;
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "note-taking-app-reactjs-final",
 3 |   "homepage": "http://alitahir4024.github.io/note-taking-app-reactjs",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "^5.11.6",
 8 |     "@testing-library/react": "^11.2.2",
 9 |     "@testing-library/user-event": "^12.5.0",
10 |     "gh-pages": "^3.1.0",
11 |     "react": "^17.0.1",
12 |     "react-dom": "^17.0.1",
13 |     "react-icons": "^4.1.0",
14 |     "react-responsive-modal": "^6.0.0",
15 |     "react-scripts": "4.0.1",
16 |     "web-vitals": "^0.2.4"
17 |   },
18 |   "scripts": {
19 |     "start": "react-scripts start",
20 |     "build": "react-scripts build",
21 |     "test": "react-scripts test",
22 |     "eject": "react-scripts eject",
23 |     "predeploy": "npm run build",
24 |     "deploy": "gh-pages -d build"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/formModal.js:
--------------------------------------------------------------------------------
 1 | import "react-responsive-modal/styles.css";
 2 | import { Modal } from "react-responsive-modal";
 3 | 
 4 | const FormModal = (props) => {
 5 |   return (
 6 |     <Modal
 7 |       open={props.noteModalShowStatement}
 8 |       onClose={props.closeFormModalFunction}
 9 |       classNames={{
10 |         modal: "react_responsive_modal_1",
11 |         closeIcon: "form_close_btn",
12 |       }}
13 |       center
14 |     >
15 |       <div className="form_modal">
16 |         <h1>Create Your Note</h1>
17 |         <form onSubmit={props.noteSubmissionFunction}>
18 |           <input
19 |             type="text"
20 |             name="noteMainTitle"
21 |             placeholder="Note Main Title"
22 |             onChange={props.noteMainTitleFunction}
23 |             value={props.noteMainTitleValue}
24 |             required
25 |           />
26 |           <input
27 |             type="text"
28 |             name="noteSubTitle"
29 |             placeholder="Note Sub Title"
30 |             onChange={props.noteSubTitleFunction}
31 |             value={props.noteSubTitleValue}
32 |             required
33 |           />
34 |           <textarea
35 |             name="noteDescription"
36 |             cols="30"
37 |             rows="10"
38 |             placeholder="Note Description"
39 |             onChange={props.noteDescriptionFunction}
40 |             value={props.noteDescriptionValue}
41 |             required
42 |           />
43 |           <button type="submit" onClick={props.closeFormModalFunction}>
44 |             Create Note
45 |           </button>
46 |         </form>
47 |       </div>
48 |     </Modal>
49 |   );
50 | };
51 | 
52 | export default FormModal;
53 | 


--------------------------------------------------------------------------------
/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/index.js":"1","/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/App.js":"2","/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/reportWebVitals.js":"3","/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/NavBar.js":"4","/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/formModal.js":"5","/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/Board.js":"6","/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/searchModal.js":"7"},{"size":427,"mtime":1607169482590,"results":"8","hashOfConfig":"9"},{"size":3316,"mtime":1607250983166,"results":"10","hashOfConfig":"9"},{"size":362,"mtime":1607167176671,"results":"11","hashOfConfig":"9"},{"size":548,"mtime":1607247918139,"results":"12","hashOfConfig":"9"},{"size":1442,"mtime":1607250346849,"results":"13","hashOfConfig":"9"},{"size":468,"mtime":1607185974979,"results":"14","hashOfConfig":"9"},{"size":961,"mtime":1607250700378,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"1mi52v4",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/index.js",[],["31","32"],"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/App.js",[],"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/reportWebVitals.js",[],"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/NavBar.js",[],"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/formModal.js",[],"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/Board.js",[],"/home/the_dev_ninja/Workspace/uncompleted projects/note-taking-app-reactjs-final/src/components/searchModal.js",[],{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","replacedBy":"36"},"no-native-reassign",["37"],"no-negated-in-lhs",["38"],"no-global-assign","no-unsafe-negation"]


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   list-style: none;
  5 |   text-decoration: none;
  6 |   outline: none;
  7 |   color: inherit;
  8 |   font-family: monospace;
  9 | }
 10 | 
 11 | body {
 12 |   background-color: #eeeeee;
 13 |   font-size: 1rem;
 14 | }
 15 | 
 16 | .NavBar {
 17 |   height: auto;
 18 |   background-color: black;
 19 |   padding: 20px 0px;
 20 | }
 21 | 
 22 | .NavBar,
 23 | .actions {
 24 |   display: flex;
 25 |   align-items: center;
 26 |   justify-content: space-evenly;
 27 |   color: white;
 28 |   font-size: x-large;
 29 | }
 30 | 
 31 | .NavBar > h1 {
 32 |   width: 45%;
 33 |   text-align: center;
 34 | }
 35 | 
 36 | .actions {
 37 |   width: 55%;
 38 | }
 39 | 
 40 | .action-icon {
 41 |   cursor: pointer;
 42 | }
 43 | 
 44 | .react_responsive_modal_1 {
 45 |   height: 55%;
 46 |   border-radius: 5px;
 47 | }
 48 | 
 49 | .form_modal,
 50 | .form_modal > form,
 51 | .note-text {
 52 |   display: grid;
 53 |   align-content: space-around;
 54 |   justify-content: space-evenly;
 55 | }
 56 | 
 57 | .form_modal {
 58 |   height: 100%;
 59 | }
 60 | 
 61 | .form_close_btn {
 62 |   display: none;
 63 | }
 64 | 
 65 | .form_modal > h1 {
 66 |   font-weight: bold;
 67 |   font-size: 2rem;
 68 |   color: #444444;
 69 | }
 70 | 
 71 | .form_modal > form {
 72 |   height: 45vh;
 73 | }
 74 | 
 75 | .search_modal > form {
 76 |   height: 40vh;
 77 | }
 78 | 
 79 | .form_modal > form > input {
 80 |   padding: 10px 10px;
 81 |   font-weight: normal;
 82 |   font-size: 1rem;
 83 |   letter-spacing: 1.2px;
 84 |   color: #757575;
 85 | }
 86 | 
 87 | .form_modal > form > input::placeholder,
 88 | .form_modal > form > textarea::placeholder {
 89 |   font-weight: bold;
 90 |   font-size: 1.2rem;
 91 |   letter-spacing: 1.2px;
 92 |   color: #444444;
 93 |   transition: all 0.5s;
 94 | }
 95 | 
 96 | .form_modal > form > input:focus::placeholder,
 97 | .form_modal > form > textarea:focus::placeholder {
 98 |   opacity: 0;
 99 |   visibility: hidden;
100 | }
101 | 
102 | .form_modal > form > textarea {
103 |   padding: 10px 10px;
104 | }
105 | 
106 | .form_modal > form > button {
107 |   padding: 15px 0px;
108 | }
109 | 
110 | .Board {
111 |   height: auto;
112 |   width: 100%;
113 |   display: inline-block;
114 | }
115 | 
116 | .note {
117 |   display: inline-block;
118 |   height: 40vh;
119 |   width: 90%;
120 |   margin: 15px 15px;
121 |   padding-top: 13px;
122 |   background-color: #fff;
123 |   border-radius: 5px;
124 |   box-shadow: 0px 0px 25px -2px rgba(0, 0, 0, 0.3);
125 | }
126 | 
127 | .note-text {
128 |   height: 95%;
129 |   width: 95%;
130 |   grid-template-columns: 0.99fr;
131 |   grid-template-rows: 4.5vh 5vh 0.85fr;
132 |   margin: auto;
133 | }
134 | 
135 | .note-text > h1 {
136 |   font-weight: bold;
137 |   text-transform: capitalize;
138 |   font-size: 1.5rem;
139 |   color: #323232;
140 | }
141 | 
142 | .note-text > h3 {
143 |   font-weight: bold;
144 |   text-transform: uppercase;
145 |   font-size: 1.2rem;
146 |   color: #4d4b4b;
147 |   padding-top: 10px;
148 | }
149 | 
150 | .note-text > p {
151 |   overflow-y: scroll;
152 |   font-weight: normal;
153 |   font-size: large;
154 |   line-height: 3vh;
155 |   color: rgba(0, 0, 0, 0.8);
156 | }
157 | 
158 | @media (min-width: 550px) and (max-width: 850px) {
159 |   .react_responsive_modal_1 {
160 |     height: 50%;
161 |     width: 50vw;
162 |   }
163 | 
164 |   .note {
165 |     height: 30vh;
166 |     width: 40%;
167 |     margin: 50px 20px;
168 |   }
169 | }
170 | 
171 | @media (min-width: 851px) {
172 |   .react_responsive_modal_1 {
173 |     height: 55%;
174 |     width: 40vw;
175 |   }
176 | 
177 |   .note {
178 |     height: 30vh;
179 |     width: 30%;
180 |     margin: 50px 20px;
181 |   }
182 | }
183 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import { Fragment, useState } from "react";
  2 | import "./App.css";
  3 | import NavBar from "./components/NavBar";
  4 | import FormModal from "./components/formModal";
  5 | import SearchModal from "./components/searchModal";
  6 | import Board from "./components/Board";
  7 | 
  8 | function App() {
  9 |   // show and hide implementations on form modal
 10 | 
 11 |   const [showFormModal, setShowFormModal] = useState(false);
 12 | 
 13 |   const openFormModal = () => {
 14 |     setShowFormModal(true);
 15 |   };
 16 | 
 17 |   const closeFormModal = () => {
 18 |     setShowFormModal(false);
 19 |   };
 20 | 
 21 |   // show and hide implementation on search modal
 22 | 
 23 |   const [showSearchModal, setShowSearchModal] = useState(false);
 24 | 
 25 |   const openSearchModal = () => {
 26 |     setShowSearchModal(true);
 27 |   };
 28 | 
 29 |   const closeSearchModal = () => {
 30 |     setShowSearchModal(false);
 31 |   };
 32 | 
 33 |   // got the main and sub title of the note
 34 | 
 35 |   const [noteMainTitle, setNoteMainTitle] = useState("");
 36 | 
 37 |   const handleNoteMainTitle = (e) => {
 38 |     setNoteMainTitle(e.target.value);
 39 |   };
 40 | 
 41 |   const [noteSubTitle, setNoteSubTitle] = useState("");
 42 | 
 43 |   const handleNoteSubTitle = (e) => {
 44 |     setNoteSubTitle(e.target.value);
 45 |   };
 46 | 
 47 |   // got the description of the note
 48 | 
 49 |   const [noteDescription, setNoteDescription] = useState("");
 50 | 
 51 |   const handleNoteDescription = (e) => {
 52 |     setNoteDescription(e.target.value);
 53 |   };
 54 | 
 55 |   // submission of the note
 56 | 
 57 |   const [notes, setNotes] = useState([]);
 58 | 
 59 |   const handleNoteSubmission = (e) => {
 60 |     e.preventDefault();
 61 |     setNotes([...notes, { noteMainTitle, noteSubTitle, noteDescription }]);
 62 |     setNoteMainTitle("");
 63 |     setNoteSubTitle("");
 64 |     setNoteDescription("");
 65 |   };
 66 | 
 67 |   // clear all the notes
 68 | 
 69 |   const handleClearNotes = () => {
 70 |     setNotes("");
 71 |   };
 72 | 
 73 |   // searching the notes
 74 | 
 75 |   const [searchNoteQuery, setSearchNoteQuery] = useState("");
 76 | 
 77 |   const handleNoteSearchFunction = (e) => {
 78 |     setSearchNoteQuery(e.target.value);
 79 |   };
 80 | 
 81 |   const handleSearchFunction = (e) => {
 82 |     e.preventDefault();
 83 |     const searchedNotes = notes.filter((obj) => {
 84 |       return obj.noteMainTitle.includes(searchNoteQuery);
 85 |     });
 86 |     setNotes(searchedNotes);
 87 |     console.log(searchedNotes);
 88 |   };
 89 | 
 90 |   return (
 91 |     <Fragment>
 92 |       <NavBar
 93 |         // open modals functions props
 94 |         showFormModalFunction={openFormModal}
 95 |         showSearchModalFunction={openSearchModal}
 96 |         noteClearanceFunction={handleClearNotes}
 97 |       />
 98 |       <FormModal
 99 |         // modal props
100 |         noteModalShowStatement={showFormModal}
101 |         closeFormModalFunction={closeFormModal}
102 |         // input function props
103 |         noteMainTitleFunction={handleNoteMainTitle}
104 |         noteSubTitleFunction={handleNoteSubTitle}
105 |         noteDescriptionFunction={handleNoteDescription}
106 |         // input value props
107 |         noteMainTitleValue={noteMainTitle}
108 |         noteSubTitleValue={noteSubTitle}
109 |         noteDescriptionValue={noteDescription}
110 |         // note submission prop
111 |         noteSubmissionFunction={handleNoteSubmission}
112 |       />
113 |       <SearchModal
114 |         // modal props
115 |         searchModalShowStatement={showSearchModal}
116 |         closeSearchModalFunction={closeSearchModal}
117 |         // note search props
118 |         noteSearchFunction={handleSearchFunction}
119 |         searchQueryValue={searchNoteQuery}
120 |         noteSearchQueryFunction={handleNoteSearchFunction}
121 |       />
122 |       <Board notesData={notes} />
123 |     </Fragment>
124 |   );
125 | }
126 | 
127 | export default App;
128 | 


--------------------------------------------------------------------------------