SearchBar style

[tyxxxx]

Hi All,

I finished my part. I made two videos, you can check on Slack

Now, you can see the format change. Click the search icon to filter accordingly, and click Cancel to return to all posts interfaces.

Other changes I made:

1. The search bar style
2. filtering by keyword (title and address)
3. When the minimum price is greater than the maximum price, a prompt will appear
4. Userlist can filter out the posts corresponding to each user. After filtering, you can still search the price and location of the filtered Posts again
5. I removed all CSS formats from the userlist.js

[BarneyShi]

@tyxxxx The other thing is to remove http://localhost:4000 from API calls so we can deploy our project later.

[NaithanB]

@BarneyShi good point - I'll need to do that too.

[NaithanB]

Awesome that the search matches partial words. The searches are working well for me.

I found a couple picky details that might be worth considering.

• For the cancel button implementation, if you do “setQuery(“”)” rather than “searchAll()” on line 67 the posts will revert back to the stored posts and we avoid having to wait for the server to reload everything again.

• There is a searchbar copy.js file that I think should probably be removed before committing to the project branch.

• Try resizing the page so that the view is really narrow. I think that it would look better if the searchbar, search button and cancel button were kept together so that when the components wrap, those three wrap at the same time. Could we get that effect by putting them in the same div? It’s possible for the search bar to be on one level and the search button to be on the next. Not a big deal for the moment though. We probably need to make a few adjustments to the home page for mobile sized devices. We can discuss that on Tuesday maybe. I will probably need to do something with the Post button too… Hmm.

Not for this PR but for later - I think we need some sort of “no posts found” text indication to appear when there are no results to show. Otherwise, if the user’s page loads really quickly and they don’t see the spinner, they might think the page is stuck waiting for the results. This might be a good thing for me to implement since it would be more to do with the PostCollection.

[tyxxxx]

@NaithanB I changed searchAll() to setQuery("") and deleted the searchbar copy.js, you can check it.

For mobile sized devices, I think we need discuss more detailed. Now I just put these in the gray box. I tried to divide these into two lines on the mobile sized devices, but the display on the computer sized devices display doesn't look so beautiful. Yes, your post button also needs to be adjusted. We can discuss it tmr

[NaithanB]

Great. Thanks for making those changes! That's working well. One more minor thing (sorry) - could the input type for the price inputs be set to "number" instead of "text" on lines 58 and 64 in SearchBar? At the moment we could type in text in those fields and get an error.