♻️ refactor: sort using lodash

This will make the TypeScript migration easier since it already has the
types definitions.

package.json

@@ -18,6 +18,7 @@
     "bootstrap": "^4.5.3",
     "font-awesome": "^4.7.0",
     "graphql": "^15.4.0",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",

src/components/ResultTable.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
+import { orderBy as lodashOrderBy } from "lodash";
 import { OverlayTrigger, Table, Tooltip } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Pagination from "react-js-pagination";
 import ForkLine from "./ForkLine";
-import { sortObjectsFunc } from "../utils/sort";
 
 const paginatedForks = (forks, activePage, itemsCountPerPage) =>
   forks.slice(
@@ -56,7 +56,11 @@ const ResultTable = ({
   itemsCountPerPage,
   onPageChange,
 }) => {
-  const sortByNameWithOwner = sortObjectsFunc((x) => x.nameWithOwner);
+  const sortObjectsFunc = (attribute) => (collection, order) =>
+    lodashOrderBy(collection, [attribute], [order]);
+  const sortByNameWithOwner = sortObjectsFunc((x) =>
+    x.nameWithOwner.toLowerCase()
+  );
   const sortByStargazerCount = sortObjectsFunc((x) => x.stargazerCount);
   const sortByForkCount = sortObjectsFunc((x) => x.forkCount);
   const sortByCommits = sortObjectsFunc((x) => x.object.history.totalCount);
@@ -68,18 +72,14 @@ const ResultTable = ({
     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 === "desc" ? "asc" : "desc";
     const direction =
       column === orderBy.column ? toggledDirection : orderBy.direction;
     setOrderBy({ column, direction, sortFunc });
   };
-  const sortedForks = sort(orderBy.direction, orderBy.sortFunc);
+  const sortedForks = orderBy.sortFunc(forks.slice(), orderBy.direction);
   return (
     <>
       <Table striped bordered hover>

yarn.lock

@@ -7384,6 +7384,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-driver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"