add followers, last-updated date to studio sidebar

src/redux/studio.js

@@ -94,6 +94,7 @@ const selectStudioDescription = state => state.studio.description;
 const selectStudioImage = state => state.studio.image;
 const selectStudioOpenToAll = state => state.studio.openToAll;
 const selectStudioCommentsAllowed = state => state.studio.commentsAllowed;
+const selectStudioLastUpdated = state => state.studio.updated;
 const selectStudioLoadFailed = state => state.studio.infoStatus === Status.ERROR;
 const selectStudioCommentCount = state => state.studio.commentCount;
 const selectStudioFollowerCount = state => state.studio.followers;
@@ -175,6 +176,7 @@ module.exports = {
     selectStudioImage,
     selectStudioOpenToAll,
     selectStudioCommentsAllowed,
+    selectStudioLastUpdated,
     selectStudioLoadFailed,
     selectStudioCommentCount,
     selectStudioFollowerCount,

src/views/studio/l10n.json

@@ -71,6 +71,9 @@
     "studio.activityRemoveCurator": "{removerProfileLink} removed the curator {removedProfileLink}",
     "studio.activityBecomeOwner": "{promotedProfileLink} was promoted to manager by {promotorProfileLink}",
 
+    "studio.lastUpdated": "Updated {lastUpdatedDate, date, medium}",
+    "studio.followerCount": "{followerCount} followers",
+
     "studio.reportThisStudio": "Report this studio",
     "studio.reportPleaseExplain": "Please explain why you feel this studio is disrespectful or inappropriate, or otherwise breaks the Scratch Community Guidelines.",
     "studio.reportAreThereComments": "Are there inappropriate comments in the studio? Please report them by clicking the \"report\" button on the individual comments.",

src/views/studio/studio-info.jsx

@@ -1,14 +1,16 @@
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+
 import StudioDescription from './studio-description.jsx';
 import StudioFollow from './studio-follow.jsx';
-import StudioTitle from './studio-title.jsx';
 import StudioImage from './studio-image.jsx';
+import StudioReport from './studio-report.jsx';
+import StudioStats from './studio-stats.jsx';
+import StudioTitle from './studio-title.jsx';
 
 import {selectIsLoggedIn} from '../../redux/session';
 import {getInfo, getRoles} from '../../redux/studio';
-import StudioReport from './studio-report.jsx';
 
 const StudioInfo = ({
     isLoggedIn, onLoadInfo, onLoadRoles
@@ -27,7 +29,14 @@ const StudioInfo = ({
             <StudioFollow />
             <StudioImage />
             <StudioDescription />
-            <StudioReport />
+            <div className="studio-info-footer">
+                <div className="studio-info-footer-stats">
+                    <StudioStats />
+                </div>
+                <div className="studio-info-footer-report">
+                    <StudioReport />
+                </div>
+            </div>
         </React.Fragment>
     );
 };

src/views/studio/studio-stats.jsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/jsx-no-bind */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+
+import {selectIsFetchingInfo, selectStudioFollowerCount, selectStudioLastUpdated} from '../../redux/studio';
+
+const StudioStats = ({
+    isFetchingInfo,
+    followerCount,
+    lastUpdatedDate
+}) => {
+    if (isFetchingInfo) return <React.Fragment />;
+    return (<React.Fragment>
+        <div><FormattedMessage
+            id="studio.lastUpdated"
+            values={{lastUpdatedDate}}
+        /></div>
+        <div><FormattedMessage
+            id="studio.followerCount"
+            values={{followerCount}}
+        /></div>
+    </React.Fragment>);
+};
+
+StudioStats.propTypes = {
+    isFetchingInfo: PropTypes.bool,
+    followerCount: PropTypes.number,
+    lastUpdatedDate: PropTypes.instanceOf(Date)
+};
+
+export default connect(
+    state => ({
+        isFetchingInfo: selectIsFetchingInfo(state),
+        followerCount: selectStudioFollowerCount(state),
+        lastUpdatedDate: selectStudioLastUpdated(state)
+    }),
+    {
+    }
+)(StudioStats);

src/views/studio/studio.scss

@@ -55,6 +55,21 @@ $radius: 8px;
             box-sizing: border-box;
         }
     }
+
+    .studio-info-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .studio-info-footer-stats {
+        justify-content: flex-start;
+    }
+
+    .studio-info-footer-report {
+        justify-content: flex-end;
+    }
+
     .studio-title {
         font-size: 28px;
         font-weight: 700;