feat: implement party user authentication system with signin/signup routes, JWT token validation, and frontend integration including mobile route configuration and API service updates

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

@@ -57,6 +57,7 @@ import PATHS from '../../PATHS';
 import { getProfileById } from '../../api/getProfileById';
 import { defaultMember, Member } from '../MemberProfile/type';
 import NotLoggedIn from './NotLoggedIn';
+import { UserState } from '../../data/user/user.state';
 
 interface OwnProps {}
 
@@ -65,13 +66,20 @@ interface StateProps {
   //
   speakers: Speaker[];
   speakerSessions: { [key: string]: Session[] };
+  //
+  partyUserState: UserState;
 }
 
 interface DispatchProps {}
 
-interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
+interface PageProps extends OwnProps, StateProps, DispatchProps {}
 
-const MyProfilePage: React.FC<SpeakerListProps> = ({ speakers, speakerSessions, isLoggedin }) => {
+const MyProfilePage: React.FC<PageProps> = ({
+  speakers,
+  speakerSessions,
+  isLoggedin,
+  partyUserState,
+}) => {
   if (!isLoggedin) return <NotLoggedIn />;
 
   const [profile, setProfile] = useState<Member>(defaultMember);
@@ -97,13 +105,6 @@ const MyProfilePage: React.FC<SpeakerListProps> = ({ speakers, speakerSessions,
     }, 2000);
   }
 
-  useEffect(() => {
-    getProfileById('2').then(({ data }) => {
-      console.log({ data });
-      setProfile(data);
-    });
-  }, []);
-
   if (!profile) return <>loading</>;
 
   return (
@@ -150,21 +151,24 @@ const MyProfilePage: React.FC<SpeakerListProps> = ({ speakers, speakerSessions,
                 <IonAvatar>
                   <img
                     alt="Silhouette of a person's head"
-                    src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc"
+                    src={partyUserState.avatarUrl ? partyUserState.avatarUrl : ''}
                   />
                 </IonAvatar>
                 <div style={{ flexGrow: 1 }}>
                   <div
                     style={{
-                      //
                       display: 'flex',
                       gap: '1rem',
                       alignItems: 'center',
                     }}
                   >
-                    <div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>{profile.name}</div>
-                    <div style={{ fontSize: '0.8rem' }}>{profile.rank}</div>
-                    <div style={{ fontSize: '0.8rem' }}>{profile.verified}</div>
+                    <div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+                      {partyUserState.name}
+                    </div>
+                    <div style={{ fontSize: '0.8rem' }}>{partyUserState.rank}</div>
+                    <div style={{ fontSize: '0.8rem' }}>
+                      {partyUserState.isVerified ? 'verified' : 'no'}
+                    </div>
                   </div>
                 </div>
                 <div>
@@ -337,6 +341,8 @@ export default connect<OwnProps, StateProps, DispatchProps>({
     speakers: selectors.getSpeakers(state),
     speakerSessions: selectors.getSpeakerSessions(state),
     isLoggedin: state.user.isLoggedin,
+    //
+    partyUserState: selectors.getPartyUserState(state),
   }),
   component: React.memo(MyProfilePage),
 });