chore(client): fix several type errors (freeCodeCamp#58500)

Author: ojeytonwilliams

client/src/components/Header/components/auth-or-profile.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import type { User } from '../../../redux/prop-types';
 import { Link, AvatarRenderer } from '../../helpers';
 import Login from './login';
 
 interface AuthOrProfileProps {
-  user?: User;
+  user?: {
+    isDonating: boolean;
+    username: string;
+    picture: string;
+    yearsTopContributor: string[];
+  };
 }
 const AuthOrProfile = ({ user }: AuthOrProfileProps): JSX.Element => {
   const { t } = useTranslation();

client/src/components/Header/components/menu-button.tsx

@@ -2,15 +2,13 @@ import React, { RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
-import { User } from '../../../redux/prop-types';
 
 interface MenuButtonProps {
   className?: string;
   displayMenu?: boolean;
   innerRef?: RefObject<HTMLButtonElement>;
   showMenu: () => void;
   hideMenu: () => void;
-  user?: User;
 }
 
 const MenuButton = ({

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

@@ -13,14 +13,13 @@ import { openSignoutModal, toggleTheme } from '../../../redux/actions';
 import { Link } from '../../helpers';
 import { LocalStorageThemes } from '../../../redux/types';
 import { themeSelector } from '../../../redux/selectors';
-import { User } from '../../../redux/prop-types';
 import SupporterBadge from '../../../assets/icons/supporter-badge';
 
 export interface NavLinksProps {
   displayMenu: boolean;
   showMenu: () => void;
   hideMenu: () => void;
-  user?: User;
+  user?: { isDonating: boolean; username: string };
   menuButtonRef: React.RefObject<HTMLButtonElement>;
   openSignoutModal: () => void;
   theme: LocalStorageThemes;

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

@@ -7,7 +7,7 @@ import { Link, SkeletonSprite } from '../../helpers';
 import { SEARCH_EXPOSED_WIDTH } from '../../../../config/misc';
 import FreeCodeCampLogo from '../../../assets/icons/freecodecamp-logo';
 import MenuButton from './menu-button';
-import NavLinks, { type NavLinksProps } from './nav-links';
+import NavLinks from './nav-links';
 import AuthOrProfile from './auth-or-profile';
 import LanguageList from './language-list';
 
@@ -18,10 +18,17 @@ const SearchBarOptimized = Loadable(
   () => import('../../search/searchBar/search-bar-optimized')
 );
 
-type UniversalNavProps = Omit<
-  NavLinksProps,
-  'toggleTheme' | 'openSignoutModal'
-> & {
+type UniversalNavProps = {
+  displayMenu: boolean;
+  showMenu: () => void;
+  hideMenu: () => void;
+  menuButtonRef: React.RefObject<HTMLButtonElement>;
+  user: {
+    isDonating: boolean;
+    username: string;
+    picture: string;
+    yearsTopContributor: string[];
+  };
   fetchState: { pending: boolean };
   searchBarRef?: React.RefObject<HTMLDivElement>;
   pathname: string;
@@ -81,7 +88,6 @@ const UniversalNav = ({
               hideMenu={hideMenu}
               innerRef={menuButtonRef}
               showMenu={showMenu}
-              user={user}
             />
             {!isSearchExposedWidth && search}
             <NavLinks

client/src/components/Header/header.test.tsx

@@ -1,92 +1,85 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-
 import React from 'react';
 import { create, ReactTestRendererJSON } from 'react-test-renderer';
 import AuthOrProfile from './components/auth-or-profile';
 
+const defaultUserProps = {
+  user: {
+    username: 'test-user',
+    picture: 'https://freecodecamp.org/image.png',
+    isDonating: false,
+    yearsTopContributor: []
+  },
+  pending: false,
+  pathName: '/learn'
+};
+
+const donatingUserProps = {
+  ...defaultUserProps,
+  user: {
+    ...defaultUserProps.user,
+    isDonating: true
+  }
+};
+
+const topContributorUserProps = {
+  ...defaultUserProps,
+  user: {
+    ...defaultUserProps.user,
+    yearsTopContributor: ['2020']
+  }
+};
+
+const topDonatingContributorUserProps = {
+  ...topContributorUserProps,
+  user: {
+    ...topContributorUserProps.user,
+    isDonating: true
+  }
+};
+
 jest.mock('../../analytics');
 
 describe('<AuthOrProfile />', () => {
   it('has avatar with default border for default users', () => {
-    const defaultUserProps = {
-      user: {
-        username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png'
-      },
-      pending: false,
-      pathName: '/learn'
-    };
-
     const componentTree = create(
       <AuthOrProfile {...defaultUserProps} />
     ).toJSON();
     expect(avatarHasClass(componentTree, 'default-border')).toBeTruthy();
   });
 
   it('has avatar with gold border for donating users', () => {
-    const donatingUserProps = {
-      user: {
-        username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png',
-        isDonating: true
-      },
-      pending: false,
-      pathName: '/learn'
-    };
-
     const componentTree = create(
       <AuthOrProfile {...donatingUserProps} />
     ).toJSON();
     expect(avatarHasClass(componentTree, 'gold-border')).toBeTruthy();
   });
 
   it('has avatar with blue border for top contributors', () => {
-    const topContributorUserProps = {
-      user: {
-        username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png',
-        yearsTopContributor: [2020]
-      },
-      pending: false,
-      pathName: '/learn'
-    };
-
     const componentTree = create(
       <AuthOrProfile {...topContributorUserProps} />
     ).toJSON();
     expect(avatarHasClass(componentTree, 'blue-border')).toBeTruthy();
   });
 
   it('has avatar with purple border for donating top contributors', () => {
-    const topDonatingContributorUserProps = {
-      user: {
-        username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png',
-        isDonating: true,
-        yearsTopContributor: [2020]
-      },
-      pending: false,
-      pathName: '/learn'
-    };
-
     const componentTree = create(
       <AuthOrProfile {...topDonatingContributorUserProps} />
     ).toJSON();
     expect(avatarHasClass(componentTree, 'purple-border')).toBeTruthy();
   });
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const profileNavItem = (component: any) => component.children[0];
+type Component = {
+  children: { props: { className: string } }[];
+};
+const profileNavItem = (component: Component) => component.children[0];
 
 const avatarHasClass = (
   componentTree: ReactTestRendererJSON | ReactTestRendererJSON[] | null,
   classes: string
 ) => {
   return (
-    profileNavItem(componentTree).props.className ===
+    profileNavItem(componentTree as unknown as Component).props.className ===
     'avatar-container ' + classes
   );
 };

client/src/components/Header/index.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 import { ConnectedProps, connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { User } from '../../redux/prop-types';
 import { examInProgressSelector } from '../../redux/selectors';
 
 import UniversalNav from './components/universal-nav';
@@ -26,7 +25,12 @@ type PropsFromRedux = ConnectedProps<typeof connector>;
 
 type Props = PropsFromRedux & {
   fetchState: { pending: boolean };
-  user: User;
+  user: {
+    isDonating: boolean;
+    username: string;
+    picture: string;
+    yearsTopContributor: string[];
+  };
   skipButtonText: string;
   pathname: string;
 };

client/src/components/Map/index.tsx

@@ -57,7 +57,6 @@ const superBlockHeadings: { [key in SuperBlockStage]: string } = {
   [SuperBlockStage.Professional]: 'landing.professional-certs-heading',
   [SuperBlockStage.Extra]: 'landing.interview-prep-heading',
   [SuperBlockStage.Legacy]: 'landing.legacy-curriculum-heading',
-  [SuperBlockStage.New]: '', // TODO: add translation
   [SuperBlockStage.Next]: 'landing.next-heading',
   [SuperBlockStage.NextEnglish]: 'landing.next-english-heading',
   [SuperBlockStage.Upcoming]: 'landing.upcoming-heading'

client/src/components/profile/components/portfolio.tsx

@@ -202,7 +202,10 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
     });
   }
 
-  getUrlValidation(url: string) {
+  getUrlValidation(url: string): {
+    state: 'success' | 'warning' | 'error';
+    message: string;
+  } {
     const { t } = this.props;
     const len = url.length;
 

client/src/components/profile/components/utils/index.ts

@@ -1 +1 @@
-export { parseDate, formatYears } from './utils';
+export { parseDate } from './utils';

client/src/components/profile/profile.test.tsx

@@ -90,13 +90,19 @@ function renderWithRedux(ui: JSX.Element) {
 }
 describe('<Profile/>', () => {
   it('renders the report button on another persons profile', () => {
+    // TODO: Profile is a mess, it shouldn't depend on the entire user. Each
+    // component Camper, Stats, HeatMap etc should be get the relevant data from
+    // the store themselves.
+
+    // @ts-expect-error - quick hack to mollify TS.
     renderWithRedux(<Profile {...notMyProfileProps} />);
 
     const reportButton: HTMLElement = screen.getByText('buttons.flag-user');
     expect(reportButton).toHaveAttribute('href', '/user/string/report-user');
   });
 
   it('renders correctly', () => {
+    // @ts-expect-error - quick hack to mollify TS.
     const { container } = renderWithRedux(<Profile {...notMyProfileProps} />);
 
     expect(container).toMatchSnapshot();