refactor(client): link to TypeScript

client/package-lock.json

@@ -5813,6 +5813,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-test-renderer": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
+      "integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",

client/package.json

@@ -54,6 +54,7 @@
     "@loadable/component": "5.15.0",
     "@reach/router": "1.3.4",
     "@types/react-spinkit": "^3.0.6",
+    "@types/react-test-renderer": "^17.0.1",
     "algoliasearch": "4.9.3",
     "assert": "2.0.0",
     "babel-plugin-preval": "5.0.0",

client/src/components/Footer/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import Link from '../helpers/Link';
+import Link from '../helpers/link';
 import './footer.css';
 
 const propTypes = {

client/src/components/helpers/index.js

@@ -4,7 +4,7 @@ export { default as SlimWidthRow } from './slim-width-row';
 export { default as Loader } from './loader';
 export { default as SkeletonSprite } from './skeleton-sprite';
 export { default as Spacer } from './spacer';
-export { default as Link } from './Link';
+export { default as Link } from './link';
 export { default as CurrentChallengeLink } from './CurrentChallengeLink';
 export { default as ImageLoader } from './ImageLoader';
 export { default as AvatarRenderer } from './AvatarRenderer';

client/src/components/helpers/link.test.tsx

@@ -1,14 +1,16 @@
 /* global expect */
 import React from 'react';
-import renderer from 'react-test-renderer';
+import renderer, { ReactTestRendererJSON } from 'react-test-renderer';
 
-import Link from './Link';
+import Link from './link';
 
 describe('<Link />', () => {
   const externalLink = renderer
     .create(<Link external={true} to='/home' />)
-    .toJSON();
+    .toJSON() as ReactTestRendererJSON;
-  const gatsbyLink = renderer.create(<Link to='/home' />).toJSON();
+  const gatsbyLink = renderer
+    .create(<Link to='/home' />)
+    .toJSON() as ReactTestRendererJSON;
 
   it('renders to the DOM', () => {
     expect(gatsbyLink).toBeTruthy();

client/src/components/helpers/link.tsx

@@ -1,15 +1,27 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import { Link as GatsbyLink } from 'gatsby';
 
-const propTypes = {
+// const propTypes = {
-  children: PropTypes.any,
+//   children: PropTypes.any,
-  external: PropTypes.bool,
+//   external: PropTypes.bool,
-  sameTab: PropTypes.bool,
+//   sameTab: PropTypes.bool,
-  to: PropTypes.string.isRequired
+//   to: PropTypes.string.isRequired
-};
+// };
 
-const Link = ({ children, to, external, sameTab, ...other }) => {
+interface LinkProps {
+  children?: ReactNode;
+  external?: boolean;
+  sameTab?: boolean;
+  to: string;
+}
+
+const Link = ({
+  children,
+  to,
+  external,
+  sameTab,
+  ...other
+}: LinkProps): JSX.Element => {
   if (!external && /^\/(?!\/)/.test(to)) {
     return (
       <GatsbyLink to={to} {...other}>
@@ -30,6 +42,5 @@ const Link = ({ children, to, external, sameTab, ...other }) => {
     </a>
   );
 };
-Link.propTypes = propTypes;
 
 export default Link;

client/src/components/profile/Profile.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Row } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
-import Link from '../helpers/Link';
+import Link from '../helpers/link';
 import { useTranslation } from 'react-i18next';
 
 import { CurrentChallengeLink, FullWidthRow, Spacer } from '../helpers';

client/src/components/profile/components/Camper.js

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 
 import { AvatarRenderer } from '../../helpers';
 import SocialIcons from './SocialIcons';
-import Link from '../../helpers/Link';
+import Link from '../../helpers/link';
 
 import './camper.css';