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

// 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,
  IonAvatar,
} from '@ionic/react';
import './style.scss';
import {
  accessibility,
  accessibilityOutline,
  chevronBackOutline,
  ellipsisHorizontal,
  ellipsisVertical,
  heart,
  locationOutline,
  locationSharp,
  logoIonic,
  man,
  manOutline,
  people,
  peopleOutline,
  timer,
  timerOutline,
  timerSharp,
  wallet,
  walletOutline,
  walletSharp,
  woman,
  womanOutline,
} 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';
import AvatarRow from './AvatarRow';

const leftShift: number = -25;

interface OwnProps extends RouteComponentProps {
  event_detail?: Event;
}

interface StateProps {}

interface DispatchProps {}

interface PageProps extends OwnProps, StateProps, DispatchProps {}

const showJoinedMembers = (joinMembers: Record<string, any>[]) => {
  const avatars = joinMembers.map((jm) => jm.avatar);

  console.log({ joinMembers });

  return (
    <>
      <AvatarRow avatars={avatars} />
      <IonButton style={{ '--padding-start': '20px', '--padding-end': '20px' }} shape="round">
        More
      </IonButton>
    </>
  );
};

const EventDetail: React.FC<PageProps> = ({ event_detail }) => {
  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 [totalJoinMembers, setTotalJoinMembers] = useState<number>(0);
  const [maleMembers, setMaleMembers] = useState<number>(0);
  const [femaleMembers, setFemaleMembers] = useState<number>(0);

  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);
  }

  useEffect(() => {
    if (event_detail) {
      setTotalJoinMembers(event_detail.joinMembers.length);
      setMaleMembers(event_detail.joinMembers.filter((m) => m.sex == 'M').length);
      setFemaleMembers(event_detail.joinMembers.filter((m) => m.sex == 'F').length);
    }
  }, [event_detail]);

  const [eventDetail, setEventDetail] = useState<Event | null>(null);
  useEffect(() => {
    Helloworld();
    getEventById('1').then(({ data }) => {
      console.log({ data });
      setEventDetail(data);
    });
  }, []);

  function handleBackOnClick() {
    router.goBack();
  }

  if (!event_detail) return <>loading</>;

  return (
    <IonPage id="event-detail-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, backgroundImage: `url(${event_detail.avatar[0]})` }}
          ></div>
        </div>

        <div style={{ paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
          <div>
            <div style={{ paddingTop: '0.25rem', color: '#007AFF' }}>
              {format(new Date(event_detail.eventDate), 'EEE, dd MMM yyyy, hh:mm a')}
            </div>
            <div style={{ paddingTop: '0.25rem', fontSize: '1.8rem', fontWeight: '500' }}>
              {event_detail.title}
            </div>

            <div
              style={{
                display: 'flex',
                gap: '1rem',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              {event_detail.joinMembers && event_detail.joinMembers.length > 0 ? (
                showJoinedMembers(event_detail.joinMembers)
              ) : (
                <>join fast !</>
              )}
            </div>
          </div>
        </div>

        <div
          style={{
            marginBottom: '1rem',
            paddingTop: '1rem',
            borderBottom: '1px solid gray',
          }}
        ></div>

        <div
          style={{
            paddingLeft: '0.5rem',
            paddingRight: '0.5rem',
            display: 'flex',
            flexDirection: 'column',
            gap: '1rem',
          }}
        >
          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
            <IonIcon icon={walletSharp} style={{ fontSize: '1.5rem' }}></IonIcon>
            <div style={{ display: 'flex', gap: '0.15rem', alignItems: 'center' }}>
              <div style={{ fontWeight: 'bold' }}>{event_detail.currency}</div>
              <div style={{ fontWeight: 'bold' }}>{event_detail.price}</div>
              per person
            </div>
          </div>

          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
            <IonIcon icon={timerSharp} style={{ fontSize: '1.5rem' }}></IonIcon>
            <div style={{ display: 'flex', gap: '0.15rem', alignItems: 'center' }}>
              {event_detail.duration_m}
              <div>mins</div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
            <IonIcon icon={people} style={{ fontSize: '1.5rem' }}></IonIcon>
            <div style={{ display: 'flex', gap: '0.15rem', alignItems: 'center' }}>
              <div>{event_detail.ageBottom}</div>~<div>{event_detail.ageTop}</div>
              <div>years old</div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
            <IonIcon icon={locationSharp} style={{ fontSize: '1.5rem' }}></IonIcon>
            {event_detail.location}
          </div>

          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
            <IonIcon
              icon={accessibility}
              style={{ fontSize: '1.5rem', color: 'rgb(139, 44, 245)' }}
            ></IonIcon>
            <div>{totalJoinMembers}</div>

            <IonIcon
              icon={man}
              style={{ fontSize: '1.5rem', color: 'rgb(67, 110, 205)' }}
            ></IonIcon>
            <div>{maleMembers}</div>

            <IonIcon
              icon={woman}
              style={{ fontSize: '1.5rem', color: 'rgb(235, 50, 35)' }}
            ></IonIcon>
            <div>{femaleMembers}</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) => {
    console.log({ t1: selectors.getEvents(state) });
    return {
      event_detail: selectors.getEvent(state, ownProps),
    };
  },
  component: EventDetail,
});