jasonfritsche/breweryfinder

Find breweries all over the country

breweryfinder's Issues

separate out the footer element into a component

The footer element in BrewerySearch should be factored out into a component for reusability. Additionally it should be moved into the App component so it is rendered on all the pages and not just the BrewerySearch page.

update style on BreweryList navbar

The navbar at the top of BreweryList looks like this:

Things to fix:

• all that empty space should be removed
• make scrolling text larger
• center the scrolling text and the button horizontally and vertically (maybe try using flex or grid)
• align most right edge of button with right edge of most right edge brewery card

Any other changes you deem suitable will also be considered.

Update Style

This project is currently using the Slate theme from Bootswatch. The CDN is linked in the index.html file. This doesn't necessarily need to be changed. Please feel free to submit any ideas that you have for updating the styling of the project.

refactor App component to functional component using hooks

Site Is Not Mobile Friendly

Somewhere along the way, the site lost it's responsiveness. The site needs to be mobile-friendly/responsive. I feel like this is a good first issue, but it's open to anyone.
Thanks!

render Footer component in App component

Current Behavior

The Footer component should be displayed across all pages. Currently it is only rendered in the BrewerySearch component.

Possible Solution

Move the Footer component out of the BrewerySearch component and into the App component.

travisci setup for automatic builds and deployments

Everything starting from React Stuff and down is not pertinent to this project - it's all about create-react-app. A simple ci/cd file could run build, tests, and deploy the app automatically which is especially good for pull requests reviews.

I recommend travisci: https://medium.com/@sumn2u/automate-create-react-app-deployment-to-gh-pages-using-travis-ci-b2a97203680b.

/cc @JasonFritsche

Go for flat design

As the project is still in its initial stage.I think its better to go for a more flat material inspired design than a page with a background image.Plus it's look more flashy right now.Like for the light background image you had to pop up the title text color with a flashy white color which does not look very good.So these are the few things on design, i suggest :

1. Flat material inspired design
2. Make good use of shadows and gradient.
3. may be use small sized vector images for beer representation than a actual beer background image.
   [Note : The image takes some time to load too ,may be not optimized properly.]

hours of operation on cards

Having hours of operation on the displayed card results would be a handy benefit. This would be a feature for sure.

Remove/Do not display "Brewery In Planning" items in list

Steps to Reproduce:

• Type in Austin as the city
• Scroll down ad find the cards in the list with the title "Brewery In Planning"

Expected Result:

• Filter out all instances of "Brewery in Planning" so that they are not displayed

Display message to the user if an empty search is performed

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.

update text of unsuccessful search to be dependent on search type

  displayResult(brewery) {
    if (!brewery.length) {
      return (
        <h1 className="Kreon-Text text-center">
          We couldn't find anything in that location...
        </h1>
      );
    } else {
      return brewery.map(item => {
        return <Brewery key={item.id} item={item} />;
      });
    }
  }

This text is based on searches by either city or state. It will need to be updated, possibly to something like:
Sorry, we couldn't find a brewery with the ${searchBy} of ${searchTerm}. Please try again with a different search filter perhaps.

App should pass down searchBy and searchTerm props to BreweryList.

NOTE: This should wait until #21 has been merged with the additional search options.

Add favicon

The site needs a simple favicon now.

unnecessary fetch on App.js first render

Current Behavior

When the page first renders, there's a network request to the brewery api even when a user has yet to enter a search term. This is unnecessary and could prove to be an issue if the api has a rate limit. Additionally, the api by default returns an array of objects regardless if parameters are provided.

Expected Behavior

There should not be an api request on first load.

Possible Solution

Prevent the api request altogether at first load. In the useEffect hook in App.js make this change:

- const searchChanged = searchTerm !== prevSearchTerm
+ const searchChanged = searchTerm && searchTerm !== prevSearchTerm

Please check the Network tab on page load to see that there's not a fetch request when the page first loads.

brewery prop in Brewery component has incorrect PropTypes

/src/components/Brewery.js

Brewery.propTypes = {
  brewery: PropTypes.objectOf(PropTypes.string).isRequired
}

brewery is not just an object of strings, as it's id value is of type number. Therefore we should change it to type any to allow both value types of string and number.

