[chat-list-migration] - part 2 of PR review suggestions

bigbluebutton-html5/imports/ui/components/shortcut-help/useShortcutHelp.tsx

@@ -1,5 +1,6 @@
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import { Meteor } from 'meteor/meteor'
+import { useEffect, useRef } from 'react'; 
 
 interface ShortcutObject {
     accesskey: string,
@@ -12,36 +13,41 @@ interface Accumulator {
 
 const BASE_SHORTCUTS: Array<ShortcutObject> = Meteor.settings.public.app.shortcuts;
 
-const useShortcutHelp = (param?: string) => {
+function useShortcutHelp(param?: string): Object | string | undefined {
+  const shortcut = useRef<Object | string>();
+
+  useEffect(() => {
     const ENABLED_SHORTCUTS = getFromUserSettings('bbb_shortcuts', null);
-  let shortcuts: ShortcutObject[] = Object.values(BASE_SHORTCUTS);
+    let shortcuts: ShortcutObject[] = Object.values(BASE_SHORTCUTS);
 
-  if (ENABLED_SHORTCUTS) {
+    if (ENABLED_SHORTCUTS) {
-    shortcuts = Object.values(BASE_SHORTCUTS).map((el: ShortcutObject) => {
+      shortcuts = Object.values(BASE_SHORTCUTS).map((el: ShortcutObject) => {
-      const obj = { ...el };
+        const obj = { ...el };
-      obj.descId = obj.descId.toLowerCase();
+        obj.descId = obj.descId.toLowerCase();
-      return obj;
+        return obj;
-    }).filter((el: ShortcutObject) => ENABLED_SHORTCUTS.includes(el.descId.toLowerCase()));
+      }).filter((el: ShortcutObject) => ENABLED_SHORTCUTS.includes(el.descId.toLowerCase()));
-  }
-
-  let shortcutsString: Object | undefined = {};
-  if (param !== undefined) {
-    if (!Array.isArray(param)) {
-        shortcutsString = shortcuts
-        .filter(el => el.descId.toLowerCase() === param.toLowerCase())
-        .map(el => el.accesskey)
-        .pop();
-    } else {
-        shortcutsString = shortcuts
-        .filter(el => param.map(p => p.toLowerCase()).includes(el.descId.toLowerCase()))
-        .reduce((acc: Accumulator, current: ShortcutObject) => {
-          acc[current.descId.toLowerCase()] = current.accesskey;
-          return acc;
-        }, {});
     }
-  }
 
-  return shortcutsString;
+    let shortcutsString: Object | undefined;
+    if (param !== undefined) {
+      if (!Array.isArray(param)) {
+          shortcutsString = shortcuts
+          .filter(el => el.descId.toLowerCase() === param.toLowerCase())
+          .map(el => el.accesskey)
+          .pop();
+      } else {
+          shortcutsString = shortcuts
+          .filter(el => param.map(p => p.toLowerCase()).includes(el.descId.toLowerCase()))
+          .reduce((acc: Accumulator, current: ShortcutObject) => {
+            acc[current.descId.toLowerCase()] = current.accesskey;
+            return acc;
+          }, {});
+      }
+    }
+
+    shortcut.current = shortcutsString;
+  }, [])
+  return shortcut.current;
 }
 
 export { useShortcutHelp };

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/chat-list-item/component.tsx

@@ -43,7 +43,7 @@ const ChatListItem = (props: ChatListItemProps) => {
   const { sidebarContentPanel } = sidebarContent;
   const sidebarContentIsOpen = sidebarContent.isOpen;
 
-  const TOGGLE_CHAT_PUB_AK: Object | undefined = useShortcutHelp();
+  const TOGGLE_CHAT_PUB_AK: Object | string | undefined = useShortcutHelp("togglePublicChat");
   const {
     chat,
   } = props;

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/chat-list-item/styles.ts

@@ -1,6 +1,4 @@
 import styled from 'styled-components';
-import Styled from '/imports/ui/components/user-list/styles';
-import ContentStyled from '/imports/ui/components/user-list/user-list-content/styles';
 import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
 import {
   lgPaddingY,
@@ -16,6 +14,8 @@ import {
   colorWhite,
   userListBg,
   colorSuccess,
+  itemFocusBorder,
+  unreadMessagesBg,
 } from '/imports/ui/stylesheets/styled-components/palette';
 
 interface UserAvatarProps {
@@ -150,7 +150,41 @@ const ChatNameMain = styled.span`
   `}
 `;
 
-const ChatListItem = styled(Styled.ListItem)`
+const ChatListItem = styled.div`
+  display: flex;
+  flex-flow: row;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  cursor: pointer;
+
+  [dir="rtl"] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:hover {
+    outline: transparent;
+    outline-style: dotted;
+    outline-width: ${borderSize};
+    background-color: ${listItemBgHover};
+  }
+
+  &:active,
+  &:focus {
+    outline: transparent;
+    outline-width: ${borderSize};
+    outline-style: solid;
+    background-color: ${listItemBgHover};
+    box-shadow: inset 0 0 0 ${borderSize} ${itemFocusBorder}, inset 1px 0 0 1px ${itemFocusBorder};
+  }
   cursor: pointer;
   text-decoration: none;
   flex-grow: 1;
@@ -182,8 +216,29 @@ const ChatThumbnail = styled.div`
   font-size: 175%;
 `;
 
-const UnreadMessages = styled(ContentStyled.UnreadMessages)``;
+const UnreadMessages = styled.div`
-const UnreadMessagesText = styled(ContentStyled.UnreadMessagesText)``;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  margin-left: auto;
+  [dir="rtl"] & {
+    margin-right: auto;
+    margin-left: 0;
+  }
+`;
+const UnreadMessagesText = styled.div`
+  display: flex;
+  flex-flow: column;
+  margin: 0;
+  justify-content: center;
+  color: ${colorWhite};
+  line-height: calc(1rem + 1px);
+  padding: 0 0.5rem;
+  text-align: center;
+  border-radius: 0.5rem/50%;
+  font-size: 0.8rem;
+  background-color: ${unreadMessagesBg};
+`;
 
 export default {
   ChatListItemLink,

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/styles.ts

@@ -115,9 +115,7 @@ margin: 0 0 1px ${mdPaddingY};
 const ListTransition = styled.div`
   display: flex;
   flex-flow: column;
-  margin: 0;
+  padding: ${borderSize} 0 0 0;.
-  padding: 0;
-  padding-top: ${borderSize};
   outline: none;
   overflow: hidden;
   flex-shrink: 1;