From de85a25db17825e267049c740cdc00bf85fef5fb Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Mon, 10 May 2021 11:44:39 -0400
Subject: [PATCH] use formatted messages for each activity notification

---
 src/views/studio/l10n.json           |   7 ++
 src/views/studio/studio-activity.jsx | 134 +++++++++++++++++++++++++--
 2 files changed, 135 insertions(+), 6 deletions(-)
 create mode 100644 src/views/studio/l10n.json

diff --git a/src/views/studio/l10n.json b/src/views/studio/l10n.json
new file mode 100644
index 000000000..ee9fd83c1
--- /dev/null
+++ b/src/views/studio/l10n.json
@@ -0,0 +1,7 @@
+{
+    "studio.activityAddProjectToStudio": "{profileLink} added the project {projectLink}",
+    "studio.activityRemoveProjectStudio": "{profileLink} removed the project {projectLink}",
+    "studio.activityUpdateStudio": "{profileLink} made edits to the title, thumbnail, or description",
+    "studio.activityBecomeCurator": "{promotedProfileLink} accepted an invitation from {promotorProfileLink} to curate this studio",
+    "studio.activityBecomeOwner": "{promotedProfileLink} was promoted to manager by {promotorProfileLink}"
+}
diff --git a/src/views/studio/studio-activity.jsx b/src/views/studio/studio-activity.jsx
index 413abd972..f78b9c151 100644
--- a/src/views/studio/studio-activity.jsx
+++ b/src/views/studio/studio-activity.jsx
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
+const FormattedMessage = require('react-intl').FormattedMessage;
 
 import {connect} from 'react-redux';
 import {useParams} from 'react-router';
@@ -12,6 +13,132 @@ import SocialMessage from '../../components/social-message/social-message.jsx';
 
 import './studio.scss';
 
+const getComponentForItem = (item) => {
+    switch(item.type) {
+        case 'addprojecttostudio':
+            return (
+                <SocialMessage
+                    datetime={item.datetime_created}
+                    iconSrc="/svgs/messages/love.svg"
+                    key={item.id}
+                >
+                    <FormattedMessage
+                        id="studio.activityAddProjectToStudio"
+                        values={{
+                            profileLink: (
+                                <a href={`/users/${item.actor_id}`}>
+                                    username
+                                </a>
+                            ),
+                            projectLink: (
+                                <a href={`/projects/${item.project_id}`}>
+                                    {item.project_title}
+                                </a>
+                            )
+                        }}
+                    />
+                </SocialMessage>
+            );
+         case 'removeprojectstudio':
+            return (
+                <SocialMessage
+                    datetime={item.datetime_created}
+                    iconSrc="/svgs/messages/love.svg"
+                    key={item.id}
+                >
+                    <FormattedMessage
+                        id="studio.activityRemoveProjectStudio"
+                        values={{
+                            profileLink: (
+                                <a href={`/users/${item.actor_id}`}>
+                                    username
+                                </a>
+                            ),
+                            projectLink: (
+                                <a href={`/projects/${item.project_id}`}>
+                                    {item.project_title}
+                                </a>
+                            )
+                        }}
+                    />
+                </SocialMessage>
+            );
+        case 'updatestudio':
+            return (
+                <SocialMessage
+                    datetime={item.datetime_created}
+                    iconSrc="/svgs/messages/love.svg"
+                    key={item.id}
+                >
+                    <FormattedMessage
+                        id="studio.activityUpdateStudio"
+                        values={{
+                            profileLink: (
+                                <a href={`/users/${item.actor_id}`}>
+                                    username
+                                </a>
+                            )
+                        }}
+                    />
+                </SocialMessage>
+            );
+        case 'becomecurator':
+            return (
+                <SocialMessage
+                    datetime={item.datetime_created}
+                    iconSrc="/svgs/messages/love.svg"
+                    key={item.id}
+                >
+                    <FormattedMessage
+                        id="studio.activityBecomeCurator"
+                        values={{
+                            promotedProfileLink: (
+                                <a href={`/users/${item.actor_id}`}>
+                                    username
+                                </a>
+                            ),
+                            promotorProfileLink: (
+                                <a href={`/users/${item.actor_id}`}>
+                                    username
+                                </a>
+                            )
+                        }}
+                    />
+                </SocialMessage>
+            );
+        case 'becomeownerstudio':
+            return (
+                <SocialMessage
+                    datetime={item.datetime_created}
+                    iconSrc="/svgs/messages/love.svg"
+                    key={item.id}
+                >
+                    <FormattedMessage
+                        id="studio.activityBecomeOwner"
+                        values={{
+                            promotedProfileLink: (
+                                <a href={`/users/${item.actor_id}`}>
+                                    username
+                                </a>
+                            ),
+                            promotorProfileLink: (
+                                <a href={`/users/${item.actor_id}`}>
+                                    username
+                                </a>
+                            )
+                        }}
+                    />
+                </SocialMessage>
+            );
+        default:
+            return (
+                <SocialMessage>
+                    {item.type}
+                </SocialMessage>
+            )
+    }
+};
+
 const StudioActivity = ({items, loading, error, onInitialLoad}) => {
     const {studioId} = useParams();
     // Fetch the data if none has been loaded yet. This would run only once,
@@ -33,12 +160,7 @@ const StudioActivity = ({items, loading, error, onInitialLoad}) => {
                 className="studio-messages-list"
             >
                 {items.map((item, index) =>
-                    (<SocialMessage
-                        datetime={item.datetime_created}
-                        iconSrc="/svgs/messages/love.svg"
-                    >
-                        {item.type}
-                    </SocialMessage>)
+                    getComponentForItem(item)
                 )}
             </ul>
         </div>