diff --git a/src/elements/content-sidebar/ActivityIndicator.scss b/src/elements/content-sidebar/ActivityIndicator.scss new file mode 100644 index 0000000000..a1b3e75b54 --- /dev/null +++ b/src/elements/content-sidebar/ActivityIndicator.scss @@ -0,0 +1,12 @@ +.bcs-activity-indicator { + position: absolute; + right: 10px; + bottom: 10px; + width: 15px; + height: 15px; + color: white; + font-size: 10px; + line-height: 15px; + background-color: black; + border-radius: 50%; +} diff --git a/src/elements/content-sidebar/ActivityIndicator.tsx b/src/elements/content-sidebar/ActivityIndicator.tsx new file mode 100644 index 0000000000..93a5761dd9 --- /dev/null +++ b/src/elements/content-sidebar/ActivityIndicator.tsx @@ -0,0 +1,60 @@ +import React, { useEffect, useState } from 'react'; +import flow from 'lodash/flow'; +// import noop from 'lodash/noop'; + +import { withAPIContext } from '../common/api-context'; + +import './ActivityIndicator.scss'; + +export function ActivityIndicator({ api, features, file }) { + const [count, setCount] = useState(0); + const [shouldShowIndicator, setShouldShowIndicator] = useState(false); + const [canLoadActivities, setCanLoadActivities] = useState(true); + + useEffect(() => { + // early return to not refetch on every re-render + if (!canLoadActivities) { + return; + } + setCanLoadActivities(false); + // api.getFeedAPI().feedItems( + // file, + // false, + // (data: Array) => { + // console.log('data', data); + // if (data.length > 0) { + // // has comments, replies, annotations or tasks + // setCount(data.length); + // setShouldShowIndicator(true); + // } + // }, + // noop, + // noop, + // { + // shouldShowAnnotations: false, + // shouldShowAppActivity: false, + // shouldShowReplies: false, + // shouldShowTasks: false, + // shouldShowVersions: false, // do we need to inform about versions? + // shouldUseUAA: true, // don't know what this is + // }, + // ); + + const activityTypes = ['annotation', 'app_activity', 'comment', 'task']; + const { permissions = {} } = file; + const feedAPI = api.getFeedAPI(); + + feedAPI.file = file; + feedAPI.fetchFileActivities(permissions, activityTypes, true).then(data => { + if (data.entries.length > 0) { + // has comments, replies, annotations or tasks + setCount(data.entries.length); + setShouldShowIndicator(true); + } + }); + }, [api, features, file, canLoadActivities]); + + return shouldShowIndicator ?
{count}
: null; +} + +export default flow([withAPIContext])(ActivityIndicator); diff --git a/src/elements/content-sidebar/Sidebar.js b/src/elements/content-sidebar/Sidebar.js index 1c3249205b..f4c58282cc 100644 --- a/src/elements/content-sidebar/Sidebar.js +++ b/src/elements/content-sidebar/Sidebar.js @@ -331,6 +331,7 @@ class Sidebar extends React.Component { , elementId: string, + file: BoxItem, fileId: string, hasActivity: boolean, hasAdditionalTabs: boolean, @@ -54,6 +56,7 @@ type Props = { const SidebarNav = ({ additionalTabs, elementId, + file, fileId, hasActivity, hasAdditionalTabs, @@ -106,6 +109,7 @@ const SidebarNav = ({ tooltip={intl.formatMessage(messages.sidebarActivityTitle)} > + )} {hasDetails && (