();
+
+ const [pageSize, setPageSize] = useState(20);
+ const [previousData, setPreviousData] = useState<{
+ items: TagDetails[];
+ totalItems: number;
+ }>({ items: [], totalItems: 0 });
+
+ const {
+ data: tagSearchData,
+ isLoading,
+ error,
+ } = useSearchTags(
+ {
+ queryParams: { q: "", pageSize },
+ },
+ { enabled: true },
+ );
+
+ useEffect(() => {
+ if (tagSearchData?.data) {
+ const availableTags = (tagSearchData.data as { items: TagDetails[] })
+ .items;
+
+ // Filter tags by the typeId
+ const filteredTags = availableTags.filter(
+ (tag) => tag.tagType === typeId,
+ );
+
+ setTags(filteredTags);
+
+ // Set the tag type name and description
+ if (filteredTags.length > 0) {
+ setTagTypeId(typeId);
+ //setTagDescription(`Description for ${typeId} tags.`); // Replace with actual description if available
+ } else {
+ setTagTypeId("Unknown Tag Type");
+ //setTagDescription("No description available for this tag type.");
+ }
+ }
+ }, [tagSearchData, typeId]);
+
+ useEffect(() => {
+ if (tagSearchData?.data && !isLoading) {
+ setPreviousData(tagSearchData.data as typeof previousData);
+ }
+ }, [tagSearchData, isLoading]);
+
+ const searchResultData =
+ (tagSearchData?.data as {
+ items?: TagDetails[];
+ totalItems?: number;
+ }) || previousData;
+
+ const next = () => {
+ setPageSize(pageSize + 20);
+ };
+
+ //descriptions for the tag types
+ const getDescription = (TypeId: string) => {
+ switch (TypeId) {
+ case "Programming Language":
+ return (
+
+ A programming language is a formal system used to communicate
+ instructions to a machine, particularly a computer. It consists of
+ syntax, semantics, and rules that allow developers to write software
+ and algorithms. Programming languages enable the creation of
+ programs that can execute tasks ranging from simple calculations to
+ complex data processing and system management. Well-known examples
+ include Python, Java, and C++.
+
+ );
+ case "Programming Paradigm":
+ return (
+
+ A programming paradigm refers to a fundamental style or approach to
+ programming that influences how software is structured and
+ developed. It encompasses the methodologies and principles that
+ guide the design and implementation of programs, including
+ object-oriented programming, functional programming, and procedural
+ programming. Different paradigms offer distinct ways of thinking
+ about and solving problems in software development.
+
+ );
+ case "Computer Science Term":
+ return (
+
+ A computer science term is a word or phrase that is part of the
+ technical vocabulary of computer science. These terms represent
+ concepts, theories, tools, or techniques that are essential to
+ understanding the field. Examples include terms like algorithm, data
+ structure, machine learning, and artificial intelligence. These
+ terms form the foundation of communication and learning within the
+ computer science discipline.
+
+ );
+ case "Software Library":
+ return (
+
+ A software library is a collection of pre-written code, functions,
+ and resources that developers can use to perform common tasks
+ without having to write code from scratch. Libraries are designed to
+ provide reusable components for tasks such as data manipulation,
+ user interface design, and network communication. Popular software
+ libraries include jQuery for web development, TensorFlow for machine
+ learning, and NumPy for numerical computations.
+
+ );
+ }
+ };
+
+ const description = typeId ? (
+ getDescription(typeId)
+ ) : (
+ Loading description...
+ );
+
+ if (error) {
+ return ;
+ }
+
+ return (
+
+ {isLoading ? (
+
+
+
+ ) : (
+ <>
+ {/* Header */}
+
{tagTypeId}
+
+ {/* Render the description based on typeId */}
+
{description}
+
+ {/* Tags in this Category Section */}
+
+ Tags in This Category:
+
+
+ {/* Infinite Scroll for displaying Related Tags */}
+
+
pageSize
+ : false
+ }
+ isLoading={isLoading}
+ >
+ {tags.length > 0 ? (
+ tags.map((tag) => )
+ ) : (
+
+ No related tags found for this tag type.
+
+ )}
+
+
+
+ )}
+
+
Explore Various Tag Types
+
+ {tagCounts.map((tagCount) => (
+
+ ))}
+
+ {isLoading && (
+
+
+
+ )}
+
+