init commit,

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

@@ -0,0 +1,147 @@
+// REQ0044/near_by_page
+
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonPage,
+  IonButtons,
+  IonMenuButton,
+  IonGrid,
+  IonRow,
+  IonCol,
+  useIonRouter,
+  IonButton,
+  IonIcon,
+  IonPopover,
+  IonAvatar,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonSearchbar,
+  useIonModal,
+  IonInput,
+  RefresherEventDetail,
+  IonRefresher,
+  IonRefresherContent,
+} from '@ionic/react';
+import SpeakerItem from '../../components/SpeakerItem';
+import { Speaker } from '../../models/Speaker';
+import { Session } from '../../models/Schedule';
+import { connect } from '../../data/connect';
+import * as selectors from '../../data/selectors';
+import '../SpeakerList.scss';
+import { getEvents } from '../../api/getEvents';
+import { format } from 'date-fns';
+import { Event } from './types';
+import { chevronDownCircleOutline, heart, menuOutline } from 'ionicons/icons';
+import AboutPopover from '../../components/AboutPopover';
+import { SampleMember } from '../MemberProfile/SampleMember';
+import { getMembers } from '../../api/getMembers';
+import { Member } from '../MemberProfile/type';
+import Loading from '../../components/Loading';
+
+interface OwnProps {}
+
+interface StateProps {
+  nearbyMembers: Member[];
+}
+
+interface DispatchProps {}
+
+interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
+
+function MemberCell({ member }: { member: Member }) {
+  const router = useIonRouter();
+
+  return (
+    <>
+      <div style={{ display: 'flex', margin: '1rem', gap: '1rem' }}>
+        <IonAvatar>
+          <img alt="Silhouette of a person's head" src="https://images.unsplash.com/photo-1589419621083-1ead66c96fa7" />
+        </IonAvatar>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <div>{member.name}</div>
+            <div>{member.age}</div>
+            <div>{member.rank}</div>
+            <div>{member.verified}</div>
+          </div>
+          <div style={{ display: 'flex' }}>
+            <div>{member.hobbies[0]}, </div>
+            <div>{member.hobbies[1]}, </div>
+            <div>{member.hobbies[2]}</div>
+          </div>
+          <div>
+            {SampleMember.distance}, {SampleMember.location_area}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const MembersNearByList: React.FC<SpeakerListProps> = ({ nearbyMembers }) => {
+  const router = useIonRouter();
+
+  function handleMemberCellClick(id: string) {
+    router.push(`/profile/${id}`);
+  }
+
+  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.detail.complete();
+    }, 2000);
+  }
+
+  if (!nearbyMembers || nearbyMembers.length == 0) return <Loading />;
+
+  return (
+    <IonPage id="speaker-list">
+      <IonHeader translucent={true} className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="end">
+            {/* <IonMenuButton /> */}
+            <IonButton shape="round" id="open-modal" expand="block">
+              <IonIcon slot="icon-only" icon={menuOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>My Nearby</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen={true}>
+        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+          <IonRefresherContent pullingIcon={chevronDownCircleOutline} pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."></IonRefresherContent>
+        </IonRefresher>
+
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">My Nearby</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonList>
+          {nearbyMembers.map((member, idx) => (
+            <IonItem key={idx} button onClick={() => handleMemberCellClick(member.id.toString())}>
+              <MemberCell member={member}></MemberCell>
+            </IonItem>
+          ))}
+        </IonList>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default connect<OwnProps, StateProps, DispatchProps>({
+  mapStateToProps: (state) => ({
+    nearbyMembers: selectors.getNearbyMembers(state),
+  }),
+  component: React.memo(MembersNearByList),
+});