Skip to content

Commit 3096962

Browse files
fezcodefezcode
committed
feat: search for logs.
1 parent 4957758 commit 3096962

File tree

1 file changed

+66
-53
lines changed

1 file changed

+66
-53
lines changed

‎src/pages/LogsPage.js‎

Lines changed: 66 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const LogsPage = () => {
1212
const [loading, setLoading] = useState(true);
1313
const [hiddenLegends, setHiddenLegends] = useState([]);
1414
const [allCategoriesSelected, setAllCategoriesSelected] = useState(true);
15+
const [searchQuery, setSearchQuery] = useState('');
1516

1617
const handleToggleAllCategories = () => {
1718
if (allCategoriesSelected) {
@@ -47,9 +48,13 @@ const LogsPage = () => {
4748

4849
useEffect(() => {
4950
setFilteredLogs(
50-
logs.filter((log) => !hiddenLegends.includes(log.category)),
51+
logs.filter(
52+
(log) =>
53+
!hiddenLegends.includes(log.category) &&
54+
log.title.toLowerCase().includes(searchQuery.toLowerCase()),
55+
),
5156
);
52-
}, [logs, hiddenLegends]);
57+
}, [logs, hiddenLegends, searchQuery]);
5358

5459
useEffect(() => {
5560
const fetchLogs = async () => {
@@ -104,58 +109,66 @@ const LogsPage = () => {
104109
>
105110
<ArrowLeftIcon size={24} /> Back to Home
106111
</Link>
107-
<h1 className="text-4xl font-bold tracking-tight text-primary-400 sm:text-6xl mb-4 flex items-center">
108-
Logs
109-
</h1>
110-
<div
111-
className="relative flex justify-center items-center w-full cursor-pointer"
112-
onClick={() => setShowLegends(!showLegends)}
113-
>
114-
<hr className="border-gray-700 w-full absolute top-1/2 -translate-y-1/2" />
115-
<div className="relative border border-gray-700 bg-gray-900 px-4 z-10">
116-
{showLegends ? (
117-
<CaretUp size={32} className="text-primary-400" />
118-
) : (
119-
<CaretDown size={32} className="text-primary-400" />
120-
)}
121-
</div>
122-
</div>
123-
{showLegends && (
124-
<div className="mx-auto p-6 border border-gray-700 shadow-lg text-center bg-gray-900 opacity-80 mt-[-16px] mb-8">
125-
<h2 className="mb-[-16px] text-xl font-light tracking-tight text-white">
126-
Categories
127-
</h2>
128-
<ColorLegends
129-
onLegendClick={handleLegendClick}
130-
hiddenLegends={hiddenLegends}
131-
/>
132-
<div className="flex items-center justify-center mt-4">
133-
<span className="mr-2 text-white text-sm">Disable All</span>
134-
<label
135-
htmlFor="toggle-all-categories"
136-
className="flex items-center cursor-pointer"
137-
>
138-
<div className="relative">
139-
<input
140-
type="checkbox"
141-
id="toggle-all-categories"
142-
className="sr-only"
143-
checked={allCategoriesSelected}
144-
onChange={handleToggleAllCategories}
145-
/>
146-
<div
147-
className={`block w-10 h-6 rounded-full ${allCategoriesSelected ? 'bg-blue-500' : 'bg-gray-600'}`}
148-
></div>
149-
<div
150-
className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition ${allCategoriesSelected ? 'translate-x-4 bg-primary-500' : ''}`}
151-
></div>
112+
<h1 className="text-4xl font-bold tracking-tight text-primary-400 sm:text-6xl mb-4 flex items-center">
113+
Logs
114+
</h1>
115+
<div
116+
className="relative flex justify-center items-center w-full cursor-pointer"
117+
onClick={() => setShowLegends(!showLegends)}
118+
>
119+
<hr className="border-gray-700 w-full absolute top-1/2 -translate-y-1/2" />
120+
<div className="relative border border-gray-700 bg-gray-900 px-4 z-10">
121+
{showLegends ? (
122+
<CaretUp size={32} className="text-primary-400" />
123+
) : (
124+
<CaretDown size={32} className="text-primary-400" />
125+
)}
126+
</div>
152127
</div>
153-
</label>
154-
<span className="ml-2 text-white text-sm">Enable All</span>
155-
</div>
156-
</div>
157-
)}
158-
<div
128+
{showLegends && (
129+
<div className="mx-auto p-6 border border-gray-700 shadow-lg text-center bg-gray-900 opacity-80 mt-[-16px] mb-8">
130+
<h2 className="mt-4 mb-[-16px] text-xl font-light tracking-tight text-white">
131+
Categories
132+
</h2>
133+
<ColorLegends
134+
onLegendClick={handleLegendClick}
135+
hiddenLegends={hiddenLegends}
136+
/>
137+
<div className="flex items-center justify-center mt-4">
138+
<span className="mr-2 text-white text-sm">Disable All</span>
139+
<label
140+
htmlFor="toggle-all-categories"
141+
className="flex items-center cursor-pointer"
142+
>
143+
<div className="relative">
144+
<input
145+
type="checkbox"
146+
id="toggle-all-categories"
147+
className="sr-only"
148+
checked={allCategoriesSelected}
149+
onChange={handleToggleAllCategories}
150+
/>
151+
<div
152+
className={`block w-10 h-6 rounded-full ${allCategoriesSelected ? 'bg-blue-500' : 'bg-gray-600'}`}
153+
></div>
154+
<div
155+
className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition ${allCategoriesSelected ? 'translate-x-4 bg-primary-500' : ''}`}
156+
></div>
157+
</div>
158+
</label>
159+
<span className="ml-2 text-white text-sm">Enable All</span>
160+
</div>
161+
<div className="flex items-center justify-center mt-8 mb-4 ml-4 mr-4">
162+
<input
163+
type="text"
164+
placeholder="Search logs by title..."
165+
className="w-full p-3 border border-gray-700 rounded-md bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:border-primary-400"
166+
value={searchQuery}
167+
onChange={(e) => setSearchQuery(e.target.value)}
168+
/>
169+
</div>
170+
</div>
171+
)} <div
159172
className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 ${!showLegends ? 'mt-8' : ''}`}
160173
>
161174
{filteredLogs.map((log) => (

0 commit comments

Comments
 (0)