Merge pull request #868 from The-Commit-Company/836-persist-collapsed…

…-state-of-channels-and-dms-between-sessions feat: persist expanded or collapsed state of sidebar sections
The-Commit-Company · Apr 12, 2024 · 2cade1a · 2cade1a
2 parents 14db6e1 + 23ad4db
commit 2cade1a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/raven-app/src/components/feature/channels/ChannelList.tsx b/raven-app/src/components/feature/channels/ChannelList.tsx
@@ -6,12 +6,13 @@ import { ChannelListContext, ChannelListContextType, ChannelListItem, UnreadCoun
 import { ChannelIcon } from "@/utils/layout/channelIcon"
 import { Box, Flex, Text } from "@radix-ui/themes"
 import { useLocation, useParams } from "react-router-dom"
+import { useStickyState } from "@/hooks/useStickyState"
 
 export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }) => {
 
     const { channels, mutate } = useContext(ChannelListContext) as ChannelListContextType
 
-    const [showData, setShowData] = useState(true)
+    const [showData, setShowData] = useStickyState(true, 'expandChannelList')
 
     const toggle = () => setShowData(d => !d)
 
@@ -20,7 +21,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
     return (
         <SidebarGroup>
             <SidebarGroupItem className={'pl-1.5 gap-1.5'}>
-                <SidebarViewMoreButton onClick={toggle} />
+                <SidebarViewMoreButton onClick={toggle} expanded={showData} />
                 <Flex width='100%' justify='between' align='center' gap='2'>
                     <Flex gap='2' align='center'>
                         <SidebarGroupLabel className='cal-sans'>Channels</SidebarGroupLabel>

diff --git a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
@@ -11,19 +11,20 @@ import { Box, Flex, Text } from "@radix-ui/themes"
 import { UserAvatar } from "@/components/common/UserAvatar"
 import { toast } from "sonner"
 import { getErrorMessage } from "@/components/layout/AlertBanner/ErrorBanner"
+import { useStickyState } from "@/hooks/useStickyState"
 
 export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCountData }) => {
 
     const { extra_users } = useContext(ChannelListContext) as ChannelListContextType
 
-    const [showData, setShowData] = useState(true)
+    const [showData, setShowData] = useStickyState(true, 'expandDirectMessageList')
 
     const toggle = () => setShowData(d => !d)
 
     return (
         <SidebarGroup pb='4'>
             <SidebarGroupItem className={'pl-1.5 gap-1.5'}>
-                <SidebarViewMoreButton onClick={toggle} />
+                <SidebarViewMoreButton onClick={toggle} expanded={showData} />
                 <Flex width='100%' justify='between' align='center' gap='2'>
                     <SidebarGroupLabel className='cal-sans'>Direct Messages</SidebarGroupLabel>
                     {!showData && unread_count && unread_count?.total_unread_count_in_dms > 0 &&

diff --git a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
@@ -132,12 +132,11 @@ export const SidebarButtonItem = ({ children, subtle, onClick, isLoading, active
 }
 
 interface SidebarViewMoreButtonProps extends IconButtonProps {
-    onClick: () => void
+    onClick: () => void,
+    expanded: boolean
 }
 
-export const SidebarViewMoreButton = ({ onClick, ...props }: SidebarViewMoreButtonProps) => {
-
-    const [isViewMore, setIsViewMore] = useState(false)
+export const SidebarViewMoreButton = ({ expanded, onClick, ...props }: SidebarViewMoreButtonProps) => {
 
     return (
         <IconButton
@@ -147,12 +146,9 @@ export const SidebarViewMoreButton = ({ onClick, ...props }: SidebarViewMoreButt
             size='1'
             className='cursor-pointer pb-[4px] text-slate-12 bg-transparent hover:text-gray-12'
             highContrast
-            onClick={() => {
-                setIsViewMore(!isViewMore)
-                onClick()
-            }}
+            onClick={onClick}
             {...props}>
-            {isViewMore ? <FaCaretRight size='18' /> : <FaCaretDown size='18' />}
+            {expanded ? <FaCaretDown size='18' /> : <FaCaretRight size='18' />}
         </IconButton>
     )
 }