Display message to the user if an empty search is performed

[JasonFritsche]

Currently, if nothing is entered in the search input, and the user presses enter or clicks the button to search, a search is not performed. This behavior is fine. However, a message should be displayed that tells the user that the search bar cannot be empty.

This can be a modal that pops up, or a paragraph or heading tag that is hidden, and then is displayed for maybe 3 or seconds. The message should say something like "Search cannot be empty" or "Please enter a search term", or something similar.

[cdrani]

Why is this necessary at all? Why not just disable the the search button if the input is empty. Additionally also cancelling the form submission if user presses enter key on an empty input.

[JasonFritsche]

This is just an elegant way of handling an empty search. It would be fine without it, but why not show a brief message. It doesn't have to be a modal, a paragraph tag that is shown for a brief period of time would be fine.

[ghost]

Does this issue still require help? I'd be glad to take it. Thanks !

[JasonFritsche]

Go for it. Thank you

…

On Sat, Mar 23, 2019, 19:11 Pablo Rosas ***@***.***> wrote: Does this issue still require help? I'd be glad to take it. Thanks ! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#37 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AhO7wGtej6RA2zJENXJFwhMLLN7FvwbOks5vZsK3gaJpZM4biV5Z> .

[ghost]

I've implemented a preliminary on my branch, here is a giphy recording: modal on empty search bar, please let me know if you can see the recording, thank you !

[ghost]

i'm not sure how the overall project will react, but i've added modal from bootstrap. meaning, i had to add bootstrap based on the documentation from Modal API - React-Bootstrap, in specific, the documentation points towards adding the dependency. on my local machine this was a quick fix,

Steps:
Terminal > Project Directory (inside Brewery Finder) > *CMD
*CMD => npm install react-bootstrap bootstrap according to install react-bootstrap

import Modal from 'react-bootstrap/Modal'

[cdrani]

@PabloRosas17: When you get the chance can you take a look at #42 code review?

[bonbon12]

Hi, what about using tool tips to display the "empty search" message.
I'm thinking of a few different ways:
->Either when they click on the search bar it displays

->Rendering it in after an empty search

Let me know what you guys think

[JasonFritsche]

@bonbon12 I don't think a tooltip is appropriate for this issue.