init commit,

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

@@ -0,0 +1,204 @@
+// REQ0042/event-detail
+//
+// PURPOSE:
+// - Provides functionality view event detail
+//
+// 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,
+} 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';
+
+interface OwnProps extends RouteComponentProps {
+  event?: Event;
+}
+
+interface StateProps {}
+
+interface DispatchProps {}
+
+interface SpeakerDetailProps extends OwnProps, StateProps, DispatchProps {}
+
+interface AboutProps {}
+
+const EventDetail: React.FC<SpeakerDetailProps> = () => {
+  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);
+    });
+  }, []);
+
+  const router = useIonRouter();
+  function handleBackOnClick() {
+    router.goBack();
+  }
+
+  if (!eventDetail) return <>loading</>;
+
+  return (
+    <IonPage id="about-page">
+      <IonContent>
+        <IonHeader className="ion-no-border">
+          <IonToolbar>
+            <IonButtons slot="start">
+              {/* <IonMenuButton></IonMenuButton> */}
+              <IonButton shape="round" onClick={() => handleBackOnClick()}>
+                <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
+              </IonButton>
+            </IonButtons>
+            <IonButtons slot="end">
+              <IonButton onClick={presentPopover}>
+                <IonIcon
+                  slot="icon-only"
+                  ios={ellipsisHorizontal}
+                  md={ellipsisVertical}
+                ></IonIcon>
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <div className="about-header">
+          <div className="about-image madison" style={{ opacity: 1 }}></div>
+        </div>
+
+        <div>{eventDetail.avatar}</div>
+
+        <div>
+          <div>{format(new Date(eventDetail.eventDate), 'yyyy-MM-dd')}</div>
+          <h1>{eventDetail.title}</h1>
+
+          <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+            <div>members place holder</div>
+            <IonButton shape="round">More</IonButton>
+          </div>
+          <div
+            style={{
+              marginBottom: '1rem',
+              paddingTop: '1rem',
+              borderBottom: '1px solid black',
+            }}
+          ></div>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <div>{eventDetail.currency}</div>
+            <div>{eventDetail.price}</div>
+            per person
+          </div>
+
+          <div>{eventDetail.duration_m}</div>
+
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <div>{eventDetail.ageBottom}</div>
+            <div>{eventDetail.ageTop}</div>
+            <div>years old</div>
+          </div>
+
+          <div>{eventDetail.location}</div>
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <IonIcon icon={logoIonic}></IonIcon>
+            <div>40</div>
+
+            <IonIcon icon={logoIonic}></IonIcon>
+            <div>20</div>
+
+            <IonIcon icon={logoIonic}></IonIcon>
+            <div>20</div>
+          </div>
+        </div>
+      </IonContent>
+
+      <IonFooter>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            margin: '1rem',
+          }}
+        >
+          <IonButton expand="full" shape="round">
+            Join
+          </IonButton>
+        </div>
+      </IonFooter>
+
+      <IonPopover
+        isOpen={showPopover}
+        event={popoverEvent}
+        onDidDismiss={() => setShowPopover(false)}
+      >
+        <AboutPopover dismiss={() => setShowPopover(false)} />
+      </IonPopover>
+    </IonPage>
+  );
+};
+
+export default connect({
+  mapStateToProps: (state, ownProps) => ({
+    event: selectors.getEvent(state, ownProps),
+  }),
+  component: EventDetail,
+});