135 lines
3.2 KiB
TypeScript
135 lines
3.2 KiB
TypeScript
// 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;
|