How can i implement facebook style messaging system?
Unanswered
yekoba posted this in #help-forum
yekobaOP
I want to implement a facebook style messaging system where user can click the button in right bottom and messaging menu will pop up. I need to add this button to layout that is why i cant use search params, how to fetch user data in client component?
26 Replies
Sun bear
idk why you couldn't fetch the data in this component
pages are also in layout and they can fetch from server
@Sun bear Click to see attachment
yekobaOP
but messages is not a page
its a component
i put the messages in layout that is why it cant get search params
cant you use useSearchParams?
Sun bear
what i don't understand
you can use context
yekobaOP
how to do that
<div className="flex-1 relative flex md:flex-row justify-center overflow-auto ">
<MessageMenu></MessageMenu>
{props.children}
</div>
this is my code in layout
<MessageMenu></MessageMenu>
{props.children}
</div>
this is my code in layout
message menu is client comp
Sun bear
what are you trying to achieve get searchParams?
yekobaOP
i want to fetch messages for selected chat id for example
i want to get selected chat id via search params
and fetch data in server component
but i cant do that
Sun bear
I've been thinking and there is not really an elegant way to render it on server as far as I could think of. You can just fetch everything on the client.
"use client"
export function Messages() {
const searchParams = useSearchParams()
const chatId = searchParams.get("chat-id")
const [data, setData] = useState(null)
useEffect(() => {
async function fetchData() {
// fetch the data using it's server action and chatId from searchParams
const chatData = await getChatData({chatId})
if (data) setData(chatData)
}
fetchData()
}, [chatId])
// return component...
}