Merge pull request #186 from m2mathew/fix/send_correct_auth_user_id_t…

…o_firestore

Fix/send correct auth user id to firestore

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tmac-website",
   "description": "Website for the Texas Music Administrators Conference",
-  "version": "2.30.2",
+  "version": "2.30.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/m2mathew/tmac-website"

src/components/members/MemberContent/MemberInfo/MemberStatus.tsx

@@ -27,9 +27,11 @@ import MemberInfoCard from '../../../shared/MemberInfoCard';
 import PaypalButtonWrapper from '../../../register/paypal/paypal-button-wrapper';
 import PrintInvoiceUI from '../../../../pages/members/PrintInvoiceUI';
 import { appNameShort } from '../../../../utils/app-constants';
+import { TfaaAuthUser } from '../../../layout';
 
 // Local Typings
 interface Props {
+  currentAuthUser: TfaaAuthUser | null;
   currentMemberData: TfaaMemberData | null;
 }
 
@@ -103,7 +105,10 @@ const StyledStrong = styled.strong(({ theme }) => ({
 }));
 
 // Component Definition
-const MemberStatus: React.FC<Props> = ({ currentMemberData }) => {
+const MemberStatus: React.FC<Props> = ({
+  currentAuthUser,
+  currentMemberData,
+}) => {
   const isRegisteredForCurrentYear = Boolean(currentMemberData);
 
   // If the member paid by check, the TFAA Executive Secretary will manually
@@ -128,14 +133,16 @@ const MemberStatus: React.FC<Props> = ({ currentMemberData }) => {
       receiptId: currentMemberData?.receiptId ?? 0,
     };
 
+    const userId = `${currentAuthUser?.email}-${currentAuthUser?.uid}`;
+
     // Update the member's payment data in the Firestore database
     // This shape should be the same as register-membmer-payment
     //  in the handleCompleteMemberPaymentStep function
     try {
       await doUpdateEntry(
         updatedMemberData,
         FIRESTORE_MEMBER_COLLECTION,
-        currentMemberData?.userId,
+        userId,
       );
     } catch (error) {
       console.error('Error while updating after a successful payment', error);

src/components/members/MemberContent/MemberInfo/index.tsx

@@ -14,10 +14,12 @@ import MemberContactInfo from './MemberContactInfo';
 import MemberRegistrationTasks from './MemberRegistrationTasks';
 import MemberStatus from './MemberStatus';
 import AdminActions from './AdminActions';
+import { TfaaAuthUser } from '../../../layout';
 
 // Local Typings
 interface Props {
   authUserEmail: string | undefined;
+  currentAuthUser: TfaaAuthUser | null;
   currentMemberData: TfaaMemberData | null;
   isAdmin: boolean;
   onUpdateShouldRefetchUserList: ((shouldRefetchUserList: boolean) => void) | null;
@@ -60,6 +62,7 @@ const StyledRoot = styled.div(({ theme }) => ({
 // Component Definition
 const MemberInfo: React.FC<Props> = ({
   authUserEmail,
+  currentAuthUser,
   currentMemberData,
   onUpdateShouldRefetchUserList,
 }) => {
@@ -71,7 +74,10 @@ const MemberInfo: React.FC<Props> = ({
     <StyledRoot>
       <Motifs small />
 
-      <MemberStatus currentMemberData={currentMemberData} />
+      <MemberStatus
+        currentAuthUser={currentAuthUser}
+        currentMemberData={currentMemberData}
+      />
 
       {currentMemberData && (
         <MemberContactInfo

src/components/members/MemberContent/index.tsx

@@ -36,11 +36,10 @@ const MemberContent: React.FC<Props> = ({ currentAuthUser }) => {
   useEffect(() => {
     if (currentAuthUser && allMembersData && allMembersData.length > 0 && !currentMemberData) {
       const currentMember = allMembersData.find(
-        // We used to use authUser.uid as the unique key in the Firestore
-        // Now we use authUser.email
-        // We have to search for both for backwards compatibility
+        // We use a combination of email and uid to uniquely identify a user.
+        // The email part makes it easier to find a user in the database.
         (user) => {
-          return user.userId === currentAuthUser.uid || user.userId === currentAuthUser.email;
+          return user.userId === `${currentAuthUser.email}-${currentAuthUser.uid}`;
         });
 
       setCurrentMemberData(currentMember ?? null);
@@ -65,6 +64,7 @@ const MemberContent: React.FC<Props> = ({ currentAuthUser }) => {
 
       <MemberInfo
         authUserEmail={currentAuthUser?.email || currentMemberData?.Email}
+        currentAuthUser={currentAuthUser}
         currentMemberData={currentMemberData}
         isAdmin={isAdmin}
         onUpdateShouldRefetchUserList={handleUpdateShouldRefetchUserList}

src/components/register/SponsorRegisterContent.tsx

@@ -217,6 +217,8 @@ const SponsorRegisterContent: React.FC = () => {
 
   const hasCompletedAllSponsorSteps = completedSponsorSteps?.length >= 3;
 
+  const authenticatedUserId = `${currentAuthUser?.email}-${currentAuthUser?.uid}`;
+
   /* Children change depending on which step is active */
   return (
     <StyledRoot>
@@ -237,7 +239,7 @@ const SponsorRegisterContent: React.FC = () => {
         )}
         {activeStep === 1 && (
           <RegisterSponsorFormWrapper
-            authenticatedUserId={`${currentAuthUser?.email}-${currentAuthUser?.uid}`}
+            authenticatedUserId={authenticatedUserId}
             initialSponsorFormValues={INITIAL_SPONSOR_FORM_VALUES}
             onCompleteSponsorStep={handleCompleteSponsorStep}
             onUpdateSponsorForm={handleUpdateSponsorForm}
@@ -246,7 +248,7 @@ const SponsorRegisterContent: React.FC = () => {
         )}
         {[2, 3].includes(activeStep) && (
           <RegisterSponsorPayment
-            authenticatedUserId={currentAuthUser?.uid}
+            authenticatedUserId={authenticatedUserId}
             onUpdateSponsorForm={handleUpdateSponsorForm}
             sponsorForm={sponsorForm}
           />