fix: update select languages

4 months ago · 76970ab2ac
parent bfb3a3eb30
commit 76970ab2ac
3 changed files with 247 additions and 172 deletions
--- a/src/components/Projects/LeavingRoadmapWarningModal.tsx
+++ b/src/components/Projects/LeavingRoadmapWarningModal.tsx
@ -4,13 +4,13 @@ import { SubmissionRequirement } from './SubmissionRequirement.tsx';

 type LeavingRoadmapWarningModalProps = {
  onClose: () => void;
-  onContinue: () => void;
+  repositoryUrl: string;
 };

 export function LeavingRoadmapWarningModal(
  props: LeavingRoadmapWarningModalProps,
 ) {
-  const { onClose, onContinue } = props;
+  const { onClose, repositoryUrl } = props;

  return (
    <Modal onClose={onClose} bodyClassName="h-auto p-4">
@ -45,13 +45,14 @@ export function LeavingRoadmapWarningModal(
        </p>
      </div>

-      <button
+      <a
        className="inline-flex w-full items-center gap-2 rounded-lg bg-black px-3 py-2.5 text-sm text-white"
-        onClick={onContinue}
+        href={repositoryUrl}
+        target="_blank"
      >
        <ArrowUpRight className="h-5 w-5" />
        Continue to Solution
-      </button>
+      </a>

      <button
        className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black"
--- a/src/components/Projects/ListProjectSolutions.tsx
+++ b/src/components/Projects/ListProjectSolutions.tsx
@ -13,41 +13,7 @@ import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { VoteButton } from './VoteButton.tsx';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
-import { cn } from '../../lib/classname.ts';
-
-const languageColors = new Map([
-  ['JavaScript', 'bg-[#f1e05a]'],
-  ['Python', 'bg-[#3572A5]'],
-  ['Java', 'bg-[#b07219]'],
-  ['HTML', 'bg-[#e34c26]'],
-  ['CSS', 'bg-[#563d7c]'],
-  ['C++', 'bg-[#f34b7d]'],
-  ['C', 'bg-[#555555]'],
-  ['Go', 'bg-[#00ADD8]'],
-  ['TypeScript', 'bg-[#2b7489]'],
-  ['Shell', 'bg-[#89e051]'],
-  ['Ruby', 'bg-[#701516]'],
-  ['PHP', 'bg-[#4F5D95]'],
-  ['Rust', 'bg-[#dea584]'],
-  ['Swift', 'bg-[#ffac45]'],
-  ['Kotlin', 'bg-[#A97BFF]'],
-  ['Dart', 'bg-[#00B4AB]'],
-  ['Scala', 'bg-[#c22d40]'],
-  ['Objective-C', 'bg-[#438eff]'],
-  ['Vue', 'bg-[#41b883]'],
-  ['R', 'bg-[#198CE7]'],
-  ['Perl', 'bg-[#0298c3]'],
-  ['Haskell', 'bg-[#5e5086]'],
-  ['Lua', 'bg-[#000080]'],
-  ['Matlab', 'bg-[#e16737]'],
-  ['Vim script', 'bg-[#199f4b]'],
-  ['Elixir', 'bg-[#6e4a7e]'],
-  ['Erlang', 'bg-[#B83998]'],
-  ['Clojure', 'bg-[#db5855]'],
-  ['Markdown', 'bg-[#083fa1]'],
-  ['TeX', 'bg-[#3D6117]'],
-  ['SQL', 'bg-[#e38c00]'],
-]);
+import { SelectLanguages } from './SelectLanguages.tsx';

 export interface ProjectStatusDocument {
  _id?: string;
@ -88,10 +54,12 @@ type ListProjectSolutionsResponse = {

 type QueryParams = {
  p?: string;
+  l?: string;
 };

 type PageState = {
  currentPage: number;
+  languages: string[];
 };

 const VISITED_SOLUTIONS_KEY = 'visited-project-solutions';
@ -130,22 +98,22 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
  const toast = useToast();
  const [pageState, setPageState] = useState<PageState>({
    currentPage: 0,
+    languages: [],
  });

  const [isLoading, setIsLoading] = useState(true);
  const [solutions, setSolutions] = useState<ListProjectSolutionsResponse>();
-  const [alreadyVisitedSolutions, setAlreadyVisitedSolutions] = useState<
-    Record<string, boolean>
-  >({});
  const [showLeavingRoadmapModal, setShowLeavingRoadmapModal] = useState<
    ListProjectSolutionsResponse['data'][number] | null
  >(null);
+  const [distinctLanguages, setDistinctLanguages] = useState<string[]>([]);

-  const loadSolutions = async (page = 1) => {
+  const loadSolutions = async (page = 1, languages: 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(',') } : {}),
      },
    );

@ -158,6 +126,19 @@ 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,
@ -207,13 +188,9 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {

  useEffect(() => {
    const queryParams = getUrlParams() as QueryParams;
-    const alreadyVisitedSolutions = JSON.parse(
-      localStorage.getItem(VISITED_SOLUTIONS_KEY) || '{}',
-    );
-
-    setAlreadyVisitedSolutions(alreadyVisitedSolutions);
    setPageState({
      currentPage: +(queryParams.p || '1'),
+      languages: (queryParams.l || '').split(',').filter(Boolean),
    });
  }, []);

@ -223,22 +200,24 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
      return;
    }

-    if (pageState.currentPage !== 1) {
+    if (pageState.currentPage !== 1 || pageState.languages.length > 0) {
      setUrlParams({
        p: String(pageState.currentPage),
+        l: pageState.languages.join(','),
      });
    } else {
      deleteUrlParam('p');
+      deleteUrlParam('l');
    }

-    loadSolutions(pageState.currentPage).finally(() => {
+    loadSolutions(pageState.currentPage, pageState.languages).finally(() => {
      setIsLoading(false);
    });
  }, [pageState]);

-  if (isLoading) {
-    return <LoadingSolutions />;
-  }
+  useEffect(() => {
+    loadDistinctLanguages().finally(() => {});
+  }, []);

  const isEmpty = solutions?.data.length === 0;
  if (isEmpty) {
@ -248,30 +227,38 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
  const leavingRoadmapModal = showLeavingRoadmapModal ? (
    <LeavingRoadmapWarningModal
      onClose={() => setShowLeavingRoadmapModal(null)}
-      onContinue={() => {
-        const visitedSolutions = {
-          ...alreadyVisitedSolutions,
-          [showLeavingRoadmapModal._id!]: true,
-        };
-        localStorage.setItem(
-          VISITED_SOLUTIONS_KEY,
-          JSON.stringify(visitedSolutions),
-        );
-
-        window.open(showLeavingRoadmapModal.repositoryUrl, '_blank');
-      }}
+      repositoryUrl={showLeavingRoadmapModal?.repositoryUrl!}
    />
  ) : null;

+  const selectedLanguages = pageState.languages;
+
  return (
    <section>
      {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,
+          });
+        }}
+      />

+      {isLoading ? (
+        <LoadingSolutions />
+      ) : (
+        <>
          <div className="flex min-h-[500px] flex-col divide-y divide-gray-100">
            {solutions?.data.map((solution, counter) => {
              const avatar = solution.user.avatar || '';
-          const languages = solution?.languages || [];
-
              return (
                <div
                  key={solution._id}
@ -302,7 +289,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                    </div>

                    <div className="flex items-center justify-end gap-1">
-                  <span className="flex overflow-hidden rounded-full border">
+                      <span className="flex shrink-0 overflow-hidden rounded-full border">
                        <VoteButton
                          icon={ThumbsUp}
                          isActive={solution?.voteType === 'upvote'}
@ -323,36 +310,16 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                        />
                      </span>

-                  <a
+                      <button
                        className="ml-1 flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white"
-                    onClick={(e) => {
-                      e.preventDefault();
+                        onClick={() => {
                          setShowLeavingRoadmapModal(solution);
                        }}
-                    target="_blank"
-                    href={solution.repositoryUrl}
                      >
                        <GitHubIcon className="h-4 w-4 text-current" />
                        Visit Solution
-                  </a>
-                </div>
+                      </button>
                    </div>
-
-              <div className="flex justify-end gap-2.5">
-                {languages.map((language) => (
-                  <span
-                    key={language}
-                    className="flex items-center gap-2 text-sm"
-                  >
-                    <span
-                      className={cn(
-                        'h-2 w-2 rounded-full',
-                        languageColors.get(language) || 'bg-gray-400',
-                      )}
-                    />
-                    {language}
-                  </span>
-                ))}
                  </div>
                </div>
              );
@ -375,6 +342,8 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
              />
            </div>
          )}
+        </>
+      )}
    </section>
  );
 }
--- a/src/components/Projects/SelectLanguages.tsx
+++ b/src/components/Projects/SelectLanguages.tsx
@ -0,0 +1,105 @@
+import { useRef, useState } from 'react';
+import { cn } from '../../lib/classname';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+
+const languageColors = new Map([
+  ['JavaScript', 'bg-[#f1e05a]'],
+  ['Python', 'bg-[#3572A5]'],
+  ['Java', 'bg-[#b07219]'],
+  ['HTML', 'bg-[#e34c26]'],
+  ['CSS', 'bg-[#563d7c]'],
+  ['C++', 'bg-[#f34b7d]'],
+  ['C', 'bg-[#555555]'],
+  ['Go', 'bg-[#00ADD8]'],
+  ['TypeScript', 'bg-[#2b7489]'],
+  ['Shell', 'bg-[#89e051]'],
+  ['Ruby', 'bg-[#701516]'],
+  ['PHP', 'bg-[#4F5D95]'],
+  ['Rust', 'bg-[#dea584]'],
+  ['Swift', 'bg-[#ffac45]'],
+  ['Kotlin', 'bg-[#A97BFF]'],
+  ['Dart', 'bg-[#00B4AB]'],
+  ['Scala', 'bg-[#c22d40]'],
+  ['Objective-C', 'bg-[#438eff]'],
+  ['Vue', 'bg-[#41b883]'],
+  ['R', 'bg-[#198CE7]'],
+  ['Perl', 'bg-[#0298c3]'],
+  ['Haskell', 'bg-[#5e5086]'],
+  ['Lua', 'bg-[#000080]'],
+  ['Matlab', 'bg-[#e16737]'],
+  ['Vim script', 'bg-[#199f4b]'],
+  ['Elixir', 'bg-[#6e4a7e]'],
+  ['Erlang', 'bg-[#B83998]'],
+  ['Clojure', 'bg-[#db5855]'],
+  ['Markdown', 'bg-[#083fa1]'],
+  ['TeX', 'bg-[#3D6117]'],
+  ['SQL', 'bg-[#e38c00]'],
+]);
+
+type SelectLanguagesProps = {
+  languages: string[];
+  selectedLanguages: string[];
+  onSelectLanguage: (language: string) => void;
+};
+
+export function SelectLanguages(props: SelectLanguagesProps) {
+  const { languages, onSelectLanguage, selectedLanguages } = props;
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useOutsideClick(dropdownRef, () => {
+    setIsOpen(false);
+  });
+
+  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)}
+        >
+          Select Languages
+        </button>
+
+        {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>
+    </div>
+  );
+}