FIX

Brewery.propTypes = {
  brewery: PropTypes.objectOf(PropTypes.any).isRequired
}

swatch or slate theme?

Swatch Theme

This project is currently using the Slate Bootswatch theme. https://bootswatch.com/slate/

Is Swatch a combo of Slate BootSwatch? Should it be changed to just Slate Theme?

project has both yarn.lock and package-lock.json

It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files.

In the readme you already state to use npm, therefore the yarn files should be removed

Expand Search Options

The Open Brewery DB API (https://www.openbrewerydb.org/) includes filter/search parameters such as by_city, by_name, by_state, by_type, by_tag. We should find a way to implement these in to the project. Currently the project is only searching by city.

My idea was to include a radio group or checkbox that asks the user if they want to search by city, state, etc. All ideas are welcome.

use react-router-dom for conventional routing

Context

It's not a big deal, as the current routing implementation works, but to adhere to the convention, I would suggest using react-router-dom instead of the current diy routing configuration.

Current Behavior

The useState hook is being used to keep track of which page to render. The state shouldn't need to be used to control page routing. Additionally, props and functions are being passed around to switch/reroute pages.

Expected Behavior

Remove all useState hooks and props relating to routing/pages and replace their functionality with react-router-dom. This will clean up the codebase and make it easier to test some of the related components.

unnecessary url in state?

url does not need to be stored in state. There's no apparent reason for it to be there.

  async fetchBreweryData() {
    try {
      this.setState({ isLoaded: false });
      const { searchTerm, searchByParam } = this.state;
      const url = `https://api.openbrewerydb.org/breweries?by_${searchByParam}=${searchTerm}`;
      const data = await fetch(url);
      const jsonData = await data.json();
      const cleanData = this.filterResults(jsonData);
      this.setState({
        isLoaded: true,
        items: cleanData
      });
    } catch (error) {
      console.log(error);
    }
  }

Additionally, isLoaded could also be replaced with React.Suspense, although there's no real benefit from this change other than not needing to worry about another state value.

make footer stick to bottom

Make this stick to the bottom of the page.

Integrate Testing

Create-react-app ships with Jest. Before implementing CI/CD, this project needs to make use of Jest and implement testing. I will be working on this, but if anyone has experience with testing feel free to jump in.

search bar auto suggestions

It would be a feature that would allow reading registered fields city, state, name, type to autocomplete based on predictive text. For example, Sacramento has 31 places in the world with similar names, according to names similar to Sacramento. I'm thinking that state would fall under the same category, but for name and type that would be based on our database and which beer names and beer types we have.

create an Anchor component

It seems this anchor tag:

<a
  className="btn btn-block"
  target="_blank"
  rel="noopener noreferrer"
  href={websiteUrl}
>
  Check Them Out
</a>

is being duplicated a few times and should be made a component. It should be able to accept the following props:

• children (for anchor text i.e Check Them Out or View Map or child elements)
• url for the href value.
• classes for some classes

Possible Solution

import React from 'react'

const Anchor = ({ children, classes, url }) => (
  <a
    className={classes}
    target="_blank"
    rel="noopener noreferrer"
    href={url}
  >
    {children}
  </a>
)

export default Anchor

After creating the component all references of the html anchor tag should be replaced with the Anchor component with the appropriate props.

why the call to toLowerCase() when the string is manually typed in?

BreweryFinder/src/App.js

Line 38 in 72b3f14

!item.name.toLowerCase().includes("Brewery In Planning".toLowerCase())

FIX ME

!item.name.toLowerCase().includes('brewery in planning.') 

update style of buttons in brewery cards

The brewery info cards currently look like this:

I think it should be better suited that the buttons should be side by side as it would look better.

Changes to consider:

• change 'Check Them Out' to 'Visit'
• change 'View Map' to 'Map'
• display buttons side by side
• add some padding to buttons to beef up buttons
• reduce the blur/box-shadow or whatever it around the buttons from bleeding out so much

Any additional changes you deem fit will also be accepted.

jest testing issue

This is in reference to jestjs/jest#8050. Currently running npm run test causes the test to fail because of an issue with jest and node at v11.11.0. This is due in part to [email protected] using an older version of jest. Issue seems to be fixed in next major version of react-scripts.

Will update react-scripts@next tag for now until official major release.

Fix button color issue

The last button used stays highlighted in black.

add beer mug favicon

There's a beer mug image or vector in the public folder which might be suitable to use as a favicon for the app. Other alternatives are also acceptable as long as they are similar in theme to this app.

Do not display website/url button for brewery if website does not exist.

Steps to Reproduce:

• Search for Houston as the city
• Click the link for the Anheuser-Busch , and the "Brewery in Planning" websites

Expected Result:

• Do not show button for website if url does not exit

Horizontal Scrollbar on Home Page

Context

Noticed this behavior while playing with souce code and looking at other open issues.

Expected Behavior

There should not be horizontal scroll on the index page as it is currently constructed.

Current Behavior

On the home page, there is horizontal overflow due to the contents of the header area text and typing animations containers. Options for testing limited where I'm currently working but at minimum occurs on the following:

Google Chrome
Mozilla Firefox: 66.0.2 (64-bit)
71.0.3578.98 (Official Build) (64-bit)
Ubuntu 18.04
1920x1080 resolution

Possible Solution

Applying a container around the offending items causing the overflow resolves the issue. (PR coming)

Screenshot(s)

search on enter key

Enter key press while focused on search input should also submit form.

setup some code linter like prettier or eslint to enforce code style

I noticed the code differentiates between single and double quotes, semicolons and no semicolons, etc. I believe eslint is already included, but add a fix script so that code is fixed according to eslint's configs.

Additionally, a pre-commit hook would be most effective, preventing commits until there are no eslint warnings or errors.

update react and react-dom versions

To make use of those sweet, sweet hooks. Also could lead to refactor of some components.

refactor RadioButtonContainer components to be rendered from map

Currently the four RadioButtonContainer's are just copied four times, with each one only having a single change - the searchBy parameter. This could be refactored using a map with an array of the searchBy paramters: ['city', 'state', 'name', 'type']

update style on footer

Currently the foot looks like this:

This is alright for small mobile screens, but for tablet screens and up they can be centered side by side on the same line.

place tool-tip on bottom

ReactTooltip default place is on top, but this places it right over the search bar. Update it's place prop to be bottom. Also it might be an idea to make it's ui lighter instead of the current dark theme. Play around with it.

make setup more beginner friendly

The steps should be more verbose, especially for beginners trying to set this project up. Most of the steps should be able to be copy and pasted to terminals.

Please reference this: https://github.com/JasonFritsche/rebus/blob/master/README.md

refactor BreweryList from class to functional component

Brewery does not need to be a class component as it does not make use of state or lifecycles. This is to adhere to react best practices.

bottom container, animations

It would enhance the UX if we could implement a bottom container at the main page. This container would be dedicated to display media in a synchronized manner as the current animated text is producing it's text.

Some cases for this issue:

1. Find a brewery in your hometown,
2. Find your new hangout,
3. Find your new favorite beer,
4. Find the answer to your problems

Some answers for the cases:

1. display a map of the U.S. with photoshop editing, could include google markers in the form of beer icons
2. display a collage (not too many, perhaps 5 would be good) of different hangout places to drink beer, parks, beach, fruit fields, city, highway
3. display a collage of as many beers as we could possibly find
4. display some problems (please feel free to be creative)

Create Component for Brewery detail/map

This is an enhancement feature. Once on the list of breweries, we should be able to click on any of the breweries for more details. This new component would show the details, and a map (possibly Google Maps).

Let me know your thoughts, or if you want to take this one.

add code of conduct

Please reference https://github.com/cdrani/anml/blob/master/CODE_OF_CONDUCT.md.
Email might have to be updated with @JasonFritsche contact instead.

Radio Buttons should use tooltips

The radio buttons should use tooltips to help describe the criteria. The Type and Tag radio buttons are not useful if people don't know the criteria.

Handle Empty search

Currently if you click or press enter with no search parameter in the search input, you will get results. We should implement a check, if no search parameter is entered...don't let a search happen, else, let the search happen. This seems like a good first timer issue. Have fun!