fix(login/chat): fixed inf rerender bug
there was an infinit rerender when a user was visiting the chat site while not being logged in, this was caused because functions weren't wrapped in a useCallback
This commit is contained in:
parent
6a88c1b516
commit
d6b7957640
|
@ -1,33 +1,38 @@
|
||||||
import {useSearchParams} from "react-router-dom";
|
import {useSearchParams} from "react-router-dom";
|
||||||
|
import {useCallback, useMemo} from "react";
|
||||||
|
|
||||||
export const useSearchParamToggle = (key: string) => {
|
export const useSearchParamToggle = (key: string) => {
|
||||||
const [searchParams, setSearchParams] = useSearchParams()
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
|
||||||
const value = searchParams.get(key) === "true"
|
const value = searchParams.get(key) === "true";
|
||||||
|
|
||||||
const open = () => {
|
const open = useCallback(() => {
|
||||||
|
if (value) return;
|
||||||
setSearchParams(prev => {
|
setSearchParams(prev => {
|
||||||
const newParams = new URLSearchParams(prev);
|
const newParams = new URLSearchParams(prev);
|
||||||
newParams.set(key, "true")
|
newParams.set(key, "true");
|
||||||
return newParams
|
return newParams;
|
||||||
}, {replace: true})
|
}, {replace: true});
|
||||||
}
|
}, [key, value, setSearchParams]);
|
||||||
|
|
||||||
const close = () => {
|
const close = useCallback(() => {
|
||||||
|
if (!value) return;
|
||||||
setSearchParams(prev => {
|
setSearchParams(prev => {
|
||||||
const newParams = new URLSearchParams(prev);
|
const newParams = new URLSearchParams(prev);
|
||||||
newParams.delete(key);
|
newParams.delete(key);
|
||||||
return newParams;
|
return newParams;
|
||||||
}, {replace: true})
|
}, {replace: true});
|
||||||
}
|
}, [key, value, setSearchParams]);
|
||||||
|
|
||||||
|
const toggle = useCallback(() => {
|
||||||
|
value ? close() : open();
|
||||||
|
}, [value, close, open]);
|
||||||
|
|
||||||
|
const handler = useMemo(() => ({open, close, toggle}), [open, close, toggle]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
value: value,
|
value,
|
||||||
handler: {
|
handler
|
||||||
open,
|
|
||||||
close,
|
|
||||||
toggle: () => value ? close() : open()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@ import ListMessagesView from "@/pages/chat/ListMessagesView.tsx";
|
||||||
import {usePB} from "@/lib/pocketbase.tsx";
|
import {usePB} from "@/lib/pocketbase.tsx";
|
||||||
import {useLogin} from "@/components/users/modals/hooks.ts";
|
import {useLogin} from "@/components/users/modals/hooks.ts";
|
||||||
import Announcements from "@/pages/chat/components/Announcements.tsx";
|
import Announcements from "@/pages/chat/components/Announcements.tsx";
|
||||||
|
import {useEffect} from "react";
|
||||||
|
|
||||||
const ChatIndex = () => {
|
const ChatIndex = () => {
|
||||||
return <Center>
|
return <Center>
|
||||||
|
@ -23,8 +24,11 @@ export default function ChatRouter() {
|
||||||
|
|
||||||
const {handler} = useLogin()
|
const {handler} = useLogin()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!user) handler.open()
|
||||||
|
}, [user])
|
||||||
|
|
||||||
if (!user) {
|
if (!user) {
|
||||||
handler.toggle()
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue