From de846a4f58f43cb489236ebd6a06a7795fa3abb1 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:27:22 -0400 Subject: [PATCH 01/11] style: clean up unused code --- src/components/DocsLayout/index.tsx | 3 -- src/components/DocsLayout/layout.scss | 41 ------------------------- src/components/Layout/index.tsx | 1 - src/components/Navbar/index.tsx | 43 --------------------------- src/components/Navbar/styles.tsx | 6 ---- src/pages/docs/something.md | 1 - 6 files changed, 95 deletions(-) delete mode 100644 src/components/DocsLayout/layout.scss delete mode 100644 src/components/Navbar/index.tsx delete mode 100644 src/components/Navbar/styles.tsx delete mode 100644 src/pages/docs/something.md diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx index 34ee9f7..1eba5b7 100644 --- a/src/components/DocsLayout/index.tsx +++ b/src/components/DocsLayout/index.tsx @@ -8,11 +8,8 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" -import Container from "../Container" import DocsSidebar from "../DocsSidebar" import { Main, MainContent } from "./styles" -import Scrollbar from "react-perfect-scrollbar" -import "react-perfect-scrollbar/dist/css/styles.css" const DocsLayout = ({ children }: PropsWithChildren<{}>) => { const data = useStaticQuery(graphql` diff --git a/src/components/DocsLayout/layout.scss b/src/components/DocsLayout/layout.scss deleted file mode 100644 index e033dcd..0000000 --- a/src/components/DocsLayout/layout.scss +++ /dev/null @@ -1,41 +0,0 @@ -// TODO: refactor this into styled components - -html { - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} - -body { - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/** - * If you already use line highlighting - */ - -/* Adjust the position of the line numbers */ -.gatsby-highlight pre[class*="language-"].line-numbers { - padding-left: 2.8em; -} - -/** - * If you only want to use line numbering - */ - -.gatsby-highlight { - background-color: #fdf6e3; - border-radius: 0.3em; - margin: 0.5em 0; - padding: 1em; - overflow: auto; -} - -.gatsby-highlight pre[class*="language-"].line-numbers { - padding: 0; - padding-left: 2.8em; - overflow: initial; -} diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 68d9645..a234d0b 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -9,7 +9,6 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" import Container from "../Container" -import Navbar from "../Navbar" import Sidebar from "../Sidebar" import "./layout.scss" import { Main, MainContent } from "./styles" diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx deleted file mode 100644 index f536205..0000000 --- a/src/components/Navbar/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Link } from "gatsby"; -import * as React from "react"; -import icon from "./icon.png"; -import { HeaderWrapper } from "./styles"; - -// @todo maybe find alternative type for data -const Navbar = ({ siteTitle }: any) => ( - -
-
- {/* */} -

- - {siteTitle} - -

-
-
- - -) - -Navbar.propTypes = { - siteTitle: String -} - -Navbar.defaultProps = { - siteTitle: ``, -} - -export default Navbar; diff --git a/src/components/Navbar/styles.tsx b/src/components/Navbar/styles.tsx deleted file mode 100644 index f8812d3..0000000 --- a/src/components/Navbar/styles.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import styled from "styled-components"; - -export const HeaderWrapper = styled.header` - background: #ba1a2e; - marginBottom: 1.45rem; -`; \ No newline at end of file diff --git a/src/pages/docs/something.md b/src/pages/docs/something.md deleted file mode 100644 index 5570c7f..0000000 --- a/src/pages/docs/something.md +++ /dev/null @@ -1 +0,0 @@ -# Hello \ No newline at end of file From 6389a246da4b026381eb968f61b0b8630932db05 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:37:25 -0400 Subject: [PATCH 02/11] refact: standardize Styled-Components --- src/components/DocsLayout/index.tsx | 10 +++++----- src/components/DocsSidebarSection/index.tsx | 4 ++-- .../DocsSidebarSection/{style.tsx => styles.tsx} | 0 src/components/Layout/index.tsx | 10 +++++----- 4 files changed, 12 insertions(+), 12 deletions(-) rename src/components/DocsSidebarSection/{style.tsx => styles.tsx} (100%) diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx index 1eba5b7..59c635d 100644 --- a/src/components/DocsLayout/index.tsx +++ b/src/components/DocsLayout/index.tsx @@ -9,7 +9,7 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" import DocsSidebar from "../DocsSidebar" -import { Main, MainContent } from "./styles" +import * as SC from "./styles" const DocsLayout = ({ children }: PropsWithChildren<{}>) => { const data = useStaticQuery(graphql` @@ -24,13 +24,13 @@ const DocsLayout = ({ children }: PropsWithChildren<{}>) => { return (
-
+ - +

{data.site.siteMetadata.title}

