ref: Upgrade several components to typescript

Author: dcramer

.babelrc.js

@@ -9,5 +9,5 @@ if (process.env.NODE_ENV !== `test`) {
 module.exports = {
   sourceMaps: true,
   presets: ["babel-preset-gatsby-package"],
-  ignore
+  ignore,
 };

jest-transformer.js

@@ -1,4 +1,4 @@
 const babelPreset = require(`babel-preset-gatsby-package`)();
 module.exports = require(`babel-jest`).createTransformer({
-  ...babelPreset
+  ...babelPreset,
 });

jest.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   transform: {
-    "^.+\\.[jt]sx?$": `<rootDir>/jest-transformer.js`
+    "^.+\\.[jt]sx?$": `<rootDir>/jest-transformer.js`,
   },
   testEnvironment: `jest-environment-jsdom-fourteen`,
   testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
-  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`]
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
 };

package.json

@@ -18,6 +18,7 @@
     "@sentry/gatsby": "^5.20.1",
     "@sentry/react": "^5.20.0",
     "@sentry/tracing": "^5.20.1",
+    "@types/dompurify": "^2.0.3",
     "@types/node": "^12",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",

src/components/basePage.js src/components/basePage.tsxsrc/components/basePage.js renamed to src/components/basePage.tsx

@@ -7,7 +7,15 @@ import SmartLink from "./smartLink";
 import TableOfContents from "./tableOfContents";
 import * as Sentry from "@sentry/gatsby";
 
-const GitHubCTA = ({ sourceInstanceName, relativePath }) => (
+type GitHubCTAProps = {
+  sourceInstanceName: string;
+  relativePath: string;
+};
+
+const GitHubCTA = ({
+  sourceInstanceName,
+  relativePath,
+}: GitHubCTAProps): JSX.Element => (
   <div className="github-cta">
     <small>
       You can{" "}
@@ -21,12 +29,33 @@ const GitHubCTA = ({ sourceInstanceName, relativePath }) => (
   </div>
 );
 
+type Props = {
+  data?: {
+    file?: {
+      childMarkdownRemark?: {
+        tableOfContents?: any;
+        [key: string]: any;
+      };
+      childMdx?: {
+        tableOfContents?: any;
+        [key: string]: any;
+      };
+      [key: string]: any;
+    };
+  };
+  pageContext?: {
+    title?: string;
+  };
+  sidebar?: JSX.Element;
+  children?: JSX.Element;
+};
+
 export default ({
-  data: { file } = { data: {} },
-  pageContext: { title } = { pageContext: {} },
+  data: { file } = {},
+  pageContext: { title } = {},
   sidebar,
   children,
-}) => {
+}: Props): JSX.Element => {
   const tx = Sentry.getCurrentHub()
     .getScope()
     .getTransaction();
@@ -37,7 +66,7 @@ export default ({
   const child = file && (file.childMarkdownRemark || file.childMdx);
   const hasToc = child && !!child.tableOfContents.items;
   return (
-    <Layout title={title} file={file} sidebar={sidebar}>
+    <Layout sidebar={sidebar}>
       <SEO title={title} file={file} />
 
       <div className="row">

src/components/breadcrumbs.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { useLocation } from "@reach/router";
+import { StaticQuery, graphql } from "gatsby";
+import SmartLink from "./smartLink";
+
+const query = graphql`
+  query BreadcrumbsQuery {
+    allSitePage {
+      nodes {
+        id
+        path
+        context {
+          title
+        }
+      }
+    }
+  }
+`;
+
+type Node = {
+  id: string;
+  path: string;
+  context: {
+    title: string;
+  };
+};
+
+type Props = {
+  data: {
+    allSitePage: {
+      nodes: Node[];
+    };
+  };
+};
+
+export const Breadcrumbs = ({
+  data: {
+    allSitePage: { nodes },
+  },
+}: Props) => {
+  const location = useLocation();
+  const currentPath = location.pathname;
+  let rootNode = nodes.find(n => n.path === currentPath);
+  if (!rootNode) {
+    console.warn(`Cant find root node for breadcrumbs: ${currentPath}`);
+    return null;
+  }
+  let trailNodes = nodes.filter(n => rootNode.path.indexOf(n.path) === 0);
+
+  return (
+    <ul className="breadcrumb" style={{ marginBottom: "1rem" }}>
+      {trailNodes
+        .sort((a, b) => a.path.localeCompare(b.path))
+        .map(n => {
+          return (
+            <li className="breadcrumb-item" key={n.id}>
+              <SmartLink to={n.path}>{n.context.title}</SmartLink>
+            </li>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default () => {
+  return (
+    <StaticQuery
+      query={query}
+      render={data => {
+        return <Breadcrumbs data={data} />;
+      }}
+    />
+  );
+};

src/components/breadcrumbs.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useContext } from "react";
-import PropTypes from "prop-types";
 import copy from "copy-to-clipboard";
 import { MDXProvider } from "@mdx-js/react";
 import { Clipboard } from "react-feather";
@@ -15,7 +14,7 @@ function makeKeywordsClickable(children) {
 
   KEYWORDS_REGEX.lastIndex = 0;
 
-  return children.reduce((arr, child) => {
+  return children.reduce((arr: any[], child) => {
     if (typeof child !== "string") {
       arr.push(child);
       return arr;
@@ -55,20 +54,22 @@ function Selector({ keyword, group, ...props }) {
     sharedSelection,
     setSharedSelection,
   ] = codeContext.sharedKeywordSelection;
-  const spanRef = useRef();
-  const [menuRef, setMenuRef] = useRefWithCallback(menuNode => {
-    if (menuNode) {
-      for (const node of menuNode.childNodes) {
-        if (node.getAttribute("data-active") === "1") {
-          node.parentNode.scrollTop =
-            node.offsetTop -
-            node.parentNode.getBoundingClientRect().height / 2 +
-            node.getBoundingClientRect().height / 2;
-          break;
+  const spanRef = useRef<HTMLSpanElement>();
+  const [menuRef, setMenuRef] = useRefWithCallback<HTMLSpanElement>(
+    menuNode => {
+      if (menuNode) {
+        for (const node of menuNode.childNodes as any) {
+          if (node.getAttribute("data-active") === "1") {
+            node.parentNode.scrollTop =
+              node.offsetTop -
+              node.parentNode.getBoundingClientRect().height / 2 +
+              node.getBoundingClientRect().height / 2;
+            break;
+          }
         }
       }
     }
-  });
+  );
 
   useOnClickOutside(menuRef, () => {
     if (isOpen) {
@@ -87,7 +88,9 @@ function Selector({ keyword, group, ...props }) {
 
   // this is not super clean but since we can depend on the span
   // rendering before the menu this works.
-  const style = {};
+  const style: {
+    [key: string]: any;
+  } = {};
   if (spanRef.current) {
     const rect = spanRef.current.getBoundingClientRect();
     style.left = spanRef.current.offsetLeft - 10 + "px";
@@ -140,7 +143,7 @@ function Selector({ keyword, group, ...props }) {
   );
 }
 
-function CodeWrapper(props) {
+function CodeWrapper(props): JSX.Element {
   let { children, class: className, ...rest } = props;
   if (children) {
     children = makeKeywordsClickable(children);
@@ -152,7 +155,7 @@ function CodeWrapper(props) {
   );
 }
 
-function SpanWrapper(props) {
+function SpanWrapper(props): JSX.Element {
   let { children, class: className, ...rest } = props;
   if (children) {
     children = makeKeywordsClickable(children);
@@ -164,7 +167,12 @@ function SpanWrapper(props) {
   );
 }
 
-function CodeBlock({ filename, children }) {
+type Props = {
+  filename?: string;
+  children: JSX.Element;
+};
+
+export default ({ filename, children }: Props): JSX.Element => {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef(null);
 
@@ -197,12 +205,4 @@ function CodeBlock({ filename, children }) {
       </div>
     </div>
   );
-}
-
-CodeBlock.propTypes = {
-  language: PropTypes.string,
-  filename: PropTypes.string,
-  title: PropTypes.string,
 };
-
-export default CodeBlock;

src/components/codeBlock.js src/components/codeBlock.tsxsrc/components/codeBlock.js renamed to src/components/codeBlock.tsx

@@ -61,7 +61,13 @@ const DEFAULTS: CodeKeywords = {
   ],
 };
 
-const CodeContext = React.createContext(DEFAULTS);
+type CodeContextType = {
+  codeKeywords: CodeKeywords;
+  sharedCodeSelection: any;
+  sharedKeywordSelection: any;
+};
+
+const CodeContext = React.createContext(null as CodeContextType | null);
 
 const parseDsn = function(dsn: string): Dsn {
   const match = dsn.match(/^(.*?\/\/)(.*?):(.*?)@(.*?)(\/.*?)$/);
@@ -145,15 +151,15 @@ export function fetchCodeKeywords() {
 export default CodeContext;
 
 export function useCodeContextState(fetcher = fetchCodeKeywords) {
-  let [codeKeywords, setCodeKeywords] = useState(null);
+  let [codeKeywords, setCodeKeywords] = useState(DEFAULTS);
   if (codeKeywords === null && cachedCodeKeywords !== null) {
     setCodeKeywords(cachedCodeKeywords);
     codeKeywords = cachedCodeKeywords;
   }
 
   useEffect(() => {
     if (cachedCodeKeywords === null) {
-      fetcher().then(config => {
+      fetcher().then((config: CodeKeywords) => {
         cachedCodeKeywords = config;
         setCodeKeywords(config);
       });

src/components/codeContext.tsx

@@ -16,7 +16,11 @@ const LANGUAGES = {
   yaml: "YAML",
 };
 
-function CodeTabs({ children }) {
+type Props = {
+  children: JSX.Element | JSX.Element[];
+};
+
+export default ({ children }: Props): JSX.Element => {
   if (!Array.isArray(children)) {
     children = [children];
   } else {
@@ -119,6 +123,4 @@ function CodeTabs({ children }) {
       <div className="tab-content">{code}</div>
     </div>
   );
-}
-
-export default CodeTabs;
+};