add functionality for embedded program

client/src/App.css

@@ -30,6 +30,11 @@ body {
   }
 }
 
+section {
+  margin-top: 10em;
+  margin-bottom: 10em;
+}
+
 .btn-primary {
   background-color: var(--group-info-color);
   border-color: var(--group-info-color);

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>

client/src/Musicians/Musicians.css

@@ -6,5 +6,4 @@
 #musicians {
   padding-top: 70px;
   margin-top: -70px;
-  margin-bottom: 400px;
 }

client/src/Series/SeriesList.css

@@ -15,5 +15,4 @@ hr {
 #events {
   padding-top: 70px;
   margin-top: -70px;
-  margin-bottom: 400px;
 }

client/src/api.tsx

@@ -39,6 +39,7 @@ export const getRoot = async (): Promise<TheGrapefruitsDuoAPI> => {
       response.data.group.name,
       response.data.group.bio,
       response.data.group.livestream_id,
+      response.data.group.livestream_program_cld_id,
     ),
     response.data.musicians.map(
       (musician: MusicianObj) =>
@@ -110,6 +111,7 @@ export const getGroup = async (): Promise<GroupObj> => {
     response.data.name,
     response.data.bio,
     response.data.livestream_id,
+    response.data.livestream_program_cld_id,
   );
 };
 
@@ -152,10 +154,11 @@ export const patchGroup = async (
   livestream_id: string,
   name: string,
   user_token: string,
+  livestream_program_cld_id?: string,
 ): Promise<GroupObj> => {
   const response = await api.patch(
     `/group/`,
-    { id, bio, livestream_id, name },
+    { id, bio, livestream_id, name, livestream_program_cld_id },
     { headers: { Authorization: `Bearer ${user_token}` } },
   );
   return new GroupObj(
@@ -163,6 +166,7 @@ export const patchGroup = async (
     response.data.name,
     response.data.bio,
     response.data.livestream_id,
+    response.data.livestream_program_cld_id,
   );
 };