[IDOL, shoutouts] - edit shoutouts

backend/src/API/shoutoutAPI.ts

@@ -45,6 +45,24 @@ export const hideShoutout = async (
   await shoutoutsDao.updateShoutout({ ...shoutout, hidden: hide });
 };
 
+export const editShoutout = async (
+  uuid: string,
+  newMessage: string,
+  user: IdolMember
+): Promise<Shoutout> => {
+  const shoutout = await shoutoutsDao.getShoutout(uuid);
+  if (!shoutout) {
+    throw new NotFoundError(`Shoutout with uuid: ${uuid} does not exist!`);
+  }
+  if (shoutout.giver.email !== user.email && !(await PermissionsManager.isLeadOrAdmin(user))) {
+    throw new PermissionError(
+      `User with email: ${user.email} is not authorized to edit this shoutout!`
+    );
+  }
+  const updatedShoutout = { ...shoutout, message: newMessage };
+  return shoutoutsDao.updateShoutout(updatedShoutout);
+};
+
 export const deleteShoutout = async (uuid: string, user: IdolMember): Promise<void> => {
   const shoutout = await shoutoutsDao.getShoutout(uuid);
   if (!shoutout) {

frontend/src/API/ShoutoutsAPI.ts

@@ -48,6 +48,26 @@ export default class ShoutoutsAPI {
     return APIWrapper.put(`${backendURL}/shoutout`, { uuid, hide }).then((res) => res.data);
   }
 
+  public static updateShoutout(
+    uuid: string,
+    shoutout: Partial<Shoutout>
+  ): Promise<ShoutoutResponseObj> {
+    return APIWrapper.put(`${backendURL}/shoutout/${uuid}`, shoutout).then((res) => res.data);
+  }
+
+  public static editShoutout(uuid: string, message: string): Promise<ShoutoutResponseObj> {
+    return APIWrapper.put(`${backendURL}/shoutout/${uuid}`, { message }).then((res) => {
+      if (res.data.error) {
+        Emitters.generalError.emit({
+          headerMsg: "Couldn't edit shoutout",
+          contentMsg: `Error was: ${res.data.error}`
+        });
+        return { error: res.data.error };
+      }
+      return res.data;
+    });
+  }
+
   public static async deleteShoutout(uuid: string): Promise<void> {
     await APIWrapper.delete(`${backendURL}/shoutout/${uuid}`);
   }

frontend/src/components/Forms/ShoutoutsPage/ShoutoutCard.module.css

@@ -29,12 +29,22 @@
   display: inline-block;
   padding-left: 1.5rem;
   padding-bottom: 1rem;
-  align-self: left;
 }
 
 .shoutoutDelete {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
+
+.shoutoutActions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1.5rem;
+  margin-top: 1.0rem;
+  margin-right: 1.0rem;
+  margin-bottom: 1.0rem;
+}

frontend/src/components/Forms/ShoutoutsPage/ShoutoutCard.tsx

@@ -1,30 +1,86 @@
-import { Card } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import { Button, Card, Form, Icon, Modal, TextArea } from 'semantic-ui-react';
+import ShoutoutsAPI from '../../../API/ShoutoutsAPI';
 import ShoutoutDeleteModal from '../../Modals/ShoutoutDeleteModal';
+import { Emitters } from '../../../utils';
 import styles from './ShoutoutCard.module.css';
 
-const ShoutoutCard = (props: {
-  shoutout: Shoutout;
-  setGivenShoutouts: React.Dispatch<React.SetStateAction<Shoutout[]>>;
-}): JSX.Element => {
-  const { shoutout, setGivenShoutouts } = props;
+const ShoutoutCard = ({ shoutout, setGivenShoutouts }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedMessage, setEditedMessage] = useState(shoutout.message);
 
-  const fromString = shoutout.isAnon
-    ? 'From: Anonymous'
-    : `From: ${shoutout.giver?.firstName} ${shoutout.giver?.lastName}`;
-  const dateString = `${new Date(shoutout.timestamp).toDateString()}`;
+  const handleEditShoutout = () => {
+    ShoutoutsAPI.editShoutout(shoutout.uuid, editedMessage).then((response) => {
+      if (!response.error) {
+        setGivenShoutouts((prevShoutouts) =>
+          prevShoutouts.map((s) =>
+            s.uuid === shoutout.uuid ? { ...s, message: editedMessage } : s
+          )
+        );
+        Emitters.generalSuccess.emit({
+          headerMsg: 'Success!',
+          contentMsg: 'The shoutout message updated successfully.'
+        });
+        setIsEditing(false);
+      } else {
+        Emitters.generalError.emit({
+          headerMsg: 'Error',
+          contentMsg: `The shoutout message failed to update...: ${response.error}`
+        });
+      }
+    });
+  };
 
   return (
     <Card className={styles.shoutoutCardContainer}>
       <Card.Group widths="equal" className={styles.shoutoutCardDetails}>
         <Card.Content header={`To: ${shoutout.receiver}`} className={styles.shoutoutTo} />
-        <Card.Content className={styles.shoutoutDate} content={dateString} />
-      </Card.Group>
-      <Card.Group widths="equal" className={styles.shoutoutDelete}>
-        <Card.Meta className={styles.shoutoutFrom} content={fromString} />
-        <ShoutoutDeleteModal uuid={shoutout.uuid} setGivenShoutouts={setGivenShoutouts} />
+        <Card.Content
+          className={styles.shoutoutDate}
+          content={new Date(shoutout.timestamp).toDateString()}
+        />
       </Card.Group>
+      <div className={styles.shoutoutActions}>
+        <Card.Meta
+          className={styles.shoutoutFrom}
+          content={
+            shoutout.isAnon
+              ? 'From: Anonymous'
+              : `From: ${shoutout.giver.firstName} ${shoutout.giver.lastName}`
+          }
+        />
+        <div>
+          <ShoutoutDeleteModal uuid={shoutout.uuid} setGivenShoutouts={setGivenShoutouts} />
+          <Button icon onClick={() => setIsEditing(true)}>
+            <Icon name="edit" />
+          </Button>
+        </div>
+      </div>
       <Card.Content description={shoutout.message} />
+      <Modal open={isEditing} onClose={() => setIsEditing(false)}>
+        <Modal.Header>Edit Shoutout</Modal.Header>
+        <Modal.Content>
+          <Form>
+            <Form.Field>
+              <label>Message</label>
+              <TextArea
+                value={editedMessage}
+                onChange={(e, { value }) => setEditedMessage(value)}
+              />
+            </Form.Field>
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={() => setIsEditing(false)} negative>
+            Cancel
+          </Button>
+          <Button onClick={handleEditShoutout} positive>
+            Save
+          </Button>
+        </Modal.Actions>
+      </Modal>
     </Card>
   );
 };
+
 export default ShoutoutCard;

frontend/src/components/Modals/ShoutoutDeleteModal.module.css

@@ -1,4 +1,5 @@
 .trashIcon {
-  position: absolute;
-  right: 1%;
-}
+  margin-top: 2.0rem;
+  position: relative;
+  right: 10%;
+}

package.json

@@ -46,5 +46,6 @@
     "**/*.{ts,js,tsx,scss,css,html,md}": [
       "yarn prettier --write"
     ]
-  }
+  },
+  "dependencies": {}
 }