-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6c71924
commit 1a0a3d4
Showing
9 changed files
with
215 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react' | ||
|
||
const Applicationcycles = () => { | ||
return ( | ||
<div> | ||
Applicationcycles | ||
</div> | ||
) | ||
} | ||
|
||
export default Applicationcycles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react' | ||
|
||
const Cohorts = () => { | ||
return ( | ||
<div> | ||
Cohorts | ||
</div> | ||
) | ||
} | ||
|
||
export default Cohorts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react' | ||
|
||
const Jobs = () => { | ||
return ( | ||
<div> | ||
jobs | ||
</div> | ||
) | ||
} | ||
|
||
export default Jobs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from 'react' | ||
|
||
|
||
const Programs = () => { | ||
return ( | ||
<div> | ||
Programs | ||
</div> | ||
) | ||
} | ||
|
||
export default Programs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react' | ||
|
||
const Roles = () => { | ||
return ( | ||
<div> | ||
roles | ||
</div> | ||
) | ||
} | ||
|
||
export default Roles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react' | ||
|
||
const Trainees = () => { | ||
return ( | ||
<div> | ||
Trainees | ||
</div> | ||
) | ||
} | ||
|
||
export default Trainees |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react' | ||
|
||
const Users = () => { | ||
return ( | ||
<div> | ||
users | ||
</div> | ||
) | ||
} | ||
|
||
export default Users |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import { useDispatch, useSelector } from 'react-redux'; | ||
import { useNavigate, useSearchParams } from 'react-router-dom'; | ||
import { fetchSearchData } from '../redux/actions/fetchSearchDataAction'; | ||
import { RootState } from '../redux/reducers'; | ||
import Users from '../components/search/users'; | ||
import Roles from '../components/search/roles'; | ||
import Jobs from '../components/search/jobs'; | ||
import Cohorts from '../components/search/cohorts'; | ||
import Programs from '../components/search/programs'; | ||
import Trainees from '../components/search/trainees'; | ||
import Applicationcycles from '../components/search/applicationcycles'; | ||
|
||
const Search = () => { | ||
const [searchParams] = useSearchParams(); // Hook to get URL query parameters | ||
const searchTerm = searchParams.get('q'); // Extract the 'q' parameter from query params | ||
const [filterAttribute, setFilterAttribute] = useState(''); // Example filter state, adjust as needed | ||
const [activeItem, setActiveItem] = useState<string>('Users'); // New state for active item | ||
|
||
const navigate = useNavigate(); | ||
const dispatch = useDispatch(); | ||
|
||
const searchResults = useSelector((state: RootState) => state.searchData.data); | ||
const loading = useSelector((state: RootState) => state.searchData.loading); | ||
const error = useSelector((state: RootState) => state.searchData.error); | ||
|
||
// Dispatch the action to fetch search results whenever searchTerm or filterAttribute changes | ||
useEffect(() => { | ||
if (searchTerm) { | ||
dispatch(fetchSearchData({ searchTerm, itemsPerPage: 10, page: 1, filterAttribute })); | ||
} | ||
}, [dispatch, searchTerm, filterAttribute]); | ||
|
||
// Log the search results for debugging | ||
console.log(searchResults); | ||
|
||
// Construct an array of items based on search results | ||
const items = [ | ||
{ | ||
name: 'Users', | ||
length: searchResults ? searchResults.users?.length : 0, | ||
}, | ||
{ | ||
name: 'Roles', | ||
length: searchResults ? searchResults.roles?.length : 0, | ||
}, | ||
{ | ||
name: 'Jobs', | ||
length: searchResults ? searchResults.jobs?.length : 0, | ||
}, | ||
{ | ||
name: 'Cohorts', | ||
length: searchResults ? searchResults.cohorts?.length : 0, | ||
}, | ||
{ | ||
name: 'Programs', | ||
length: searchResults ? searchResults.programs?.length : 0, | ||
}, | ||
{ | ||
name: 'Trainees', | ||
length: searchResults ? searchResults.trainees?.length : 0, | ||
}, | ||
{ | ||
name: 'Applicationcycles', | ||
length: searchResults ? searchResults.applicationCycles?.length : 0, | ||
}, | ||
]; | ||
|
||
console.log(items); | ||
|
||
// Example rendering logic (loading, error, results) | ||
return ( | ||
<div className='w-full'> | ||
<div className='w-full px-16 py-4 text-3xl text-white'> | ||
<h1>Search Results</h1> | ||
</div> | ||
<div className='flex flex-row gap-8 mx-12'> | ||
{items.map((item, index) => ( | ||
<div | ||
key={index} | ||
className={`flex gap-2 cursor-pointer ${activeItem === item.name | ||
? 'text-[#56C870]' | ||
: 'text-white' | ||
}`} | ||
onClick={() => setActiveItem(item.name)} | ||
> | ||
<span className={`my-2 border-b-2 ${activeItem === item.name ? 'border-[#56C870]' : 'border-none'}`}>{item.name} ({item.length})</span> | ||
</div> | ||
))} | ||
</div> | ||
<div className='w-full bg-white h-[.1px]'></div> | ||
<div> | ||
{activeItem === 'Users' && <Users />} | ||
{activeItem === 'Roles' && <Roles />} | ||
{activeItem === 'Jobs' && <Jobs />} | ||
{activeItem === 'Cohorts' && <Cohorts />} | ||
{activeItem === 'Programs' && <Programs />} | ||
{activeItem === 'Trainees' && <Trainees />} | ||
{activeItem === 'Applicationcycles' && <Applicationcycles />} | ||
</div> | ||
<div> | ||
{/* If loading, show a loading message */} | ||
{loading && <p>Loading...</p>} | ||
|
||
{/* If there's an error, display the error message */} | ||
{error && <p>Error: {error}</p>} | ||
|
||
{/* Display search results or a "no results" message */} | ||
{!loading && !error && searchResults && ( | ||
<div> | ||
<h2>Found {items[0].length} users</h2> | ||
{searchResults.users && searchResults.users.length > 0 ? ( | ||
<ul> | ||
{searchResults.users.map((user: any, index: number) => ( | ||
<li key={index}>{user.name}</li> // Assuming each user has a 'name' property | ||
))} | ||
</ul> | ||
) : ( | ||
<p>No users found for "{searchTerm}"</p> | ||
)} | ||
</div> | ||
)} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Search; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters