Merge pull request #1588 from guardian/db/add-search-ui-for-recipe-chef

Add ui to switch between recipes and chefs feeds

fronts-client/src/components/feed/RecipeSearchContainer.tsx

@@ -2,7 +2,7 @@ import ClipboardHeader from 'components/ClipboardHeader';
 import TextInput from 'components/inputs/TextInput';
 import ShortVerticalPinline from 'components/layout/ShortVerticalPinline';
 import { styled } from 'constants/theme';
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { selectors as recipeSelectors } from 'bundles/recipesBundle';
 import { selectors as chefSelectors } from 'bundles/chefsBundle';
@@ -13,6 +13,7 @@ import { SearchResultsHeadingContainer } from './SearchResultsHeadingContainer';
 import { SearchTitle } from './SearchTitle';
 import { RecipeFeedItem } from './RecipeFeedItem';
 import { ChefFeedItem } from './ChefFeedItem';
+import { RadioButton, RadioGroup } from '../inputs/RadioButtons';
 
 const InputContainer = styled.div`
  margin-bottom: 10px;
@@ -34,38 +35,70 @@ interface Props {
  chefs: Record<string, Chef>;
 }
 
+enum FeedType {
+ recipes = 'recipeFeed',
+ chefs = 'chefFeed',
+}
+
 const FeastSearchContainerComponent = ({
  rightHandContainer,
  recipes,
  chefs,
-}: Props) => (
- <React.Fragment>
- <InputContainer>
- <TextInputContainer>
- <TextInput placeholder="Search recipes" displaySearchIcon />
- </TextInputContainer>
- <ClipboardHeader />
- </InputContainer>
- <FixedContentContainer>
- <SearchResultsHeadingContainer>
- <SearchTitle>
- {'Results'}
- <ShortVerticalPinline />
- </SearchTitle>
- </SearchResultsHeadingContainer>
- {Object.values(recipes).map((recipe) => (
- <RecipeFeedItem key={recipe.id} recipe={recipe} />
- ))}
- {Object.values(chefs).map((chef) => (
- <ChefFeedItem
- key={chef.id}
- chef={chef}
- /> /*TODO: as of now, added rendering of chefs just after the recipes. Need
- to change when "search-chefs" action gets finalised*/
- ))}
- </FixedContentContainer>
- </React.Fragment>
-);
+}: Props) => {
+ const [selectedOption, setSelectedOption] = useState(FeedType.recipes);
+ const handleOptionChange = (optionName: FeedType) => {
+ setSelectedOption(optionName);
+ };
+
+ const renderTheFeed = () => {
+ switch (selectedOption) {
+ case FeedType.recipes:
+ return Object.values(recipes).map((recipe) => (
+ <RecipeFeedItem key={recipe.id} recipe={recipe} />
+ ));
+ case FeedType.chefs:
+ return Object.values(chefs).map((chef) => (
+ <ChefFeedItem key={chef.id} chef={chef} />
+ ));
+ }
+ };
+
+ return (
+ <React.Fragment>
+ <InputContainer>
+ <TextInputContainer>
+ <TextInput placeholder="Search recipes" displaySearchIcon />
+ </TextInputContainer>
+ <ClipboardHeader />
+ </InputContainer>
+ <RadioGroup>
+ <RadioButton
+ checked={selectedOption === FeedType.recipes}
+ onChange={() => handleOptionChange(FeedType.recipes)}
+ label="Recipes"
+ inline
+ name="recipeFeed"
+ />
+ <RadioButton
+ checked={selectedOption === FeedType.chefs}
+ onChange={() => handleOptionChange(FeedType.chefs)}
+ label="Chefs"
+ inline
+ name="chefFeed"
+ />
+ </RadioGroup>
+ <FixedContentContainer>
+ <SearchResultsHeadingContainer>
+ <SearchTitle>
+ {'Results'}
+ <ShortVerticalPinline />
+ </SearchTitle>
+ </SearchResultsHeadingContainer>
+ {renderTheFeed()}
+ </FixedContentContainer>
+ </React.Fragment>
+ );
+};
 
 const mapStateToProps = (state: State) => ({
  recipes: recipeSelectors.selectAll(state),

fronts-client/src/components/feed/SearchResultsHeadingContainer.tsx

@@ -4,6 +4,7 @@ export const SearchResultsHeadingContainer = styled.div`
  border-top: 1px solid ${theme.colors.greyVeryLight};
  align-items: baseline;
  display: flex;
+ margin-top: 10px;
  margin-bottom: 10px;
  flex-direction: row;
 `;