"feat: update data APIs to fetch orders and events via fetch instead of axios, add Order and Event models, update selectors and reducers, add EventDetail page with joined members display"

03_source/mobile/src/pages/EventDetail/AvatarRow.tsx

@@ -0,0 +1,134 @@
+// REQ0042/event-detail
+//
+// PURPOSE:
+// - show avatar in a row
+//
+// RULES:
+// - T.B.A.
+//
+import React, { useEffect, useState } from 'react';
+import {
+  IonHeader,
+  IonToolbar,
+  IonContent,
+  IonPage,
+  IonButtons,
+  IonMenuButton,
+  IonButton,
+  IonIcon,
+  IonDatetime,
+  IonSelectOption,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonSelect,
+  IonPopover,
+  IonText,
+  IonFooter,
+  useIonRouter,
+  IonAvatar,
+  IonThumbnail,
+} from '@ionic/react';
+import './style.scss';
+import {
+  chevronBackOutline,
+  ellipsisHorizontal,
+  ellipsisVertical,
+  heart,
+  logoIonic,
+} from 'ionicons/icons';
+import AboutPopover from '../../components/AboutPopover';
+import { format, parseISO } from 'date-fns';
+import { TestContent } from './TestContent';
+import { Helloworld } from '../../api/Helloworld';
+import { getEventById } from '../../api/getEventById';
+import { connect } from '../../data/connect';
+import * as selectors from '../../data/selectors';
+import { Event } from '../../models/Event';
+import { RouteComponentProps } from 'react-router';
+
+const leftShift: number = 10;
+const thumbnailSize: number = 40;
+
+interface OwnProps extends RouteComponentProps {
+  event_detail?: Event;
+}
+
+interface StateProps {}
+
+interface DispatchProps {}
+
+interface EventDetailProps {
+  avatars: string[];
+}
+
+const AvatarRow: React.FC<{ avatars: string[] }> = ({ avatars }) => {
+  const router = useIonRouter();
+
+  const [showPopover, setShowPopover] = useState(false);
+  const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
+  const [location, setLocation] = useState<'madison' | 'austin' | 'chicago' | 'seattle'>('madison');
+  const [conferenceDate, setConferenceDate] = useState('2047-05-17T00:00:00-05:00');
+
+  const selectOptions = {
+    header: 'Select a Location',
+  };
+
+  const presentPopover = (e: React.MouseEvent) => {
+    setPopoverEvent(e.nativeEvent);
+    setShowPopover(true);
+  };
+
+  function displayDate(date: string, dateFormat: string) {
+    return format(parseISO(date), dateFormat);
+  }
+
+  const [eventDetail, setEventDetail] = useState<Event | null>(null);
+  useEffect(() => {
+    Helloworld();
+    getEventById('1').then(({ data }) => {
+      console.log({ data });
+      setEventDetail(data);
+    });
+  }, []);
+
+  function handleBackOnClick() {
+    router.goBack();
+  }
+
+  return (
+    <>
+      <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+        {avatars.slice(0, 3).map((m_avatar, idx) => (
+          <div
+            style={
+              idx == 0
+                ? {}
+                : {
+                    position: 'relative',
+                    width: `calc( ${thumbnailSize}px - ${leftShift}px )`,
+                    left: `-${leftShift}px`,
+                  }
+            }
+          >
+            <IonThumbnail
+              style={{
+                '--size': `${thumbnailSize}px`,
+                '--border-radius': `${thumbnailSize / 2}px`,
+                border: '3px solid white',
+              }}
+            >
+              <img alt="Silhouette of a person's head" src={m_avatar} />
+            </IonThumbnail>
+          </div>
+        ))}
+        <div style={{ marginLeft: '0.1rem', fontWeight: 'bold' }}>
+          {' '}
+          +{avatars.length - 3} going{' '}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AvatarRow;