several minor fixes

kudos-ink · Sep 24, 2024 · 5a2fd32 · 5a2fd32
1 parent 6bcdc99
commit 5a2fd32
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 47 deletions.
diff --git a/api/core/_transformers.ts b/api/core/_transformers.ts
@@ -1,4 +1,9 @@
-import { Issue, IssueDto } from "@/types/issue";
+import {
+  Issue,
+  IssueDto,
+  IssueQueryParams,
+  IssueQueryParamsDto,
+} from "@/types/issue";
 import { Project, ProjectDto } from "@/types/project";
 import { Repository, RepositoryDto } from "@/types/repository";
 
@@ -39,3 +44,21 @@ export function dtoToProject(dto: ProjectDto): Project {
     technologies: dto.technologies ?? [],
   };
 }
+
+export function issueQueryParamsToDto(
+  query: IssueQueryParams,
+  allLanguages: string[],
+): IssueQueryParamsDto {
+  const technologies = query.technologies ?? [];
+  const languages = technologies.filter((tech) => allLanguages.includes(tech));
+  const remainingTechnologies = technologies.filter(
+    (tech) => !allLanguages.includes(tech),
+  );
+
+  return {
+    ...query,
+    technologies:
+      remainingTechnologies.length > 0 ? remainingTechnologies : undefined,
+    languages: languages.length > 0 ? languages : undefined,
+  };
+}
diff --git a/api/core/issues.ts b/api/core/issues.ts
@@ -1,23 +1,35 @@
 import { DEFAULT_QUERY } from "@/data/fetch";
-import { IssueQueryParams, IssueDto, Issue } from "@/types/issue";
+import {
+  IssueQueryParams,
+  IssueDto,
+  Issue,
+  IssueQueryParamsDto,
+} from "@/types/issue";
 import {
   PaginationQueryParams,
   PaginatedCustomResponse,
   PaginatedCustomResponseDto,
 } from "@/types/pagination";
 import { prepareUrl } from "@/utils/url";
 import { coreApiClient } from "./_client";
