From 1c51071c0b9aaac8013b92a50ffaa3135a2fa2c7 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 20 Apr 2023 19:11:46 +0200 Subject: [PATCH] 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 --- .../src/client-only-routes/show-settings.tsx | 7 ++- .../Header/components/nav-links.tsx | 10 ++-- client/src/components/settings/about.tsx | 46 ++++++++----------- client/src/components/settings/theme.tsx | 5 +- 4 files changed, 29 insertions(+), 39 deletions(-) diff --git a/client/src/client-only-routes/show-settings.tsx b/client/src/client-only-routes/show-settings.tsx index f5da23e8812..298674ecb18 100644 --- a/client/src/client-only-routes/show-settings.tsx +++ b/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 & { 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, diff --git a/client/src/components/Header/components/nav-links.tsx b/client/src/components/Header/components/nav-links.tsx index a8efc02c35d..db815556605 100644 --- a/client/src/components/Header/components/nav-links.tsx +++ b/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 { 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)); diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx index 74aa49179b2..350826f4c69 100644 --- a/client/src/components/settings/about.tsx +++ b/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; type AboutState = { formValues: FormValues; diff --git a/client/src/components/settings/theme.tsx b/client/src/components/settings/theme.tsx index 1cb2666e82a..d88b79aebff 100644 --- a/client/src/components/settings/theme.tsx +++ b/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({