fix: resolve mobile keyboard fluctuation during search

[badrivlog]

Fixes Issue

closes #9208

Changes proposed

Implemented URL search params search functionality

When a user searches for user profile and submit the search form or clicked on the tag, the URL params will be updated, data will be fetched on the server, and the search page will re-render with the new data.

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

Biodrop.Search.Users.-.Google.Chrome.2023-11-14.21-48-06.mp4

Note to reviewers

[badrivlog]

Hey, any news regarding this PR? Thanks.

[badrivlog]

@eddiejaoude any advice or guidance regarding this PR

[eddiejaoude]

Sorry I am moving house and country so behind on notifications at the moment

[sital002]

Instead of using useEffect we can use useLayoutEffect https://github.com/EddieHubCommunity/BioDrop/pull/9248/files#diff-99c55e6229f7a0d904e59da5da6e77729e62b05852484cf2afff2e13292b50b1R96-R101 but useLayoutEffect but it has some drawbacks here is the link for useLayoutEffect https://react.dev/reference/react/useLayoutEffect

[badrivlog]

Thanks @sital002 for your great suggestion👍 @eddiejaoude can you take a look now

[eddiejaoude]

Great collaboration 👍 it works well

I notice there is an error in the terminal from these changes though...

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at Search (webpack-internal:///./pages/search.js:90:16)
    at main
    at div
    at MultiLayout (webpack-internal:///./components/layouts/MultiLayout.js:17:24)
    at SessionProvider (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/next-auth/react/index.js:454:24)
    at m (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/next-themes/dist/index.js:1:310)
    at exports.ThemeProvider (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/next-themes/dist/index.js:1:3611)
    at MyApp (webpack-internal:///./pages/_app.js:30:18)
    at StyleRegistry (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/styled-jsx/dist/index/index.js:449:36)
    at ek (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:30:13126)
    at eY (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:1766)
    at eV (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:3110)
    at div
    at e1 (/Users/ej/Downloads/repos/EddieHub/LinkFree/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:48:761)

[sital002]

I think we should wrap the input in a form and only update the URL on submit instead on change since we are planning to do a db call for searching users using on change will have unnecessary db calls this will solve the fluctuation error the issue is whenever we update the query params using next router the default behavior is that it rerenders the whole page this means it is running all the useEffect every time the input data changes and the focus is rerunning.

[badrivlog]

I think we should wrap the input in a form and only update the URL on submit instead on change since we are planning to do a db call for searching users using on change will have unnecessary db calls this will solve the fluctuation error the issue is whenever we update the query params using next router the default behavior is that it rerenders the whole page this means it is running all the useEffect every time the input data changes and the focus is rerunning.

Thank you for your co-operation. That's a great idea👍

I would like to hear other maintainers thoughts on it since this will change searching behavior

[eddiejaoude]

I think we should wrap the input in a form and only update the URL on submit instead on change since we are planning to do a db call for searching users using on change will have unnecessary db calls this will solve the fluctuation error the issue is whenever we update the query params using next router the default behavior is that it rerenders the whole page this means it is running all the useEffect every time the input data changes and the focus is rerunning.

I think this is a good idea also 👍

[sital002]

Tested on local environment works well
can you add the missing dependency on the useEffect https://github.com/EddieHubCommunity/BioDrop/pull/9248/files/0db01c52abb61e2ac56b8a1fa776d825fbb8e50f..0272140c79a7bfe45eb269408e7fc2138d34faca#diff-99c55e6229f7a0d904e59da5da6e77729e62b05852484cf2afff2e13292b50b1R147

[badrivlog]

can you add the missing dependency on the useEffect

Yes we should add missing dependency on the useEffect, but if I add replace method as a dependency then the problem I'm facing with this is related to the fact that the whole router object will change when the querystring update, and effect will re-run because of the replace method reference change.

in my opinion, if the logic within our useEffect doesn't rely on changes to the replace method, I think it makes sense to omit it from the dependency array. wdyt?

[eddiejaoude]

Looks great, thank you 👍