-import { dtoToIssue } from "./_transformers";
+import { dtoToIssue, issueQueryParamsToDto } from "./_transformers";
+import { getAllLanguages } from "./languages";
 
 const ISSUES_PATH = "/issues";
 
 export async function getIssues(
   query: IssueQueryParams & PaginationQueryParams = DEFAULT_QUERY,
 ): Promise<PaginatedCustomResponse<Issue>> {
-  const url = prepareUrl(`${ISSUES_PATH}`, query);
-  // TODO: Small transformation needed to separate languages from technologies in query params
+  let queryDto: IssueQueryParamsDto = query;
+  if (query?.technologies?.length) {
+    const allLanguages = await getAllLanguages();
+    queryDto = issueQueryParamsToDto(query, allLanguages);
+  }
+
+  const url = prepareUrl(`${ISSUES_PATH}`, queryDto);
   const res =
     await coreApiClient.get<PaginatedCustomResponseDto<IssueDto>>(url);
+
   return {
     totalCount: res.total_count ?? 0,
     hasNextPage: res.has_next_page,

diff --git a/app/page.tsx b/app/page.tsx
@@ -13,7 +13,10 @@ import { FiltersProvider } from "@/contexts/filters";
 import { SITE_CONFIG } from "@/data/config";
 import { getFilterOptions } from "@/lib/filters";
 import { initFilters } from "@/utils/filters";
-import { DEFAULT_PAGE_SIZE, DEFAULT_PAGINATED_RESPONSE } from "@/data/fetch";
+import {
+  DEFAULT_HOMEPAGE_PAGE_SIZE,
+  DEFAULT_PAGINATED_RESPONSE,
+} from "@/data/fetch";
 import { FilterOptions } from "@/types/filters";
 
 const EXPLORE_LABEL = "Explore Open Contributions";
@@ -27,7 +30,7 @@ export default async function Home() {
 
   const issues = await IssuesApi.getIssues({
     offset: 0,
-    limit: DEFAULT_PAGE_SIZE,
+    limit: DEFAULT_HOMEPAGE_PAGE_SIZE,
   }).catch((error) => {
     console.error("Error fetching issues:", error);
     return DEFAULT_PAGINATED_RESPONSE;

diff --git a/components/table/row.tsx b/components/table/row.tsx
@@ -31,29 +31,34 @@ interface IProjectProps {
   slug: string;
   name: string;
   repository: Repository;
+  withProjectData?: boolean;
 }
 export const Project = ({
   avatarSrc,
   slug,
   name,
   repository,
-}: IProjectProps) => (
-  <NuiLink
-    className="flex md:gap-4"
-    href={`/projects/${slug}`}
-    color="foreground"
-    title={`${name}'s project page`}
-    as={Link}
-  >
-    <Project.Avatar alt={`${name} logo`} src={avatarSrc} />
-    <div className="hidden md:flex flex-col justify-start items-start w-36">
-      <h2 className="w-fit text-small font-semibold truncate">{name}</h2>
-      <p className="w-fit text-small text-default-500 truncate">
-        {repository.name}
-      </p>
-    </div>
-  </NuiLink>
-);
+  withProjectData,
+}: IProjectProps) => {
+  if (!withProjectData) return <div />;
+  return (
+    <NuiLink
+      className="flex md:gap-4"
+      href={`/projects/${slug}`}
+      color="foreground"
+      title={`${name}'s project page`}
+      as={Link}
+    >
+      <Project.Avatar alt={`${name} logo`} src={avatarSrc} />
+      <div className="hidden md:flex flex-col justify-start items-start w-36">
+        <h2 className="w-fit text-small font-semibold truncate">{name}</h2>
+        <p className="w-fit text-small text-default-500 truncate">
+          {repository.name}
+        </p>
+      </div>
+    </NuiLink>
+  );
+};
 
 interface IAvatarProps {
   alt: string;
@@ -83,21 +88,21 @@ interface IContentProps {
   title: string;
   projectName?: string;
   repositoryName: string;
-  url: string;
   isCertified: boolean;
 }
 export const Content = ({
   title,
   projectName,
   repositoryName,
-  url,
   isCertified,
 }: IContentProps) => {
   return (
     <div
-      className={`flex flex-col space-y-unit-1 md:space-y-0 ${projectName ? "lg:w-[270px] xl:w-[500px]" : "pl-2"}`}
+      className={`flex flex-col ${projectName ? "lg:w-[270px] xl:w-[500px]" : "pl-2 gap-1"}`}
     >
-      <span className="text-small text-default-500 max-w-48 truncate md:hidden">
+      <span
+        className={`text-small text-default-500 max-w-48 truncate ${projectName ? "md:hidden" : ""}`}
+      >
         <div className="flex items-center gap-2">
           {projectName ? (
             `${projectName} / ${repositoryName}`
@@ -109,9 +114,7 @@ export const Content = ({
           )}
         </div>
       </span>
-      <div
-        className={`w-fit text-base flex gap-1 flex-grow relative${projectName ? "" : " min-h-10"}`}
-      >
+      <div className="w-fit text-base flex gap-1 flex-grow relative">
         <h3 className="font-semibold leading-tight line-clamp-2 capitalize">
           {title}
         </h3>

diff --git a/components/table/static-table.tsx b/components/table/static-table.tsx
@@ -49,7 +49,7 @@ const StaticTable = ({ data, withProjectData = true }: IStaticTableProps) => {
   const isLaptop = useMediaQuery({ minWidth: 1024 }); // tailwind lg default: 1024px
 
   const [columns, setColumns] = useState<IColumn[]>([
-    ...(withProjectData ? [{ name: "PROJECT", uid: "project" }] : []),
+    { name: "PROJECT", uid: "project" },
     { name: "CONTENT", uid: "content" },
     { name: "LABELS", uid: "labels" },
     { name: "DATE", uid: "date" },
@@ -66,6 +66,7 @@ const StaticTable = ({ data, withProjectData = true }: IStaticTableProps) => {
             slug={project.slug}
             name={project.name}
             repository={repository}
+            withProjectData={withProjectData}
           />
         );
       }
@@ -76,7 +77,6 @@ const StaticTable = ({ data, withProjectData = true }: IStaticTableProps) => {
             title={title}
             projectName={withProjectData ? project.name : undefined}
             repositoryName={repository?.name}
-            url={url}
             isCertified={isCertified}
           />
         );
@@ -117,7 +117,7 @@ const StaticTable = ({ data, withProjectData = true }: IStaticTableProps) => {
 
   useEffect(() => {
     setColumns([
-      ...(withProjectData ? [{ name: "PROJECT", uid: "project" }] : []),
+      { name: "PROJECT", uid: "project" },
       { name: "CONTENT", uid: "content" },
       ...(isLaptop ? [{ name: "LABELS", uid: "labels" }] : []),
       { name: "DATE", uid: "date" },
@@ -148,9 +148,12 @@ const StaticTable = ({ data, withProjectData = true }: IStaticTableProps) => {
           </TableColumn>
         )}
       </TableHeader>
-      <TableBody items={data} emptyContent="No contributions to display.">
+      <TableBody
+        items={data}
+        emptyContent="No contributions to display.. Try another query (:"
+      >
         {(item) => {
-          const isHighlighted = item.isCertified && !filters[KUDOS_ISSUE_KEY];
+          const isHighlighted = item.isCertified && !filters?.[KUDOS_ISSUE_KEY];
           return (
             <TableRow
               key={item.id}

diff --git a/data/fetch.ts b/data/fetch.ts
@@ -1,6 +1,7 @@
 import { PaginatedCustomResponse } from "@/types/pagination";
 
-export const DEFAULT_PAGE_SIZE = 25;
+export const DEFAULT_PAGE_SIZE = 12;
+export const DEFAULT_HOMEPAGE_PAGE_SIZE = 25;
 export const DEFAULT_BIG_PAGE_SIZE = 100;
 
 export const DEFAULT_PAGINATED_RESPONSE: PaginatedCustomResponse<never> = {
@@ -12,7 +13,7 @@ export const DEFAULT_PAGINATED_RESPONSE: PaginatedCustomResponse<never> = {
 
 export const DEFAULT_QUERY = {
   offset: 0,
-  limit: DEFAULT_BIG_PAGE_SIZE,
+  limit: DEFAULT_PAGE_SIZE,
 };
 
 export const UNASSIGNED_CONTRIBUTION_FILTER = {

diff --git a/hooks/useFilters.tsx b/hooks/useFilters.tsx
@@ -1,11 +1,6 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  FilterKeys,
-  IFilterOption,
-  FilterOptions,
-  Filters,
-} from "@/types/filters";
+import { FilterKeys, FilterOptions, Filters } from "@/types/filters";
 import { initFilters } from "@/utils/filters";
 import { GOOD_FIRST_ISSUE_KEY, KUDOS_ISSUE_KEY } from "@/data/filters";
 

diff --git a/lib/filters.ts b/lib/filters.ts
@@ -1,6 +1,6 @@
 import LanguagesApi from "@/api/core/languages";
 import ProjectsApi from "@/api/core/projects";
-import { DEFAULT_QUERY } from "@/data/fetch";
+import { DEFAULT_BIG_PAGE_SIZE } from "@/data/fetch";
 import {
   FProjectTypes,
   FPurposes,
@@ -42,7 +42,10 @@ export async function getFilterOptions(): Promise<FilterOptions> {
 
   const purposes = createFilterOptions(FPurposes, emojiMapForPurposes);
   const technologies = createFilterOptions(
-    [...languageValues, ...FTechnologies],
+    [
+      ...languageValues.map((v) => v.toLocaleLowerCase().replaceAll('"', "")),
+      ...FTechnologies,
+    ],
     emojiMapForTechnologies,
   );
   const stackLevels = createFilterOptions(FStackLevels, emojiMapForStackLevels);
@@ -64,7 +67,8 @@ export function filtersToIssuesQuery(
   filters: Filters,
 ): IssueQueryParams & PaginationQueryParams {
   const query: IssueQueryParams & PaginationQueryParams = {
-    ...DEFAULT_QUERY,
+    offset: 0,
+    limit: DEFAULT_BIG_PAGE_SIZE,
     open: true,
   };
 

diff --git a/types/issue.ts b/types/issue.ts
@@ -39,3 +39,8 @@ export type IssueQueryParams = Partial<{
   technologies: string[];
   types: string[];
 }>;
+
+export type IssueQueryParamsDto = IssueQueryParams &
+  Partial<{
+    languages: string[];
+  }>;