Add ui to switch between recipes and chefs feeds #1588
Conversation
| </React.Fragment> | ||
| ); | ||
| }: Props) => { | ||
| const [selectedOption, setSelectedOption] = useState<string>('recipeFeed'); |
There was a problem hiding this comment.
Tiny point - I've found that if you specify a default value like this, Typescript can infer the type and you don't have to specify it directly with <string>
There was a problem hiding this comment.
My preference for this is to use numbers, defined as enums (https://www.typescriptlang.org/docs/handbook/enums.html); reason is that it's quicker for the machine to compare and process numbers than strings. However these days I guess that the performance difference is negligible though I would encourage the use of enums or constants over "magic value" strings because if you put a typo in an enum value the compiler complains wheras if you put a typo in a "magic value" string the app breaks
There was a problem hiding this comment.
Makes more sense. updated with enum. thanks @fredex42
| </InputContainer> | ||
| <RadioGroup> | ||
| <RadioButton | ||
| checked={selectedOption === 'recipeFeed'} |
There was a problem hiding this comment.
See my point above about defining 'recipeFeed' as an enum value
| {selectedOption === 'recipeFeed' | ||
| ? Object.values(recipes).map((recipe) => ( | ||
| <RecipeFeedItem key={recipe.id} recipe={recipe} /> | ||
| )) | ||
| : Object.values(chefs).map((chef) => ( | ||
| <ChefFeedItem key={chef.id} chef={chef} /> | ||
| ))} | ||
| </FixedContentContainer> |
There was a problem hiding this comment.
I think that this is fine for the time being, but the ternary syntax doesn't extend very nicely if we want to put a third option in. To be honest my preference here would be to use a second functional component in the file which contains a switch block on the selectedOption value (passed over as a param) but I wouldn't bother making that change now unless we know that we are going to need a third case 😁
There was a problem hiding this comment.
Yeah changed to switch case, thanks. This will help in scalability.
What's changed?
This will add radio buttons to switch between recipes and chefs feeds.
Based on selection the result will display accordingly.
At present data for both recipes and chefs are based on fixture data and will be replaced by live items soon.
ref: https://trello.com/c/GlwlhweJ/2935-add-ui-for-switching-between-different-searches
Note: Search functionality is not done in this PR, will be covered in next task.
Screen.Recording.2024-05-24.at.11.19.54.mov
Implementation notes
Checklist
General
Client