refactor: get rid of hook and make status 3 options

wireapp · Jun 18, 2024 · f83d6e8 · f83d6e8
1 parent e3b86fe
commit f83d6e8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 48 deletions.
diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationFolderTab.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationFolderTab.tsx
@@ -19,12 +19,14 @@
 
 import cx from 'classnames';
 
+import {useMatchMedia} from '@wireapp/react-ui-kit';
+
 import {Config} from 'src/script/Config';
 import {createLabel} from 'src/script/conversation/ConversationLabelRepository';
 import {ConversationRepository} from 'src/script/conversation/ConversationRepository';
 import {Conversation} from 'src/script/entity/Conversation';
 import {
-  SidebarOpenStatus,
+  SidebarStatus,
   SidebarTabs,
   useFolderState,
   useSidebarStore,
@@ -57,9 +59,11 @@ export const ConversationFolderTab = ({
   unreadConversations = [],
   dataUieName,
 }: ConversationFolderTabProps) => {
-  const {isOpen: isSidebarOpen, openStatus: sideBarOpenStatus, setOpenStatus: setSideBarOpenStatus} = useSidebarStore();
+  const {status: sidebarStatus, setStatus: setSidebarStatus} = useSidebarStore();
   const {openFolder, isFoldersTabOpen, toggleFoldersTab, expandedFolder} = useFolderState();
   const {conversationLabelRepository} = conversationRepository;
+  const mdBreakpoint = useMatchMedia('(max-width: 1000px)');
+  const isSideBarOpen = sidebarStatus === SidebarStatus.AUTO ? mdBreakpoint : sidebarStatus === SidebarStatus.OPEN;
 
   function toggleFolder(folderId: string) {
     openFolder(folderId);
@@ -91,13 +95,13 @@ export const ConversationFolderTab = ({
   }
 
   function handleToggleFoldersTab(event: React.MouseEvent<HTMLButtonElement>) {
-    if (isSidebarOpen(sideBarOpenStatus)) {
+    if (isSideBarOpen) {
       toggleFoldersTab();
       return;
     }
 
     if (folders.length === 0) {
-      setSideBarOpenStatus(SidebarOpenStatus.OPEN);
+      setSidebarStatus(SidebarStatus.OPEN);
       return;
     }
 

diff --git a/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx b/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
@@ -49,7 +49,7 @@ import {ConversationsList} from './ConversationsList';
 import {ConversationTabs} from './ConversationTabs';
 import {EmptyConversationList} from './EmptyConversationList';
 import {getTabConversations} from './helpers';
-import {SidebarOpenStatus, SidebarTabs, useFolderState, useSidebarStore} from './state';
+import {SidebarStatus, SidebarTabs, useFolderState, useSidebarStore} from './state';
 
 import {CallingViewMode, CallState} from '../../../../calling/CallState';
 import {createLabel} from '../../../../conversation/ConversationLabelRepository';
@@ -97,14 +97,7 @@ const Conversations: React.FC<ConversationsProps> = ({
   userState = container.resolve(UserState),
   selfUser,
 }) => {
-  const {
-    currentTab,
-    isOpen: isSideBarOpen,
-    openStatus: sideBarOpenStatus,
-    setOpenStatus: setSidebarOpenStatus,
-    toggleOpenStatus: toggleSidebarIsOpen,
-    setCurrentTab,
-  } = useSidebarStore();
+  const {currentTab, status: sidebarStatus, setStatus: setSidebarStatus, setCurrentTab} = useSidebarStore();
   const [conversationsFilter, setConversationsFilter] = useState<string>('');
   const [isConversationFilterFocused, setIsConversationFilterFocused] = useState(false);
   const {classifiedDomains, isTeam} = useKoSubscribableChildren(teamState, ['classifiedDomains', 'isTeam']);
@@ -147,6 +140,9 @@ const Conversations: React.FC<ConversationsProps> = ({
   const {openFolder, closeFolder, expandedFolder, isFoldersTabOpen, toggleFoldersTab} = useFolderState();
   const {currentFocus, handleKeyDown, resetConversationFocus} = useConversationFocus(conversations);
 
+  const mdBreakpoint = useMatchMedia('(max-width: 1000px)');
+  const isSideBarOpen = sidebarStatus === SidebarStatus.AUTO ? mdBreakpoint : sidebarStatus === SidebarStatus.OPEN;
+
   const {conversations: currentTabConversations, searchInputPlaceholder} = getTabConversations({
     currentTab,
     conversations,
@@ -166,19 +162,12 @@ const Conversations: React.FC<ConversationsProps> = ({
     if (isFoldersTabOpen) {
       toggleFoldersTab();
     }
-    toggleSidebarIsOpen();
+
+    setSidebarStatus(isSideBarOpen ? SidebarStatus.CLOSED : SidebarStatus.OPEN);
   }
 
   const hasNoConversations = conversations.length + connectRequests.length === 0;
 
-  const mdBreakpoint = useMatchMedia('(max-width: 1000px)');
-
-  useEffect(() => {
-    if (sideBarOpenStatus !== SidebarOpenStatus.MANUAL_OPEN && sideBarOpenStatus !== SidebarOpenStatus.MANUAL_CLOSED) {
-      setSidebarOpenStatus(mdBreakpoint ? SidebarOpenStatus.CLOSED : SidebarOpenStatus.OPEN);
-    }
-  }, [mdBreakpoint, setSidebarOpenStatus, sideBarOpenStatus]);
-
   useEffect(() => {
     if (activeConversation && !conversationState.isVisible(activeConversation)) {
       // If the active conversation is not visible, switch to the recent view
@@ -248,12 +237,12 @@ const Conversations: React.FC<ConversationsProps> = ({
 
   const sidebar = (
     <nav className="conversations-sidebar" css={conversationsSidebarStyles(mdBreakpoint)}>
-      <FadingScrollbar className="conversations-sidebar-items" data-is-collapsed={!isSideBarOpen(sideBarOpenStatus)}>
+      <FadingScrollbar className="conversations-sidebar-items" data-is-collapsed={!isSideBarOpen}>
         <UserDetails
           user={selfUser}
           groupId={conversationState.selfMLSConversation()?.groupId}
           isTeam={isTeam}
-          isSideBarOpen={isSideBarOpen(sideBarOpenStatus)}
+          isSideBarOpen={isSideBarOpen}
         />
 
         <ConversationTabs
@@ -270,7 +259,7 @@ const Conversations: React.FC<ConversationsProps> = ({
       </FadingScrollbar>
 
       <IconButton
-        css={conversationsSidebarHandleStyles(isSideBarOpen(sideBarOpenStatus))}
+        css={conversationsSidebarHandleStyles(isSideBarOpen)}
         className="conversations-sidebar-handle"
         onClick={toggleSidebar}
       >

diff --git a/src/script/page/LeftSidebar/panels/Conversations/state.ts b/src/script/page/LeftSidebar/panels/Conversations/state.ts
@@ -69,49 +69,35 @@ export enum SidebarTabs {
   PREFERENCES,
 }
 
-export const SidebarOpenStatus = {
+export const SidebarStatus = {
   OPEN: 'OPEN',
   CLOSED: 'CLOSED',
-  MANUAL_OPEN: 'MANUAL_OPEN',
-  MANUAL_CLOSED: 'MANUAL_CLOSED',
+  AUTO: 'AUTO',
 } as const;
 
-export type SidebarOpenStatus = (typeof SidebarOpenStatus)[keyof typeof SidebarOpenStatus];
+export type SidebarStatus = (typeof SidebarStatus)[keyof typeof SidebarStatus];
 
 export interface SidebarStore {
-  openStatus: SidebarOpenStatus;
-  setOpenStatus: (status: SidebarOpenStatus) => void;
-  toggleOpenStatus: () => void;
+  status: SidebarStatus;
+  setStatus: (status: SidebarStatus) => void;
   currentTab: SidebarTabs;
-  isOpen: (openStatus: SidebarOpenStatus) => boolean;
   setCurrentTab: (tab: SidebarTabs) => void;
 }
 
 const useSidebarStore = create<SidebarStore>()(
   persist(
-    (set, get) => ({
+    set => ({
       currentTab: SidebarTabs.RECENT,
       setCurrentTab: (tab: SidebarTabs) => {
         set({currentTab: tab});
       },
-      openStatus: SidebarOpenStatus.CLOSED,
-      setOpenStatus: status => set({openStatus: status}),
-      isOpen: (openStatus: SidebarOpenStatus) => {
-        return openStatus === SidebarOpenStatus.MANUAL_OPEN || openStatus === SidebarOpenStatus.OPEN;
-      },
-      toggleOpenStatus: () => {
-        const currentStatus = get().openStatus;
-        const newStatus =
-          currentStatus === SidebarOpenStatus.MANUAL_OPEN || currentStatus === SidebarOpenStatus.OPEN
-            ? SidebarOpenStatus.MANUAL_CLOSED
-            : SidebarOpenStatus.MANUAL_OPEN;
-        set({openStatus: newStatus});
-      },
+      status: SidebarStatus.CLOSED,
+      setStatus: status => set({status: status}),
     }),
     {
       name: 'sidebar-store',
       storage: createJSONStorage(() => localStorage),
-      partialize: state => ({openStatus: state.openStatus}),
+      partialize: state => ({status: state.status}),
     },
   ),
 );