add functionality for embedded program

client/src/Group/Group.tsx

@@ -1,23 +1,32 @@
-import { Card, Container } from "react-bootstrap";
+import { Card, Container, Image } from "react-bootstrap";
 import "./Group.css";
 import EditModal from "../EditModals/EditModal";
-import { useState } from "react";
+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) {
+  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;
   }
 }
 
@@ -30,10 +39,23 @@ interface GroupProps {
 
 function Group(props: GroupProps) {
   const [modalShow, setModalShow] = useState(false);
-  if (!props.group) {
+  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 group = props.group;
 
   const EditTitle = `Edit ${group.name}'s Bio`;
 
@@ -65,7 +87,7 @@ function Group(props: GroupProps) {
 
   return (
     <section id="about">
-      <Container className="vh-100 d-flex align-items-center justify-content-center text-center">
+      <Container className="d-flex align-items-center justify-content-center text-center">
         <Card className="group-info">
           <Card.Body>
             <Card.Title>
@@ -74,6 +96,17 @@ function Group(props: GroupProps) {
             {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 PDF of the program fo the current livestream"
+                  />
+                </a>
+              </Container>
+            )}
             {props.token && EditIcon}
             <Card.Text className="lead group-bio">{group.bio}</Card.Text>
           </Card.Body>