chore: milestone works for only issues (#1951)

hdJerry · Megio · web-flow · commit 6e3ae700e7ac · 2023-08-29T15:09:55.000+01:00
* chore: milestone works for only issues

* chore: milestone working on pull requests tab

* chore: some adjustments

* fix: refactored get repo pull requests func

* fix: added clear filter button for issues tab

---------

Co-authored-by: Mattia Magi &lt;mattia.magi91@gmail.com&gt;
diff --git a/solidjs-tailwind/src/components/AuthGuard/AuthGuard.spec.jsx b/solidjs-tailwind/src/components/AuthGuard/AuthGuard.spec.jsx
@@ -5,8 +5,7 @@ import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
 import 'whatwg-fetch';
 import AuthGuard from './AuthGuard';
 
-
-window.scrollTo = vi.fn()
+window.scrollTo = vi.fn();
 
 vi.mock('../../auth', () => {
   return {
diff --git a/solidjs-tailwind/src/components/PRAndIssuesHeader/PRAndIssuesHeader.jsx b/solidjs-tailwind/src/components/PRAndIssuesHeader/PRAndIssuesHeader.jsx
@@ -4,7 +4,7 @@ import FilterDropdown from '../FilterDropDown/FilterDropdown';
 import { SORT_OPTIONS } from '../../utils/constants';
 import { createMemo } from 'solid-js';
 import { usePrAndIssuesContext } from '../../contexts/PrAndIssuesContext';
-import { getSelectedMilestoneId } from './utils';
+import { getSelectedMilestoneNumber } from './utils';
 
 const PRAndIssuesHeader = (props) => {
   const {
@@ -19,7 +19,7 @@ const PRAndIssuesHeader = (props) => {
     setSelectedMilestone,
     selectedMilestone,
     milestoneOpt,
-    setMilestoneId,
+    setMilestoneNumber,
   } = usePrAndIssuesContext();
 
   const sortOptions = Object.values(SORT_OPTIONS);
@@ -35,7 +35,9 @@ const PRAndIssuesHeader = (props) => {
     setSelectedLabel(selectedLabel() !== value ? value : undefined);
   const selectMilestone = (value) => {
     setSelectedMilestone(selectedMilestone() !== value ? value : undefined);
-    setMilestoneId(getSelectedMilestoneId(milestoneOpt(), selectedMilestone()));
+    setMilestoneNumber(
+      getSelectedMilestoneNumber(milestoneOpt(), selectedMilestone())
+    );
   };
 
   return (
diff --git a/solidjs-tailwind/src/components/PRAndIssuesHeader/utils.jsx b/solidjs-tailwind/src/components/PRAndIssuesHeader/utils.jsx
@@ -1,4 +1,9 @@
-export const getSelectedMilestoneId = (milestoneOptions, selectedMilestone) =>
+export const getSelectedMilestoneNumber = (
+  milestoneOptions,
   selectedMilestone
-    ? milestoneOptions.filter((mo) => mo.title === selectedMilestone)[0].id
+) =>
+  selectedMilestone
+    ? milestoneOptions
+        .filter((mo) => mo.title === selectedMilestone)[0]
+        .number.toString()
     : undefined;
diff --git a/solidjs-tailwind/src/components/RepoIssues/RepoIssues.jsx b/solidjs-tailwind/src/components/RepoIssues/RepoIssues.jsx
@@ -22,7 +22,7 @@ const RepoIssues = () => {
     setMilestoneOpt,
     clearSortAndFilter,
     selectedMilestone,
-    milestoneId,
+    milestoneNumber,
   } = usePrAndIssuesContext();
 
   const fetchParameters = () => ({
@@ -32,7 +32,7 @@ const RepoIssues = () => {
     direction: parseSortParams(SORT_OPTIONS, sortBy(), 1),
     filterBy: {
       labels: selectedLabel() ? [selectedLabel()] : undefined,
-      milestone: selectedMilestone() ? milestoneId() : undefined,
+      milestoneNumber: selectedMilestone() ? milestoneNumber() : undefined,
     },
     before: query.before,
     after: query.after,
@@ -74,7 +74,9 @@ const RepoIssues = () => {
   return (
     <div class="md:py-12 max-w-screen-xl mx-auto">
       <Show when={!repo.loading} fallback={<PRAndIssueLoaderSkeleton />}>
-        <Show when={selectedLabel() || sortBy() !== 'Newest'}>
+        <Show
+          when={selectedLabel() || sortBy() !== 'Newest' || milestoneNumber()}
+        >
           <button
             type="button"
             class="flex items-center gap-2 text-sm my-4 ml-2 cursor-pointer"
diff --git a/solidjs-tailwind/src/components/RepoPullRequests/RepoPullRequests.jsx b/solidjs-tailwind/src/components/RepoPullRequests/RepoPullRequests.jsx
@@ -12,8 +12,17 @@ import { PRAndIssueLoaderSkeleton } from '../PRAndIssueLoaderSkeleton';
 const RepoPullRequests = () => {
   const params = useParams();
   const location = useLocation();
-  const { tabActive, sortBy, selectedLabel, setLabelOpt, clearSortAndFilter } =
-    usePrAndIssuesContext();
+  const {
+    tabActive,
+    sortBy,
+    milestoneOpt,
+    labelOpt,
+    selectedLabel,
+    setLabelOpt,
+    setMilestoneOpt,
+    clearSortAndFilter,
+    selectedMilestone,
+  } = usePrAndIssuesContext();
 
   const [data, setData] = createSignal([]);
   const [openCount, setOpenCount] = createSignal();
@@ -26,6 +35,7 @@ const RepoPullRequests = () => {
     orderBy: parseSortParams(SORT_OPTIONS, sortBy(), 0),
     direction: parseSortParams(SORT_OPTIONS, sortBy(), 1),
     labels: selectedLabel() ? [selectedLabel()] : undefined,
+    milestone: selectedMilestone(),
     before:
       typeof location.query.before === 'string'
         ? location.query.before
@@ -47,7 +57,8 @@ const RepoPullRequests = () => {
 
   createEffect(() => {
     if (resp() && !resp.loading) {
-      setLabelOpt(resp().labels);
+      setLabelOpt(resp().labels || labelOpt());
+      setMilestoneOpt(resp().milestones || milestoneOpt());
       setOpenCount(resp().openPullRequests.totalCount);
       setClosedCount(resp().closedPullRequests.totalCount);
       setPageInfo(
@@ -69,7 +80,9 @@ const RepoPullRequests = () => {
         <PRAndIssueLoaderSkeleton />
       ) : (
         <>
-          {(selectedLabel() || sortBy() !== 'Newest') && (
+          {(selectedLabel() ||
+            selectedMilestone() ||
+            sortBy() !== 'Newest') && (
             <div
               class="flex items-center gap-2 text-sm my-4 ml-2 cursor-pointer"
               onClick={clearSortAndFilter}
diff --git a/solidjs-tailwind/src/contexts/PrAndIssuesContext.jsx b/solidjs-tailwind/src/contexts/PrAndIssuesContext.jsx
@@ -16,12 +16,13 @@ export function PrAndIssuesProvider(props) {
   const [selectedMilestone, setSelectedMilestone] = createSignal(undefined);
   const [labelOpt, setLabelOpt] = createSignal([]);
   const [milestoneOpt, setMilestoneOpt] = createSignal([]);
-  const [milestoneId, setMilestoneId] = createSignal(undefined);
+  const [milestoneNumber, setMilestoneNumber] = createSignal(undefined);
 
   const clearSortAndFilter = () => {
     setSortBy('Newest');
     setSelectedLabel(undefined);
     setSelectedMilestone(undefined);
+    setMilestoneNumber(undefined);
   };
 
   const PrAndIssuesParameters = {
@@ -39,8 +40,8 @@ export function PrAndIssuesProvider(props) {
     setSelectedMilestone,
     milestoneOpt,
     setMilestoneOpt,
-    milestoneId,
-    setMilestoneId,
+    milestoneNumber,
+    setMilestoneNumber,
   };
 
   return (
diff --git a/solidjs-tailwind/src/services/api.js b/solidjs-tailwind/src/services/api.js
@@ -1,17 +1,23 @@
 const FetchApi = async ({ url, query, variables, headersOptions }) => {
   return await new Promise((resolve, reject) => {
-    fetch(url, {
-      method: 'POST',
+    let fetchObj = {
       headers: {
         ...headersOptions,
         Accept: 'application/vnd.github+json',
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        query,
-        variables,
-      }),
-    })
+    };
+    if (query) {
+      fetchObj = {
+        ...fetchObj,
+        method: 'POST',
+        body: JSON.stringify({
+          query,
+          variables,
+        }),
+      };
+    }
+    fetch(url, fetchObj)
       .then((res) => res.json())
       .then((result) => {
         resolve(result);
diff --git a/solidjs-tailwind/src/services/get-issues.js b/solidjs-tailwind/src/services/get-issues.js
@@ -2,6 +2,7 @@ import FetchApi from './api';
 import { useAuth } from '../auth';
 import { ISSUES_QUERY } from './queries/issue-info';
 import { GITHUB_GRAPHQL } from '../utils/constants';
+import { parseLabels, parseMilestones } from '../utils/parseFunctions';
 
 function parseIssues(connection) {
   if (!connection) {
@@ -58,43 +59,6 @@ function parseIssues(connection) {
   return { issues, totalCount, pageInfo };
 }
 
-function parseMilestones(milestones) {
-  const nodes = milestones?.nodes || [];
-  return nodes.reduce((milestones, milestone) => {
-    if (!milestone) {
-      return milestones;
-    }
-
-    return [
-      ...milestones,
-      {
-        id: milestone.id,
-        closed: milestone.closed,
-        title: milestone.title,
-        number: milestone.number,
-        description: milestone.description,
-      },
-    ];
-  }, []);
-}
-
-function parseLabels(labels) {
-  const nodes = labels?.nodes || [];
-  return nodes.reduce((labels, label) => {
-    if (!label) {
-      return labels;
-    }
-
-    return [
-      ...labels,
-      {
-        color: label.color,
-        name: label.name,
-      },
-    ];
-  }, []);
-}
-
 const getIssues = async ({
   owner,
   name,
diff --git a/solidjs-tailwind/src/services/get-repo-pull-requests.js b/solidjs-tailwind/src/services/get-repo-pull-requests.js
@@ -1,7 +1,9 @@
 import { REPO_PULL_REQUESTS } from './queries/repo-pull-requests';
 import { useAuth } from '../auth';
 import FetchApi from './api';
-import { GITHUB_GRAPHQL } from '../utils/constants';
+import { GITHUB_GRAPHQL, SEARCH_PULLS } from '../utils/constants';
+import { parseLabels, parseMilestones } from '../utils/parseFunctions';
+import parseRestAPIPullRequests from '../utils/parseRestAPIPullRequest';
 
 function parsePullRequests(connection) {
   if (!connection) {
@@ -60,23 +62,6 @@ function parsePullRequests(connection) {
   return { pullRequests, totalCount, pageInfo };
 }
 
-function parseLabels(labels) {
-  const nodes = labels?.nodes || [];
-  return nodes.reduce((labels, label) => {
-    if (!label) {
-      return labels;
-    }
-
-    return [
-      ...labels,
-      {
-        color: label.color,
-        name: label.name,
-      },
-    ];
-  }, []);
-}
-
 /**
  *
  * @param {
@@ -97,6 +82,7 @@ const getRepoPullRequests = async ({
   orderBy,
   direction,
   labels,
+  milestone,
   before,
   after,
   first,
@@ -121,22 +107,66 @@ const getRepoPullRequests = async ({
       authorization: `Bearer ${authStore.token}`,
     },
   };
-  const resp = await FetchApi(data);
 
-  const openPullRequests = parsePullRequests(
-    resp.data.repository?.openPullRequest
-  );
-  const closedPullRequests = parsePullRequests(
-    resp.data.repository?.closedPullRequest
-  );
+  if (milestone) {
+    //Using REST API for filters involving milestone as filter by milestone isn't supported on the Graphql
+    const pulls_data = {
+      owner,
+      name,
+      labels: labels?.[0] ?? undefined,
+      sort: orderBy,
+      direction,
+      first,
+      type: 'pull-request',
+      milestone,
+    };
+    const restOpenPullRequests = await FetchApi({
+      url: SEARCH_PULLS({
+        ...pulls_data,
+        state: 'open',
+      }),
+      headersOptions: {
+        authorization: `Bearer ${authStore.token}`,
+      },
+    });
+    const restClosedPullRequests = await FetchApi({
+      url: SEARCH_PULLS({
+        ...pulls_data,
+        state: 'closed',
+      }),
+      headersOptions: {
+        authorization: `Bearer ${authStore.token}`,
+      },
+    });
+
+    const openPullRequests = parseRestAPIPullRequests(restOpenPullRequests);
+    const closedPullRequests = parseRestAPIPullRequests(restClosedPullRequests);
 
-  const labelMap = parseLabels(resp.data.repository?.labels);
+    return {
+      openPullRequests,
+      closedPullRequests,
+    };
+  } else {
+    const resp = await FetchApi(data);
+    const openPullRequests = parsePullRequests(
+      resp.data.repository?.openPullRequest
+    );
 
-  return {
-    openPullRequests,
-    closedPullRequests,
-    labels: labelMap,
-  };
+    const closedPullRequests = parsePullRequests(
+      resp.data.repository?.closedPullRequest
+    );
+
+    const milestones = parseMilestones(resp.data.repository?.milestones);
+
+    const labelMap = parseLabels(resp.data.repository?.labels);
+
+    return {
+      openPullRequests,
+      closedPullRequests,
+      labels: labelMap,
+      milestones,
+    };
+  }
 };
 
 export default getRepoPullRequests;
diff --git a/solidjs-tailwind/src/services/queries/repo-pull-requests.js b/solidjs-tailwind/src/services/queries/repo-pull-requests.js
@@ -1,6 +1,22 @@
 export const REPO_PULL_REQUESTS = `
   query PullRequests($owner: String!, $name: String!, $first: Int, $last: Int, $before: String, $after: String, $labels: [String!], $orderBy: IssueOrderField!, $direction: OrderDirection!) {
     repository(owner: $owner, name: $name) {
+       milestones(first: 100, states: [OPEN]) {
+        nodes {
+          id
+          closed
+          description
+          number
+          title
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
       labels(first: 100) {
         totalCount
         nodes {
diff --git a/solidjs-tailwind/src/utils/constants.js b/solidjs-tailwind/src/utils/constants.js
diff --git a/solidjs-tailwind/src/utils/parseFunctions.js b/solidjs-tailwind/src/utils/parseFunctions.js
diff --git a/solidjs-tailwind/src/utils/parseRestAPIPullRequest.js b/solidjs-tailwind/src/utils/parseRestAPIPullRequest.js
