[no-jira] Add "Newer" and "Older" navigation to Posts page (#53)

src/helpers/permissions.js

@@ -23,6 +23,10 @@ export const isAdmin = (userRoles) => {
   return userRoles.includes(ADMIN);
 };
 
+export const isCoach = (user) => {
+  return getUserType(user) === "coach";
+};
+
 function isPostModerator({ user, communityUser, post }) {
   const hasModeratorPermissions =
     isAdmin(user.roles) || isModerator(user.roles) || isModerator(communityUser.roles);

src/i18n/de.json

@@ -44,6 +44,7 @@
   "post.myTimeline": "Meine Zeitachse",
   "post.wasLive": "war live",
   "post.copyPath": "Pfad kopieren",
+  "post.openInNewTab": "Open in new tab",
 
   "post.success.approved": "Beitrag genehmigt",
   "post.success.declined": "Beitrag abgelehnt",

src/i18n/en.json

@@ -44,6 +44,7 @@
   "post.myTimeline": "My Timeline",
   "post.wasLive": "was live",
   "post.copyPath": "Copy path",
+  "post.openInNewTab": "Open in new tab",
 
   "post.success.approved": "Post approved",
   "post.success.declined": "Post declined",

src/i18n/es.json

@@ -44,6 +44,7 @@
   "post.myTimeline": "Mi Línea del tiempo",
   "post.wasLive": "estuvo en vivo",
   "post.copyPath": "Copiar camino",
+  "post.openInNewTab": "Open in new tab",
 
   "post.success.approved": "Publicación aprobada",
   "post.success.declined": "Publicación rechazada",

src/social/components/post/Post/DefaultPostRenderer.js

@@ -9,7 +9,7 @@ import Modal from '~/core/components/Modal';
 import { notification } from '~/core/components/Notification';
 import { useAsyncCallback } from '~/core/hooks/useAsyncCallback';
 import useUser from '~/core/hooks/useUser';
-import { canDeletePost, canEditPost, canReportPost, canClosePool, canPerformUserLookups, canPerformStingActions } from '~/helpers/permissions';
+import { isCoach, canDeletePost, canEditPost, canReportPost, canClosePool, canPerformUserLookups, canPerformStingActions } from '~/helpers/permissions';
 import { isPostUnderReview } from '~/helpers/utils';
 import EngagementBar from '~/social/components/EngagementBar';
 import ChildrenContent from '~/social/components/post/ChildrenContent';
@@ -151,6 +151,14 @@ const DefaultPostRenderer = ({
     handleCopyPostPath(post);
   };
 
+  const onOpenInNewTab = () => {
+    const pathToContent = post.path.replace(
+      /.+\/social\//,
+      `${window.location.protocol}//${window.location.hostname}/`,
+    );
+    window.open(pathToContent, '_blank');
+  };
+
   const onLookupUser = () => {
     window.open(`${manateeUrl}/user/${post.postedUserId}`, '_blank');
   };
@@ -220,6 +228,10 @@ const DefaultPostRenderer = ({
       name: 'post.copyPath',
       action: onCopyPathClick,
     },
+    isCoach(currentUser) && {
+      name: 'post.openInNewTab',
+      action: onOpenInNewTab,
+    },
     canPerformUserLookups({
       actingUserType: currentUserType,
       targetUserType: postUserType,

src/social/pages/CommunityPost/index.js

@@ -1,24 +1,73 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
 
+import { PrimaryButton } from '~/core/components/Button';
+import useUser from '~/core/hooks/useUser';
+import { isCoach } from '~/helpers/permissions';
 import withSDK from '~/core/hocs/withSDK';
 import CommunityInfo from '~/social/components/CommunityInfo';
 import Post from '~/social/components/post/Post';
+import { useConfig } from '~/social/providers/ConfigProvider';
 
-import { Wrapper } from './styles';
+import { Wrapper, NavButtonGroup } from './styles';
 
 const CommunityPost = ({
+  currentUserId,
   postId,
   commentId,
   communityId,
   readonly,
   handleCopyPostPath,
   handleCopyCommentPath,
 }) => {
+  const { fetchNextPostInCommunity } = useConfig();
+  const { user: currentUser } = useUser(currentUserId, [currentUserId]);
+  const [olderButtonDisabled, setOlderButtonDisabled] = useState(false);
+  const [newerButtonDisabled, setNewerButtonDisabled] = useState(false);
+  const navigate = useNavigate();
+
+  const onOlderPost = async (communityId, postId) => {
+    const nextPostPath = await fetchNextPostInCommunity(communityId, postId, "AFTER");
+    if (nextPostPath) {
+      navigate(nextPostPath);
+      setNewerButtonDisabled(false);
+    } else {
+      setOlderButtonDisabled(true);
+    }
+  };
+  const onNewerPost = async () => {
+    const nextPostPath = await fetchNextPostInCommunity(communityId, postId, "BEFORE");
+    if (nextPostPath) {
+      navigate(nextPostPath);
+      setOlderButtonDisabled(false);
+    } else {
+      setNewerButtonDisabled(true);
+    }
+  };
+
   return (
     <Wrapper>
       <CommunityInfo communityId={communityId} />
 
+      {
+      isCoach(currentUser) &&
+        <NavButtonGroup isFullWidth>
+          <PrimaryButton
+            disabled={olderButtonDisabled}
+            onClick={() => onOlderPost(communityId, postId)}
+          >
+            &lt; Older
+          </PrimaryButton>
+          <PrimaryButton
+            disabled={newerButtonDisabled}
+            onClick={() => onNewerPost(communityId, postId)}
+          >
+            Newer &gt;
+          </PrimaryButton>
+        </NavButtonGroup>
+      }
+
       <Post
         key={postId}
         postId={postId}

src/social/pages/CommunityPost/styles.js

@@ -1,7 +1,12 @@
 import styled from 'styled-components';
+import { ButtonGroup } from '~/core/components/Button';
 
 export const Wrapper = styled.div`
   height: 100%;
   max-width: 695px;
   overflow-y: auto;
 `;
+
+export const NavButtonGroup = styled(ButtonGroup)`
+  margin-bottom: 12px;
+`;

src/social/providers/ConfigProvider.tsx

@@ -19,6 +19,11 @@ export type SocialConfiguration = {
     userLocale: string,
     optionalMessage?: string,
   ) => Promise<boolean>;
+  fetchNextPostInCommunity: (
+    communityId: string,
+    postId: string,
+    direction: string,
+  ) => Promise<string | undefined>;
 };
 
 const defaultConfig = {
@@ -32,6 +37,7 @@ const defaultConfig = {
   addCoachNoteCallback: async (_uac: string, _userLocale: string, _note: string) => false,
   transferUserToStingCallback: async (_uac: string, _userLocale: string, _message?: string) =>
     false,
+  fetchNextPostInCommunity: async (_cid: string, _pid: string, _dir: string) => '',
 };
 
 const ConfigContext = createContext(defaultConfig);