refact: use ramda for sorting

src/components/ArchivesSidebar/index.tsx

@@ -1,4 +1,5 @@
 import { graphql, useStaticQuery } from "gatsby"
+import { sort } from "ramda"
 import React, { FC, HTMLAttributes } from "react"
 import { IAllArchivesQuery, IFileOrFolder } from "../../types"
 import { humanize } from "../../utils"
@@ -29,7 +30,7 @@ function plantTree(item: IFileOrFolder) {
 export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const archives = useStaticQuery<IAllArchivesQuery>(ALL_ARCHIVES)
   const tree = useBuildTree(archives, "/archives")
-  const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
+  const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
 
   return <Sidebar {...props}>{sortedTree.map(plantTree)}</Sidebar>
 }

src/components/ResourcesList/index.tsx

@@ -5,6 +5,7 @@ import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
 import { getPath, humanize } from "../../utils"
 import * as SC from "./styles"
 import useBuildTree from "./useBuildTree"
+import { sort } from "ramda"
 
 const ALL_RESOURCES = graphql`
   query {
@@ -77,7 +78,7 @@ export const ResourcesList: FC<IResourcesList> = props => {
   }
 
   const tree = useBuildTree(filteredResources)
-  const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
+  const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
 
   return (
     <SC.ResourcesListWrapper {...props}>

src/components/ResourcesSidebar/index.tsx

@@ -1,5 +1,5 @@
 import { graphql, useStaticQuery } from "gatsby"
-import { descend, sortWith } from "ramda"
+import { descend, sort, sortWith } from "ramda"
 import React, { FC, HTMLAttributes, memo, useState } from "react"
 import TriangleDown from "../../icons/triangle-down.svg"
 import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
@@ -113,7 +113,7 @@ const FirstLevelFolder = memo(
 export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const tree = useBuildTree(resources, "/resources")
-  const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
+  const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
 
   return (
     <Sidebar {...props}>

src/utils/index.ts

@@ -2,6 +2,7 @@ import chain from "ramda/es/chain"
 import partition from "ramda/es/partition"
 import pipe from "ramda/es/pipe"
 
+import { sort } from "ramda"
 import { IFile, IFileOrFolder, IFolder } from "../types"
 
 function specificWordsToUpper(str: string): string {
@@ -91,16 +92,17 @@ function generateFolder({
   targets: IFolder[]
 }): IFolder {
   const children = join(chain(target => target.children, targets))
+  const sortedChildren = sort((a, b) => {
+    return a.title.split("/").length > b.title.split("/").length
+      ? -1
+      : a.title.localeCompare(b.title)
+  }, children)
 
   return {
     title,
     type: "folder",
     path,
-    children: children.sort((a, b) =>
-      a.title.split("/").length > b.title.split("/").length
-        ? -1
-        : a.title.localeCompare(b.title)
-    ),
+    children: sortedChildren,
   }
 }