refactor(client): store session user in dedicated key (freeCodeCamp#59954)

Author: ojeytonwilliams

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

@@ -21,10 +21,11 @@ import {
   showCertFetchStateSelector,
   userFetchStateSelector,
   isDonatingSelector,
-  userByNameSelector,
-  usernameSelector
+  usernameSelector,
+  createUserByNameSelector,
+  isSignedInSelector
 } from '../redux/selectors';
-import { UserFetchState, User } from '../redux/prop-types';
+import type { UserFetchState, User } from '../redux/prop-types';
 import { liveCerts } from '../../config/cert-and-project-map';
 import {
   certificateMissingErrorMessage,
@@ -67,6 +68,7 @@ interface ShowCertificationProps {
   };
   isDonating: boolean;
   isValidCert: boolean;
+  isSignedIn: boolean;
   location: {
     pathname: string;
   };
@@ -78,41 +80,48 @@ interface ShowCertificationProps {
     certSlug: string;
   }) => void;
   signedInUserName: string;
-  user: User;
+  user: User | null;
   userFetchState: UserFetchState;
   userFullName: string;
   username: string;
 }
 
-const requestedUserSelector = (state: unknown, { username = '' }) =>
-  userByNameSelector(username.toLowerCase())(state) as User;
-
 const mapStateToProps = (state: unknown, props: ShowCertificationProps) => {
   const isValidCert = liveCerts.some(
     ({ certSlug }) => String(certSlug) === props.certSlug
   );
+
+  const { username } = props;
+
+  const userByNameSelector = createUserByNameSelector(username) as (
+    state: unknown
+  ) => User | null;
+
   return createSelector(
     showCertSelector,
     showCertFetchStateSelector,
     usernameSelector,
+    userByNameSelector,
     userFetchStateSelector,
     isDonatingSelector,
-    requestedUserSelector,
+    isSignedInSelector,
     (
       cert: Cert,
       fetchState: ShowCertificationProps['fetchState'],
       signedInUserName: string,
+      user: User | null,
       userFetchState: UserFetchState,
       isDonating: boolean,
-      user: User
+      isSignedIn: boolean
     ) => ({
       cert,
       fetchState,
       isValidCert,
       signedInUserName,
+      user,
       userFetchState,
       isDonating,
-      user
+      isSignedIn
     })
   );
 };
@@ -293,24 +302,19 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
       userFetchState: { complete: userComplete },
       signedInUserName,
       isDonating,
+      isSignedIn,
       cert: { username = '' },
       fetchProfileForUser,
       user
     } = props;
 
