REFACTOR: Clean code, don't show category name on categoryPage, fix path, remove console logs
This commit is contained in:
Chris-1010
@@ -8,96 +8,89 @@ import { CategoryType } from "../types/CategoryType";
|
||||
import { getCategoryThumbnail } from "../utils/thumbnailUtils";
|
||||
|
||||
const AllCategoriesPage: React.FC = () => {
|
||||
const [categories, setCategories] = useState<CategoryType[]>([]);
|
||||
const navigate = useNavigate();
|
||||
const [categoryOffset, setCategoryOffset] = useState(0);
|
||||
const [noCategories, setNoCategories] = useState(12);
|
||||
const [hasMoreData, setHasMoreData] = useState(true);
|
||||
|
||||
const listRowRef = useRef<any>(null);
|
||||
const isLoading = useRef(false);
|
||||
|
||||
const fetchCategories = async () => {
|
||||
// If already loading, skip this fetch
|
||||
if (isLoading.current) return;
|
||||
|
||||
isLoading.current = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/categories/popular/${noCategories}/${categoryOffset}`);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch categories");
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
if (data.length === 0) {
|
||||
setHasMoreData(false);
|
||||
return [];
|
||||
}
|
||||
const [categories, setCategories] = useState<CategoryType[]>([]);
|
||||
const navigate = useNavigate();
|
||||
const [categoryOffset, setCategoryOffset] = useState(0);
|
||||
const [noCategories, setNoCategories] = useState(12);
|
||||
const [hasMoreData, setHasMoreData] = useState(true);
|
||||
|
||||
setCategoryOffset(prev => prev + data.length);
|
||||
const listRowRef = useRef<any>(null);
|
||||
const isLoading = useRef(false);
|
||||
|
||||
const processedCategories = data.map((category: any) => ({
|
||||
type: "category" as const,
|
||||
id: category.category_id,
|
||||
title: category.category_name,
|
||||
viewers: category.num_viewers,
|
||||
thumbnail: getCategoryThumbnail(category.category_name)
|
||||
}));
|
||||
const fetchCategories = async () => {
|
||||
// If already loading, skip this fetch
|
||||
if (isLoading.current) return;
|
||||
|
||||
setCategories(prev => [...prev, ...processedCategories]);
|
||||
return processedCategories;
|
||||
} catch (error) {
|
||||
console.error("Error fetching categories:", error);
|
||||
return [];
|
||||
} finally {
|
||||
isLoading.current = false;
|
||||
}
|
||||
};
|
||||
isLoading.current = true;
|
||||
|
||||
useEffect(() => {
|
||||
fetchCategories();
|
||||
}, []);
|
||||
try {
|
||||
const response = await fetch(`/api/categories/popular/${noCategories}/${categoryOffset}`);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch categories");
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
const loadOnScroll = async () => {
|
||||
if (hasMoreData && listRowRef.current) {
|
||||
const newCategories = await fetchCategories();
|
||||
if (newCategories?.length > 0) {
|
||||
listRowRef.current.addMoreItems(newCategories);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (data.length === 0) {
|
||||
setHasMoreData(false);
|
||||
return [];
|
||||
}
|
||||
|
||||
fetchContentOnScroll(loadOnScroll, hasMoreData);
|
||||
setCategoryOffset((prev) => prev + data.length);
|
||||
|
||||
if (hasMoreData && !categories.length) return <LoadingScreen />;
|
||||
const processedCategories = data.map((category: any) => ({
|
||||
type: "category" as const,
|
||||
id: category.category_id,
|
||||
title: category.category_name,
|
||||
viewers: category.num_viewers,
|
||||
thumbnail: getCategoryThumbnail(category.category_name),
|
||||
}));
|
||||
|
||||
const handleCategoryClick = (categoryName: string) => {
|
||||
console.log(categoryName);
|
||||
navigate(`/category/${categoryName}`);
|
||||
};
|
||||
setCategories((prev) => [...prev, ...processedCategories]);
|
||||
return processedCategories;
|
||||
} catch (error) {
|
||||
console.error("Error fetching categories:", error);
|
||||
return [];
|
||||
} finally {
|
||||
isLoading.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DynamicPageContent
|
||||
className="min-h-screen"
|
||||
>
|
||||
<ListRow
|
||||
ref={listRowRef}
|
||||
type="category"
|
||||
title="All Categories"
|
||||
items={categories}
|
||||
onItemClick={handleCategoryClick}
|
||||
extraClasses="bg-[var(--recommend)] text-center"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
wrap={true}
|
||||
/>
|
||||
{!hasMoreData && !categories.length && (
|
||||
<div className="text-center text-gray-500 p-4">
|
||||
No more categories to load
|
||||
</div>
|
||||
)}
|
||||
</DynamicPageContent>
|
||||
);
|
||||
useEffect(() => {
|
||||
fetchCategories();
|
||||
}, []);
|
||||
|
||||
const loadOnScroll = async () => {
|
||||
if (hasMoreData && listRowRef.current) {
|
||||
const newCategories = await fetchCategories();
|
||||
if (newCategories?.length > 0) {
|
||||
listRowRef.current.addMoreItems(newCategories);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchContentOnScroll(loadOnScroll, hasMoreData);
|
||||
|
||||
if (hasMoreData && !categories.length) return <LoadingScreen />;
|
||||
|
||||
const handleCategoryClick = (categoryName: string) => {
|
||||
navigate(`/category/${categoryName}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<DynamicPageContent className="min-h-screen">
|
||||
<ListRow
|
||||
ref={listRowRef}
|
||||
type="category"
|
||||
title="All Categories"
|
||||
items={categories}
|
||||
onItemClick={handleCategoryClick}
|
||||
extraClasses="bg-[var(--recommend)] text-center"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
wrap={true}
|
||||
/>
|
||||
{!hasMoreData && !categories.length && <div className="text-center text-gray-500 p-4">No more categories to load</div>}
|
||||
</DynamicPageContent>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllCategoriesPage;
|
||||
export default AllCategoriesPage;
|
||||
|
||||
@@ -11,124 +11,113 @@ import { StreamType } from "../types/StreamType";
|
||||
import { getCategoryThumbnail } from "../utils/thumbnailUtils";
|
||||
|
||||
const CategoryPage: React.FC = () => {
|
||||
const { categoryName } = useParams<{ categoryName: string }>();
|
||||
const [streams, setStreams] = useState<StreamType[]>([]);
|
||||
const listRowRef = useRef<any>(null);
|
||||
const isLoading = useRef(false);
|
||||
const [streamOffset, setStreamOffset] = useState(0);
|
||||
const [noStreams, setNoStreams] = useState(12);
|
||||
const [hasMoreData, setHasMoreData] = useState(true);
|
||||
const { isLoggedIn } = useAuth();
|
||||
const {
|
||||
isCategoryFollowing,
|
||||
checkCategoryFollowStatus,
|
||||
followCategory,
|
||||
unfollowCategory,
|
||||
} = useCategoryFollow();
|
||||
const { categoryName } = useParams<{ categoryName: string }>();
|
||||
const [streams, setStreams] = useState<StreamType[]>([]);
|
||||
const listRowRef = useRef<any>(null);
|
||||
const isLoading = useRef(false);
|
||||
const [streamOffset, setStreamOffset] = useState(0);
|
||||
const [noStreams, setNoStreams] = useState(12);
|
||||
const [hasMoreData, setHasMoreData] = useState(true);
|
||||
const { isLoggedIn } = useAuth();
|
||||
const { isCategoryFollowing, checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow();
|
||||
|
||||
useEffect(() => {
|
||||
if (categoryName) checkCategoryFollowStatus(categoryName);
|
||||
}, [categoryName]);
|
||||
useEffect(() => {
|
||||
if (categoryName) checkCategoryFollowStatus(categoryName);
|
||||
}, [categoryName]);
|
||||
|
||||
const fetchCategoryStreams = async () => {
|
||||
// If already loading, skip this fetch
|
||||
if (isLoading.current) return;
|
||||
const fetchCategoryStreams = async () => {
|
||||
// If already loading, skip this fetch
|
||||
if (isLoading.current) return;
|
||||
|
||||
isLoading.current = true;
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/streams/popular/${categoryName}/${noStreams}/${streamOffset}`
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch category streams");
|
||||
}
|
||||
const data = await response.json();
|
||||
isLoading.current = true;
|
||||
try {
|
||||
const response = await fetch(`/api/streams/popular/${categoryName}/${noStreams}/${streamOffset}`);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch category streams");
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
if (data.length === 0) {
|
||||
setHasMoreData(false);
|
||||
return [];
|
||||
}
|
||||
if (data.length === 0) {
|
||||
setHasMoreData(false);
|
||||
return [];
|
||||
}
|
||||
|
||||
setStreamOffset((prev) => prev + data.length);
|
||||
setStreamOffset((prev) => prev + data.length);
|
||||
|
||||
const processedStreams = data.map((stream: any) => ({
|
||||
type: "stream",
|
||||
id: stream.user_id,
|
||||
title: stream.title,
|
||||
username: stream.username,
|
||||
streamCategory: categoryName,
|
||||
viewers: stream.num_viewers,
|
||||
thumbnail: getCategoryThumbnail(categoryName, stream.thumbnail),
|
||||
}));
|
||||
const processedStreams = data.map((stream: any) => ({
|
||||
type: "stream",
|
||||
id: stream.user_id,
|
||||
title: stream.title,
|
||||
username: stream.username,
|
||||
streamCategory: categoryName,
|
||||
viewers: stream.num_viewers,
|
||||
thumbnail: getCategoryThumbnail(categoryName, stream.thumbnail),
|
||||
}));
|
||||
|
||||
setStreams((prev) => [...prev, ...processedStreams]);
|
||||
return processedStreams;
|
||||
} catch (error) {
|
||||
console.error("Error fetching category streams:", error);
|
||||
} finally {
|
||||
isLoading.current = false;
|
||||
}
|
||||
};
|
||||
setStreams((prev) => [...prev, ...processedStreams]);
|
||||
return processedStreams;
|
||||
} catch (error) {
|
||||
console.error("Error fetching category streams:", error);
|
||||
} finally {
|
||||
isLoading.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchCategoryStreams();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
fetchCategoryStreams();
|
||||
}, []);
|
||||
|
||||
const loadOnScroll = async () => {
|
||||
if (hasMoreData && listRowRef.current) {
|
||||
const newStreams = await fetchCategoryStreams();
|
||||
if (newStreams?.length > 0) {
|
||||
listRowRef.current.addMoreItems(newStreams);
|
||||
} else console.log("No more data to fetch");
|
||||
}
|
||||
};
|
||||
const loadOnScroll = async () => {
|
||||
if (hasMoreData && listRowRef.current) {
|
||||
const newStreams = await fetchCategoryStreams();
|
||||
if (newStreams?.length > 0) {
|
||||
listRowRef.current.addMoreItems(newStreams);
|
||||
} else console.log("No more data to fetch");
|
||||
}
|
||||
};
|
||||
|
||||
fetchContentOnScroll(loadOnScroll, hasMoreData);
|
||||
fetchContentOnScroll(loadOnScroll, hasMoreData);
|
||||
|
||||
const handleStreamClick = (streamerName: string) => {
|
||||
window.location.href = `/${streamerName}`;
|
||||
};
|
||||
const handleStreamClick = (streamerName: string) => {
|
||||
window.location.href = `/${streamerName}`;
|
||||
};
|
||||
|
||||
if (hasMoreData && !streams.length) return <LoadingScreen />;
|
||||
if (hasMoreData && !streams.length) return <LoadingScreen />;
|
||||
|
||||
return (
|
||||
<DynamicPageContent className="min-h-screen">
|
||||
<div className="pt-8">
|
||||
<ListRow
|
||||
ref={listRowRef}
|
||||
type="stream"
|
||||
title={`${categoryName}`}
|
||||
description={`Live streams in the ${categoryName} category`}
|
||||
items={streams}
|
||||
wrap={true}
|
||||
onItemClick={handleStreamClick}
|
||||
extraClasses="bg-[var(--recommend)]"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
>
|
||||
{isLoggedIn && (
|
||||
<Button
|
||||
extraClasses="absolute right-10"
|
||||
onClick={() => {
|
||||
if (categoryName) {
|
||||
isCategoryFollowing
|
||||
? unfollowCategory(categoryName)
|
||||
: followCategory(categoryName);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isCategoryFollowing ? "Unfollow" : "Follow"}
|
||||
</Button>
|
||||
)}
|
||||
</ListRow>
|
||||
</div>
|
||||
return (
|
||||
<DynamicPageContent className="min-h-screen">
|
||||
<div className="pt-8">
|
||||
<ListRow
|
||||
ref={listRowRef}
|
||||
type="stream"
|
||||
title={`${categoryName}`}
|
||||
description={`Live streams in the ${categoryName} category`}
|
||||
items={streams}
|
||||
wrap={true}
|
||||
onItemClick={handleStreamClick}
|
||||
extraClasses="bg-[var(--recommend)]"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
>
|
||||
{isLoggedIn && (
|
||||
<Button
|
||||
extraClasses="absolute right-10"
|
||||
onClick={() => {
|
||||
if (categoryName) {
|
||||
isCategoryFollowing ? unfollowCategory(categoryName) : followCategory(categoryName);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isCategoryFollowing ? "Unfollow" : "Follow"}
|
||||
</Button>
|
||||
)}
|
||||
</ListRow>
|
||||
</div>
|
||||
|
||||
{streams.length === 0 && !isLoading && (
|
||||
<div className="text-white text-center text-2xl mt-8">
|
||||
No live streams found in this category
|
||||
</div>
|
||||
)}
|
||||
</DynamicPageContent>
|
||||
);
|
||||
{streams.length === 0 && !isLoading && (
|
||||
<div className="text-white text-center text-2xl mt-8">No live streams found in this category</div>
|
||||
)}
|
||||
</DynamicPageContent>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryPage;
|
||||
|
||||
Reference in New Issue
Block a user