"feat: enhance user authentication flow with loading state, improved reducer handling, and login/logout actions"

03_source/mobile/src/pages/MyProfile/index.tsx

@@ -44,7 +44,14 @@ import '../SpeakerList.scss';
 import { getEvents } from '../../api/getEvents';
 import { format } from 'date-fns';
 import { Event } from './types';
-import { alertOutline, chevronDownCircleOutline, createOutline, heart, menuOutline, settingsOutline } from 'ionicons/icons';
+import {
+  alertOutline,
+  chevronDownCircleOutline,
+  createOutline,
+  heart,
+  menuOutline,
+  settingsOutline,
+} from 'ionicons/icons';
 import AboutPopover from '../../components/AboutPopover';
 import paths from '../../paths';
 import { getProfileById } from '../../api/getProfileById';
@@ -54,6 +61,8 @@ import NotLoggedIn from './NotLoggedIn';
 interface OwnProps {}
 
 interface StateProps {
+  isLoggedin: boolean;
+  //
   speakers: Speaker[];
   speakerSessions: { [key: string]: Session[] };
 }
@@ -62,7 +71,9 @@ interface DispatchProps {}
 
 interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
 
-const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) => {
+const MyProfilePage: React.FC<SpeakerListProps> = ({ speakers, speakerSessions, isLoggedin }) => {
+  if (!isLoggedin) return <NotLoggedIn />;
+
   const [profile, setProfile] = useState<Member>(defaultMember);
 
   const [showPopover, setShowPopover] = useState(false);
@@ -94,7 +105,6 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
   }, []);
 
   if (!profile) return <>loading</>;
-  if (profile.id == -1) return <NotLoggedIn />;
 
   return (
     <IonPage id="speaker-list">
@@ -112,7 +122,12 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
 
       <IonContent fullscreen={true}>
         <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
-          <IonRefresherContent pullingIcon={chevronDownCircleOutline} pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."></IonRefresherContent>
+          <IonRefresherContent
+            pullingIcon={chevronDownCircleOutline}
+            pullingText="Pull to refresh"
+            refreshingSpinner="circles"
+            refreshingText="Refreshing..."
+          ></IonRefresherContent>
         </IonRefresher>
 
         <IonHeader collapse="condense" className="ion-no-border">
@@ -133,7 +148,10 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
             >
               <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
                 <IonAvatar>
-                  <img alt="Silhouette of a person's head" src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc" />
+                  <img
+                    alt="Silhouette of a person's head"
+                    src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc"
+                  />
                 </IonAvatar>
                 <div style={{ flexGrow: 1 }}>
                   <div
@@ -150,7 +168,12 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
                   </div>
                 </div>
                 <div>
-                  <IonButton shape="round" fill="clear" size="large" onClick={handleNotImplementedClick}>
+                  <IonButton
+                    shape="round"
+                    fill="clear"
+                    size="large"
+                    onClick={handleNotImplementedClick}
+                  >
                     <IonIcon slot="icon-only" icon={createOutline}></IonIcon>
                   </IonButton>
                 </div>
@@ -179,7 +202,12 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
                 <div style={{ fontWeight: 'bold', fontSize: '1.1rem' }}>Membership</div>
                 <div>7 of the exclusive privileges</div>
                 <div>
-                  <IonButton expand="full" shape="round" size="large" onClick={handleNotImplementedClick}>
+                  <IonButton
+                    expand="full"
+                    shape="round"
+                    size="large"
+                    onClick={handleNotImplementedClick}
+                  >
                     Unlock
                   </IonButton>
                 </div>
@@ -237,7 +265,12 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
       </IonContent>
 
       {/* REQ0079/event-filter */}
-      <IonModal ref={modal} trigger="my-profile-open-modal" initialBreakpoint={0.5} breakpoints={[0, 0.25, 0.5, 0.75]}>
+      <IonModal
+        ref={modal}
+        trigger="my-profile-open-modal"
+        initialBreakpoint={0.5}
+        breakpoints={[0, 0.25, 0.5, 0.75]}
+      >
         <IonContent className="ion-padding">
           <div
             style={{
@@ -303,6 +336,7 @@ export default connect<OwnProps, StateProps, DispatchProps>({
   mapStateToProps: (state) => ({
     speakers: selectors.getSpeakers(state),
     speakerSessions: selectors.getSpeakerSessions(state),
+    isLoggedin: state.user.isLoggedin,
   }),
-  component: React.memo(MyProfile),
+  component: React.memo(MyProfilePage),
 });