chore: filter working now

thisdot · Aug 28, 2023 · d1052f7 · d1052f7
1 parent 2fd0a29
commit d1052f7
Show file tree

Hide file tree

Showing 6 changed files with 288 additions and 185 deletions.
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,4 +1,4 @@
-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';
@@ -37,9 +37,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 ||
@@ -49,65 +46,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: {
-          milestoneNumber: dropdownStore.selectedMilestoneNumber,
-          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: {
-            milestoneNumber: dropdownStore.selectedMilestoneNumber,
-            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] || IssueOrderField.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 (
     <>
@@ -158,8 +134,8 @@ export function updateIssueState(store: IssuesPRContextProps, response: ParsedIs
   store.openIssues = openIssues.issues;
   store.closedIssuesCount = closedIssues.totalCount;
   store.openIssuesCount = openIssues.totalCount;
-  store.issuesLabel = labels;
-  store.milestones = milestones;
+  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;

diff --git a/qwik-graphql-tailwind/src/components/pull-request-issue-tab/pull-request-issue-tab.tsx b/qwik-graphql-tailwind/src/components/pull-request-issue-tab/pull-request-issue-tab.tsx
@@ -5,7 +5,6 @@ import { FilterDropdown } from '../filter-dropdown/filter-dropdown';
 import IssuesPRContext from '~/context/issue-pr-store';
 import DropdownStores from '~/context/issue-tab-header-dropdown';
 import PullRequestContext, { Label } from '~/context/pull-request-store';
-import { useLocation, useNavigate } from '@builder.io/qwik-city';
 import { Milestone } from '../issue-tab-view/type';
 import { getSelectedMilestoneNumber } from '~/utils/getMilestoneNumber';
 
@@ -34,9 +33,6 @@ export const PullRequestIssueTab = component$(
   ({ openCount, closedCount, tabType, milestonesOption, labelOption, sortOption }: PullRequestIssueTabParams) => {
     const tab = tabType === 'issue' ? useContext(IssuesPRContext) : useContext(PullRequestContext);
     const dropdown = useContext(DropdownStores);
-    const { pathname } = useLocation();
-    const navigate = useNavigate();
-    console.log(milestonesOption);
 
     const openBtnClasses = cn('text-xs flex items-center gap-1 text-gray-600', {
       'font-semibold text-gray-900': tab.activeTab === TABS.OPEN,
@@ -51,10 +47,6 @@ export const PullRequestIssueTab = component$(
 
     const toggleTab = $((value: TABS) => {
       tab.activeTab = value;
-      dropdown.selectedLabel = undefined;
-      dropdown.selectedSort = dropdown.selectedSort || sortOption[0].value;
-      dropdown.selectedMilestones = undefined;
-      navigate.path = `${pathname}?tab=${value}`;
     });
 
     return (

diff --git a/qwik-graphql-tailwind/src/components/repo-pulls/index.tsx b/qwik-graphql-tailwind/src/components/repo-pulls/index.tsx
@@ -1,6 +1,6 @@
 import { isBrowser } from '@builder.io/qwik/build';
 import { useLocation, useNavigate } from '@builder.io/qwik-city';
-import { $, component$, useClientEffect$, useTask$, useContext } from '@builder.io/qwik';
+import { $, component$, useTask$, useContext } from '@builder.io/qwik';
 
 import { parseQuery } from './parseQuery';
 import PullRequestData from './repo-pulls-data';
@@ -13,9 +13,10 @@ import { ClearFilterAndSortBtn } from '../clear-filter-and-sort-button';
 import { useQuery } from '~/utils';
 import { PULL_REQUEST_QUERY } from '~/utils/queries/pull-request';
 import PullRequestContext, { PullRequestContextProps } from '~/context/pull-request-store';
-import { AUTH_TOKEN, GITHUB_GRAPHQL, DEFAULT_PAGE_SIZE } from '~/utils/constants';
+import { AUTH_TOKEN, GITHUB_GRAPHQL, DEFAULT_PAGE_SIZE, SEARCH_PULLS } from '~/utils/constants';
 import DropdownContext from '~/context/issue-tab-header-dropdown';
 import { sortOptions } from './data';
+import parseRestAPIPullRequests, { IPullRequestProps } from '~/utils/parseRestAPIPullRequests';
 
 export interface PullRequestsProps {
   owner: string;
@@ -41,70 +42,57 @@ export default component$(({ owner, name }: PullRequestsProps) => {
   const pullRequestStore = useContext(PullRequestContext);
   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;
+  const hasActiveFilter =
+    dropdownStore.selectedLabel ||
+    dropdownStore.selectedSort !== sortOptions[0].value ||
+    dropdownStore.selectedMilestones !== undefined;
 
   const resetFilters$ = $(() => {
     dropdownStore.selectedLabel = undefined;
     dropdownStore.selectedSort = sortOptions[0].value;
+    dropdownStore.selectedMilestones = undefined;
+    dropdownStore.selectedMilestoneNumber = undefined;
     navigate.path = `${location.pathname}?tab=${pullRequestStore.activeTab}`;
   });
 
-  useClientEffect$(async () => {
-    pullRequestStore.loading = true;
-    const abortController = new AbortController();
-    const response = await fetchRepoPullRequests(
-      {
-        owner,
-        name,
-        first: afterCursor || !beforeCursor ? DEFAULT_PAGE_SIZE : undefined,
-        last: beforeCursor ? DEFAULT_PAGE_SIZE : undefined,
-        labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
-        milestone: dropdownStore.selectedMilestones,
-        orderBy: PullRequestOrderField.CreatedAt,
-        direction: OrderDirection.Desc,
-        after: afterCursor,
-        before: beforeCursor,
-      },
-      abortController
-    );
-
-    updatePullRequestState(pullRequestStore, parseQuery(response));
-  });
-
-  useTask$(async ({ track }) => {
-    const abortController = new AbortController();
-    const after = track(() => location.query.after);
-    const before = track(() => location.query.before);
-    track(() => pullRequestStore.activeTab);
-    track(() => dropdownStore.selectedSort);
-    track(() => dropdownStore.selectedLabel);
-
-    // fetchRepoPullRequests needs auth token.
-    // Because we store auth token in sessionStorage we need to be sure that the storage is defined.
-    // We ask to the useTask to do the following operation only in browser,
-    // where we are sure that sessionStorage is not undefined.
-    if (isBrowser) {
-      const response = await fetchRepoPullRequests(
-        {
-          owner,
-          name,
-          after,
-          before,
-          first: location.query.after || !location.query.before ? DEFAULT_PAGE_SIZE : undefined,
-          last: location.query.before ? DEFAULT_PAGE_SIZE : undefined,
-          labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
-          milestone: dropdownStore.selectedMilestones,
-          orderBy: dropdownStore.selectedSort.split('^')[0],
-          direction: dropdownStore.selectedSort.split('^')[1],
-        },
-        abortController
-      );
-      updatePullRequestState(pullRequestStore, parseQuery(response));
-    }
-  });
+  useTask$(
+    async ({ track }) => {
+      const abortController = new AbortController();
+      const after = track(() => location.query.after);
+      const before = track(() => location.query.before);
+      track(() => dropdownStore.selectedSort);
+      track(() => dropdownStore.selectedLabel);
+      track(() => dropdownStore.selectedMilestones);
+
+      // fetchRepoPullRequests needs auth token.
+      // Because we store auth token in sessionStorage we need to be sure that the storage is defined.
+      // We ask to the useTask to do the following operation only in browser,
+      // where we are sure that sessionStorage is not undefined.
+      if (isBrowser) {
+        const response = await fetchRepoPullRequests(
+          {
+            owner,
+            name,
+            after,
+            before,
+            first: location.query.after || !location.query.before ? DEFAULT_PAGE_SIZE : undefined,
+            last: location.query.before ? DEFAULT_PAGE_SIZE : undefined,
+            labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
+            milestone: dropdownStore.selectedMilestones,
+            orderBy: dropdownStore.selectedSort.split('^')[0] || PullRequestOrderField.CreatedAt,
+            direction: dropdownStore.selectedSort.split('^')[1] || OrderDirection.Desc,
+          },
+          abortController
+        );
+        if (dropdownStore.selectedMilestones) {
+          updatePullRequestState(pullRequestStore, response);
+        } else {
+          updatePullRequestState(pullRequestStore, parseQuery(response));
+        }
+      }
+    },
+    { eagerness: 'load' }
+  );
 
   return (
     <>
@@ -161,37 +149,79 @@ export function updatePullRequestState(store: PullRequestContextProps, response:
   store.openPullRequest = openPullRequests.pullRequests;
   store.closedPullRequestCount = closedPullRequests.totalCount;
   store.openPullRequestCount = openPullRequests.totalCount;
-  store.pullRequestLabels = labels;
-  store.pullRequestMilestones = milestones;
+  store.pullRequestLabels = store.pullRequestLabels.length ? store.pullRequestLabels : labels;
+  store.pullRequestMilestones = store.pullRequestMilestones.length ? store.pullRequestMilestones : milestones;
   store.openPageInfo = openPullRequests.pageInfo;
   store.closedPageInfo = closedPullRequests.pageInfo;
   store.loading = false;
 }
 
 export async function fetchRepoPullRequests(
-  { owner, name, first, last, after, before, labels, orderBy, direction }: PullRequestsQueryParams,
+  { owner, name, first, last, after, before, labels, orderBy, direction, milestone }: PullRequestsQueryParams,
   abortController?: AbortController
-): Promise<any> {
-  const { executeQuery$ } = useQuery(PULL_REQUEST_QUERY);
-  const resp = await executeQuery$({
-    signal: abortController?.signal,
-    url: GITHUB_GRAPHQL,
-    variables: {
+) {
+  if (milestone) {
+    //
+    const { executeQuery$ } = useQuery();
+    const pulls_data = {
       owner,
       name,
-      first,
-      last,
-      labels,
-      orderBy,
+      labels: labels?.[0] ?? undefined,
+      sort: orderBy,
       direction,
-      after,
-      before,
-    },
-    headersOpt: {
-      Accept: 'application/vnd.github+json',
-      authorization: `Bearer ${sessionStorage.getItem(AUTH_TOKEN)}`,
-    },
-  });
+      first,
+      type: 'pull-request',
+      milestone,
+    };
+    const restOpenPullRequests = await executeQuery$({
+      url: SEARCH_PULLS({
+        ...pulls_data,
+        state: 'open',
+      }),
+      headersOpt: {
+        authorization: `Bearer ${sessionStorage.getItem(AUTH_TOKEN)}`,
+      },
+    });
+    const restClosedPullRequests = await executeQuery$({
+      url: SEARCH_PULLS({
+        ...pulls_data,
+        state: 'closed',
+      }),
+      headersOpt: {
+        authorization: `Bearer ${sessionStorage.getItem(AUTH_TOKEN)}`,
+      },
+    });
+    const open = (await restOpenPullRequests.json()) as IPullRequestProps;
+    const closed = (await restClosedPullRequests.json()) as IPullRequestProps;
+    const openPullRequests = parseRestAPIPullRequests(open);
+    const closedPullRequests = parseRestAPIPullRequests(closed);
+
+    return {
+      openPullRequests,
+      closedPullRequests,
+    };
+  } else {
+    const { executeQuery$ } = useQuery(PULL_REQUEST_QUERY);
+    const resp = await executeQuery$({
+      signal: abortController?.signal,
+      url: GITHUB_GRAPHQL,
+      variables: {
+        owner,
+        name,
+        first,
+        last,
+        labels,
+        orderBy,
+        direction,
+        after,
+        before,
+      },
+      headersOpt: {
+        Accept: 'application/vnd.github+json',
+        authorization: `Bearer ${sessionStorage.getItem(AUTH_TOKEN)}`,
+      },
+    });
 
-  return await resp.json();
+    return await resp.json();
+  }
 }