Implemented SearchBar component

Author: Ariit0

src/App.js

@@ -1,20 +1,39 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import './App.css';
+import { useFetch } from './hooks/useFetch';
 
+import { SearchBar } from './components/SearchBar/SearchBar.component';
 import { JobCardList } from './components/JobCardList/JobCardList.component';
 
-// using class system (no hooks) for practice
-class App extends Component {
-  render() {
+const App = () => {
+    const [search, setSearch] = useState("");
+
+    const res = useFetch("http://localhost:8080/beta/jobs", {});
+
+    if (res.isLoading || !res.response) {
+        return <div>Loading...</div>
+    }
+
+    const jobList = res.response;
+    
     return (
-      <div className='App'>
-        <div className='container'>
-          <h1>Mobius Final Fantasy Job Cards</h1>
-          <JobCardList/>
+        <div className='App'>
+            <div className='container'>
+                <h1>Mobius Final Fantasy Job Cards</h1>
+                <SearchBar 
+                    placeholder='search jobs'
+                    handleChange={e => setSearch(e.target.value)}
+                />
+
+                <JobCardList 
+                    jobList={
+                        jobList.filter(jobs => jobs.jobName.toLowerCase()
+                            .includes(search.toLocaleLowerCase()))
+                    }
+                />
+            </div>
         </div>
-      </div>
     );
-  }
 }
 
 export default App;

src/components/JobCard/JobCard.component.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Card } from 'react-bootstrap';
 
 export const JobCard = (props) => {

src/components/JobCardList/JobCardList.component.jsx

@@ -1,21 +1,13 @@
 import React from 'react';
-import { useFetch } from '../../hooks/useFetch';
-
 import { JobCard } from '../JobCard/JobCard.component';
 
 export const JobCardList = (props) => {
-    const res = useFetch("http://localhost:8080/beta/jobs", {});
-
-    if (res.isLoading || !res.response) {
-        return <div>Loading...</div>
-    }
-
-    const jobList = res.response;
+    const jobList = props.jobList;
 
     return (
         <div className='row'> {
             jobList.map(job => (
-                <JobCard jobs={job} />
+                <JobCard key={job.jobQueryString} jobs={job} />
             ))
         } </div>
     );

src/components/SearchBar/SearchBar.component.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const SearchBar = ({ placeholder, handleChange }) => {
+    return (
+        <input 
+            className='form-control'
+            type='search' 
+            placeholder={placeholder} 
+            onChange={handleChange}
+        />
+    );
+}