-    if (!signedInUserName || signedInUserName !== username) {
-      if (isEmpty(user) && username) {
-        fetchProfileForUser(username);
-      }
+    const isSessionUser = isSignedIn && signedInUserName === username;
+
+    if (isEmpty(user) && username) {
+      fetchProfileForUser(username);
     }
 
-    if (
-      !isDonationDisplayed &&
-      userComplete &&
-      signedInUserName &&
-      signedInUserName === username &&
-      !isDonating
-    ) {
+    if (!isDonationDisplayed && userComplete && isSessionUser && !isDonating) {
       setIsDonationDisplayed(true);
       callGA({
         event: 'donation_view',
@@ -341,7 +345,8 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
     isValidCert,
     createFlashMessage,
     signedInUserName,
-    location: { pathname }
+    location: { pathname },
+    user
   } = props;
   const { pending, complete, errored } = fetchState;
 
@@ -359,7 +364,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
     return <RedirectHome />;
   }
 
-  if (pending) {
+  if (pending || !user) {
     return <Loader fullScreen={true} />;
   }
 
@@ -376,8 +381,6 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
     completionTime
   } = cert;
 
-  const { user } = props;
-
   const displayName = userFullName ?? username;
 
   const certDate = new Date(date);

client/src/client-only-routes/show-profile-or-four-oh-four.tsx

@@ -8,50 +8,43 @@ import Loader from '../components/helpers/loader';
 import Profile from '../components/profile/profile';
 import { fetchProfileForUser } from '../redux/actions';
 import {
-  usernameSelector,
-  userByNameSelector,
-  userProfileFetchStateSelector
+  userSelector,
+  userProfileFetchStateSelector,
+  createUserByNameSelector
 } from '../redux/selectors';
-import { User } from '../redux/prop-types';
+import type { User } from '../redux/prop-types';
 import { Socials } from '../components/profile/components/internet';
 
 interface ShowProfileOrFourOhFourProps {
   fetchProfileForUser: (username: string) => void;
   updateMyPortfolio: () => void;
   submitNewAbout: () => void;
   updateMySocials: (formValues: Socials) => void;
-  fetchState: {
-    pending: boolean;
-    complete: boolean;
-    errored: boolean;
-  };
   isSessionUser: boolean;
   maybeUser?: string;
-  requestedUser: User;
+  requestedUser: User | null;
   showLoading: boolean;
 }
 
-const createRequestedUserSelector =
-  () =>
-  (state: unknown, { maybeUser = '' }) =>
-    userByNameSelector(maybeUser.toLowerCase())(state) as User;
-const createIsSessionUserSelector =
+const makeMapStateToProps =
   () =>
-  (state: unknown, { maybeUser = '' }) =>
-    maybeUser.toLowerCase() === usernameSelector(state);
+  (state: unknown, { maybeUser = '' }) => {
+    const username = maybeUser.toLowerCase();
+    const requestedUser = (
+      createUserByNameSelector as (
+        maybeUser: string
+      ) => (state: unknown) => User | null
+    )(username)(state);
+    const sessionUser = userSelector(state) as User | null;
+    const isSessionUser = username === sessionUser?.username;
+    const fetchState = userProfileFetchStateSelector(state) as {
+      pending: boolean;
+    };
 
-const makeMapStateToProps =
-  () => (state: unknown, props: ShowProfileOrFourOhFourProps) => {
-    const requestedUserSelector = createRequestedUserSelector();
-    const isSessionUserSelector = createIsSessionUserSelector();
-    const fetchState = userProfileFetchStateSelector(
-      state
-    ) as ShowProfileOrFourOhFourProps['fetchState'];
     return {
-      requestedUser: requestedUserSelector(state, props),
-      isSessionUser: isSessionUserSelector(state, props),
-      showLoading: fetchState.pending,
-      fetchState
+      requestedUser,
+      isSessionUser,
+      showLoading: fetchState.pending
     };
   };
 
@@ -70,10 +63,8 @@ function ShowProfileOrFourOhFour({
 }: ShowProfileOrFourOhFourProps) {
   useEffect(() => {
     // If the user is not already in the store, fetch it
-    if (isEmpty(requestedUser)) {
-      if (maybeUser) {
-        fetchProfileForUser(maybeUser);
-      }
+    if (isEmpty(requestedUser) && maybeUser) {
+      fetchProfileForUser(maybeUser);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

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

@@ -26,7 +26,7 @@ import {
   isSignedInSelector,
   userTokenSelector
 } from '../redux/selectors';
-import { User } from '../redux/prop-types';
+import type { User } from '../redux/prop-types';
 import {
   submitNewAbout,
   updateMyHonesty,
@@ -50,7 +50,7 @@ type ShowSettingsProps = {
   toggleKeyboardShortcuts: (keyboardShortcuts: boolean) => void;
   updateIsHonest: () => void;
   updateQuincyEmail: (isSendQuincyEmail: boolean) => void;
-  user: User;
+  user: User | null;
   verifyCert: typeof verifyCert;
   path?: string;
   userToken: string | null;
@@ -61,7 +61,12 @@ const mapStateToProps = createSelector(
   userSelector,
   isSignedInSelector,
   userTokenSelector,
-  (showLoading: boolean, user: User, isSignedIn, userToken: string | null) => ({
+  (
+    showLoading: boolean,
+    user: User | null,
+    isSignedIn,
+    userToken: string | null
+  ) => ({
     showLoading,
     user,
     isSignedIn,
@@ -91,53 +96,57 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
     toggleSoundMode,
     toggleKeyboardShortcuts,
     resetEditorLayout,
-    user: {
-      completedChallenges,
-      email,
-      is2018DataVisCert,
-      isApisMicroservicesCert,
-      isJsAlgoDataStructCert,
-      isBackEndCert,
-      isDataVisCert,
-      isFrontEndCert,
-      isInfosecQaCert,
-      isQaCertV7,
-      isInfosecCertV7,
-      isFrontEndLibsCert,
-      isFullStackCert,
-      isRespWebDesignCert,
-      isSciCompPyCertV7,
-      isDataAnalysisPyCertV7,
-      isMachineLearningPyCertV7,
-      isRelationalDatabaseCertV8,
-      isCollegeAlgebraPyCertV8,
-      isFoundationalCSharpCertV8,
-      isJsAlgoDataStructCertV8,
-      isEmailVerified,
-      isHonest,
-      sendQuincyEmail,
-      username,
-      keyboardShortcuts
-    },
+    user,
     navigate,
     showLoading,
     updateQuincyEmail,
     updateIsHonest,
     verifyCert,
     userToken
   } = props;
+
   const isSignedInRef = useRef(isSignedIn);
 
   const examTokenFlag = useFeatureIsOn('exam-token-widget');
 
-  if (showLoading) {
+  if (showLoading || !user) {
     return <Loader fullScreen={true} />;
   }
 
   if (!isSignedInRef.current) {
     navigate(`${apiLocation}/signin`);
     return <Loader fullScreen={true} />;
   }
+
+  const {
+    completedChallenges,
+    email,
+    is2018DataVisCert,
+    isApisMicroservicesCert,
+    isJsAlgoDataStructCert,
+    isBackEndCert,
+    isDataVisCert,
+    isFrontEndCert,
+    isInfosecQaCert,
+    isQaCertV7,
+    isInfosecCertV7,
+    isFrontEndLibsCert,
+    isFullStackCert,
+    isRespWebDesignCert,
+    isSciCompPyCertV7,
+    isDataAnalysisPyCertV7,
+    isMachineLearningPyCertV7,
+    isRelationalDatabaseCertV8,
+    isCollegeAlgebraPyCertV8,
+    isFoundationalCSharpCertV8,
+    isJsAlgoDataStructCertV8,
+    isEmailVerified,
+    isHonest,
+    sendQuincyEmail,
+    username,
+    keyboardShortcuts
+  } = user;
+
   const sound = (store.get('fcc-sound') as boolean) ?? false;
   const editorLayout = (store.get('challenge-layout') as boolean) ?? false;
   return (

client/src/client-only-routes/show-update-email.tsx

@@ -27,6 +27,7 @@ import { isSignedInSelector, userSelector } from '../redux/selectors';
 import { hardGoTo as navigate } from '../redux/actions';
 import { updateMyEmail } from '../redux/settings/actions';
 import { maybeEmailRE } from '../utils';
+import type { User } from '../redux/prop-types';
 
 const { apiLocation } = envData;
 
@@ -41,11 +42,8 @@ interface ShowUpdateEmailProps {
 const mapStateToProps = createSelector(
   userSelector,
   isSignedInSelector,
-  (
-    { email, emailVerified }: { email: string; emailVerified: boolean },
-    isSignedIn
-  ) => ({
-    isNewEmail: !email || emailVerified,
+  (user: User | null, isSignedIn) => ({
+    isNewEmail: !user?.email || user.emailVerified,
     isSignedIn
   })
 );

client/src/components/Donation/donate-form.tsx

@@ -25,7 +25,7 @@ import {
   themeSelector
 } from '../../redux/selectors';
 import { LocalStorageThemes, DonateFormState } from '../../redux/types';
-import type { CompletedChallenge } from '../../redux/prop-types';
+import type { CompletedChallenge, User } from '../../redux/prop-types';
 import { CENTS_IN_DOLLAR, formattedAmountLabel } from './utils';
 import DonateCompletion from './donate-completion';
 import PatreonButton from './patreon-button';
@@ -62,7 +62,7 @@ type PostCharge = (data: {
 type DonateFormProps = {
   postCharge: PostCharge;
   defaultTheme?: LocalStorageThemes;
-  email: string;
+  email?: string;
   handleProcessing?: () => void;
   editAmount?: () => void;
   selectedDonationAmount?: DonationAmount;
@@ -91,15 +91,15 @@ const mapStateToProps = createSelector(
     isSignedIn: DonateFormProps['isSignedIn'],
     isDonating: DonateFormProps['isDonating'],
     donationFormState: DonateFormState,
-    { email }: { email: string },
+    user: User | null,
     completedChallenges: CompletedChallenge[],
     theme: LocalStorageThemes
   ) => ({
     isSignedIn,
     isDonating,
     showLoading,
     donationFormState,
-    email,
+    email: user?.email,
     completedChallenges,
     theme
   })