diff --git a/src/views/studio/studio-tab-nav.jsx b/src/views/studio/studio-tab-nav.jsx index 389ef92bb..c3a122b73 100644 --- a/src/views/studio/studio-tab-nav.jsx +++ b/src/views/studio/studio-tab-nav.jsx @@ -13,6 +13,32 @@ import projectsIcon from './icons/projects-icon.svg'; import {selectIsFetchingInfo, selectStudioCommentCount, selectStudioProjectCount} from '../../redux/studio'; + +/** + * Format a number to a string. If the number is below the limit, format as-is. Otherwise, show a '+' to indicate that + * the actual number might be higher. + * @example + * limitCount(1, 100) == '1' + * limitCount(12.5, 100) == '12.5' + * limitCount(100, 100) == '100+' + * limitCount(999, 100) == '100+' + * @param {number} num - the number to format + * @param {number} limit - the number at which we start showing a '+' + * @returns {string} - a string representing a number, possibly with a '+' at the end + */ +const limitCount = (num, limit) => { + if (num < limit) { + return `${num}`; + } + return `${limit}+`; +}; + +// These must match the limits used by the API +const countLimits = { + comments: 100, + projects: 100 +}; + const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => { const {params: {studioPath, studioId}} = useRouteMatch(); const base = `/${studioPath}/${studioId}`; @@ -30,7 +56,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => { src={projectsIcon} /> { src={commentsIcon} />