scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

use formatted messages for each activity notification

Browse source
This commit is contained in:
Eric Rosenbaum 2021-05-10 11:44:39 -04:00
parent 1232f98195
commit de85a25db1
2 changed files with 135 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/views/studio/l10n.json Normal file
View file

@ -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}"
}

134
src/views/studio/studio-activity.jsx
View file

@ -1,5 +1,6 @@
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const FormattedMessage = require('react-intl').FormattedMessage;
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {useParams} from 'react-router'; import {useParams} from 'react-router';
@ -12,6 +13,132 @@ import SocialMessage from '../../components/social-message/social-message.jsx';
import './studio.scss'; 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 StudioActivity = ({items, loading, error, onInitialLoad}) => {
const {studioId} = useParams(); const {studioId} = useParams();
// Fetch the data if none has been loaded yet. This would run only once, // 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" className="studio-messages-list"
> >
{items.map((item, index) => {items.map((item, index) =>
(<SocialMessage getComponentForItem(item)
datetime={item.datetime_created}
iconSrc="/svgs/messages/love.svg"
>
{item.type}
</SocialMessage>)
)} )}
</ul> </ul>
</div> </div>