mikeyhogarth / cocktails Goto Github PK
View Code? Open in Web Editor NEWUI for browsing IBA cocktails
Home Page: https://iba-cocktails.netlify.com/
License: GNU General Public License v3.0
UI for browsing IBA cocktails
Home Page: https://iba-cocktails.netlify.com/
License: GNU General Public License v3.0
i'm interested to chat with repo owner
"Créme de Cacao": {
"abv": 20,
"taste": null
},
"Créme de Menthe": {
"abv": 25,
"taste": null
},
"Créme de Cassis": {
"abv": 15,
"taste": null
},
and appropriate changes to the cocktail recipes themselves.
Couple of really minor codacy warnings about the codebase (click the code quality badge on the README, then click "issues") - would be nice to get these cleared up.
No need to fix them all in one PR.
The filter functionality is mixed up with the component rendering logic; for example, there's a filtersFromUserOptions
function that produces some stuff from state
. There are some patterns out there that make this sort of logic much easier to manage, the main of which being reselect
: Introduce this to abstract derived-state logic in a more idiomatic way.
This may be the reason that I am seeing animation janking when I swap out react-redux's HoCs for hooks.
See comments by @markerikson: reduxjs/react-redux#1318 (comment)
All currently promise-based, but we could get more readable code via usage of the more modern async/await
syntax.
Either remove entirely or swap for 1 colour on most cocktails (Exception being things like B52). Whatever is decided, finish it for all cocktails.
Thus far we are just using the default linters provided by CRA. There are some others that look interesting though, in particular;
Also - we should have had this in from the start if we were going to use it but... what about something like airBnB or similar?
Time to get rid of the slow load time by not rendering all cocktails at first, instead only load them when the user scrolls down the list.
How awesome would this be? We have ingredients / quantities, we could render a pie chart showing the makeup of the cocktail :)
Right now the browse cocktails page loads every single cocktail in the database and displays them all - there are only 75 of them so it's not too bad but there is a noticable jank when going to this page which would be aleviated if we only rendered say, 10 cocktails. We could introduce pagination to get around this but another option is to present an infinite scroll to users, maybe using this library;
At the moment we are using one SVG to represent the concept of a 'glass';
import CocktailIcon from "@material-ui/icons/LocalBar";
It would be really cool if this SVG was tailored for each glass type. There are silhouettes of them at the bottom of this wikipedia page;
https://en.wikipedia.org/wiki/List_of_glassware
My only reservation with this is that the current image of the cocktail glass we're using is very definitively representative of the concept "Glass" - some of the other glasses are just going to look like little rectangles and it might make it less obvious what they represent if they're viewed in isolation. All depends on how good the SVGs are I suppose.
New version of the MaterialUI libary came out mid-development - migration guide here;
https://material-ui.com/guides/migration-v3/
Looks like a nightmare :)
Currently we have this kind of thing going on;
// actions
export function loadIngredients(payload) {
return { type: "LOAD_INGREDIENTS", payload };
}
// reducers
case "LOAD_INGREDIENTS":
Where the string "LOAD_INGREDIENTS"
is declared twice (and in fact every time a reducer is run). Aside from being (albeit minimally) inefficient, it also adds an extra level of churn if you ever want to change them. There are a couple of ways we could do this;
Introduce an actionTypes.js
file, put the constants in there, and reference them from actions/index.js
and reducers/index.js
.
Introduce a supporting library such as Redux Actions to help us with this.
I actually don't feel particularly strongly either way - (1) will be simpler and overall be less code in the bundle, but (2) will be neater and will result in less code for us to actually write and work with.
It would be nice to be able to filter on whether a cocktail is vegan or not (e.g. things like cream and eggs) - suggest doing this by adding a "vegan" flag next to each ingredient in ingredients.json
and then it should be really easy to just filter them out using the existing filter code.
Add in some kind of guide to describe what ingredients are / what goes into them. The cocktailDB API actually provides an endpoint to get this information, so probably what we need here is a set of "ingredients" pages, clickable from the cocktail page. OR maybe some kind of boxout on the cocktail page that describes each ingredient.
Mark some cocktails as "favourites" then allow the user to filter based on this.
Using ctrl-F is indicative of a bad UI - and this app currently invites ctrl-Fing to search for specific cocktails. What about a text box in the header to find the cocktail and go straight to its page? Could we maybe even add some kind of intelligent autocomplete so it would search ingredients too?
Are these the same thing? What's the difference? Do we need them both?
Our persistence layer (see persistence.js
) currently defaults to using localStorage
with no fallbacks if the browser doesn't support that functionality (it basically just won't save). It might be worth abstracting this persistence layer out to another library, e.g. store.js
https://github.com/marcuswestin/store.js/
That might also give us some more declarative code to boot.
Or... this might be over-engineering. Have a look and figure out if we think it's worth doing.
Add selected cocktails to the site. Several “classics” (Gimlet, White Russian) aren’t currently on there because they don’t appear on the IBA’s list.
Add functionality to inform people about what the different types of glass are / the size and what they look like maybe. At the moment we just have 'hurricane', 'martini', 'collins' which is great if you know what they are, but not so much if you don't.
This needs a bit of research and refinement - we could indicate on each ingredients if it is potentially an allergen and then show warnings / allow filtering based on this.
The reducer logic is a little convoluted in places, specifically around preserving immutability (there's lots of ...spread going on etc.)
There's a library that can help with this: https://github.com/immerjs/immer
Some cocktails require ingredients to make which aren’t taken into account when filtering.
Examples:
The cocktailDB API sometimes sends back stray spaces and things in its responses and this makes the display go all squiffy in the "variants" section - in particular look at the 'negroni' page - there's a variant whos ingredients look like this;
1 ozGin
1 ozLillet
1 ozSweet Vermouth
1Orange Peel
It doesn't actually happen for all data, so what we'll probably need to do is just shave off all spaces and then add one (so it's not just a case of adding a ' ' space, because then some ingredients will get two spaces!).
We have some snapshot tests, but theyr'e not particularly good - specifically;
We want snapshot tests, but cant' really get those on things like the cocktailItem without introducing enzyme to use its mount
functionality, or introducing things like the react-router MemoryRouter
functionaity into the tests.
Lets spend some time making this good :)
The glass SVGs (currently sitting in the images/glasses
folder) were done by me, very hastily and very poorly. If you think you can do better, by all means go for it :)
Before spending any time though, consult with @laurahogarth on design (the last thing we want is for someone to spend a long time on this and then get their PR rejected because we disagree on whether they're right or not). That said, it is unlikely that anyone will be worse than me so it's probably relatively safe!
The icons need to have the following properties in order to work with the application;
path
elementWe have the abv% for each ingredient - from this it should be possible to calculated the overall abv% for the cocktail and display it. We would need;
fetchCocktails
function that adds it (in much the same way we're adding the slug there)This might be a good resource for writing test cases:
https://www.artofdrink.com/blog/alcohol-percentages-of-cocktails?fbclid=IwAR0kWRiv5P8_Yv0iYIcqpM43mHXzzeJ1_fdn_rwqxGoTK9xbhxBe77UVomU
This needs to be calculated rather than hard-coded against each cocktail so that if we ever add new cocktails it'll just all automatically happen.
Vampiro has honey in, so not vegan, but none of its "ingredients" are marked as vegan - the honey is a "special" and we don't pick up any meta data for those (it's just meant to cover "weird stuff" that whilst technically an ingredient, isn't necessarily something you'd have in your "bar")
We have a number of approaches;
ingredients.json
to stop that happening.I like the sound of (3) personally- these "special" types have been the cause of most of you data problems and most of them are gone now anyway - but need to run it past @laurahogarth
The cocktail list / cocktail page could do with an overall indicator that a cocktail is vegan friendly - we have the data and a filter, might as well create some user feedback too.
At the moment all cocktails are stored with their ingredients in cl
. Let's add a setting that allows you to switch to other forms of measurement. This will involve;
All the ingredient stuff is already in one place, the IngredientDetail
component - the variants functionality doesn't use that component though so for now this just covers the "native" cocktails, not the variants (we can do variants as a seperate PR, but if you're feeling brave then by all means pick it up in this one -it'll involve a bit of extra parsing when the API response comes back from cocktailDB to split out measurement and value, and then the incorporation of the IngredientDetail
component into the CocktailVariant
component)
Redux 7.1.0 introduces hooks;
https://react-redux.js.org/api/hooks
Take a look and see if they are worth having :)
Option setting "units" has no default, and so when viewing the app for the first time all measurements are given as "undefined" - ie;
4.5 undefined of vodka
2 undefined of gin
9 undefined of orange juice
Some kind of "Surprise me" feature that just picks a random cocktail.
Cocktail page itself (the thing you click through to from the browser) is very much in "placeholder" form at the moment. Let's put something more solid in place.
The pattern is now visible, so time to start banging the nails in on this one. Currently every time you want to add a new filter you need to change as many as 6 separate files;
CocktailFilter.js
to add it to the UI (noting down the key you give it)filter.utils.js
to add the label for the filter, and optionally a Component if it's a configurable filter.filter.js#filtersFromUserOptions
to convert what the user asked for into an actual filter.FilterChips
to generate the chip presentation logic for the new filter.filter.js#applyFilter
method in `` to catch the filter and hand off to a filterRule
.filterRules
to include the filter logic.This is a bit whiffy. Some of it I'm okay with... lots of it I'm not. Initial thoughts are;
It basically takes over the whole screen - we knew we'd have to sort it out at some point, that time has probably come.
cocktails.json
has two kinds of ingredient: special
and ingredient
. The special ones are causing a pain because it means you can filter for cocktails and then find you still can't make it - additionally some of the special ingredients aren't vegan (e.g. #85) and it means that filter isn't working.
So, let's ditch the concept of a "special" completely and promote all specials to ingreients.json
.
This will initially mean that they will all appear in the bar / on the ingredient filter, but we can introduce a feature to get rid of them later.
{ "special": "6 Mint sprigs" },
{ "special": "1 dash Lime juice" }
becomes
{ "amount": 3, "ingredient": "Mint sprigs" }
{ "amount": "1 dash", "ingredient": "Lime juice" }
// ...and add "Mint sprigs" and "Lime juice" to ingredients.json
There are 26 of them. There is one weird one;
{ "special": "Dash of Angostura bitters (optional)" }
As this is optional, it shouldn't be affected by any of the filters, so just leave it as special for now.
"Pride" mode - the white text with a yellow background is a bit hard to read - what can be done about it?
Cocktail pages, for example https://elated-shockley-96a155.netlify.com/cocktails/manhattan
The titles aren't readable on mobile - it forces you to scroll sideways - should be responsive to viewport size. There is probably a utility function in material UI that does this for us (that I've just neglected to use)
Is it possible to add a "ORDER" button to the selected drink menu? and have this button send the list of ingredients and measure to a serial port?
The idea it to make your program a front-end for a drink mixing machine, like: https://www.youtube.com/watch?v=49msONntdEQ
These machines typically have an Arduino or some sort of microcontroller connected via USB serial to the host PC.
A program on the Arduino will then control motor and pumps, LED's, etc.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.