mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-08 07:56:12 +02:00
style: auto-format code
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
`;
|
`
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user