From 22e4d68583245d4c33085b09a81579bdb2894c6b Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 27 Jul 2019 16:50:37 -0400 Subject: [PATCH] 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 )