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"
const Container = ({ children, ...restProps }: PropsWithChildren<{}>): JSX.Element => (
const Container = ({
children,
...restProps
}: PropsWithChildren<{}>): JSX.Element => (
<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`
text-transform: uppercase;
`;
`
+1
View File
@@ -6,6 +6,7 @@ html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
-webkit-font-smoothing: antialiased;
+5 -5
View File
@@ -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
+14 -14
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.
```js
const members = getMembers("The Programmers Hangout");
console.log(members); // Promise {<pending>}
const members = getMembers("The Programmers Hangout")
console.log(members) // Promise {<pending>}
```
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
// TODO: finish this
@@ -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
@@ -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;
}
+1 -2
View File
@@ -10,8 +10,7 @@ const IndexPage = () => (
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
</div>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
<Link to="/page-2/">Go to page 2</Link>
</Layout>
)