Merge remote-tracking branch 'origin/master' into use-firebase-query

Author: gragland

gatsby-node.js

@@ -31,6 +31,7 @@ exports.createPages = ({ actions, graphql }) => {
                 description
               }
               code
+              tsCode
             }
           }
         }

src/components/PostTemplate.js

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Link } from "gatsby";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { tomorrow as codeStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
+import analytics from "./../utils/analytics.js";
+import { Composes, Content, Hook, Info, Links, LinksLi, Name } from "./styled";
+
+const PostTemplate = ({ content, frontmatter, slug, permalink }) => {
+  const extraLinks = frontmatter.links || [];
+  const [codeKey, setCodeKey] = useState("code");
+  const isCodeSwitchAvailable = useMemo(() => Boolean(frontmatter.tsCode), []);
+
+  const handleSwitchCodeClick = useCallback(() => {
+    setCodeKey(key => (key === "code" ? "tsCode" : "code"));
+  }, []);
+
+  return (
+    <Hook id={frontmatter.title}>
+      <Name>
+        <i className="fas fa-link link-icon" />
+        <Link to={slug}>{frontmatter.title}</Link>
+      </Name>
+
+      {frontmatter.composes && (
+        <Composes>
+          Composes:{" "}
+          {frontmatter.composes.map((title, i) => (
+            <>
+              <Link to={`/${title}`}>{title}</Link>
+              {i < frontmatter.composes.length - 1 ? "," : ""}{" "}
+            </>
+          ))}
+        </Composes>
+      )}
+
+      <Content dangerouslySetInnerHTML={{ __html: content }} />
+      {isCodeSwitchAvailable && (
+        <Content>
+          <button
+            className="button is-secondary has-text-weight-semibold"
+            onClick={handleSwitchCodeClick}
+          >
+            View in {codeKey === "code" ? "TypeScript" : "JavaScript"}
+          </button>
+        </Content>
+      )}
+      <SyntaxHighlighter
+        language="javascript"
+        style={codeStyle}
+        customStyle={{
+          borderRadius: "10px",
+          padding: "1.5em",
+          fontSize: "14px"
+        }}
+      >
+        {frontmatter[codeKey]}
+      </SyntaxHighlighter>
+
+      {(permalink === true || extraLinks.length > 0) && (
+        <Links>
+          <div className="links-title">
+            <span role="img" aria-label="books">
+              📚
+            </span>
+            Also check out:
+          </div>
+          <ul>
+            {extraLinks.map((link, i) => (
+              <LinksLi key={i}>
+                <a
+                  target={link.target || "_blank"}
+                  href={link.url}
+                  onClick={() => {
+                    analytics.track("clickExtraLink");
+                  }}
+                >
+                  {link.name}
+                </a>{" "}
+                -{" "}
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: link.description
+                  }}
+                />
+              </LinksLi>
+            ))}
+
+            {permalink === true && (
+              <LinksLi key="divjoy">
+                <a
+                  href="https://divjoy.com?utm_source=usehooks&utm_medium=website&utm_campaign=usehooks-post-links"
+                  onClick={() => {
+                    analytics.track("clickExtraDivjoyLink");
+                  }}
+                >
+                  Divjoy
+                </a>{" "}
+                -{" "}
+                <span>React starter kit from the creator of usehooks.com</span>
+              </LinksLi>
+            )}
+          </ul>
+        </Links>
+      )}
+
+      <Info>
+        <div className="level-item">{frontmatter.date}</div>
+        <div className="level-item is-hidden-mobile">
+          <span>•</span>
+        </div>
+        {frontmatter.sandbox && (
+          <>
+            <div className="level-item">
+              <a target="_blank" href={frontmatter.sandbox}>
+                Open in CodeSandbox
+              </a>
+            </div>
+            <div className="level-item is-hidden-mobile">
+              <span>•</span>
+            </div>
+          </>
+        )}
+        <div className="level-item">
+          <a target="_blank" href={frontmatter.gist}>
+            Suggest a change
+          </a>
+        </div>
+      </Info>
+    </Hook>
+  );
+};
+
+PostTemplate.displayName = "PostTemplate";
+
+export default PostTemplate;

