made tech list item titles dynamic

theodoremoreland · Oct 24, 2024 · f41a916 · f41a916
1 parent d729e3a
commit f41a916
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 46 deletions.
diff --git a/app/src/components/TechList/TechList.controller.ts b/app/src/components/TechList/TechList.controller.ts
@@ -168,3 +168,18 @@ export const getTopicCounts = (repos: TaggedRepoData[]): TopicCounts => {
 
 	return topicCounts;
 };
+
+export const determineClassName = (
+	topicLabel: string,
+	featuredTopics: Set<string>
+): "" | "selected" | "filtered-out" => {
+	if (featuredTopics.size === 0) {
+		return "";
+	}
+
+	if (featuredTopics.has(findKeyForTopicLabel(topicLabel))) {
+		return "selected";
+	}
+
+	return "filtered-out";
+};
diff --git a/app/src/components/TechList/TechList.tsx b/app/src/components/TechList/TechList.tsx
@@ -1,10 +1,17 @@
-import { useCallback, useContext, useEffect, useState } from "react";
+import {
+	ReactElement,
+	useCallback,
+	useContext,
+	useEffect,
+	useState,
+} from "react";
 
 // Controller
 import {
 	findKeyForTopicLabel,
 	findTopicLabelImageSrc,
 	getTopicCounts,
+	determineClassName,
 } from "./TechList.controller";
 
 // Context
@@ -16,64 +23,65 @@ import { TopicCounts } from "../../types";
 // Styles
 import "./TechList.css";
 
-const TechList = () => {
+const TechList = (): ReactElement => {
 	const { repos, updateFeaturedTopics, featuredTopics } =
 		useContext(ProjectsContext);
 	const [topicsCount, setTopicsCount] = useState<TopicCounts | null>(null);
 
 	const generateListItems = useCallback(
 		(topics: { [key: string]: number }) => {
-			const determineClassName = (topicLabel: string) => {
-				if (featuredTopics.size === 0) {
-					return "";
-				}
-
-				if (featuredTopics.has(findKeyForTopicLabel(topicLabel))) {
-					return "selected";
-				}
-
-				return "filtered-out";
-			};
-
 			return Object.entries(topics)
 				.sort(
 					([, topicCount1], [, topicCount2]) =>
 						topicCount2 - topicCount1
 				)
-				.map(([topicLabel, topicCount]) => (
-					<li
-						key={topicLabel}
-						title={`Click to filter projects by ${topicLabel}`}
-						className={`${determineClassName(topicLabel)}`}
-						onClick={() =>
-							updateFeaturedTopics(
-								findKeyForTopicLabel(topicLabel)
-							)
-						}
-					>
-						{findTopicLabelImageSrc(topicLabel) ? (
-							<>
-								<div className="tech-icon-container">
-									<img
-										src={findTopicLabelImageSrc(topicLabel)}
-										alt={topicLabel}
-										className="tech-icon"
-									/>
-								</div>
-								<div className="topic-label-container">
+				.map(([topicLabel, topicCount]) => {
+					const className: "" | "selected" | "filtered-out" =
+						determineClassName(topicLabel, featuredTopics);
+
+					return (
+						<li
+							key={topicLabel}
+							title={
+								className !== "selected"
+									? `Click to filter projects by ${topicLabel}.`
+									: `Click to remove ${topicLabel} filter.`
+							}
+							className={className}
+							onClick={() =>
+								updateFeaturedTopics(
+									findKeyForTopicLabel(topicLabel)
+								)
+							}
+						>
+							{findTopicLabelImageSrc(topicLabel) ? (
+								<>
+									<div className="tech-icon-container">
+										<img
+											src={findTopicLabelImageSrc(
+												topicLabel
+											)}
+											alt={topicLabel}
+											className="tech-icon"
+										/>
+									</div>
+									<div className="topic-label-container">
+										{topicLabel}:
+										<span className="count">
+											{topicCount}
+										</span>
+									</div>
+								</>
+							) : (
+								<>
+									{" "}
 									{topicLabel}:
 									<span className="count">{topicCount}</span>
-								</div>
-							</>
-						) : (
-							<>
-								{" "}
-								{topicLabel}:
-								<span className="count">{topicCount}</span>
-							</>
-						)}
-					</li>
-				));
+								</>
+							)}
+						</li>
+					);
+				});
 		},
 		[updateFeaturedTopics, featuredTopics]
 	);