From 54f76b1718186d607f5406807035f37ea47d5e82 Mon Sep 17 00:00:00 2001
From: Divya Bhatt <divya.bhatt@guardian.co.uk>
Date: Fri, 24 May 2024 11:07:54 +0100
Subject: [PATCH 1/3] Add radio buttons and hook to handle state and display
 search accordingly

---
 .../components/feed/RecipeSearchContainer.tsx | 78 ++++++++++++-------
 1 file changed, 49 insertions(+), 29 deletions(-)

diff --git a/fronts-client/src/components/feed/RecipeSearchContainer.tsx b/fronts-client/src/components/feed/RecipeSearchContainer.tsx
index 93243fbc73f..fa5f3604032 100644
--- a/fronts-client/src/components/feed/RecipeSearchContainer.tsx
+++ b/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;
@@ -38,34 +39,53 @@ 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<string>('recipeFeed');
+  const handleOptionChange = (optionName: string) => {
+    setSelectedOption(optionName);
+  };
+  return (
+    <React.Fragment>
+      <InputContainer>
+        <TextInputContainer>
+          <TextInput placeholder="Search recipes" displaySearchIcon />
+        </TextInputContainer>
+        <ClipboardHeader />
+      </InputContainer>
+      <RadioGroup>
+        <RadioButton
+          checked={selectedOption === 'recipeFeed'}
+          onChange={() => handleOptionChange('recipeFeed')}
+          label="Recipes"
+          inline
+          name="recipeFeed"
+        />
+        <RadioButton
+          checked={selectedOption === 'chefFeed'}
+          onChange={() => handleOptionChange('chefFeed')}
+          label="Chefs"
+          inline
+          name="chefFeed"
+        />
+      </RadioGroup>
+      <FixedContentContainer>
+        <SearchResultsHeadingContainer>
+          <SearchTitle>
+            {'Results'}
+            <ShortVerticalPinline />
+          </SearchTitle>
+        </SearchResultsHeadingContainer>
+        {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>
+    </React.Fragment>
+  );
+};
 
 const mapStateToProps = (state: State) => ({
   recipes: recipeSelectors.selectAll(state),

From fae45f689594d40b3755c89202ad9d24489755ec Mon Sep 17 00:00:00 2001
From: Divya Bhatt <divya.bhatt@guardian.co.uk>
Date: Fri, 24 May 2024 11:08:27 +0100
Subject: [PATCH 2/3] Add margin on top for seperation betwen radio buttons and
 results

---
 .../src/components/feed/SearchResultsHeadingContainer.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/fronts-client/src/components/feed/SearchResultsHeadingContainer.tsx b/fronts-client/src/components/feed/SearchResultsHeadingContainer.tsx
index 24fe3a460ae..2d4a9ca446e 100644
--- a/fronts-client/src/components/feed/SearchResultsHeadingContainer.tsx
+++ b/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;
 `;

From 91c3256a4ad48919d2c742eaa80fe8fce8f8b431 Mon Sep 17 00:00:00 2001
From: Divya Bhatt <divya.bhatt@guardian.co.uk>
Date: Tue, 28 May 2024 10:52:28 +0100
Subject: [PATCH 3/3] Use enum for recipe and chef's feed type and using switch
 case for rendering.

---
 .../components/feed/RecipeSearchContainer.tsx | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/fronts-client/src/components/feed/RecipeSearchContainer.tsx b/fronts-client/src/components/feed/RecipeSearchContainer.tsx
index fa5f3604032..6e1896aeee4 100644
--- a/fronts-client/src/components/feed/RecipeSearchContainer.tsx
+++ b/fronts-client/src/components/feed/RecipeSearchContainer.tsx
@@ -35,15 +35,34 @@ interface Props {
   chefs: Record<string, Chef>;
 }
 
+enum FeedType {
+  recipes = 'recipeFeed',
+  chefs = 'chefFeed',
+}
+
 const FeastSearchContainerComponent = ({
   rightHandContainer,
   recipes,
   chefs,
 }: Props) => {
-  const [selectedOption, setSelectedOption] = useState<string>('recipeFeed');
-  const handleOptionChange = (optionName: string) => {
+  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>
@@ -54,15 +73,15 @@ const FeastSearchContainerComponent = ({
       </InputContainer>
       <RadioGroup>
         <RadioButton
-          checked={selectedOption === 'recipeFeed'}
-          onChange={() => handleOptionChange('recipeFeed')}
+          checked={selectedOption === FeedType.recipes}
+          onChange={() => handleOptionChange(FeedType.recipes)}
           label="Recipes"
           inline
           name="recipeFeed"
         />
         <RadioButton
-          checked={selectedOption === 'chefFeed'}
-          onChange={() => handleOptionChange('chefFeed')}
+          checked={selectedOption === FeedType.chefs}
+          onChange={() => handleOptionChange(FeedType.chefs)}
           label="Chefs"
           inline
           name="chefFeed"
@@ -75,13 +94,7 @@ const FeastSearchContainerComponent = ({
             <ShortVerticalPinline />
           </SearchTitle>
         </SearchResultsHeadingContainer>
-        {selectedOption === 'recipeFeed'
-          ? Object.values(recipes).map((recipe) => (
-              <RecipeFeedItem key={recipe.id} recipe={recipe} />
-            ))
-          : Object.values(chefs).map((chef) => (
-              <ChefFeedItem key={chef.id} chef={chef} />
-            ))}
+        {renderTheFeed()}
       </FixedContentContainer>
     </React.Fragment>
   );