feat(client): ts-migrate /client/src/components/ redirects (#42642)

* rename

* migrate

* migrate create language redirect

* fix type of redirects

* migrate test

Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/client-only-routes/show-certification.tsx

@@ -27,7 +27,7 @@ import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage';
 import { langCodes } from '../../../config/i18n/all-langs';
 import envData from '../../../config/env.json';
 
-import RedirectHome from '../components/RedirectHome';
+import RedirectHome from '../components/redirect-home';
 import { Loader, Spacer } from '../components/helpers';
 import { isEmpty } from 'lodash-es';
 import { UserType } from '../redux/prop-types';

client/src/components/Header/components/nav-links.tsx

@@ -22,8 +22,8 @@ import {
 import { Link } from '../../helpers';
 import { updateUserFlag } from '../../../redux/settings';
 import envData from '../../../../../config/env.json';
-import createLanguageRedirect from '../../createLanguageRedirect';
+import createLanguageRedirect from '../../create-language-redirect';
-import createExternalRedirect from '../../createExternalRedirects';
+import createExternalRedirect from '../../create-external-redirects';
 import {
   availableLangs,
   i18nextCodes,

client/src/components/create-external-redirects.test.ts

@@ -1,4 +1,4 @@
-import createExternalRedirect from './createExternalRedirects';
+import createExternalRedirect from './create-external-redirects';
 
 describe('createExternalRedirects', () => {
   describe('english redirects', () => {

client/src/components/create-external-redirects.ts

@@ -2,7 +2,10 @@ import envData from '../../../config/env.json';
 
 const { forumLocation } = envData;
 
-const createExternalRedirect = (page, { clientLocale }) => {
+const createExternalRedirect = (
+  page: string,
+  { clientLocale }: { clientLocale: string }
+): string => {
   // Handle Chinese
   if (clientLocale === 'chinese' || clientLocale === 'chinese-traditional') {
     return `https://chinese.freecodecamp.org/${page}`;

client/src/components/create-language-redirect.test.ts

@@ -1,4 +1,4 @@
-import createLanguageRedirect from './createLanguageRedirect';
+import createLanguageRedirect from './create-language-redirect';
 
 describe('createLanguageRedirect for clientLocale === english', () => {
   const envVars = {
@@ -20,8 +20,10 @@ describe('createLanguageRedirect for clientLocale === english', () => {
     const originalLocation = window.location;
 
     beforeEach(() => {
-      delete window.location;
+      Object.defineProperty(window, 'location', {
-      window.location = new URL(currentPageURL);
+        writable: true,
+        value: new URL(currentPageURL)
+      });
     });
 
     afterEach(() => {
@@ -80,8 +82,10 @@ describe('createLanguageRedirect for clientLocale === english', () => {
     const originalLocation = window.location;
 
     beforeEach(() => {
-      delete window.location;
+      Object.defineProperty(window, 'location', {
-      window.location = new URL(currentPageURL);
+        writable: true,
+        value: new URL(currentPageURL)
+      });
     });
 
     afterEach(() => {
@@ -150,8 +154,10 @@ describe('createLanguageRedirect for clientLocale === chinese', () => {
     const originalLocation = window.location;
 
     beforeEach(() => {
-      delete window.location;
+      Object.defineProperty(window, 'location', {
-      window.location = new URL(currentPageURL);
+        writable: true,
+        value: new URL(currentPageURL)
+      });
     });
 
     afterEach(() => {
@@ -210,8 +216,10 @@ describe('createLanguageRedirect for clientLocale === chinese', () => {
     const originalLocation = window.location;
 
     beforeEach(() => {
-      delete window.location;
+      Object.defineProperty(window, 'location', {
-      window.location = new URL(currentPageURL);
+        writable: true,
+        value: new URL(currentPageURL)
+      });
     });
 
     afterEach(() => {

client/src/components/create-language-redirect.ts

@@ -1,9 +1,15 @@
-const createLanguageRedirect = ({ clientLocale, lang }) => {
+const createLanguageRedirect = ({
+  clientLocale,
+  lang
+}: {
+  clientLocale: string;
+  lang: string;
+}): string => {
   // return early if requesting the same page
-  if (clientLocale === lang) return `${window?.location}`;
+  if (clientLocale === lang) return window?.location.toString();
 
-  let path = window?.location?.pathname?.split('/');
+  const pathArray = window?.location?.pathname?.split('/');
-  path = path
+  const path = pathArray
     .filter(item => (item !== clientLocale && item !== lang ? item : ''))
     .join('/');
 

client/src/components/create-redirect.ts

@@ -1,10 +1,10 @@
 import { navigate } from 'gatsby';
 
 const createRedirect =
-  (to = '/') =>
+  (to = '/'): (() => JSX.Element | null) =>
   () => {
     if (typeof window !== 'undefined') {
-      navigate(to);
+      void navigate(to);
     }
     return null;
   };

client/src/components/layouts/Learn.js

@@ -10,7 +10,7 @@ import {
   isSignedInSelector,
   tryToShowDonationModal
 } from '../../redux';
-import createRedirect from '../../components/createRedirect';
+import createRedirect from '../create-redirect';
 import DonateModal from '../Donation/DonationModal';
 
 import './prism.css';

client/src/components/redirect-home.ts

@@ -1,4 +1,4 @@
-import createRedirect from './createRedirect';
+import createRedirect from './create-redirect';
 import { withPrefix } from 'gatsby';
 
 export default createRedirect(withPrefix('/'));

client/src/pages/certification.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Router } from '@reach/router';
 import { withPrefix } from 'gatsby';
 
-import RedirectHome from '../components/RedirectHome';
+import RedirectHome from '../components/redirect-home';
 import ShowCertification from '../client-only-routes/show-certification';
 
 import './certification.css';

client/src/pages/email-sign-up.tsx

@@ -12,7 +12,7 @@ import { createSelector } from 'reselect';
 
 import { ButtonSpacer, Spacer } from '../components/helpers';
 import { acceptTerms, userSelector } from '../redux';
-import createRedirect from '../components/createRedirect';
+import createRedirect from '../components/create-redirect';
 
 import './email-sign-up.css';
 

client/src/pages/settings.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Router } from '@reach/router';
 import { withPrefix } from 'gatsby';
 
-import RedirectHome from '../components/RedirectHome';
+import RedirectHome from '../components/redirect-home';
 import ShowSettings from '../client-only-routes/show-settings';
 
 function Settings(): JSX.Element {

client/src/pages/unsubscribed.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Router } from '@reach/router';
 import { withPrefix } from 'gatsby';
 
-import RedirectHome from '../components/RedirectHome';
+import RedirectHome from '../components/redirect-home';
 import ShowUnsubscribed from '../client-only-routes/show-unsubscribed';
 
 function Unsubscribed(): JSX.Element {

client/src/pages/user.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Router } from '@reach/router';
 import { withPrefix } from 'gatsby';
 
-import RedirectHome from '../components/RedirectHome';
+import RedirectHome from '../components/redirect-home';
 import ShowUser from '../client-only-routes/show-user';
 
 function User(): JSX.Element {