seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

Refactor socket context usage in CategoryBox, SearchBar, and Home components for improved clarity and consistency in data fetching.

Browse Source
This commit is contained in:
seb
2025-07-03 05:55:36 +02:00
parent 245f5067ed
commit e4d077e402
3 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/CategoryBox.js
View File

@@ -22,7 +22,7 @@ const CategoryBox = ({
const [imageUrl, setImageUrl] = useState(null); const [imageUrl, setImageUrl] = useState(null);
const [imageError, setImageError] = useState(false); const [imageError, setImageError] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const {socket} = useContext(SocketContext); const context = useContext(SocketContext);
useEffect(() => { useEffect(() => {
let objectUrl = null; let objectUrl = null;
@@ -61,10 +61,10 @@ const CategoryBox = ({
} }
// If socket is available and connected, fetch the image // If socket is available and connected, fetch the image
if (socket && socket.connected && id && !isLoading) { if (context && context.socket && context.socket.connected && id && !isLoading) {
setIsLoading(true); setIsLoading(true);
socket.emit('getCategoryPic', { categoryId: id }, (response) => { context.socket.emit('getCategoryPic', { categoryId: id }, (response) => {
setIsLoading(false); setIsLoading(false);
if (response.success) { if (response.success) {
@@ -119,7 +119,7 @@ const CategoryBox = ({
URL.revokeObjectURL(objectUrl); URL.revokeObjectURL(objectUrl);
} }
}; };
}, [socket, socket?.connected, id, isLoading]); }, [context, context?.socket?.connected, id, isLoading]);
return ( return (
<Paper <Paper

8
src/components/header/SearchBar.js
View File

@@ -15,7 +15,7 @@ import SocketContext from "../../contexts/SocketContext.js";
const SearchBar = () => { const SearchBar = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const {socket} = React.useContext(SocketContext); const context = React.useContext(SocketContext);
const searchParams = new URLSearchParams(location.search); const searchParams = new URLSearchParams(location.search);
// State management // State management
@@ -58,7 +58,7 @@ const SearchBar = () => {
// @note Autocomplete function using getSearchProducts Socket.io API - returns objects with name and seoName // @note Autocomplete function using getSearchProducts Socket.io API - returns objects with name and seoName
const fetchAutocomplete = React.useCallback( const fetchAutocomplete = React.useCallback(
(query) => { (query) => {
if (!socket || !query || query.length < 2) { if (!context || !context.socket || !context.socket.connected || !query || query.length < 2) {
setSuggestions([]); setSuggestions([]);
setShowSuggestions(false); setShowSuggestions(false);
setLoadingSuggestions(false); setLoadingSuggestions(false);
@@ -67,7 +67,7 @@ const SearchBar = () => {
setLoadingSuggestions(true); setLoadingSuggestions(true);
socket.emit( context.socket.emit(
"getSearchProducts", "getSearchProducts",
{ {
query: query.trim(), query: query.trim(),
@@ -90,7 +90,7 @@ const SearchBar = () => {
} }
); );
}, },
[socket] [context]
); );
const handleSearchChange = (e) => { const handleSearchChange = (e) => {

8
src/pages/Home.js
View File

@@ -151,16 +151,16 @@ const Home = () => {
const [rootCategories, setRootCategories] = useState(() => const [rootCategories, setRootCategories] = useState(() =>
initializeCategories() initializeCategories()
); );
const {socket} = useContext(SocketContext); const context = useContext(SocketContext);
useEffect(() => { useEffect(() => {
// Only fetch from socket if we don't already have categories and we're in browser // Only fetch from socket if we don't already have categories and we're in browser
if ( if (
rootCategories.length === 0 && rootCategories.length === 0 &&
socket && context && context.socket && context.socket.connected &&
typeof window !== "undefined" typeof window !== "undefined"
) { ) {
socket.emit("categoryList", { categoryId: 209 }, (response) => { context.socket.emit("categoryList", { categoryId: 209 }, (response) => {
if (response && response.categoryTree) { if (response && response.categoryTree) {
// Store in cache // Store in cache
try { try {
@@ -176,7 +176,7 @@ const Home = () => {
} }
}); });
} }
}, [socket, rootCategories.length]); }, [context, context?.socket?.connected, rootCategories.length]);
// Filter categories (excluding specific IDs) // Filter categories (excluding specific IDs)
const filteredCategories = rootCategories.filter( const filteredCategories = rootCategories.filter(