feat(client): ts-migrate client/utils/** (#42823)

* rename js files

* update imports and references

* migrate build-challenges

* migrate challenge-types

* migrate utils/index

* migrate state-management

* install @types/psl for tags

* migrate tags

* migrate tags.test

* migrate challenge-page-creator

* migrate utils/gatsby/index

* migrate layout-selector

* migrate layout-selector.test

* revert challenge-types

Curriculum can't handle TS or modules

* convert arrow functions

* revert build-challenges

* revert utils/gatsby/index

* revert challenge-page-creator

* revert challenge-types reference

* Delete state-management

Deleted in #42960

* Disable render-result-naming-convention (for now)

* update layout-selector.test comment

* reorder imports in build-challenges

* change ts-ignore to ts-expect-error

client/utils/gatsby/challenge-page-creator.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const { dasherize } = require('../../../utils/slugs');
 
-const { viewTypes } = require('../challengeTypes');
+const { viewTypes } = require('../challenge-types');
 
 const backend = path.resolve(
   __dirname,
@@ -42,21 +42,22 @@ const views = {
   // quiz: Quiz
 };
 
-const getNextChallengePath = (node, index, nodeArray) => {
+function getNextChallengePath(_node, index, nodeArray) {
   const next = nodeArray[index + 1];
   return next ? next.node.fields.slug : '/learn';
-};
+}
 
-const getPrevChallengePath = (node, index, nodeArray) => {
+function getPrevChallengePath(_node, index, nodeArray) {
   const prev = nodeArray[index - 1];
   return prev ? prev.node.fields.slug : '/learn';
-};
+}
 
-const getTemplateComponent = challengeType => views[viewTypes[challengeType]];
+function getTemplateComponent(challengeType) {
+  return views[viewTypes[challengeType]];
+}
 
-exports.createChallengePages =
-  createPage =>
-  ({ node }, index, thisArray) => {
+exports.createChallengePages = function (createPage) {
+  return function ({ node }, index, thisArray) {
     const {
       superBlock,
       block,
@@ -69,7 +70,7 @@ exports.createChallengePages =
     // TODO: challengeType === 7 and isPrivate are the same, right? If so, we
     // should remove one of them.
 
-    return createPage({
+    createPage({
       path: slug,
       component: getTemplateComponent(challengeType),
       context: {
@@ -86,35 +87,40 @@ exports.createChallengePages =
       }
     });
   };
-
-exports.createBlockIntroPages = createPage => edge => {
-  const {
-    fields: { slug },
-    frontmatter: { block }
-  } = edge.node;
-
-  return createPage({
-    path: slug,
-    component: intro,
-    context: {
-      block: dasherize(block),
-      slug
-    }
-  });
 };
 
-exports.createSuperBlockIntroPages = createPage => edge => {
-  const {
-    fields: { slug },
-    frontmatter: { superBlock }
-  } = edge.node;
+exports.createBlockIntroPages = function (createPage) {
+  return function (edge) {
+    const {
+      fields: { slug },
+      frontmatter: { block }
+    } = edge.node;
 
-  return createPage({
-    path: slug,
-    component: superBlockIntro,
-    context: {
-      superBlock,
-      slug
-    }
-  });
+    createPage({
+      path: slug,
+      component: intro,
+      context: {
+        block: dasherize(block),
+        slug
+      }
+    });
+  };
+};
+
+exports.createSuperBlockIntroPages = function (createPage) {
+  return function (edge) {
+    const {
+      fields: { slug },
+      frontmatter: { superBlock }
+    } = edge.node;
+
+    createPage({
+      path: slug,
+      component: superBlockIntro,
+      context: {
+        superBlock,
+        slug
+      }
+    });
+  };
 };

client/utils/gatsby/index.js

@@ -1,4 +1,4 @@
-const challengePageCreators = require('./challengePageCreator');
+const challengePageCreators = require('./challenge-page-creator');
 
 module.exports = {
   ...challengePageCreators

client/utils/gatsby/layout-selector.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import React from 'react';
 import { Provider } from 'react-redux';
 import ShallowRenderer from 'react-test-renderer/shallow';
@@ -11,10 +12,19 @@ import layoutSelector from './layout-selector';
 jest.mock('../../src/analytics');
 
 const store = createStore();
-function getComponentNameAndProps(elementType, pathname) {
-  const shallow = new ShallowRenderer();
+
+interface NameAndProps {
+  props: Record<string, unknown>;
+  name: string;
+}
+function getComponentNameAndProps(
+  elementType: React.JSXElementConstructor<never>,
+  pathname: string
+): NameAndProps {
+  // eslint-disable-next-line testing-library/render-result-naming-convention
+  const shallow = ShallowRenderer.createRenderer();
   const LayoutReactComponent = layoutSelector({
-    element: { type: elementType },
+    element: { type: elementType, props: {}, key: '' },
     props: {
       location: {
         pathname
@@ -24,8 +34,13 @@ function getComponentNameAndProps(elementType, pathname) {
   shallow.render(<Provider store={store}>{LayoutReactComponent}</Provider>);
   const view = shallow.getRenderOutput();
   return {
-    props: view.props,
+    props: view.props as Record<string, unknown>,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     name: view.type.WrappedComponent.displayName
+    // TODO: Revisit this when react-test-renderer is replaced with
+    // react-testing-library
   };
 }
 

client/utils/gatsby/layout-selector.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   CertificationLayout,
   DefaultLayout
@@ -6,21 +7,14 @@ import {
 import FourOhFourPage from '../../src/pages/404';
 import { isChallenge } from '../../src/utils/path-parsers';
 
-interface Location {
-  pathname: string;
-}
-
 interface LayoutSelectorProps {
-  props: {
-    location: Location;
-  };
-  element: React.ReactElement;
+  element: JSX.Element;
+  props: { location: { pathname: string } };
 }
-
 export default function layoutSelector({
   element,
   props
-}: LayoutSelectorProps): React.ReactElement {
+}: LayoutSelectorProps): JSX.Element {
   const {
     location: { pathname }
   } = props;