This repository has no description
fix search bar one error page
author
damedotblog
date
(Feb 19, 2025, 5:43 PM -0500)
commit
c49a29d0
c49a29d058f9ad4c8f681662d8656a92bae6b7c4
parent
e1823b5a
e1823b5a196339fe496081d764f1a014f31a5836
+33
-18
+32
-17
src/components/SearchBar/SearchBar.js
+32
-17
src/components/SearchBar/SearchBar.js
···
1
-
import React, { useState, useEffect, useRef, useCallback, useContext } from "react";
1
+
// SearchBar.jsx
2
+
import React, { useState, useEffect, useCallback } from "react";
2
3
import { useNavigate } from "react-router-dom";
3
-
import { ThemeContext } from '../../contexts/ThemeContext';
4
4
import "./SearchBar.css";
5
5
6
6
const SearchBar = () => {
7
-
const { isDarkMode } = useContext(ThemeContext);
8
7
const [username, setUsername] = useState("");
9
8
const [suggestions, setSuggestions] = useState([]);
10
9
const [autocompleteActive, setAutocompleteActive] = useState(false);
···
12
11
const [selectedSuggestion, setSelectedSuggestion] = useState('');
13
12
const [isLoading, setIsLoading] = useState(false);
14
13
const navigate = useNavigate();
15
-
const debounceTimeout = useRef(null);
16
14
15
+
// Debounce function (similar to AltTextRatingTool)
17
16
const debounce = (func, delay) => {
18
17
let timer;
19
18
const debounced = (...args) => {
···
26
25
return debounced;
27
26
};
28
27
28
+
// Fetch suggestions from the API
29
29
const fetchSuggestions = async (query) => {
30
30
if (!query) {
31
31
setSuggestions([]);
···
49
49
}
50
50
};
51
51
52
-
const debouncedFetchSuggestions = useRef(debounce(fetchSuggestions, 300)).current;
52
+
const debouncedFetchSuggestions = useCallback(debounce(fetchSuggestions, 300), []);
53
53
54
54
useEffect(() => {
55
55
if (!selectedSuggestion) {
···
60
60
};
61
61
}, [username, debouncedFetchSuggestions, selectedSuggestion]);
62
62
63
+
const handleNavigation = (handle) => {
64
+
// First, navigate to home to reset any error states
65
+
navigate("/home");
66
+
// Then, after a brief timeout, navigate to the profile
67
+
setTimeout(() => {
68
+
navigate(`/${encodeURIComponent(handle)}`);
69
+
}, 0);
70
+
};
71
+
63
72
const handleSubmit = (e) => {
64
73
e.preventDefault();
65
74
if (username.trim() !== "") {
66
-
const encodedUsername = encodeURIComponent(username.trim());
67
-
navigate(`/${encodedUsername}`);
75
+
handleNavigation(username.trim());
68
76
setUsername("");
69
77
setSuggestions([]);
70
78
setAutocompleteActive(false);
···
103
111
setSelectedSuggestion(selectedHandle);
104
112
setSuggestions([]);
105
113
setAutocompleteActive(false);
106
-
navigate(`/${encodeURIComponent(selectedHandle)}`);
114
+
handleNavigation(selectedHandle);
107
115
}
108
116
break;
109
117
case "Escape":
···
116
124
};
117
125
118
126
return (
119
-
<div className={`search-bar-container ${isDarkMode ? 'dark-mode' : ''}`}>
127
+
<div className="search-bar-container">
120
128
<form className="search-bar" onSubmit={handleSubmit} role="search">
121
129
<div style={{ position: 'relative' }}>
122
130
<input
123
131
type="text"
124
-
placeholder="(e.g. user.bsky.social)"
132
+
placeholder="(e.g. dame.bsky.social)"
125
133
value={username}
126
134
onChange={handleInputChange}
127
135
onKeyDown={handleKeyDown}
···
136
144
? `suggestion-${activeSuggestionIndex}`
137
145
: undefined
138
146
}
139
-
className={isDarkMode ? 'dark-mode' : ''}
140
147
/>
141
148
{autocompleteActive && suggestions.length > 0 && (
142
-
<div className={`autocomplete-items ${isDarkMode ? 'dark-mode' : ''}`}
143
-
id="autocomplete-items">
149
+
<div className="autocomplete-items" id="autocomplete-items">
144
150
{suggestions.map((actor, index) => (
145
151
<div
146
152
key={actor.handle}
147
-
className={`autocomplete-item ${index === activeSuggestionIndex ? 'active' : ''}
148
-
${isDarkMode ? 'dark-mode' : ''}`}
153
+
className={`autocomplete-item ${index === activeSuggestionIndex ? 'active' : ''}`}
149
154
onClick={() => {
150
155
setUsername(actor.handle);
151
156
setSelectedSuggestion(actor.handle);
152
157
setSuggestions([]);
153
158
setAutocompleteActive(false);
154
159
debouncedFetchSuggestions.cancel();
155
-
navigate(`/${encodeURIComponent(actor.handle)}`);
160
+
handleNavigation(actor.handle);
156
161
}}
157
162
>
158
163
<img
···
169
174
</div>
170
175
)}
171
176
</div>
172
-
<button type="submit" className={isDarkMode ? 'dark-mode' : ''}>Get Score</button>
177
+
<button type="submit">Search</button>
173
178
</form>
179
+
{isLoading && <div className="loading">Loading...</div>}
180
+
<div
181
+
role="status"
182
+
aria-live="polite"
183
+
className="sr-only"
184
+
>
185
+
{suggestions.length > 0
186
+
? `${suggestions.length} suggestions available.`
187
+
: "No suggestions available."}
188
+
</div>
174
189
</div>
175
190
);
176
191
};
+1
-1
src/components/UserProfile/UserProfile.js
+1
-1
src/components/UserProfile/UserProfile.js
···
247
247
return (
248
248
<AccountDataContext.Provider value={selectedAccountData}>
249
249
<Helmet>
250
-
<title>{`${username} - cred.blue Score`}</title>
250
+
<title>{`${username}'s cred.blue Score`}</title>
251
251
<meta name="description" content={`Check ${username}'s Bluesky credibility score and data footprint on cred.blue`} />
252
252
253
253
{/* OpenGraph Meta Tags */}