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}>