fix: select language

src/components/Projects/ListProjectSolutions.tsx

@@ -14,6 +14,7 @@ import { showLoginPopup } from '../../lib/popup';
 import { VoteButton } from './VoteButton.tsx';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import { SelectLanguages } from './SelectLanguages.tsx';
+import type { ProjectFileType, ProjectFrontmatter } from '../../lib/project.ts';
 
 export interface ProjectStatusDocument {
   _id?: string;
@@ -59,12 +60,11 @@ type QueryParams = {
 
 type PageState = {
   currentPage: number;
-  languages: string[];
+  language: string;
 };
 
-const VISITED_SOLUTIONS_KEY = 'visited-project-solutions';
-
 type ListProjectSolutionsProps = {
+  project: ProjectFrontmatter;
   projectId: string;
 };
 
@@ -93,12 +93,12 @@ const submittedAlternatives = [
 ];
 
 export function ListProjectSolutions(props: ListProjectSolutionsProps) {
-  const { projectId } = props;
+  const { projectId, project: projectData } = props;
 
   const toast = useToast();
   const [pageState, setPageState] = useState<PageState>({
     currentPage: 0,
-    languages: [],
+    language: '',
   });
 
   const [isLoading, setIsLoading] = useState(true);
@@ -106,14 +106,13 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
   const [showLeavingRoadmapModal, setShowLeavingRoadmapModal] = useState<
     ListProjectSolutionsResponse['data'][number] | null
   >(null);
-  const [distinctLanguages, setDistinctLanguages] = useState<string[]>([]);
 
-  const loadSolutions = async (page = 1, languages: string[] = []) => {
+  const loadSolutions = async (page = 1, language: string = '') => {
     const { response, error } = await httpGet<ListProjectSolutionsResponse>(
       `${import.meta.env.PUBLIC_API_URL}/v1-list-project-solutions/${projectId}`,
       {
         currPage: page,
-        ...(languages.length > 0 ? { languages: languages.join(',') } : {}),
+        ...(language ? { languages: language } : {}),
       },
     );
 
@@ -126,19 +125,6 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
     setSolutions(response);
   };
 
-  const loadDistinctLanguages = async () => {
-    const { response, error } = await httpGet<string[]>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-list-project-languages/${projectId}`,
-    );
-
-    if (error || !response) {
-      toast.error(error?.message || 'Failed to load project languages');
-      return;
-    }
-
-    setDistinctLanguages(response);
-  };
-
   const handleSubmitVote = async (
     solutionId: string,
     voteType: AllowedVoteType,
@@ -190,7 +176,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
     const queryParams = getUrlParams() as QueryParams;
     setPageState({
       currentPage: +(queryParams.p || '1'),
-      languages: (queryParams.l || '').split(',').filter(Boolean),
+      language: queryParams.l || '',
     });
   }, []);
 
@@ -200,25 +186,21 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
       return;
     }
 
-    if (pageState.currentPage !== 1 || pageState.languages.length > 0) {
+    if (pageState.currentPage !== 1 || pageState.language !== '') {
       setUrlParams({
         p: String(pageState.currentPage),
-        l: pageState.languages.join(','),
+        l: pageState.language,
       });
     } else {
       deleteUrlParam('p');
       deleteUrlParam('l');
     }
 
-    loadSolutions(pageState.currentPage, pageState.languages).finally(() => {
+    loadSolutions(pageState.currentPage, pageState.language).finally(() => {
       setIsLoading(false);
     });
   }, [pageState]);
 
-  useEffect(() => {
-    loadDistinctLanguages().finally(() => {});
-  }, []);
-
   const isEmpty = solutions?.data.length === 0;
   if (isEmpty) {
     return <EmptySolutions projectId={projectId} />;
@@ -231,26 +213,29 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
     />
   ) : null;
 
-  const selectedLanguages = pageState.languages;
+  const selectedLanguage = pageState.language;
 
   return (
-    <section>
+    <div className="mb-4 overflow-hidden rounded-lg border bg-white p-3 sm:p-5">
       {leavingRoadmapModal}
-      <SelectLanguages
-        languages={distinctLanguages}
-        selectedLanguages={pageState.languages}
-        onSelectLanguage={(language) => {
-          const isAlreadySelected = selectedLanguages.includes(language);
-          const newLanguages = isAlreadySelected
-            ? selectedLanguages.filter((l) => l !== language)
-            : [...selectedLanguages, language];
-
-          setPageState({
-            ...pageState,
-            languages: newLanguages,
-          });
-        }}
-      />
+      <div className="relative mb-5 hidden sm:block">
+        <div className="flex items-center justify-between gap-2">
+          <h1 className="mb-1 text-xl font-semibold">
+            {projectData.title} Solutions
+          </h1>
+          <SelectLanguages
+            projectId={projectId}
+            selectedLanguage={selectedLanguage}
+            onSelectLanguage={(language) => {
+              setPageState((prev) => ({
+                ...prev,
+                language: prev.language === language ? '' : language,
+              }));
+            }}
+          />
+        </div>
+        <p className="text-sm text-gray-500">{projectData.description}</p>
+      </div>
 
       {isLoading ? (
         <LoadingSolutions />
@@ -344,6 +329,6 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
           )}
         </>
       )}
-    </section>
+    </div>
   );
 }

src/components/Projects/SelectLanguages.tsx

@@ -1,6 +1,8 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../lib/classname';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import { httpGet } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
 
 const languageColors = new Map([
   ['JavaScript', 'bg-[#f1e05a]'],
@@ -37,69 +39,74 @@ const languageColors = new Map([
 ]);
 
 type SelectLanguagesProps = {
-  languages: string[];
-  selectedLanguages: string[];
+  projectId: string;
+  selectedLanguage: string;
   onSelectLanguage: (language: string) => void;
 };
 
 export function SelectLanguages(props: SelectLanguagesProps) {
-  const { languages, onSelectLanguage, selectedLanguages } = props;
+  const { projectId, onSelectLanguage, selectedLanguage } = props;
 
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const toast = useToast();
+
+  const [distinctLanguages, setDistinctLanguages] = useState<string[]>([]);
   const [isOpen, setIsOpen] = useState(false);
 
+  const loadDistinctLanguages = async () => {
+    const { response, error } = await httpGet<string[]>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-project-languages/${projectId}`,
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Failed to load project languages');
+      return;
+    }
+
+    setDistinctLanguages(response);
+  };
+
   useOutsideClick(dropdownRef, () => {
     setIsOpen(false);
   });
 
+  useEffect(() => {
+    loadDistinctLanguages().finally(() => {});
+  }, []);
+
   return (
-    <div className="mb-4 flex justify-end">
-      {selectedLanguages.length > 0 && (
-        <>
-          {selectedLanguages.map((language) => (
-            <span
-              key={language}
-              className="mr-3 flex items-center gap-2 text-sm text-gray-600"
-            >
-              <span
-                className={cn(
-                  'size-2 rounded-full',
-                  languageColors.get(language) || 'bg-gray-300',
-                )}
-              />
-              {language}
-            </span>
-          ))}
-        </>
-      )}
+    <div className="relative flex">
+      <button
+        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {selectedLanguage || 'Select Language'}
+      </button>
 
-      <div className="relative flex">
-        <button
-          className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900"
-          onClick={() => setIsOpen(!isOpen)}
+      {isOpen && (
+        <div
+          className="absolute right-0 top-full z-10 w-full min-w-[200px] max-w-[200px] translate-y-1.5 overflow-hidden rounded-md border border-gray-300 bg-white p-1 shadow-lg"
+          ref={dropdownRef}
         >
-          Select Languages
-        </button>
+          {distinctLanguages.map((language) => {
+            const isSelected = selectedLanguage === language;
 
-        {isOpen && (
-          <div
-            className="absolute right-0 top-full z-10 w-full max-w-[200px] translate-y-1.5 overflow-hidden rounded-md border border-gray-300 bg-white p-1 shadow-lg"
-            ref={dropdownRef}
-          >
-            {languages.map((language) => {
-              return (
-                <button
-                  key={language}
-                  className="flex w-full items-center rounded-md px-4 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100"
-                  onClick={() => onSelectLanguage(language)}
-                >
-                  {language}
-                </button>
-              );
-            })}
-          </div>
-        )}
-      </div>
+            return (
+              <button
+                key={language}
+                className="flex w-full items-center rounded-md px-4 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100 aria-selected:bg-gray-100"
+                onClick={() => {
+                  onSelectLanguage(language);
+                  setIsOpen(false);
+                }}
+                aria-selected={isSelected}
+              >
+                {language}
+              </button>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }

src/pages/projects/[projectId]/solutions.astro

@@ -49,18 +49,11 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
     <div class='container'>
       <ProjectTabs projectId={projectId} activeTab='solutions' />
 
-      <div class='mb-4 overflow-hidden rounded-lg border bg-white p-3 sm:p-5'>
-        <div class='relative mb-5 hidden sm:block'>
-          <h1 class='mb-1 text-xl font-semibold'>
-            {projectData.title} Solutions
-          </h1>
-          <p class='text-sm text-gray-500'>
-            {projectData.description}
-          </p>
-        </div>
-
-        <ListProjectSolutions projectId={projectId} client:load />
-      </div>
+      <ListProjectSolutions
+        project={projectData}
+        projectId={projectId}
+        client:load
+      />
     </div>
   </div>
 </BaseLayout>