simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix layout bug with routes

Browse source 
At this point, it feels like I'm writing my own react-router
This commit is contained in:
Lim Chee Aun 2023-01-01 09:18:11 +08:00
parent ac91dc7983
commit 07163f0c3f
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/app.jsx
View file

@ -127,7 +127,9 @@ function App() {
}, []); }, []);
const [currentDeck, setCurrentDeck] = useState('home'); const [currentDeck, setCurrentDeck] = useState('home');
const [currentModal, setCurrentModal] = useState(null);
const focusDeck = () => { const focusDeck = () => {
if (currentModal) return;
let timer = setTimeout(() => { let timer = setTimeout(() => {
const page = document.getElementById(`${currentDeck}-page`); const page = document.getElementById(`${currentDeck}-page`);
console.log('focus', currentDeck, page); console.log('focus', currentDeck, page);
@ -137,7 +139,7 @@ function App() {
}, 100); }, 100);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}; };
useEffect(focusDeck, [currentDeck]); useEffect(focusDeck, [currentDeck, currentModal]);
useEffect(() => { useEffect(() => {
if ( if (
!snapStates.showCompose && !snapStates.showCompose &&
@ -173,7 +175,7 @@ function App() {
return ( return (
<> <>
{isLoggedIn && ( {isLoggedIn && currentDeck && (
<> <>
<button <button
type="button" type="button"
@ -194,7 +196,7 @@ function App() {
</button> </button>
<div class="decks"> <div class="decks">
{/* Home will never be unmounted */} {/* Home will never be unmounted */}
<Home /> <Home hidden={currentDeck !== 'home'} />
{/* Notifications can be unmounted */} {/* Notifications can be unmounted */}
{currentDeck === 'notifications' && <Notifications />} {currentDeck === 'notifications' && <Notifications />}
</div> </div>
@ -209,10 +211,15 @@ function App() {
const { url } = e; const { url } = e;
if (/notifications/i.test(url)) { if (/notifications/i.test(url)) {
setCurrentDeck('notifications'); setCurrentDeck('notifications');
setCurrentModal(null);
} else if (url === '/') { } else if (url === '/') {
setCurrentDeck('home'); setCurrentDeck('home');
document.title = `Home / ${CLIENT_NAME}`; document.title = `Home / ${CLIENT_NAME}`;
setCurrentModal(null);
} else if (/^\/s\//i.test(url)) {
setCurrentModal('status');
} else { } else {
setCurrentModal(null);
setCurrentDeck(null); setCurrentDeck(null);
} }
states.history.push(url); states.history.push(url);