Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: track last state left and right panel (#3477)

Browse Source
This commit is contained in:
Faisal Amir 2024-08-28 20:20:12 +07:00 committed by GitHub
parent 1c5b6355d9
commit 49166d0209
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/containers/Providers/Responsive.tsx
View File

@ -1,24 +1,33 @@
import { Fragment, PropsWithChildren, useEffect } from 'react'
import { Fragment, PropsWithChildren, useEffect, useRef } from 'react'
import { useMediaQuery } from '@janhq/joi'
import { useSetAtom } from 'jotai'
import { useAtom } from 'jotai'
import { showLeftPanelAtom, showRightPanelAtom } from '@/helpers/atoms/App.atom'
const Responsive = ({ children }: PropsWithChildren) => {
const matches = useMediaQuery('(max-width: 880px)')
const setShowLeftPanel = useSetAtom(showLeftPanelAtom)
const setShowRightPanel = useSetAtom(showRightPanelAtom)
const [showLeftPanel, setShowLeftPanel] = useAtom(showLeftPanelAtom)
const [showRightPanel, setShowRightPanel] = useAtom(showRightPanelAtom)
// Refs to store the last known state of the panels
const lastLeftPanelState = useRef<boolean>(true)
const lastRightPanelState = useRef<boolean>(true)
useEffect(() => {
if (matches) {
// Store the last known state before closing the panels
lastLeftPanelState.current = showLeftPanel
lastRightPanelState.current = showRightPanel
setShowLeftPanel(false)
setShowRightPanel(false)
} else {
setShowLeftPanel(true)
setShowRightPanel(true)
// Restore the last known state when the screen is resized back
setShowLeftPanel(lastLeftPanelState.current)
setShowRightPanel(lastRightPanelState.current)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [matches, setShowLeftPanel, setShowRightPanel])
return <Fragment>{children}</Fragment>