{children} - -
+ +
© {new Date().getFullYear()}, Built with {` `} diff --git a/src/components/DocsSidebarSection/index.tsx b/src/components/DocsSidebarSection/index.tsx index e04e899..9f7b12b 100644 --- a/src/components/DocsSidebarSection/index.tsx +++ b/src/components/DocsSidebarSection/index.tsx @@ -1,5 +1,5 @@ import React from "react" -import { SidebarTitle } from "./style" +import * as SC from "./styles" export interface DocsSidebarSectionProps { readonly title: string @@ -11,7 +11,7 @@ const DocsSidebarSection = ({ }: React.PropsWithChildren) => { return (
- {title} + {title} {children}
) diff --git a/src/components/DocsSidebarSection/style.tsx b/src/components/DocsSidebarSection/styles.tsx similarity index 100% rename from src/components/DocsSidebarSection/style.tsx rename to src/components/DocsSidebarSection/styles.tsx diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index a234d0b..9914645 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -11,7 +11,7 @@ import { useStaticQuery, graphql } from "gatsby" import Container from "../Container" import Sidebar from "../Sidebar" import "./layout.scss" -import { Main, MainContent } from "./styles" +import * as SC from "./styles" import Scrollbar from "react-perfect-scrollbar" import "react-perfect-scrollbar/dist/css/styles.css" @@ -29,13 +29,13 @@ const Layout = ({ children }: PropsWithChildren<{}>) => { return ( -
+ - +

{data.site.siteMetadata.title}

{children} - -
+ +
From 11ca0462e3f82107e72946c2fb75882e5ca446b4 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:38:01 -0400 Subject: [PATCH 03/11] fix: add missing type for png --- typings.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/typings.d.ts b/typings.d.ts index 677e3d5..8aab02b 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -1 +1,2 @@ declare module "*.svg" +declare module "*.png" From 57863ee92640cc22b50f0c05180b697531a03730 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:41:45 -0400 Subject: [PATCH 04/11] refact: standardize PropsWithChildren --- src/components/Container/index.tsx | 8 ++------ src/components/DocsSidebarSection/index.tsx | 4 ++-- src/components/Sidebar/index.tsx | 4 ++-- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index c209636..aef577a 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -1,11 +1,7 @@ -import React from "react" +import React, { PropsWithChildren} from "react" import * as SC from "./styles" -interface ContainerProps { - children: React.ReactNode -} - -const Container = ({ children, ...restProps }: ContainerProps): JSX.Element => ( +const Container = ({ children, ...restProps }: PropsWithChildren<{}>): JSX.Element => ( {children} ) diff --git a/src/components/DocsSidebarSection/index.tsx b/src/components/DocsSidebarSection/index.tsx index 9f7b12b..c99975c 100644 --- a/src/components/DocsSidebarSection/index.tsx +++ b/src/components/DocsSidebarSection/index.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { PropsWithChildren } from "react" import * as SC from "./styles" export interface DocsSidebarSectionProps { @@ -8,7 +8,7 @@ export interface DocsSidebarSectionProps { const DocsSidebarSection = ({ title, children, -}: React.PropsWithChildren) => { +}: PropsWithChildren) => { return (
{title} diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index c0d3c9a..9f5099a 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -1,9 +1,9 @@ -import React from "react" +import React, { PropsWithChildren } from "react" import logo from "../../images/tph-logo.png" import * as SC from "./styles" import ArrowRight from "../../icons/arrow-right.svg" -function MenuItem({ children, to }: { children: React.ReactNode; to: string }) { +function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) { return ( {children} From e9f1bec654644ccea4778d42c6548c268532a4bc Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:50:10 -0400 Subject: [PATCH 05/11] refact: extra footer into its own component --- src/components/DocsLayout/index.tsx | 7 ++----- src/components/Footer/index.tsx | 17 +++++++++++++++++ src/components/Footer/styles.tsx | 4 ++++ src/components/Layout/index.tsx | 9 ++------- 4 files changed, 25 insertions(+), 12 deletions(-) create mode 100644 src/components/Footer/index.tsx create mode 100644 src/components/Footer/styles.tsx diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx index 59c635d..e79ab1d 100644 --- a/src/components/DocsLayout/index.tsx +++ b/src/components/DocsLayout/index.tsx @@ -9,6 +9,7 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" import DocsSidebar from "../DocsSidebar" +import Footer from "../Footer" import * as SC from "./styles" const DocsLayout = ({ children }: PropsWithChildren<{}>) => { @@ -31,11 +32,7 @@ const DocsLayout = ({ children }: PropsWithChildren<{}>) => { {children} -
- © {new Date().getFullYear()}, Built with - {` `} - Gatsby -
+
) } diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 0000000..5b32eb1 --- /dev/null +++ b/src/components/Footer/index.tsx @@ -0,0 +1,17 @@ +import React from "react" +import * as SC from "./styles" +import Container from "../Container" + +const Footer = () => { + return ( + + + © {new Date().getFullYear()}, Built with + {` `} + Gatsby + + + ) +} + +export default Footer diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx new file mode 100644 index 0000000..7afaac6 --- /dev/null +++ b/src/components/Footer/styles.tsx @@ -0,0 +1,4 @@ +import { Link } from "gatsby" +import styled from "styled-components" + +export const FooterWrapper = styled.footer`` diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 9914645..86d6c52 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -9,6 +9,7 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" import Container from "../Container" +import Footer from "../Footer" import Sidebar from "../Sidebar" import "./layout.scss" import * as SC from "./styles" @@ -37,13 +38,7 @@ const Layout = ({ children }: PropsWithChildren<{}>) => { -
- - © {new Date().getFullYear()}, Built with - {` `} - Gatsby - -
+
) } From 22e4d68583245d4c33085b09a81579bdb2894c6b Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:50:37 -0400 Subject: [PATCH 06/11] style: auto-format code --- src/components/Container/index.tsx | 7 +++-- src/components/DocsSidebarSection/styles.tsx | 4 +-- src/components/Layout/layout.scss | 1 + src/components/SEO/index.tsx | 10 +++--- src/content/docs/javascript/promises/intro.md | 28 ++++++++--------- .../promises/simplifying-promises.md | 31 ++++++++++--------- .../docs/php/design-patterns/singleton.md | 11 +++---- src/pages/index.tsx | 3 +- 8 files changed, 50 insertions(+), 45 deletions(-) diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index aef577a..5407dc3 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -1,7 +1,10 @@ -import React, { PropsWithChildren} from "react" +import React, { PropsWithChildren } from "react" import * as SC from "./styles" -const Container = ({ children, ...restProps }: PropsWithChildren<{}>): JSX.Element => ( +const Container = ({ + children, + ...restProps +}: PropsWithChildren<{}>): JSX.Element => ( {children} ) diff --git a/src/components/DocsSidebarSection/styles.tsx b/src/components/DocsSidebarSection/styles.tsx index 41ebe9d..398a8fd 100644 --- a/src/components/DocsSidebarSection/styles.tsx +++ b/src/components/DocsSidebarSection/styles.tsx @@ -1,5 +1,5 @@ -import styled from "styled-components"; +import styled from "styled-components" export const SidebarTitle = styled.h3` text-transform: uppercase; -`; \ No newline at end of file +` diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss index 1a050a5..5d5d82d 100644 --- a/src/components/Layout/layout.scss +++ b/src/components/Layout/layout.scss @@ -6,6 +6,7 @@ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } + body { margin: 0; -webkit-font-smoothing: antialiased; diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx index 9d67c40..cf51443 100644 --- a/src/components/SEO/index.tsx +++ b/src/components/SEO/index.tsx @@ -3,10 +3,10 @@ import Helmet from "react-helmet" import { useStaticQuery, graphql } from "gatsby" interface SEOProps { - readonly description: string; - readonly lang: string; - readonly meta: object[]; - readonly title: string; + readonly description: string + readonly lang: string + readonly meta: object[] + readonly title: string } const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => { @@ -69,6 +69,6 @@ const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => { ]} /> ) -}; +} export default SEO diff --git a/src/content/docs/javascript/promises/intro.md b/src/content/docs/javascript/promises/intro.md index 636d98d..64b94db 100644 --- a/src/content/docs/javascript/promises/intro.md +++ b/src/content/docs/javascript/promises/intro.md @@ -31,8 +31,8 @@ called `getMembers` that retrieves all the members in a discord server. When we function we see the following result. ```js -const members = getMembers("The Programmers Hangout"); -console.log(members); // Promise {} +const members = getMembers("The Programmers Hangout") +console.log(members) // Promise {} ``` Normally, we would have expected to see an array of all the members but it takes time to @@ -44,8 +44,8 @@ to access the actual members like so. ```js getMembers("The Programmers Hangout").then(members => { - console.log(members); // (32k) [{...}, {...}, {...}] -}); + console.log(members) // (32k) [{...}, {...}, {...}] +}) ``` This way we are able to make sure that we only try to `console.log` when the `getMembers` function has resolved and ready to be used. @@ -63,15 +63,15 @@ You may have tried doing something like this before. ```js // Incorrect code, don't copy! -let results; +let results getWeather("Los Angeles").then(weather => { - results = weather; -}); + results = weather +}) console.log(results) // undefined ``` Why is `results` undefined? Because **Javascript doesn't wait**. Whenever a Promise is created, -your code will continue to run until there's no more code left in the stack. Only then +your code will continue to run until there's no more code left in the stack. Only then will javascript try to run the `.then` callback of a Promise. Even if your Promise resolves immediately you are going to have to wait until you've run all the code in the stack before your `.then` callback has a chance to start running. This is due to the way the event loop works, @@ -81,8 +81,8 @@ In order to fix this problem we need to move the `console.log` inside the `.then ```js getWeather("Los Angeles").then(weather => { - console.log(weather); // Sunny, probably -}); + console.log(weather) // Sunny, probably +}) ``` ## Real World Example @@ -94,14 +94,14 @@ You can try it in your browser if you want to test it out. function getCharacters() { return fetch(`https://rickandmortyapi.com/api/character`) .then(response => response.json()) - .then(response => response.results); + .then(response => response.results) } getCharacters().then(characters => { - console.log(characters); // (20) [{...}, {...}, {...}] -}); + console.log(characters) // (20) [{...}, {...}, {...}] +}) ``` Let's break down what's happening in this function -// TODO: finish this \ No newline at end of file +// TODO: finish this diff --git a/src/content/docs/javascript/promises/simplifying-promises.md b/src/content/docs/javascript/promises/simplifying-promises.md index 730b721..261d1fb 100644 --- a/src/content/docs/javascript/promises/simplifying-promises.md +++ b/src/content/docs/javascript/promises/simplifying-promises.md @@ -15,9 +15,9 @@ function doAsync(number) { return new Promise(function(resolve, reject) { doDatabase().then(function(dbResult) { otherDbFunction(dbResult).then(function(secondResult) { - resolve(secondResult + 10); + resolve(secondResult + 10) }) - }); + }) }) } ``` @@ -29,9 +29,9 @@ already returns a promise, you can just return the original thing. function doAsync(number) { return doDatabase().then(function(dbResult) { otherDbFunction(dbResult).then(function(secondResult) { - return secondResult + 10; + return secondResult + 10 }) - }); + }) } ``` @@ -40,11 +40,13 @@ is that they allow you do chain them sequentially. ```js function doAsync(number) { - return doDatabase().then(function(dbResult) { - return otherDbFunction(dbResult) - }).then(function(secondResult) { - return secondResult + 10; - }); + return doDatabase() + .then(function(dbResult) { + return otherDbFunction(dbResult) + }) + .then(function(secondResult) { + return secondResult + 10 + }) } ``` @@ -56,17 +58,18 @@ function doAsync(number) { return doDatabase() .then(otherDbFunction) .then(function(secondResult) { - return secondResult + 10; - }); + return secondResult + 10 + }) } ``` And you don't need those returns if you just have ES6 arrow functions ```js -const doAsync = number => doDatabase() - .then(otherDbFunction) - .then(secondResult => secondResult + 10); +const doAsync = number => + doDatabase() + .then(otherDbFunction) + .then(secondResult => secondResult + 10) ``` Wow, that last one looks a lot cleaner to me than the first. Keeping that in mind, maybe we could be making some of our other functions cleaner as well diff --git a/src/content/docs/php/design-patterns/singleton.md b/src/content/docs/php/design-patterns/singleton.md index a25be15..1295460 100644 --- a/src/content/docs/php/design-patterns/singleton.md +++ b/src/content/docs/php/design-patterns/singleton.md @@ -13,7 +13,6 @@ There are multiple benefits to using a singleton class - You're always going to pull the same instance of the class - It's only instantiated once - Use `$this` in a static-like context -- By using a singleton instead of a static class we expose a cleaner class to use and we can use regular instance properties instead of static properties. @@ -28,13 +27,13 @@ namespace Example; class Singleton { - + /** * The singleton instance * @var Singleton */ private static $instance; - + /** * Get the instantiated singleton, or create it if it hasn't been instantiated yet. * @return Singleton @@ -44,7 +43,7 @@ class Singleton // static::$instance =?? new static(); // The double ?'s is a null-coalesce operator. There's a link about it below. static::$instance = static::$instance ?? new static(); - + return static::$instance; } @@ -57,12 +56,12 @@ To give a little functionality to our freshly baked Singleton we add these three ```php private $word = "Pineapple"; - + public function getWord(): string { // PHP_EOL is a constant for a new line (\r\n) or whichever your OS uses. return $this->word . PHP_EOL; } - + public function setWord(string $word): void { $this->word = $word; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e8c1021..7674819 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,8 +10,7 @@ const IndexPage = () => (

Hi people

Welcome to your new Gatsby site.

Now go build something great.

-
-
+
Go to page 2 ) From 04d0c19239ae57d790bcdd1a9bb9146f3a12eb9c Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:53:49 -0400 Subject: [PATCH 07/11] fix: improve SEO types --- src/components/SEO/index.tsx | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx index cf51443..1384238 100644 --- a/src/components/SEO/index.tsx +++ b/src/components/SEO/index.tsx @@ -3,13 +3,20 @@ import Helmet from "react-helmet" import { useStaticQuery, graphql } from "gatsby" interface SEOProps { - readonly description: string - readonly lang: string - readonly meta: object[] + readonly description?: string + readonly lang?: string + readonly meta?: any[] + readonly keywords?: string[] readonly title: string } -const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => { +const SEO = ({ + description, + lang = "en", + meta = [], + keywords = [], + title, +}: SEOProps) => { const { site } = useStaticQuery( graphql` query { @@ -66,7 +73,16 @@ const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => { name: `twitter:description`, content: metaDescription, }, - ]} + ] + .concat( + keywords.length > 0 + ? { + name: `keywords`, + content: keywords.join(`, `), + } + : [] + ) + .concat(meta)} /> ) } From f7f66a307196f26ba0586a43362e3142973814c2 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 17:17:00 -0400 Subject: [PATCH 08/11] refact: extract tree build a hook --- src/components/DocsSidebar/index.tsx | 96 ++------------------- src/components/DocsSidebar/useBuildTree.tsx | 90 +++++++++++++++++++ 2 files changed, 98 insertions(+), 88 deletions(-) create mode 100644 src/components/DocsSidebar/useBuildTree.tsx diff --git a/src/components/DocsSidebar/index.tsx b/src/components/DocsSidebar/index.tsx index e3245ca..cc221ba 100644 --- a/src/components/DocsSidebar/index.tsx +++ b/src/components/DocsSidebar/index.tsx @@ -1,99 +1,25 @@ -import * as R from "ramda" import React, { useState } from "react" import Tree from "react-treeview" import { useStaticQuery, graphql } from "gatsby" +import useBuildTree from "./useBuildTree" import * as SC from "./styles" -interface IFile { +export interface IFile { title: string type: "file" path: string } -interface IFolder { +export interface IFolder { title: string type: "folder" path: string children: IFileOrFolder[] } -type IFileOrFolder = IFile | IFolder +export type IFileOrFolder = IFile | IFolder -const traverse = ( - [head, ...tail]: string[], - basePath = "/docs" -): IFileOrFolder => { - const path = basePath + "/" + head - const isFile = !tail.length - if (isFile) { - // probably not more than one dot - const [name] = head.split(".") - return { - title: name, - type: "file", - path, - } - } - return { - title: head, - type: "folder", - path, - children: [traverse(tail, path)], - } -} - -const generateFolder = ({ - title, - path, - targets, -}: { - title: IFolder["title"] - path: IFile["path"] - targets: IFolder[] -}): IFolder => { - const children = join(R.chain(target => target.children, targets)) - - return { - title, - type: "folder", - path, - children, - } -} - -const generateFile = ({ - title, - path, -}: { - title: IFile["title"] - path: IFile["path"] -}): IFile => { - return { - title, - path, - type: "file", - } -} - -const join = ([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] => { - if (!head) return [] - - const [similarFs, remaining] = R.partition( - obj => obj.title === head.title && obj.type === head.type, - tail - ) - const targets = [head, ...similarFs] - const { title, path } = head - - const current = - head.type === "folder" - ? generateFolder({ title, path, targets: targets as IFolder[] }) - : generateFile({ title, path }) - - return [current, ...join(remaining)] -} - -interface IFileQuery { +export interface IFileQuery { node: { relativePath: string childMarkdownRemark: { @@ -105,7 +31,7 @@ interface IFileQuery { } } -interface IAllDocsQuery { +export interface IAllDocsQuery { allFile: { edges: IFileQuery[] } @@ -160,17 +86,11 @@ function Folder({ item }: { item: IFolder }) { const DocsSidebar = () => { const docs = useStaticQuery(ALL_DOCS) - - const objects = docs.allFile.edges.map(({ node: file }: IFileQuery) => - traverse(file.relativePath.split("/")) - ) - const results = join(objects) - - console.log(results) + const tree = useBuildTree(docs) return ( - {results.map(node => plantTree(node))} + {tree.map(node => plantTree(node))} ) } diff --git a/src/components/DocsSidebar/useBuildTree.tsx b/src/components/DocsSidebar/useBuildTree.tsx new file mode 100644 index 0000000..a3d6e5a --- /dev/null +++ b/src/components/DocsSidebar/useBuildTree.tsx @@ -0,0 +1,90 @@ +import * as R from "ramda" +import { + IFileOrFolder, + IFile, + IFolder, + IAllDocsQuery, + IFileQuery, +} from "./index" + +const traverse = ( + [head, ...tail]: string[], + basePath = "/docs" +): IFileOrFolder => { + const path = basePath + "/" + head + const isFile = !tail.length + if (isFile) { + // probably not more than one dot + const [name] = head.split(".") + return { + title: name, + type: "file", + path, + } + } + return { + title: head, + type: "folder", + path, + children: [traverse(tail, path)], + } +} + +const generateFolder = ({ + title, + path, + targets, +}: { + title: IFolder["title"] + path: IFile["path"] + targets: IFolder[] +}): IFolder => { + const children = join(R.chain(target => target.children, targets)) + + return { + title, + type: "folder", + path, + children, + } +} + +const generateFile = ({ + title, + path, +}: { + title: IFile["title"] + path: IFile["path"] +}): IFile => { + return { + title, + path, + type: "file", + } +} + +const join = ([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] => { + if (!head) return [] + + const [similarFs, remaining] = R.partition( + obj => obj.title === head.title && obj.type === head.type, + tail + ) + const targets = [head, ...similarFs] + const { title, path } = head + + const current = + head.type === "folder" + ? generateFolder({ title, path, targets: targets as IFolder[] }) + : generateFile({ title, path }) + + return [current, ...join(remaining)] +} + +export default function useBuildTree(docs: IAllDocsQuery) { + const objects = docs.allFile.edges.map(({ node: file }: IFileQuery) => + traverse(file.relativePath.split("/")) + ) + + return join(objects) +} From 90fb9b18886e99f6fa231b4dc74bb3d4f975e587 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 17:54:51 -0400 Subject: [PATCH 09/11] refact: prefer function over lambdas --- src/components/Container/index.tsx | 8 ++++---- src/components/DocsLayout/index.tsx | 2 +- src/components/DocsSidebar/index.tsx | 4 ++-- src/components/DocsSidebar/useBuildTree.tsx | 14 ++++++------- src/components/DocsSidebarSection/index.tsx | 4 ++-- src/components/Footer/index.tsx | 2 +- src/components/Layout/index.tsx | 2 +- src/components/SEO/index.tsx | 4 ++-- src/components/Sidebar/index.tsx | 2 +- src/pages/404.tsx | 16 ++++++++------- src/pages/docs.tsx | 14 +++++++------ src/pages/index.tsx | 22 +++++++++++---------- src/templates/languagePost.tsx | 2 +- 13 files changed, 51 insertions(+), 45 deletions(-) diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index 5407dc3..d8a2a60 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -1,11 +1,11 @@ import React, { PropsWithChildren } from "react" import * as SC from "./styles" -const Container = ({ +function Container({ children, ...restProps -}: PropsWithChildren<{}>): JSX.Element => ( - {children} -) +}: PropsWithChildren<{}>): JSX.Element { + return {children} +} export default Container diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx index e79ab1d..e393248 100644 --- a/src/components/DocsLayout/index.tsx +++ b/src/components/DocsLayout/index.tsx @@ -12,7 +12,7 @@ import DocsSidebar from "../DocsSidebar" import Footer from "../Footer" import * as SC from "./styles" -const DocsLayout = ({ children }: PropsWithChildren<{}>) => { +function DocsLayout({ children }: PropsWithChildren<{}>) { const data = useStaticQuery(graphql` query { site { diff --git a/src/components/DocsSidebar/index.tsx b/src/components/DocsSidebar/index.tsx index cc221ba..691deb4 100644 --- a/src/components/DocsSidebar/index.tsx +++ b/src/components/DocsSidebar/index.tsx @@ -55,7 +55,7 @@ const ALL_DOCS = graphql` } ` -const plantTree = (item: IFileOrFolder) => { +function plantTree(item: IFileOrFolder) { if (item.type === "file") { return ( @@ -84,7 +84,7 @@ function Folder({ item }: { item: IFolder }) { ) } -const DocsSidebar = () => { +function DocsSidebar() { const docs = useStaticQuery(ALL_DOCS) const tree = useBuildTree(docs) diff --git a/src/components/DocsSidebar/useBuildTree.tsx b/src/components/DocsSidebar/useBuildTree.tsx index a3d6e5a..630f034 100644 --- a/src/components/DocsSidebar/useBuildTree.tsx +++ b/src/components/DocsSidebar/useBuildTree.tsx @@ -7,10 +7,10 @@ import { IFileQuery, } from "./index" -const traverse = ( +function traverse( [head, ...tail]: string[], basePath = "/docs" -): IFileOrFolder => { +): IFileOrFolder { const path = basePath + "/" + head const isFile = !tail.length if (isFile) { @@ -30,7 +30,7 @@ const traverse = ( } } -const generateFolder = ({ +function generateFolder({ title, path, targets, @@ -38,7 +38,7 @@ const generateFolder = ({ title: IFolder["title"] path: IFile["path"] targets: IFolder[] -}): IFolder => { +}): IFolder { const children = join(R.chain(target => target.children, targets)) return { @@ -49,13 +49,13 @@ const generateFolder = ({ } } -const generateFile = ({ +function generateFile({ title, path, }: { title: IFile["title"] path: IFile["path"] -}): IFile => { +}): IFile { return { title, path, @@ -63,7 +63,7 @@ const generateFile = ({ } } -const join = ([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] => { +function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] { if (!head) return [] const [similarFs, remaining] = R.partition( diff --git a/src/components/DocsSidebarSection/index.tsx b/src/components/DocsSidebarSection/index.tsx index c99975c..587ddd1 100644 --- a/src/components/DocsSidebarSection/index.tsx +++ b/src/components/DocsSidebarSection/index.tsx @@ -5,10 +5,10 @@ export interface DocsSidebarSectionProps { readonly title: string } -const DocsSidebarSection = ({ +function DocsSidebarSection({ title, children, -}: PropsWithChildren) => { +}: PropsWithChildren) { return (
{title} diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 5b32eb1..289cf04 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -2,7 +2,7 @@ import React from "react" import * as SC from "./styles" import Container from "../Container" -const Footer = () => { +function Footer() { return ( diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 86d6c52..f9efd41 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -16,7 +16,7 @@ import * as SC from "./styles" import Scrollbar from "react-perfect-scrollbar" import "react-perfect-scrollbar/dist/css/styles.css" -const Layout = ({ children }: PropsWithChildren<{}>) => { +function Layout({ children }: PropsWithChildren<{}>) { const data = useStaticQuery(graphql` query { site { diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx index 1384238..6c3d872 100644 --- a/src/components/SEO/index.tsx +++ b/src/components/SEO/index.tsx @@ -10,13 +10,13 @@ interface SEOProps { readonly title: string } -const SEO = ({ +function SEO({ description, lang = "en", meta = [], keywords = [], title, -}: SEOProps) => { +}: SEOProps) { const { site } = useStaticQuery( graphql` query { diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 9f5099a..6d33338 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -11,7 +11,7 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) { ) } -const Sidebar = () => { +function Sidebar() { return ( diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 5d1fa25..0b82e4e 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -3,12 +3,14 @@ import React from "react" import Layout from "../components/Layout" import SEO from "../components/SEO" -const NotFoundPage = () => ( - - -

NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

- -) +function NotFoundPage() { + return ( + + +

NOT FOUND

+

You just hit a route that doesn't exist... the sadness.

+ + ) +} export default NotFoundPage diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index 249bac7..1a13229 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -3,11 +3,13 @@ import React from "react" import DocsLayout from "../components/DocsLayout" import SEO from "../components/SEO" -const DocsPage = () => ( - - - the docs - -) +function DocsPage() { + return ( + + + the docs + + ) +} export default DocsPage diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7674819..c2d3c0b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,15 +4,17 @@ import { Link } from "gatsby" import Layout from "../components/Layout" import SEO from "../components/SEO" -const IndexPage = () => ( - - -

Hi people

-

Welcome to your new Gatsby site.

-

Now go build something great.

-
- Go to page 2 - -) +function IndexPage() { + return ( + + +

Hi people

+

Welcome to your new Gatsby site.

+

Now go build something great.

+
+ Go to page 2 + + ) +} export default IndexPage diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx index a0c94b8..bec0944 100644 --- a/src/templates/languagePost.tsx +++ b/src/templates/languagePost.tsx @@ -4,7 +4,7 @@ import SEO from "../components/SEO" import DocsLayout from "../components/DocsLayout" // @todo maybe find alternative type for data -const LanguagePost = ({ data }: any) => { +function LanguagePost({ data }: any) { const { html, frontmatter } = data.file.post console.log(data) return ( From 4d434573d246779ac8f48364bcdae94842af072d Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 17:56:03 -0400 Subject: [PATCH 10/11] style: nit on object order --- src/components/DocsSidebar/useBuildTree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DocsSidebar/useBuildTree.tsx b/src/components/DocsSidebar/useBuildTree.tsx index 630f034..9395195 100644 --- a/src/components/DocsSidebar/useBuildTree.tsx +++ b/src/components/DocsSidebar/useBuildTree.tsx @@ -58,8 +58,8 @@ function generateFile({ }): IFile { return { title, - path, type: "file", + path, } } From baa05d196820e8cf48328df9a69278e40490dc3a Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 18:04:52 -0400 Subject: [PATCH 11/11] style: prefer named exports --- src/components/Container/index.tsx | 4 +--- src/components/DocsLayout/index.tsx | 8 +++----- src/components/DocsSidebar/index.tsx | 4 +--- src/components/DocsSidebarSection/index.tsx | 4 +--- src/components/Footer/index.tsx | 6 ++---- src/components/Layout/index.tsx | 10 ++++------ src/components/SEO/index.tsx | 4 +--- src/components/Sidebar/index.tsx | 4 +--- src/pages/404.tsx | 4 ++-- src/pages/docs.tsx | 4 ++-- src/pages/index.tsx | 4 ++-- src/templates/languagePost.tsx | 4 ++-- 12 files changed, 22 insertions(+), 38 deletions(-) diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index d8a2a60..4849eb8 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -1,11 +1,9 @@ import React, { PropsWithChildren } from "react" import * as SC from "./styles" -function Container({ +export function Container({ children, ...restProps }: PropsWithChildren<{}>): JSX.Element { return {children} } - -export default Container diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx index e393248..119dd2e 100644 --- a/src/components/DocsLayout/index.tsx +++ b/src/components/DocsLayout/index.tsx @@ -8,11 +8,11 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" -import DocsSidebar from "../DocsSidebar" -import Footer from "../Footer" +import { DocsSidebar } from "../DocsSidebar" +import { Footer } from "../Footer" import * as SC from "./styles" -function DocsLayout({ children }: PropsWithChildren<{}>) { +export function DocsLayout({ children }: PropsWithChildren<{}>) { const data = useStaticQuery(graphql` query { site { @@ -36,5 +36,3 @@ function DocsLayout({ children }: PropsWithChildren<{}>) {
) } - -export default DocsLayout diff --git a/src/components/DocsSidebar/index.tsx b/src/components/DocsSidebar/index.tsx index 691deb4..81d7478 100644 --- a/src/components/DocsSidebar/index.tsx +++ b/src/components/DocsSidebar/index.tsx @@ -84,7 +84,7 @@ function Folder({ item }: { item: IFolder }) { ) } -function DocsSidebar() { +export function DocsSidebar() { const docs = useStaticQuery(ALL_DOCS) const tree = useBuildTree(docs) @@ -94,5 +94,3 @@ function DocsSidebar() { ) } - -export default DocsSidebar diff --git a/src/components/DocsSidebarSection/index.tsx b/src/components/DocsSidebarSection/index.tsx index 587ddd1..8396c06 100644 --- a/src/components/DocsSidebarSection/index.tsx +++ b/src/components/DocsSidebarSection/index.tsx @@ -5,7 +5,7 @@ export interface DocsSidebarSectionProps { readonly title: string } -function DocsSidebarSection({ +export function DocsSidebarSection({ title, children, }: PropsWithChildren) { @@ -16,5 +16,3 @@ function DocsSidebarSection({
) } - -export default DocsSidebarSection diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 289cf04..ec60265 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,8 +1,8 @@ import React from "react" import * as SC from "./styles" -import Container from "../Container" +import { Container } from "../Container" -function Footer() { +export function Footer() { return ( @@ -13,5 +13,3 @@ function Footer() { ) } - -export default Footer diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index f9efd41..796e261 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -8,15 +8,15 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" -import Container from "../Container" -import Footer from "../Footer" -import Sidebar from "../Sidebar" +import { Container } from "../Container" +import { Footer } from "../Footer" +import { Sidebar } from "../Sidebar" import "./layout.scss" import * as SC from "./styles" import Scrollbar from "react-perfect-scrollbar" import "react-perfect-scrollbar/dist/css/styles.css" -function Layout({ children }: PropsWithChildren<{}>) { +export function Layout({ children }: PropsWithChildren<{}>) { const data = useStaticQuery(graphql` query { site { @@ -42,5 +42,3 @@ function Layout({ children }: PropsWithChildren<{}>) { ) } - -export default Layout diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx index 6c3d872..6597c85 100644 --- a/src/components/SEO/index.tsx +++ b/src/components/SEO/index.tsx @@ -10,7 +10,7 @@ interface SEOProps { readonly title: string } -function SEO({ +export function SEO({ description, lang = "en", meta = [], @@ -86,5 +86,3 @@ function SEO({ /> ) } - -export default SEO diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 6d33338..9c29190 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -11,7 +11,7 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) { ) } -function Sidebar() { +export function Sidebar() { return ( @@ -27,5 +27,3 @@ function Sidebar() { ) } - -export default Sidebar diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 0b82e4e..788f166 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,7 +1,7 @@ import React from "react" -import Layout from "../components/Layout" -import SEO from "../components/SEO" +import { Layout } from "../components/Layout" +import { SEO } from "../components/SEO" function NotFoundPage() { return ( diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index 1a13229..d7e9399 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -1,7 +1,7 @@ import React from "react" -import DocsLayout from "../components/DocsLayout" -import SEO from "../components/SEO" +import { DocsLayout } from "../components/DocsLayout" +import { SEO } from "../components/SEO" function DocsPage() { return ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c2d3c0b..589c218 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,8 +1,8 @@ import React from "react" import { Link } from "gatsby" -import Layout from "../components/Layout" -import SEO from "../components/SEO" +import { Layout } from "../components/Layout" +import { SEO } from "../components/SEO" function IndexPage() { return ( diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx index bec0944..4f83889 100644 --- a/src/templates/languagePost.tsx +++ b/src/templates/languagePost.tsx @@ -1,7 +1,7 @@ import React from "react" import { graphql } from "gatsby" -import SEO from "../components/SEO" -import DocsLayout from "../components/DocsLayout" +import { SEO } from "../components/SEO" +import { DocsLayout } from "../components/DocsLayout" // @todo maybe find alternative type for data function LanguagePost({ data }: any) {