Added events search (#94)

Author: gautamjuyal

README.md

@@ -43,7 +43,7 @@ Create a new directory named `dist` in the root directory and run :
 npm run getEvents
 ```
 
-Copy `events.json` from `dist` to root directory.
+Copy `events.json` from `dist` to `src` directory.
 
 ### Run development server
 

src/App.jsx

@@ -7,17 +7,24 @@ import parse from 'html-react-parser';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import rrulePlugin from '@fullcalendar/rrule';
 
+import SearchHeader from './components/SearchHeader';
+import './App.css';
+
 import useEscKey from './hooks/useEscKey';
 
 import Icon from '@mdi/react';
 import { mdiCalendarRange, mdiMapMarkerOutline, mdiClose } from '@mdi/js';
-import './App.css';
+
+import eventData from './events.json'
 
 const htmlRegex = /<\/*html-blob>/;
 
 function App() {
 	const calendarRef = createRef();
 
+	const eventsArray = Array.from(eventData)
+	const [events, setEvents] = useState(eventsArray)
+
 	const [ loading, setLoading ] = useState(true);
 	const [ showEventDetails, setShowEventDetails ] = useState(false);
 	const [ eventDetails, setEventDetails ] = useState(false);
@@ -51,6 +58,16 @@ function App() {
 		setPopupPosition({left: position.left + 'px', top: position.top + 'px'})
 	}
 
+	const filterEvents = (searchTerm)=>{
+		if(!searchTerm) return setEvents(eventsArray) //handles searchbox clear
+		let matchingEvents = eventsArray.filter((event) => {
+			const titleIncludes = event.title?.toLowerCase().includes(searchTerm.toLowerCase())
+			const descriptionIncludes = event.description?.toLowerCase().includes(searchTerm.toLowerCase())
+			return titleIncludes || descriptionIncludes
+		})
+		setEvents(matchingEvents)
+	}
+
 	const handleEventClick = useCallback((clickInfo) => {
 		window.outerWidth > 600 && createPopupPosition(clickInfo.jsEvent)
 		setEventDetails(clickInfo.event);
@@ -174,7 +191,7 @@ function App() {
 				aspectRatio={aspectRatio}
 				handleWindowResize={true}
 				windowResize={windowResize}
-				events="events.json"
+				events={events}
 				headerToolbar={{
 					left   : 'prev,next today',
 					center : 'title',
@@ -188,10 +205,11 @@ function App() {
 				eventClick={handleEventClick}
 				loading={(isLoading) => setLoading(isLoading)}
 			/>
-		),[aspectRatio, initialView]);
+		),[aspectRatio, initialView, events]);
 
 	return (
 		<div className="App main">
+			<SearchHeader filterEvents={filterEvents} />
 			<div className="finos-calendar">{renderFullCalendar}</div>
 			{showEventDetails && renderEventDetails()}
 			{loading && <div className="finos-calendar-overlay" />}

src/components/SearchHeader.css

@@ -0,0 +1,54 @@
+.search-header{
+  display:flex;
+  justify-content: center;
+  padding: 20px 0;
+  gap:10px;
+}
+
+.search-header input{
+  max-width: 70%;
+  width: 250px;
+  padding: 8px 10px;
+  font-size: 16px;
+  border-radius: 4px;
+  border: 1px solid black;
+}
+
+.search-header input:focus, .search-header input:active{
+  border-color: #3788d8;
+  outline: none;
+}
+
+.search-header button{
+  font-size: 16px;
+  background-color: #3788d8;
+  color: white;
+  border: 0;
+  border-radius: 4px;
+  padding: 0 20px;
+  cursor: pointer
+}
+
+.search-header button:hover{
+  transition: 300ms ease;
+  background-color: #2a6097;
+}
+
+@media only screen and (prefers-color-scheme : dark){
+  .search-header input{
+    border-color: transparent;
+    background-color: #2c3e50;
+    color: #eee;
+  }
+  .search-header button{
+    background-color: #2c3e50;
+    color: #eee;
+  }
+  ::-ms-input-placeholder{
+    color: #d0d0d0;
+    opacity: 1;
+  }
+  ::placeholder{
+    color: #d0d0d0;
+  }
+}

src/components/SearchHeader.jsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import './SearchHeader.css'
+
+const SearchHeader = ({filterEvents})=>{
+  const [ searchTerm, setSearchTerm ] = useState("")
+
+  const handleInputTextChange = (e)=>{
+    setSearchTerm(e.target.value)
+    if(!e.target.value.trim()) filterEvents(false) // handles searchbox clear
+  }
+
+  const handleSearch = ()=>{
+		if(!searchTerm.trim()) return
+    filterEvents(searchTerm)
+	}
+
+  const handleEnterPress = (e)=>{
+    if(e.key === 'Enter') handleSearch()
+  }
+
+  return(
+    <div className="search-header">
+			<input type='text' placeholder='Search events' value={searchTerm} onChange={handleInputTextChange} onKeyDown={handleEnterPress}/>
+			<button onClick={handleSearch}>Search</button>
+		</div>
+  )
+}
+
+export default SearchHeader;