refact: extract duplicated File/Folder types

src/components/ResourcesList/index.tsx

@@ -1,42 +1,10 @@
 import { graphql, useStaticQuery } from "gatsby"
 import React, { memo } from "react"
 import "react-perfect-scrollbar/dist/css/styles.css"
+import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
 import * as SC from "./styles"
 import useBuildTree from "./useBuildTree"
 
-export interface IFile {
-  title: string
-  type: "file"
-  path: string
-}
-
-export interface IFolder {
-  title: string
-  type: "folder"
-  path: string
-  children: IFileOrFolder[]
-}
-
-export type IFileOrFolder = IFile | IFolder
-
-export interface IFileQuery {
-  node: {
-    relativePath: string
-    childMarkdownRemark: {
-      frontmatter: {
-        author: string
-        date: string
-      }
-    }
-  }
-}
-
-export interface IAllResourcesQuery {
-  allFile: {
-    edges: IFileQuery[]
-  }
-}
-
 const ALL_RESOURCES = graphql`
   query {
     allFile(filter: { sourceInstanceName: { eq: "resources" } }) {

src/components/ResourcesList/useBuildTree.tsx

@@ -1,14 +1,14 @@
 import chain from "ramda/es/chain"
 import partition from "ramda/es/partition"
 
-import { traversePathsToFiles } from "../../utils"
 import {
   IAllResourcesQuery,
   IFile,
   IFileOrFolder,
   IFileQuery,
   IFolder,
-} from "./index"
+} from "../../types"
+import { traversePathsToFiles } from "../../utils"
 
 function generateFolder({
   title,

src/components/ResourcesSidebar/index.tsx

@@ -4,44 +4,12 @@ import Scrollbar from "react-perfect-scrollbar"
 import "react-perfect-scrollbar/dist/css/styles.css"
 import TriangleDown from "../../icons/triangle-down.svg"
 import Banner from "../../images/tph-banner.svg"
+import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
 import { ThemeToggler } from "../ThemeToggler"
 import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
 import useBuildTree from "./useBuildTree"
 
-export interface IFile {
-  title: string
-  type: "file"
-  path: string
-}
-
-export interface IFolder {
-  title: string
-  type: "folder"
-  path: string
-  children: IFileOrFolder[]
-}
-
-export type IFileOrFolder = IFile | IFolder
-
-export interface IFileQuery {
-  node: {
-    relativePath: string
-    childMarkdownRemark: {
-      frontmatter: {
-        author: string
-        date: string
-      }
-    }
-  }
-}
-
-export interface IAllResourcesQuery {
-  allFile: {
-    edges: IFileQuery[]
-  }
-}
-
 const ALL_RESOURCES = graphql`
   query {
     allFile(filter: { sourceInstanceName: { eq: "resources" } }) {

src/components/ResourcesSidebar/useBuildTree.tsx

@@ -1,14 +1,14 @@
 import chain from "ramda/es/chain"
 import partition from "ramda/es/partition"
 
-import { traversePaths } from "../../utils"
 import {
   IAllResourcesQuery,
   IFile,
   IFileOrFolder,
   IFileQuery,
   IFolder,
-} from "./index"
+} from "../../types"
+import { traversePaths } from "../../utils"
 
 function generateFolder({
   title,

src/types/index.d.ts

@@ -0,0 +1,32 @@
+export interface IFile {
+  title: string
+  type: "file"
+  path: string
+}
+
+export interface IFolder {
+  title: string
+  type: "folder"
+  path: string
+  children: IFileOrFolder[]
+}
+
+export type IFileOrFolder = IFile | IFolder
+
+export interface IFileQuery {
+  node: {
+    relativePath: string
+    childMarkdownRemark: {
+      frontmatter: {
+        author: string
+        date: string
+      }
+    }
+  }
+}
+
+export interface IAllResourcesQuery {
+  allFile: {
+    edges: IFileQuery[]
+  }
+}

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { IFile, IFileOrFolder } from "../components/ResourcesSidebar/index"
+import { IFileOrFolder } from "../types"
 
 export function traversePaths(
   [head, ...tail]: string[],