✨ Includes origin to node list, fixes #11

src/components/Container.jsx

@@ -10,8 +10,8 @@ const Container = () => {
   const [errorDetail, setErrorDetail] = useState(null);
   const [activePage, setActivePage] = useState(1);
   const [loading, setLoading] = useState(false);
-  const onResult = (result) => {
-    setForks(result.data.repository.forks.nodes);
+  const onResult = (nodes) => {
+    setForks(nodes);
     setErrorDetail(null);
     setLoading(false);
   };

src/components/Container.test.jsx

@@ -23,6 +23,17 @@ test('search forks', (done) => {
   const searchInput = screen.getByPlaceholderText(/github.com/);
   const submitButton = screen.getByRole('button', { type: 'submit' });
   const forkId = 'django-nonrel/django';
+  const origin = {
+    nameWithOwner: 'django/django',
+    stargazerCount: 54393,
+    forkCount: 23386,
+    object: {
+      committedDate: '2020-12-18T08:23:22Z',
+      history: {
+        totalCount: 29060,
+      },
+    },
+  };
   const forks = [
     {
       nameWithOwner: forkId,
@@ -36,16 +47,7 @@ test('search forks', (done) => {
       },
     },
   ];
-
-  const searchResult = {
-    data: {
-      repository: {
-        forks: {
-          nodes: forks,
-        },
-      },
-    },
-  };
+  const searchResult = [...[origin], ...forks];
   searchPopularForks.mockImplementationOnce((url, onResult, onError) => {
     onResult(searchResult);
     onError; // peaces linter mind

src/components/ResultTable.jsx

@@ -58,11 +58,6 @@ HeaderModified.propTypes = {
 const ResultTable = ({
   forks, activePage, itemsCountPerPage, onPageChange,
 }) => {
-  const [sortedForks, setSortedForks] = useState(forks);
-  const [orderBy, setOrderBy] = useState({
-    column: 'stargazerCount',
-    direction: 'desc',
-  });
   const sortByNameWithOwner = (a, b) => (
     a.nameWithOwner.toLowerCase().localeCompare(b.nameWithOwner.toLowerCase())
   );
@@ -71,14 +66,22 @@ const ResultTable = ({
   const sortByForkCount = sortByNumber((x) => x.forkCount);
   const sortByCommits = sortByNumber((x) => x.object.history.totalCount);
   const sortByCommittedDate = sortByNumber((x) => Date.parse(x.object.committedDate));
-  const onHeaderClick = (orderByField, sortFunc) => {
+  const [orderBy, setOrderBy] = useState({
+    column: 'stargazerCount',
+    direction: 'desc',
+    sortFunc: sortByStargazerCount,
+  });
+  const sort = (direction, sortFunc) => {
+    const directionFunc = direction === 'asc' ? 'slice' : 'reverse';
+    return forks.slice().sort(sortFunc)[directionFunc]();
+  };
+  const onHeaderClick = (column, sortFunc) => {
     // change direction only if the same order was selected
-    const toggledDirection = orderBy.direction === 'asc' ? 'desc' : 'asc';
-    const orderByDirection = orderByField === orderBy.column ? toggledDirection : orderBy.direction;
-    const directionFunc = orderByDirection === 'asc' ? 'slice' : 'reverse';
-    setSortedForks(forks.slice().sort(sortFunc)[directionFunc]());
-    setOrderBy({ column: orderByField, direction: orderByDirection });
+    const toggledDirection = orderBy.direction === 'desc' ? 'asc' : 'desc';
+    const direction = column === orderBy.column ? toggledDirection : orderBy.direction;
+    setOrderBy({ column, direction, sortFunc });
   };
+  const sortedForks = sort(orderBy.direction, orderBy.sortFunc);
   return (
     <>
       <Table striped bordered hover>

src/components/ResultTable.test.jsx

@@ -57,9 +57,9 @@ test('sorting', () => {
   render(
     <ResultTable forks={forks} activePage={1} itemsCountPerPage={1} onPageChange={() => null} />,
   );
-  // not really sorted by default just showing in the same order as received
-  expect(screen.getByText(forks[0].nameWithOwner)).toBeInTheDocument();
-  expect(screen.queryByText(forks[1].nameWithOwner)).not.toBeInTheDocument();
+  // sorted by stargazerCount default
+  expect(screen.getByText(forks[1].nameWithOwner)).toBeInTheDocument();
+  expect(screen.queryByText(forks[0].nameWithOwner)).not.toBeInTheDocument();
   expect(screen.queryByText(forks[2].nameWithOwner)).not.toBeInTheDocument();
   const repoTableHeader = screen.getByText('Repo');
   // let's sort by repo name

src/components/__snapshots__/ResultTable.test.jsx.snap

@@ -222,43 +222,43 @@ Array [
       <tr>
         <td>
           <a
-            href="https://github.com/django-nonrel/django"
+            href="https://github.com/django/django"
           >
-            django-nonrel/django
+            django/django
           </a>
         </td>
         <td>
-          214
+          54330
         </td>
         <td>
-          84
+          23377
         </td>
         <td>
-          13990
+          29000
         </td>
         <td>
-          3 months ago
+          1 days ago
         </td>
       </tr>
       <tr>
         <td>
           <a
-            href="https://github.com/django/django"
+            href="https://github.com/django-nonrel/django"
           >
-            django/django
+            django-nonrel/django
           </a>
         </td>
         <td>
-          54330
+          214
         </td>
         <td>
-          23377
+          84
         </td>
         <td>
-          29000
+          13990
         </td>
         <td>
-          1 days ago
+          3 months ago
         </td>
       </tr>
     </tbody>

src/utils/graphql.js

@@ -35,6 +35,17 @@ const client = new ApolloClient({
 const GET_FORKS_QUERY = gql`
   query Forks($owner: String! $name: String!) {
     repository(owner: $owner, name: $name) {
+      nameWithOwner
+      stargazerCount
+      forkCount
+      object(expression: "master") {
+        ... on Commit {
+          committedDate
+          history {
+            totalCount
+          }
+        }
+      }
       forks(first: 100, orderBy: {field: STARGAZERS, direction: DESC}) {
         nodes {
           nameWithOwner

src/utils/search.js

@@ -1,13 +1,18 @@
 import { client, GET_FORKS_QUERY } from './graphql';
 import { splitUrl } from './validators';
 
+const concatForksWithRepo = (result) => {
+  const { forks, ...origin } = result.data.repository;
+  return [...[origin], ...forks.nodes];
+};
+
 const searchPopularForks = (url, onResult, onError) => {
   const [owner, name] = splitUrl(url);
   client.query({
     query: GET_FORKS_QUERY,
     variables: { owner, name },
   }).then(
-    (result) => onResult(result),
+    (result) => onResult(concatForksWithRepo(result)),
   ).catch(
     (error) => onError(error),
   );

src/utils/search.test.js

@@ -4,22 +4,39 @@ import { client } from './graphql';
 
 test('basic case', (done) => {
   const url = 'https://github.com/django/django';
-  const expected = {
-    data: {
-      repository: {
-        forks: {
-          nodes: [],
-        },
+  const forks = {
+    nodes: [],
+  };
+  const origin = {
+    nameWithOwner: 'django/django',
+    stargazerCount: 54393,
+    forkCount: 23386,
+    object: {
+      committedDate: '2020-12-18T08:23:22Z',
+      history: {
+        totalCount: 29060,
       },
     },
   };
+  const repository = {
+    ...origin,
+    forks,
+  };
+  const queryResult = {
+    data: {
+      repository,
+    },
+  };
+  const expected = [
+    ...[origin], ...forks.nodes,
+  ];
   const onResult = (result) => {
     expect(result).toEqual(expected);
     done();
   };
   // test should fail onError
   const onError = (error) => done(error);
-  const querySpy = jest.spyOn(client, 'query').mockReturnValue(Promise.resolve(expected));
+  const querySpy = jest.spyOn(client, 'query').mockReturnValue(Promise.resolve(queryResult));
   searchPopularForks(url, onResult, onError);
   expect(querySpy).toHaveBeenNthCalledWith(
     1, { query: expect.any(Object), variables: { owner: 'django', name: 'django' } },