refactor(client): link themes types to its input (#49862)

* refactor(client): link themes types to its input

add type in the imports for readiblity

* align formValues Types

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

@@ -16,7 +16,7 @@ import Honesty from '../components/settings/honesty';
 import Internet, { Socials } from '../components/settings/internet';
 import Portfolio from '../components/settings/portfolio';
 import Privacy from '../components/settings/privacy';
-import { Themes } from '../components/settings/theme';
+import { type ThemeProps, Themes } from '../components/settings/theme';
 import UserToken from '../components/settings/user-token';
 import { hardGoTo as navigate } from '../redux/actions';
 import {
@@ -41,13 +41,12 @@ import {
 const { apiLocation } = envData;
 
 // TODO: update types for actions
-interface ShowSettingsProps {
+type ShowSettingsProps = Pick<ThemeProps, 'toggleNightMode'> & {
   createFlashMessage: typeof createFlashMessage;
   isSignedIn: boolean;
   navigate: (location: string) => void;
   showLoading: boolean;
   submitNewAbout: () => void;
-  toggleNightMode: (theme: Themes) => void;
   toggleSoundMode: (sound: boolean) => void;
   toggleKeyboardShortcuts: (keyboardShortcuts: boolean) => void;
   updateSocials: (formValues: Socials) => void;
@@ -58,7 +57,7 @@ interface ShowSettingsProps {
   verifyCert: () => void;
   path?: string;
   userToken: string | null;
-}
+};
 
 const mapStateToProps = createSelector(
   signInLoadingSelector,

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

@@ -22,7 +22,7 @@ import { hardGoTo as navigate, openSignoutModal } from '../../../redux/actions';
 import { updateMyTheme } from '../../../redux/settings/actions';
 import createLanguageRedirect from '../../create-language-redirect';
 import { Link } from '../../helpers';
-import { Themes } from '../../settings/theme';
+import { type ThemeProps, Themes } from '../../settings/theme';
 import LanguageGlobe from '../../../assets/icons/language-globe';
 import { User } from '../../../redux/prop-types';
 
@@ -30,13 +30,12 @@ const locales = availableLangs.client.filter(
   lang => !hiddenLangs.includes(lang)
 );
 
-export interface NavLinksProps {
+export interface NavLinksProps extends Pick<ThemeProps, 'toggleNightMode'> {
   displayMenu: boolean;
   isLanguageMenuDisplayed: boolean;
   fetchState: { pending: boolean };
   showMenu: () => void;
   hideMenu: () => void;
-  toggleNightMode: (theme: Themes) => Themes;
   user?: User;
   navigate?: (location: string) => void;
   showLanguageMenu: (elementToFocus: HTMLButtonElement | null) => void;
@@ -108,7 +107,7 @@ const DonateButton = ({
 
 const toggleTheme = (
   currentTheme = Themes.Default,
-  toggleNightMode: (theme: Themes) => Themes
+  toggleNightMode: typeof updateMyTheme
 ) => {
   toggleNightMode(
     currentTheme === Themes.Night ? Themes.Default : Themes.Night
@@ -577,7 +576,4 @@ function NavLinks({
 
 NavLinks.displayName = 'NavLinks';
 
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-//@ts-ignore
-// to please TypeScript, action.js needs to be migrated to TypeScript
 export default connect(null, mapDispatchToProps)(withTranslation()(NavLinks));

client/src/components/settings/about.tsx

@@ -14,38 +14,32 @@ import { FullWidthRow, Spacer } from '../helpers';
 import BlockSaveButton from '../helpers/form/block-save-button';
 import type { CamperProps } from '../profile/components/camper';
 import SoundSettings from './sound';
-import ThemeSettings, { Themes } from './theme';
+import ThemeSettings, { type ThemeProps } from './theme';
 import UsernameSettings from './username';
 import KeyboardShortcutsSettings from './keyboard-shortcuts';
 import SectionHeader from './section-header';
 import ScrollbarWidthSettings from './scrollbar-width';
 
-type FormValues = {
-  name: string;
-  location: string;
-  picture: string;
-  about: string;
-};
+type AboutProps = ThemeProps &
+  Omit<
+    CamperProps,
+    | 'linkedin'
+    | 'joinDate'
+    | 'isDonating'
+    | 'githubProfile'
+    | 'twitter'
+    | 'website'
+    | 'yearsTopContributor'
+  > & {
+    sound: boolean;
+    keyboardShortcuts: boolean;
+    submitNewAbout: (formValues: FormValues) => void;
+    t: TFunction;
+    toggleSoundMode: (sound: boolean) => void;
+    toggleKeyboardShortcuts: (keyboardShortcuts: boolean) => void;
+  };
 
-type AboutProps = Omit<
-  CamperProps,
-  | 'linkedin'
-  | 'joinDate'
-  | 'isDonating'
-  | 'githubProfile'
-  | 'twitter'
-  | 'website'
-  | 'yearsTopContributor'
-> & {
-  currentTheme: Themes;
-  sound: boolean;
-  keyboardShortcuts: boolean;
-  submitNewAbout: (formValues: FormValues) => void;
-  t: TFunction;
-  toggleNightMode: (theme: Themes) => void;
-  toggleSoundMode: (sound: boolean) => void;
-  toggleKeyboardShortcuts: (keyboardShortcuts: boolean) => void;
-};
+type FormValues = Pick<AboutProps, 'name' | 'location' | 'picture' | 'about'>;
 
 type AboutState = {
   formValues: FormValues;

client/src/components/settings/theme.tsx

@@ -1,6 +1,7 @@
 import { Form } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import type { updateMyTheme } from '../../redux/settings/actions';
 
 import ToggleButtonSetting from './toggle-button-setting';
 
@@ -9,9 +10,9 @@ export enum Themes {
   Default = 'default'
 }
 
-type ThemeProps = {
+export type ThemeProps = {
   currentTheme: Themes;
-  toggleNightMode: (theme: Themes) => void;
+  toggleNightMode: typeof updateMyTheme;
 };
 
 export default function ThemeSettings({