Qwik graphql milestone fix (#1955)

* chore: fixed types, added milestone filter to issues * chore: filter working now * chore: clean up * fix: remove a ts ignore comment * fix: moved and cleaned some duplicated type definitions --------- Co-authored-by: Mattia Magi <[email protected]>
thisdot · Aug 29, 2023 · d576e9b · d576e9b
1 parent 98e03a3
commit d576e9b
Show file tree

Hide file tree

Showing 36 changed files with 605 additions and 672 deletions.
diff --git a/qwik-graphql-tailwind/src/components/file-viewer/index.tsx b/qwik-graphql-tailwind/src/components/file-viewer/index.tsx
@@ -75,7 +75,7 @@ export function updateFile(store: FileStore, response: any) {
   store.isLoading = false;
 }
 
-export async function fetchFile(payload: FileQueryParams, abortController?: AbortController): Promise<any> {
+export async function fetchFile(payload: FileQueryParams, abortController?: AbortController) {
   const { executeQuery$ } = useQuery(REPO_FILE_QUERY);
 
   const resp = await executeQuery$({

diff --git a/qwik-graphql-tailwind/src/components/gists/index.tsx b/qwik-graphql-tailwind/src/components/gists/index.tsx
@@ -57,7 +57,7 @@ export function updateGists(store: GistStore, response: any) {
   store.isLoading = false;
 }
 
-export async function fetchGIst(abortController?: AbortController): Promise<any> {
+export async function fetchGIst(abortController?: AbortController) {
   const { executeQuery$ } = useQuery(USER_GISTS_QUERY);
 
   const resp = await executeQuery$({

diff --git a/qwik-graphql-tailwind/src/components/issue-pr-card/card.tsx b/qwik-graphql-tailwind/src/components/issue-pr-card/card.tsx
@@ -11,7 +11,8 @@ import {
   MergedPrIcon,
   ClosedPrIcon,
 } from '../icons';
-import { Label } from '../repo-pulls/types';
+import { Label } from '~/types';
+import { getTextColor } from '~/utils/dynamicColor';
 
 export interface IssuePrCardProps {
   data: {
@@ -84,8 +85,11 @@ export const IssuePrCard = component$(({ data, type }: IssuePrCardProps) => {
             data.labels.map((label: Label, i) => (
               <span
                 key={i}
-                class={cn('mt-2 ml-2 py-1 px-2 rounded-full text-sm', `bg-[#${label.color}]`)}
-                style={{ backgroundColor: `#${label.color}` }}
+                class={cn('mt-2 ml-2 py-1 px-2 rounded-full text-sm')}
+                style={{
+                  'background-color': `#${label.color}`,
+                  color: getTextColor(`#${label.color}` || '#ccc'),
+                }}
               >
                 {label.name}
               </span>

diff --git a/qwik-graphql-tailwind/src/components/issue-tab-view/data.ts b/qwik-graphql-tailwind/src/components/issue-tab-view/data.ts
@@ -1,28 +1,28 @@
-import { IssueOrderField, OrderDirection } from './type';
+import { OrderDirection, OrderField } from '~/utils/types';
 
 export const sortOptions = [
   {
-    value: `${IssueOrderField.CreatedAt}^${OrderDirection.Desc}`,
+    value: `${OrderField.CreatedAt}^${OrderDirection.Desc}`,
     label: 'Newest',
   },
   {
-    value: `${IssueOrderField.CreatedAt}^${OrderDirection.Asc}`,
+    value: `${OrderField.CreatedAt}^${OrderDirection.Asc}`,
     label: 'Oldest',
   },
   {
-    value: `${IssueOrderField.Comments}^${OrderDirection.Desc}`,
+    value: `${OrderField.Comments}^${OrderDirection.Desc}`,
     label: 'Most Commented',
   },
   {
-    value: `${IssueOrderField.Comments}^${OrderDirection.Asc}`,
+    value: `${OrderField.Comments}^${OrderDirection.Asc}`,
     label: 'Least Commented',
   },
   {
     label: 'Recently updated',
-    value: `${IssueOrderField.UpdatedAt}^${OrderDirection.Desc}`,
+    value: `${OrderField.UpdatedAt}^${OrderDirection.Desc}`,
   },
   {
     label: 'Least recently updated',
-    value: `${IssueOrderField.UpdatedAt}^${OrderDirection.Asc}`,
+    value: `${OrderField.UpdatedAt}^${OrderDirection.Asc}`,
   },
 ];
diff --git a/qwik-graphql-tailwind/src/components/issue-tab-view/index.tsx b/qwik-graphql-tailwind/src/components/issue-tab-view/index.tsx
@@ -1,19 +1,19 @@
-import { $, component$, useClientEffect$, useContext, useTask$ } from '@builder.io/qwik';
+import { $, component$, useContext, useTask$ } from '@builder.io/qwik';
 import { PullRequestIssueTab } from '../pull-request-issue-tab/pull-request-issue-tab';
 import { sortOptions } from './data';
 import { useQuery } from '../../utils';
 import { ISSUES_QUERY } from '../../utils/queries/issues-query';
 import { AUTH_TOKEN, DEFAULT_PAGE_SIZE, GITHUB_GRAPHQL } from '../../utils/constants';
 import IssuesData from './issues-data';
-import { IssueOrderField, Milestone, OrderDirection, ParsedIssueQuery } from './type';
+import { ParsedIssueQuery } from './type';
 import { isBrowser } from '@builder.io/qwik/build';
 import { parseQuery } from './parseQuery';
-import { Label } from '../repo-pulls/types';
 import { ClearFilterAndSortBtn } from '../clear-filter-and-sort-button';
 import { useLocation, useNavigate } from '@builder.io/qwik-city';
 import IssuesPRContext, { IssuesPRContextProps } from '../../context/issue-pr-store';
 import DropdownContext from '../../context/issue-tab-header-dropdown';
 import { Pagination } from '../pagination/pagination';
+import { OrderDirection, OrderField } from '~/utils/types';
 
 export interface IssuesProps {
   owner: string;
@@ -29,7 +29,7 @@ interface IssuesQueryParams {
   before?: string;
   orderBy: string;
   direction: string;
-  filterBy: { milestone?: string; labels: string[] | undefined };
+  filterBy: { milestone?: string; milestoneNumber?: string; labels: string[] | undefined };
 }
 
 export const IssueTabView = component$(({ owner, name }: IssuesProps) => {
@@ -38,9 +38,6 @@ export const IssueTabView = component$(({ owner, name }: IssuesProps) => {
   const issuesStore = useContext(IssuesPRContext);
   const dropdownStore = useContext(DropdownContext);
 
-  const afterCursor = typeof location.query.after === 'string' ? location.query.after : undefined;
-  const beforeCursor = typeof location.query.before === 'string' ? location.query.before : undefined;
-
   const hasActiveFilter =
     dropdownStore.selectedLabel ||
     dropdownStore.selectedSort !== sortOptions[0].value ||
@@ -50,65 +47,44 @@ export const IssueTabView = component$(({ owner, name }: IssuesProps) => {
     dropdownStore.selectedLabel = undefined;
     dropdownStore.selectedMilestones = undefined;
     dropdownStore.selectedSort = sortOptions[0].value;
+    dropdownStore.selectedMilestoneNumber = undefined;
     navigate.path = `${location.pathname}?tab=${issuesStore.activeTab}`;
   });
 
-  useClientEffect$(async () => {
-    const abortController = new AbortController();
-    issuesStore.loading = true;
-    const response = await fetchRepoIssues(
-      {
-        owner,
-        name,
-        after: afterCursor,
-        before: beforeCursor,
-        first: afterCursor || !beforeCursor ? DEFAULT_PAGE_SIZE : undefined,
-        last: beforeCursor ? DEFAULT_PAGE_SIZE : undefined,
-        orderBy: IssueOrderField.CreatedAt,
-        direction: OrderDirection.Desc,
-        filterBy: {
-          milestone: dropdownStore.selectedMilestones,
-          labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
-        },
-      },
-      abortController
-    );
-
-    updateIssueState(issuesStore, parseQuery(response));
-  });
-
-  useTask$(async ({ track }) => {
-    const abortController = new AbortController();
-    issuesStore.loading = true;
-    const after = track(() => location.query.after);
-    const before = track(() => location.query.before);
-    track(() => issuesStore.activeTab);
-    track(() => dropdownStore.selectedSort);
-    track(() => dropdownStore.selectedMilestones);
-    track(() => dropdownStore.selectedLabel);
+  useTask$(
+    async ({ track }) => {
+      const abortController = new AbortController();
+      issuesStore.loading = true;
+      const after = track(() => location.query.after);
+      const before = track(() => location.query.before);
+      track(() => dropdownStore.selectedSort);
+      track(() => dropdownStore.selectedMilestones);
+      track(() => dropdownStore.selectedLabel);
 
-    if (isBrowser) {
-      const response = await fetchRepoIssues(
-        {
-          owner,
-          name,
-          after,
-          before,
-          first: location.query.after || !location.query.before ? DEFAULT_PAGE_SIZE : undefined,
-          last: location.query.before ? DEFAULT_PAGE_SIZE : undefined,
-          orderBy: dropdownStore.selectedSort.split('^')[0],
-          direction: dropdownStore.selectedSort.split('^')[1],
-          filterBy: {
-            milestone: dropdownStore.selectedMilestones,
-            labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
+      if (isBrowser) {
+        const response = await fetchRepoIssues(
+          {
+            owner,
+            name,
+            after,
+            before,
+            first: location.query.after || !location.query.before ? DEFAULT_PAGE_SIZE : undefined,
+            last: location.query.before ? DEFAULT_PAGE_SIZE : undefined,
+            orderBy: dropdownStore.selectedSort.split('^')[0] || OrderField.CreatedAt,
+            direction: dropdownStore.selectedSort.split('^')[1] || OrderDirection.Desc,
+            filterBy: {
+              milestoneNumber: dropdownStore.selectedMilestoneNumber,
+              labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
+            },
           },
-        },
-        abortController
-      );
+          abortController
+        );
 
-      updateIssueState(issuesStore, parseQuery(response));
-    }
-  });
+        updateIssueState(issuesStore, parseQuery(response));
+      }
+    },
+    { eagerness: 'load' }
+  );
 
   return (
     <>
@@ -159,8 +135,8 @@ export function updateIssueState(store: IssuesPRContextProps, response: ParsedIs
   store.openIssues = openIssues.issues;
   store.closedIssuesCount = closedIssues.totalCount;
   store.openIssuesCount = openIssues.totalCount;
-  store.issuesLabel = labels.map((lab: Label) => ({ label: lab.name, value: lab.name }));
-  store.milestones = milestones.map((milestone: Milestone) => ({ value: milestone.id, label: milestone.title }));
+  store.issuesLabel = store.issuesLabel.length ? store.issuesLabel : labels;
+  store.milestones = store.milestones.length ? store.milestones : milestones;
   store.openPageInfo = openIssues.pageInfo;
   store.closedPageInfo = closedIssues.pageInfo;
   store.loading = false;
@@ -169,7 +145,7 @@ export function updateIssueState(store: IssuesPRContextProps, response: ParsedIs
 export async function fetchRepoIssues(
   { owner, name, first, last, after, before, orderBy, direction, filterBy }: IssuesQueryParams,
   abortController?: AbortController
-): Promise<any> {
+) {
   const { executeQuery$ } = useQuery(ISSUES_QUERY);
   const resp = await executeQuery$({
     signal: abortController?.signal,

diff --git a/qwik-graphql-tailwind/src/components/issue-tab-view/parseQuery.ts b/qwik-graphql-tailwind/src/components/issue-tab-view/parseQuery.ts
@@ -1,5 +1,6 @@
-import { Issue, IssuesQuery, Milestone, ParsedIssueQuery } from './type';
-import { Label } from '../repo-pulls/types';
+import { Label } from '~/context/pull-request-store';
+import { Issue, IssuesQuery, ParsedIssueQuery } from './type';
+import { parseMilestones } from '~/utils/helpers';
 
 function parseIssues(connection?: any) {
   if (!connection) {
@@ -20,19 +21,10 @@ function parseIssues(connection?: any) {
     }
 
     const labelNodes = issue.labels?.nodes || [];
-    const labels = labelNodes.reduce(
-      (labels: Label[], label: any) =>
-        label
-          ? [
-              ...labels,
-              {
-                color: label.color,
-                name: label.name,
-              },
-            ]
-          : labels,
-      []
-    );
+    const labels = labelNodes.map((label: Label) => ({
+      color: label.color,
+      name: label.name,
+    }));
 
     return [
       ...issues,
@@ -58,48 +50,18 @@ function parseIssues(connection?: any) {
   return { issues, totalCount, pageInfo };
 }
 
-function parseMilestones(milestones?: any) {
-  const nodes = milestones?.nodes || [];
-  return nodes.reduce((milestones: Milestone[], milestone: Milestone) => {
-    if (!milestone) {
-      return milestones;
-    }
-
-    return [
-      ...milestones,
-      {
-        id: milestone.id,
-        closed: milestone.closed,
-        title: milestone.title,
-        number: milestone.number,
-        description: milestone.description,
-      },
-    ];
-  }, []);
-}
-
 export function parseQuery(data: { data: IssuesQuery }): ParsedIssueQuery {
   const openIssues = parseIssues(data.data.repository?.openIssues);
   const closedIssues = parseIssues(data.data.repository?.closedIssues);
   const milestones = parseMilestones(data.data.repository?.milestones);
+  const labels = data.data.repository?.labels;
+
+  const labelMap = (labels?.nodes || []).map((label: Label) => ({ color: label.color, name: label.name }));
 
-  const labelMap = [...closedIssues.issues, ...openIssues.issues].reduce(
-    (acc: { [key: string]: Label }, issue: Issue) => {
-      const map: { [key: string]: Label } = {};
-      issue.labels.forEach((label: Label) => {
-        map[label.name] = label;
-      });
-      return {
-        ...acc,
-        ...map,
-      };
-    },
-    {}
-  );
   return {
     openIssues,
     closedIssues,
     milestones,
-    labels: Object.values(labelMap) as Label[],
+    labels: labelMap,
   };
 }