fix(ui): Fix crash when viewing an invalid certificate (#43681)

* fix: remove empty object literal creation causing #43224

* fix: initialize userByName selector using empty object from initialState to keep the same reference instead

* fix(lang): added translation for invalid certificate

client/i18n/locales/english/translations.json

@@ -463,7 +463,8 @@
     "no-account": "No {{website}} account associated",
     "unlink-success": "You've successfully unlinked your {{website}}",
     "provide-username": "Check if you have provided a username and a report",
-    "report-sent": "A report was sent to the team with {{email}} in copy"
+    "report-sent": "A report was sent to the team with {{email}} in copy",
+    "certificate-missing": "The certification you tried to view does not exist"
   },
   "validation": {
     "max-characters": "There is a maximum limit of 288 characters, you have {{charsLeft}} left",

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

@@ -27,6 +27,7 @@ import {
 } from '../redux';
 import { UserType } from '../redux/prop-types';
 import { certMap } from '../resources/cert-and-project-map';
+import certificateMissingMessage from '../utils/certificate-missing-message';
 import reallyWeirdErrorMessage from '../utils/really-weird-error-message';
 import standardErrorMessage from '../utils/standard-error-message';
 
@@ -205,7 +206,7 @@ const ShowCertification = (props: IShowCertificationProps): JSX.Element => {
   } = props;
 
   if (!isValidCert) {
-    createFlashMessage(standardErrorMessage);
+    createFlashMessage(certificateMissingMessage);
     return <RedirectHome />;
   }
 

client/src/redux/index.js

@@ -229,8 +229,9 @@ export const shouldRequestDonationSelector = state => {
 
 export const userByNameSelector = username => state => {
   const { user } = state[ns];
-  // TODO: Why return a string or empty objet literal?
-  return username in user ? user[username] : {};
+  // return initial state empty user empty object instead of empty
+  // object litteral to prevent components from re-rendering unnecessarily
+  return user[username] ?? initialState.user;
 };
 
 export const certificatesByNameSelector = username => state => {

client/src/utils/certificate-missing-message.ts

@@ -0,0 +1,6 @@
+const certificateMissingErrorMessage = {
+  type: 'danger',
+  message: 'flash.certificate-missing'
+};
+
+export default certificateMissingErrorMessage;