basic frontend and backend functionality. Need to test with actual livestream

client/src/Forms/Bio/BioForm.tsx

@@ -11,10 +11,12 @@ interface EditBioFormProps {
   setGroup?: React.Dispatch<React.SetStateAction<GroupObj | undefined>>;
   setMusician?: React.Dispatch<React.SetStateAction<MusicianObj>>;
   token: string;
+  livestream_id?: string;
 }
 
 function EditBioForm(props: EditBioFormProps) {
   const [formBio, setFormBio] = useState<string>(props.entity.bio);
+  const [formLivestreamId, setFormLivestreamId] = useState<string | undefined>(props.livestream_id)
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
 
@@ -23,6 +25,11 @@ function EditBioForm(props: EditBioFormProps) {
     setCanSubmit(true);
   };
 
+  const handleLivestreamChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setFormLivestreamId(event.target.value);
+    setCanSubmit(true);
+  }
+
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
     if (props.entity instanceof MusicianObj) {
@@ -53,7 +60,6 @@ function EditBioForm(props: EditBioFormProps) {
         }
       })
       .catch((error) => {
-        console.error(error);
         setError("Failed to update bio: " + error.response.data.detail);
       });
   };
@@ -62,7 +68,8 @@ function EditBioForm(props: EditBioFormProps) {
     accessToken: string,
     group: GroupObj,
   ): Promise<void> => {
-    patchGroup(group.id, formBio, group.name, accessToken)
+    const livestream_id = formLivestreamId ? formLivestreamId : "";
+    patchGroup(group.id, formBio, livestream_id, group.name, accessToken)
       .then((patchedGroup) => {
         if (props.setGroup) {
           props.setGroup(patchedGroup);
@@ -86,6 +93,26 @@ function EditBioForm(props: EditBioFormProps) {
 
   return (
     <Form onSubmit={handleSubmit}>
+      {/* need to account for empty string, which is falsy but the field should still show */}
+      {props.livestream_id != undefined && (
+        <Form.Group controlId="formLivestreamId">
+          <p className="text-muted">
+            A livestream id is the part of a youtube url following "v=".
+            For example, "ncyl7cTU9k8" but without the quotations.
+            Don't mess it up. <br></br>
+            To remove an embedded livestream, just clear this field and submit the form.
+          </p>
+          <Form.Label>Livestream ID:</Form.Label>
+          <Form.Control
+            as="textarea"
+            value={formLivestreamId}
+            rows={1}
+            onChange={handleLivestreamChange}
+            placeholder="ncyl7cTU9k8"
+          />
+
+        </Form.Group>
+      )}
       <Form.Group controlId="formBio">
         <Form.Label>Bio</Form.Label>
         <Form.Control