src/components/styled.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+
+export const Hook = styled.div`
+  margin-bottom: 4rem;
+`;
+
+export const Composes = styled.div.attrs({
+  className: "subtitle"
+})`
+  padding-top: 3px;
+  font-size: 0.9rem !important;
+`;
+
+export const Name = styled.h2.attrs({
+  className: "title is-3"
+})`
+  position: relative;
+
+  .link-icon {
+    display: none;
+    position: absolute;
+    left: -30px;
+    top: 10px;
+    opacity: 0.3;
+    font-size: 22px;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  &:hover {
+    .link-icon {
+      display: inline;
+    }
+  }
+`;
+
+export const Content = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const Links = styled.div`
+  background-color: #f3f9f8;
+  padding: 25px;
+  margin-top: 15px;
+  border-radius: 10px;
+
+  .links-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+`;
+
+export const LinksLi = styled.li`
+  margin-bottom: 5px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+
+export const Info = styled.div.attrs({
+  className: "level"
+})`
+  margin: 20px auto 0 auto;
+  max-width: 560px;
+
+  span {
+    padding: 0 0.5rem;
+    opacity: 0.2;
+  }
+`;
+
+export const More = styled.div`
+  text-align: center;
+  font-size: 1.1rem;
+
+  .next {
+    margin-left: 10px;
+    font-weight: bold;
+  }
+
+  i {
+    opacity: 0.3;
+    margin-right: 10px;
+  }
+`;

src/pages/useAsync.md

@@ -16,6 +16,7 @@ links:
     description: React component and hook for declarative promise resolution and data fetching.
 
 code: "import React, { useState, useEffect, useCallback } from 'react';\r\n\r\n\/\/ Usage\r\nfunction App() {\r\n  const { execute, status, value, error } = useAsync(myFunction, false);\r\n\r\n  return (\r\n    <div>\r\n      {status === 'idle' && <div>Start your journey by clicking a button<\/div>}\r\n      {status === 'success' && <div>{value}<\/div>}\r\n      {status === 'error' && <div>{error}<\/div>}\r\n      <button onClick={execute} disabled={status === 'pending'}>\r\n        {status !== 'pending' ? 'Click me' : 'Loading...'}\r\n      <\/button>\r\n    <\/div>\r\n  );\r\n}\r\n\r\n\/\/ An async function for testing our hook.\r\n\/\/ Will be successful 50% of the time.\r\nconst myFunction = () => {\r\n  return new Promise((resolve, reject) => {\r\n    setTimeout(() => {\r\n      const rnd = Math.random() * 10;\r\n      rnd <= 5\r\n        ? resolve('Submitted successfully \uD83D\uDE4C')\r\n        : reject('Oh no there was an error \uD83D\uDE1E');\r\n    }, 2000);\r\n  });\r\n};\r\n\r\n\/\/ Hook\r\nconst useAsync = (asyncFunction, immediate = true) => {\r\n  const [status, setStatus] = useState('idle');\r\n  const [value, setValue] = useState(null);\r\n  const [error, setError] = useState(null);\r\n\r\n  \/\/ The execute function wraps asyncFunction and\r\n  \/\/ handles setting state for pending, value, and error.\r\n  \/\/ useCallback ensures the below useEffect is not called\r\n  \/\/ on every render, but only if asyncFunction changes.\r\n  const execute = useCallback(() => {\r\n    setStatus('pending');\r\n    setValue(null);\r\n    setError(null);\r\n\r\n    return asyncFunction()\r\n      .then(response => {\r\n        setValue(response);\r\n        setStatus('success');\r\n      })\r\n      .catch(error => {\r\n        setError(error);\r\n        setStatus('error');\r\n      });\r\n  }, [asyncFunction]);\r\n\r\n  \/\/ Call execute if we want to fire it right away.\r\n  \/\/ Otherwise execute can be called later, such as\r\n  \/\/ in an onClick handler.\r\n  useEffect(() => {\r\n    if (immediate) {\r\n      execute();\r\n    }\r\n  }, [execute, immediate]);\r\n\r\n  return { execute, status, value, error };\r\n};"
+tsCode: "import React, { useState, useEffect, useCallback } from 'react';\r\n\r\n// Usage\r\nfunction App() {\r\n  const { execute, status, value, error } = useAsync<string>(myFunction, false);\r\n\r\n  return (\r\n    <div>\r\n      {status === 'idle' && <div>Start your journey by clicking a button</div>}\r\n      {status === 'success' && <div>{value}</div>}\r\n      {status === 'error' && <div>{error}</div>}\r\n      <button onClick={execute} disabled={status === 'pending'}>\r\n        {status !== 'pending' ? 'Click me' : 'Loading...'}\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n\r\n// An async function for testing our hook.\r\n// Will be successful 50% of the time.\r\nconst myFunction = (): Promise<string> => {\r\n  return new Promise((resolve, reject) => {\r\n    setTimeout(() => {\r\n      const rnd = Math.random() * 10;\r\n      rnd <= 5\r\n        ? resolve('Submitted successfully 🙌')\r\n        : reject('Oh no there was an error 😞');\r\n    }, 2000);\r\n  });\r\n};\r\n\r\n// Hook\r\nconst useAsync = <T, E = string>(\r\n  asyncFunction: () => Promise<T>,\r\n  immediate = true\r\n) => {\r\n  const [status, setStatus] = useState<\r\n    'idle' | 'pending' | 'success' | 'error'\r\n  >('idle');\r\n  const [value, setValue] = useState<T | null>(null);\r\n  const [error, setError] = useState<E | null>(null);\r\n\r\n  // The execute function wraps asyncFunction and\r\n  // handles setting state for pending, value, and error.\r\n  // useCallback ensures the below useEffect is not called\r\n  // on every render, but only if asyncFunction changes.\r\n  const execute = useCallback(() => {\r\n    setStatus('pending');\r\n    setValue(null);\r\n    setError(null);\r\n\r\n    return asyncFunction()\r\n      .then((response: any) => {\r\n        setValue(response);\r\n        setStatus('success');\r\n      })\r\n      .catch((error: any) => {\r\n        setError(error);\r\n        setStatus('error');\r\n      });\r\n  }, [asyncFunction]);\r\n\r\n  // Call execute if we want to fire it right away.\r\n  // Otherwise execute can be called later, such as\r\n  // in an onClick handler.\r\n  useEffect(() => {\r\n    if (immediate) {\r\n      execute();\r\n    }\r\n  }, [execute, immediate]);\r\n\r\n  return { execute, status, value, error };\r\n};"
 ---
 
 It's generally a good practice to indicate to users the status of any async request. An example would be fetching data from an API and displaying a loading indicator before rendering the results. Another example would be a form where you want to disable the submit button when the submission is pending and then display either a success or error message when it completes.

src/templates/index.js

@@ -1,9 +1,8 @@
 import React from "react";
-import styled from "styled-components";
 import { Link } from "gatsby";
 import Layout from "../components/Layout";
-import Search from "../components/Search";
-import { PostTemplate } from "../templates/post.js";
+// import Search from "../components/Search";
+import PostTemplate from "../components/PostTemplate";
 
 const IndexPage = ({ pageContext }) => {
   //const [search, setSearch] = useState("");