Change pinned and starred message windows to sidebars

RocketChat · Mar 7, 2024 · 94c37ea · 94c37ea
1 parent da8b930
commit 94c37ea
Show file tree

Hide file tree

Showing 9 changed files with 342 additions and 10 deletions.
diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -12,6 +12,8 @@ import {
   useToastStore,
   useThreadsMessageStore,
   useMentionsStore,
+  usePinnedMessageStore,
+  useStarredMessageStore,
 } from '../../store';
 import { DynamicHeader } from '../DynamicHeader';
 import { Tooltip } from '../Tooltip';
@@ -71,6 +73,10 @@ const ChatHeader = ({
   const toggleShowMembers = useMemberStore((state) => state.toggleShowMembers);
   const showMembers = useMemberStore((state) => state.showMembers);
   const setShowSearch = useSearchMessageStore((state) => state.setShowSearch);
+  const setShowPinned = usePinnedMessageStore((state) => state.setShowPinned);
+  const setShowStarred = useStarredMessageStore(
+    (state) => state.setShowStarred
+  );
   const setShowAllThreads = useThreadsMessageStore(
     (state) => state.setShowAllThreads
   );
@@ -99,18 +105,12 @@ const ChatHeader = ({
   }, [RCInstance, setIsUserAuthenticated]);
 
   const showStarredMessage = useCallback(async () => {
-    const { messages } = await RCInstance.getStarredMessages();
-    setMessages(messages);
-    setHeaderTitle('Starred Messages');
-    setFilter(true);
-  }, [RCInstance, setMessages, setHeaderTitle, setFilter]);
+    setShowStarred(true);
+  }, [RCInstance, setShowStarred]);
 
   const showPinnedMessage = useCallback(async () => {
-    const { messages } = await RCInstance.getPinnedMessages();
-    setMessages(messages);
-    setHeaderTitle('Pinned Messages');
-    setFilter(true);
-  }, [RCInstance, setMessages, setHeaderTitle, setFilter]);
+    setShowPinned(true);
+  }, [RCInstance, setShowPinned]);
 
   const showChannelMembers = useCallback(async () => {
     const { members = [] } = await RCInstance.getChannelMembers(

diff --git a/packages/react/src/components/MessageList/MessageList.js b/packages/react/src/components/MessageList/MessageList.js
@@ -9,6 +9,8 @@ import {
   useUserStore,
   useMentionsStore,
   useThreadsMessageStore,
+  usePinnedMessageStore,
+  useStarredMessageStore,
 } from '../../store';
 import RoomMembers from '../RoomMembers/RoomMember';
 import MessageReportWindow from '../ReportMessage/MessageReportWindow';
@@ -18,6 +20,8 @@ import Roominfo from '../RoomInformation/RoomInformation';
 import AllThreads from '../AllThreads/AllThreads';
 import UserMentions from '../UserMentions/UserMentions';
 import { Message } from '../Message';
+import PinnedMessages from '../PinnedMessages/PinnedMessages';
+import StarredMessages from '../StarredMessages/StarredMessages';
 
 const MessageList = ({ messages }) => {
   const showSearch = useSearchMessageStore((state) => state.showSearch);
@@ -31,6 +35,8 @@ const MessageList = ({ messages }) => {
     (state) => state.showAllThreads
   );
   const showMentions = useMentionsStore((state) => state.showMentions);
+  const showPinned = usePinnedMessageStore((state) => state.showPinned);
+  const showStarred = useStarredMessageStore((state) => state.showStarred);
 
   const isMessageNewDay = (current, previous) =>
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
@@ -62,6 +68,8 @@ const MessageList = ({ messages }) => {
       {showChannelinfo && <Roominfo />}
       {showAllThreads && <AllThreads />}
       {showMentions && <UserMentions />}
+      {showPinned && <PinnedMessages />}
+      {showStarred && <StarredMessages />}
     </>
   );
 };

diff --git a/packages/react/src/components/PinnedMessages/PinnedMessages.js b/packages/react/src/components/PinnedMessages/PinnedMessages.js
@@ -0,0 +1,129 @@
+import React, { useState, useContext, useMemo, useEffect } from 'react';
+import { isSameDay, format } from 'date-fns';
+import RCContext from '../../context/RCInstance';
+import classes from './PinnedMessages.module.css';
+import { usePinnedMessageStore } from '../../store';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { ActionButton } from '../ActionButton';
+import { MessageDivider } from '../Message/MessageDivider';
+import { Message } from '../Message';
+import isMessageSequential from '../../lib/isMessageSequential';
+import { Throbber } from '../Throbber';
+
+const PinnedMessages = () => {
+  const { RCInstance } = useContext(RCContext);
+  const setShowPinned = usePinnedMessageStore((state) => state.setShowPinned);
+
+  const [messageList, setMessageList] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const toggleShowPinned = () => {
+    setShowPinned(false);
+  };
+
+  const getPinnedMessages = async () => {
+    const { messages } = await RCInstance.getPinnedMessages();
+    setMessageList(messages);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (messageList.length === 0) {
+      getPinnedMessages();
+    }
+  }, [messageList, getPinnedMessages]);
+
+  const isMessageNewDay = (current, previous) =>
+    !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
+
+  return (
+    <Box className={classes.sidebar} style={{ padding: '1rem' }}>
+      <Box className={classes.wrapContainer}>
+        <Box
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: '0.5rem',
+            marginBottom: '1rem',
+          }}
+        >
+          <h3 style={{ display: 'contents' }}>
+            <Icon name="pin" size="1.25rem" />
+            <Box style={{ color: '#4a4a4a', width: '80%' }}>
+              Pinned Messages
+            </Box>
+            <ActionButton onClick={toggleShowPinned} ghost size="small">
+              <Icon name="cross" size="x20" />
+            </ActionButton>
+          </h3>
+        </Box>
+        <Box
+          style={{
+            flex: '1',
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: messageList.length === 0 ? 'center' : 'initial',
+            alignItems: messageList.length === 0 ? 'center' : 'initial',
+          }}
+        >
+          {loading ? (
+            <Box
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                color: '#4a4a4a',
+              }}
+            >
+              <Throbber />
+            </Box>
+          ) : messageList.length === 0 ? (
+            <Box
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                color: '#4a4a4a',
+              }}
+            >
+              <Icon name="pin" size="3rem" style={{ padding: '0.5rem' }} />
+              <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+                No pinned messages
+              </span>
+            </Box>
+          ) : (
+            messageList.map((msg, index, arr) => {
+              const prev = arr[index + 1];
+              const newDay = isMessageNewDay(msg, prev);
+              const sequential = isMessageSequential(msg, prev, 300);
+              return (
+                <Box key={msg._id}>
+                  {newDay && (
+                    <Box style={{ paddingTop: '0.5rem' }}>
+                      <MessageDivider>
+                        {format(new Date(msg.ts), 'MMMM d, yyyy')}
+                      </MessageDivider>
+                    </Box>
+                  )}
+                  <Message
+                    key={msg._id}
+                    message={msg}
+                    newDay={false}
+                    sequential={sequential}
+                    variant="default"
+                    showAvatar
+                    showToolbox={false}
+                  />
+                </Box>
+              );
+            })
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+export default PinnedMessages;
diff --git a/packages/react/src/components/PinnedMessages/PinnedMessages.module.css b/packages/react/src/components/PinnedMessages/PinnedMessages.module.css
@@ -0,0 +1,23 @@
+.sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 350px;
+  height: 100%;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  background-color: white;
+  box-shadow: -1px 0px 5px rgb(0 0 0 / 25%);
+  z-index: 100;
+}
+
+.wrapContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+@media (max-width: 550px) {
+  .sidebar {
+    width: 100vw;
+  }
+}
diff --git a/packages/react/src/components/StarredMessages/StarredMessages.js b/packages/react/src/components/StarredMessages/StarredMessages.js
@@ -0,0 +1,131 @@
+import React, { useState, useContext, useMemo, useEffect } from 'react';
+import { isSameDay, format } from 'date-fns';
+import RCContext from '../../context/RCInstance';
+import classes from './StarredMessages.module.css';
+import { useStarredMessageStore } from '../../store';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { ActionButton } from '../ActionButton';
+import { MessageDivider } from '../Message/MessageDivider';
+import { Message } from '../Message';
+import isMessageSequential from '../../lib/isMessageSequential';
+import { Throbber } from '../Throbber';
+
+const StarredMessages = () => {
+  const { RCInstance } = useContext(RCContext);
+  const setShowStarred = useStarredMessageStore(
+    (state) => state.setShowStarred
+  );
+
+  const [messageList, setMessageList] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const toggleShowStarred = () => {
+    setShowStarred(false);
+  };
+
+  const getStarredMessages = async () => {
+    const { messages } = await RCInstance.getStarredMessages();
+    setMessageList(messages);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (messageList.length === 0) {
+      getStarredMessages();
+    }
+  }, [messageList, getStarredMessages]);
+
+  const isMessageNewDay = (current, previous) =>
+    !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
+
+  return (
+    <Box className={classes.sidebar} style={{ padding: '1rem' }}>
+      <Box className={classes.wrapContainer}>
+        <Box
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: '0.5rem',
+            marginBottom: '1rem',
+          }}
+        >
+          <h3 style={{ display: 'contents' }}>
+            <Icon name="star" size="1.25rem" />
+            <Box style={{ color: '#4a4a4a', width: '80%' }}>
+              Starred Messages
+            </Box>
+            <ActionButton onClick={toggleShowStarred} ghost size="small">
+              <Icon name="cross" size="x20" />
+            </ActionButton>
+          </h3>
+        </Box>
+        <Box
+          style={{
+            flex: '1',
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: messageList.length === 0 ? 'center' : 'initial',
+            alignItems: messageList.length === 0 ? 'center' : 'initial',
+          }}
+        >
+          {loading ? (
+            <Box
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                color: '#4a4a4a',
+              }}
+            >
+              <Throbber />
+            </Box>
+          ) : messageList.length === 0 ? (
+            <Box
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                color: '#4a4a4a',
+              }}
+            >
+              <Icon name="star" size="3rem" style={{ padding: '0.5rem' }} />
+              <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+                No starred messages
+              </span>
+            </Box>
+          ) : (
+            messageList.map((msg, index, arr) => {
+              const prev = arr[index + 1];
+              const newDay = isMessageNewDay(msg, prev);
+              const sequential = isMessageSequential(msg, prev, 300);
+              return (
+                <Box key={msg._id}>
+                  {newDay && (
+                    <Box style={{ paddingTop: '0.5rem' }}>
+                      <MessageDivider>
+                        {format(new Date(msg.ts), 'MMMM d, yyyy')}
+                      </MessageDivider>
+                    </Box>
+                  )}
+                  <Message
+                    key={msg._id}
+                    message={msg}
+                    newDay={false}
+                    sequential={sequential}
+                    variant="default"
+                    showAvatar
+                    showToolbox={false}
+                  />
+                </Box>
+              );
+            })
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+export default StarredMessages;
diff --git a/packages/react/src/components/StarredMessages/StarredMessages.module.css b/packages/react/src/components/StarredMessages/StarredMessages.module.css
@@ -0,0 +1,23 @@
+.sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 350px;
+  height: 100%;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  background-color: white;
+  box-shadow: -1px 0px 5px rgb(0 0 0 / 25%);
+  z-index: 100;
+}
+
+.wrapContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+@media (max-width: 550px) {
+  .sidebar {
+    width: 100vw;
+  }
+}
diff --git a/packages/react/src/store/index.js b/packages/react/src/store/index.js
@@ -8,3 +8,5 @@ export { default as loginModalStore } from './loginmodalStore';
 export { default as useChannelStore } from './channelStore';
 export { default as useThreadsMessageStore } from './threadsMessageStore';
 export { default as useMentionsStore } from './mentionsStore';
+export { default as usePinnedMessageStore } from './pinnedMessageStore';
+export { default as useStarredMessageStore } from './starredMessageStore';