Have a default search result on search page before user make a search

Question

I have set up a search page in nextjs and already made the functionality to fetch the data from the database (supabase). When the user lands on the page it now sees the search bar but of course no results yet as the user did not use the search.

• I use the App Router

Snippet. I use useState to set the searchResults and display this on the page.

const [searchParams, setSearchParams] = useState('');
const [searchResults, setSearchResults] = useState<any[]>([]);

 const handleSearch = async (event: React.FormEvent) => {
        event.preventDefault();

        const { data, error } = await supabase
            .from('database')
            .select()
            .textSearch('data_name', `${searchParams}`, {
                'type': 'websearch',
                'config': 'english',
            })
            .range(0, 9)

        if (data) {
            setSearchResults(data);
        }

When there is a valid search this is being triggered

const ValidSearchResult = () => {
        return (
            <div className='...'>
                {searchResults.map((data: props) => (
                    <Cards key={data.id} {...data} />
                ))}
            </div>
        )
    }

time to display it on the page after a user used the search

return (
    { searchResults ? <ValidSearchResult /> : null }
)

Question On landing on the page, I would like to see a default set of data when loading the page that will be replaced when the user uses the search function. But I cannot figure out how to handle this with the App Router version.

Answer 1

To have some default data displayed on load, you can use the useEffect hook from React. As an example, like below:

const [defaultResults, setDefaultResults] = useState<any[]>([]);
useEffect(() => {
  async function fetchDefaultData() {
    const { data, error } = await supabase
      .from("database")
      .select()
      .range(0, 9);

    if (data) {
      setDefaultResults(data);
    }
  }
  fetchDefaultData();
}, []);

Notice ValidSearchResult is now getting the results to display as prop:

const ValidSearchResult = ({results}) => {
  return (
    <div className="...">
      {results.map((data) => (
        <Cards key={data.id} {...data} />
      ))}
    </div>
  );
};

And your retrun part would be like so:

return (<ValidSearchResult results={searchParams ? searchResults : defaultResults} />);