120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import { Card, Container, Image } from "react-bootstrap";
|
|
import "./Group.css";
|
|
import EditModal from "../EditModals/EditModal";
|
|
import { useEffect, useState } from "react";
|
|
import EditBioForm from "../Forms/Bio/BioForm";
|
|
import { faPen } from "@fortawesome/free-solid-svg-icons";
|
|
import EditButton from "../Buttons/EditButton/EditButton";
|
|
import LivestreamPlayer from "../LivestreamPlayer/LivestreamPlayer";
|
|
import cld from "../Cld/CloudinaryConfig";
|
|
|
|
export class GroupObj {
|
|
id: number;
|
|
name: string;
|
|
bio: string;
|
|
livestream_id: string;
|
|
livestream_program_cld_id?: string;
|
|
|
|
constructor(
|
|
id: number,
|
|
name: string,
|
|
bio: string,
|
|
livestream_id: string,
|
|
livestream_program_cld_id?: string,
|
|
) {
|
|
this.id = id;
|
|
this.name = name;
|
|
this.bio = bio;
|
|
this.livestream_id = livestream_id;
|
|
this.livestream_program_cld_id = livestream_program_cld_id;
|
|
}
|
|
}
|
|
|
|
interface GroupProps {
|
|
group?: GroupObj;
|
|
onBioChange: () => void;
|
|
setGroup: React.Dispatch<React.SetStateAction<GroupObj | undefined>>;
|
|
token: string;
|
|
}
|
|
|
|
function Group(props: GroupProps) {
|
|
const [modalShow, setModalShow] = useState(false);
|
|
const [programId, setProgramId] = useState<string | undefined>(undefined);
|
|
const [programUrl, setProgramUrl] = useState<string | undefined>(undefined);
|
|
|
|
const group = props.group;
|
|
|
|
useEffect(() => {
|
|
if (group) {
|
|
setProgramId(group.livestream_program_cld_id);
|
|
}
|
|
if (programId) {
|
|
setProgramUrl(cld.image(programId).toURL());
|
|
}
|
|
}, [group, programId]);
|
|
|
|
if (!group) {
|
|
return null;
|
|
}
|
|
|
|
const EditTitle = `Edit ${group.name}'s Bio`;
|
|
|
|
const EditIcon = (
|
|
<Container>
|
|
<EditButton
|
|
setModalShow={setModalShow}
|
|
faIcon={faPen}
|
|
actionName=" Group"
|
|
/>
|
|
<EditModal
|
|
show={modalShow}
|
|
onHide={() => setModalShow(false)}
|
|
title={EditTitle}
|
|
entity={group}
|
|
form={
|
|
<EditBioForm
|
|
entity={group}
|
|
hideModal={setModalShow}
|
|
onBioChange={props.onBioChange}
|
|
setGroup={props.setGroup}
|
|
token={props.token}
|
|
livestream_id={group.livestream_id}
|
|
/>
|
|
}
|
|
/>
|
|
</Container>
|
|
);
|
|
|
|
return (
|
|
<section id="about">
|
|
<Container className="d-flex align-items-center justify-content-center text-center">
|
|
<Card className="group-info">
|
|
<Card.Body>
|
|
<Card.Title>
|
|
<h1>{group.name}</h1>
|
|
</Card.Title>
|
|
{group.livestream_id && (
|
|
<LivestreamPlayer livestreamId={group.livestream_id} />
|
|
)}
|
|
{group.livestream_id && group.livestream_program_cld_id && (
|
|
<Container className="d-flex align-items-center justify-content-center flex-column">
|
|
<a href={programUrl} target="_blank">
|
|
<Image
|
|
src={programUrl}
|
|
className="img-fluid"
|
|
alt="A of the current livestream"
|
|
/>
|
|
</a>
|
|
</Container>
|
|
)}
|
|
{props.token && EditIcon}
|
|
<Card.Text className="lead group-bio">{group.bio}</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Group;
|