style: auto-format code

This commit is contained in:
Jean-Philippe Sirois
2019-07-27 17:32:39 -04:00
parent e9f1bec654
commit 22e4d68583
8 changed files with 50 additions and 45 deletions
+5 -2
View File
@@ -1,7 +1,10 @@
import React, { PropsWithChildren} from "react" import React, { PropsWithChildren } from "react"
import * as SC from "./styles" import * as SC from "./styles"
const Container = ({ children, ...restProps }: PropsWithChildren<{}>): JSX.Element => ( const Container = ({
children,
...restProps
}: PropsWithChildren<{}>): JSX.Element => (
<SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper> <SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper>
) )
+2 -2
View File
@@ -1,5 +1,5 @@
import styled from "styled-components"; import styled from "styled-components"
export const SidebarTitle = styled.h3` export const SidebarTitle = styled.h3`
text-transform: uppercase; text-transform: uppercase;
`; `
+1
View File
@@ -6,6 +6,7 @@ html {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
body { body {
margin: 0; margin: 0;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
+5 -5
View File
@@ -3,10 +3,10 @@ import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby" import { useStaticQuery, graphql } from "gatsby"
interface SEOProps { interface SEOProps {
readonly description: string; readonly description: string
readonly lang: string; readonly lang: string
readonly meta: object[]; readonly meta: object[]
readonly title: string; readonly title: string
} }
const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => { const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => {
@@ -69,6 +69,6 @@ const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => {
]} ]}
/> />
) )
}; }
export default SEO export default SEO
+12 -12
View File
@@ -31,8 +31,8 @@ called `getMembers` that retrieves all the members in a discord server. When we
function we see the following result. function we see the following result.
```js ```js
const members = getMembers("The Programmers Hangout"); const members = getMembers("The Programmers Hangout")
console.log(members); // Promise {<pending>} console.log(members) // Promise {<pending>}
``` ```
Normally, we would have expected to see an array of all the members but it takes time to 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 ```js
getMembers("The Programmers Hangout").then(members => { 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. 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,10 +63,10 @@ You may have tried doing something like this before.
```js ```js
// Incorrect code, don't copy! // Incorrect code, don't copy!
let results; let results
getWeather("Los Angeles").then(weather => { getWeather("Los Angeles").then(weather => {
results = weather; results = weather
}); })
console.log(results) // undefined console.log(results) // undefined
``` ```
@@ -81,8 +81,8 @@ In order to fix this problem we need to move the `console.log` inside the `.then
```js ```js
getWeather("Los Angeles").then(weather => { getWeather("Los Angeles").then(weather => {
console.log(weather); // Sunny, probably console.log(weather) // Sunny, probably
}); })
``` ```
## Real World Example ## Real World Example
@@ -94,12 +94,12 @@ You can try it in your browser if you want to test it out.
function getCharacters() { function getCharacters() {
return fetch(`https://rickandmortyapi.com/api/character`) return fetch(`https://rickandmortyapi.com/api/character`)
.then(response => response.json()) .then(response => response.json())
.then(response => response.results); .then(response => response.results)
} }
getCharacters().then(characters => { getCharacters().then(characters => {
console.log(characters); // (20) [{...}, {...}, {...}] console.log(characters) // (20) [{...}, {...}, {...}]
}); })
``` ```
Let's break down what's happening in this function Let's break down what's happening in this function
@@ -15,9 +15,9 @@ function doAsync(number) {
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
doDatabase().then(function(dbResult) { doDatabase().then(function(dbResult) {
otherDbFunction(dbResult).then(function(secondResult) { 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) { function doAsync(number) {
return doDatabase().then(function(dbResult) { return doDatabase().then(function(dbResult) {
otherDbFunction(dbResult).then(function(secondResult) { 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 ```js
function doAsync(number) { function doAsync(number) {
return doDatabase().then(function(dbResult) { return doDatabase()
return otherDbFunction(dbResult) .then(function(dbResult) {
}).then(function(secondResult) { return otherDbFunction(dbResult)
return secondResult + 10; })
}); .then(function(secondResult) {
return secondResult + 10
})
} }
``` ```
@@ -56,17 +58,18 @@ function doAsync(number) {
return doDatabase() return doDatabase()
.then(otherDbFunction) .then(otherDbFunction)
.then(function(secondResult) { .then(function(secondResult) {
return secondResult + 10; return secondResult + 10
}); })
} }
``` ```
And you don't need those returns if you just have ES6 arrow functions And you don't need those returns if you just have ES6 arrow functions
```js ```js
const doAsync = number => doDatabase() const doAsync = number =>
.then(otherDbFunction) doDatabase()
.then(secondResult => secondResult + 10); .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 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
@@ -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 - You're always going to pull the same instance of the class
- It's only instantiated once - It's only instantiated once
- Use `$this` in a static-like context - 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. 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.
+1 -2
View File
@@ -10,8 +10,7 @@ const IndexPage = () => (
<h1>Hi people</h1> <h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p> <p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p> <p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}> <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
</div>
<Link to="/page-2/">Go to page 2</Link> <Link to="/page-2/">Go to page 2</Link>
</Layout> </Layout>
) )