Create history component

[saranicoly]

What's the purpose of this pull request?

This PR aims to show the user's search history in base store, which is made by creating a "SearchHistory" component.

How it should look like:

How it is actually looking like:

How does it work?

• When the user clicks on "search bar", if there are any previous searches saved in the local storage, SearchHistory must appear:

Gravacao.de.Tela.2022-03-15.as.19.35.16.mov

• If the user has never searched anything, or if they press the "clear" button, there won't be any search saved in the local storage. In this case, the shown component will be "SuggestionsTopSearch":

Gravacao.de.Tela.2022-03-15.as.19.52.24.mov

• When clicking any of the listed searches, the component must do another search with the same name:

Gravacao.de.Tela.2022-03-15.as.20.07.35.mov

How to test it?

Since the component will be part of the Suggestion's dropdown component, we don't have a specific place to render it yet. That said, you can test SearchHistory by following the steps below:

Supposing that you want to see it on Navbar:

• Open the Navbar.tsx file
• Add the following imports:

import SearchHistory from 'src/components/search/History/SearchHistory'
import useSearchHistory from 'src/sdk/search/useSeachHistory'
import { SuggestionsTopSearch } from 'src/components/search/Suggestions'

• Add const { searchHistory, clearSearchHistory } = useSearchHistory() inside the Navbar() function:

• Add the following lines to the SearchInput call:

onBlur={() => setSearchExpanded(false)}
onFocus={() => setSearchExpanded(true)}

• Before closing the section tag, add the following lines:

{searchExpanded && searchHistory.length > 0 && (
    <SearchHistory onClear={() => clearSearchHistory()} />
 )}
{searchExpanded && searchHistory.length === 0 && (
    <SuggestionsTopSearch
        searchedItems={[
            {
                  href: 'http://localhost:8000/tasty-granite-towels-tasty-18643698/p',
                  name: 'Tasty Granite Towels Tasty',
            },
        ]}
    />
)}

• After that, you'll be ready to test the component!

Possible issues

• Some of the functionalities aren't working well on Desktop. This is probably because the component bar is closed before the function can work when we click it.
• Since the actual rendering of this component will be done in another task and these issues are likely related to the way SearchHistory is being called in the Navbar, it was accorded within the team that the investigation would be done later.
• If you face any issue related to this, try to visualize it as a mobile device.

References

• Task description
• Search history storage
• Search Suggestion Dropdown task

Checklist

• CHANGELOG entry added

[netlify]

✅ Deploy Preview for basestore ready!

🔨 Explore the source changes: 2ed3b8f

🔍 Inspect the deploy log: https://app.netlify.com/sites/basestore/deploys/6234d87e3b5a7800097ca0a4

😎 Browse the preview: https://deploy-preview-391--basestore.netlify.app

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://preview-391--base.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit fb6cbb8

[gatsby-cloud]

Gatsby Cloud Build Report

basestore

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 11m

Performance

Lighthouse report

Metric	Score
Performance	💚 92
Accessibility	💚 100
Best Practices	💚 100
SEO	💚 93

🔗 View full report

[israelswf]

Great job, Sara ✨

[filipewl]

Left some initial comments for us to discuss!

[filipewl]

Noticed we have this same function on the SearchInput component so I wonder we can how we can extract it to a single place.

base.store/src/components/common/SearchInput/SearchInput.tsx

Lines 24 to 30 in 157ac94

	const doSearch = async (term: string) => {
	const { pathname, search } = formatSearchState(
	initSearchState({
	term,
	base: '/s',
	})
	)

[eduardoformiga]

Nice catch!
I think when we have all search-related components integrated we are going to have a more clear way about how to reuse the same function.

[saranicoly]

I agree with @eduardoformiga. How do you guys feel about adding a task to do that in the next sprint?

[eduardoformiga]

Agree with you!

[eduardoformiga]

Good Job! 👏

I left some comments/suggestions regarding the row alignment.

[eduardoformiga]

Nice catch!
I think when we have all search-related components integrated we are going to have a more clear way about how to reuse the same function.

[lucasfp13]

Great job, LGTM! 💯

Just a small thing I noticed is that the CSS file name is not following the pattern we have in the project. Instead using SearchHistory.scss you can leave as search-history.scss to keep consistency.

[filipewl]

LGTM! Just one more question about opening the searches in a new tab.