From b652941b649fe4905ff0c6f0429fe5a4600fe8ab Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Thu, 25 Apr 2024 12:26:20 +0100
Subject: [PATCH] Add recipes search bundle, and wire into recipes search UI

---
 fronts-client/src/bundles/recipesBundle.ts    | 27 +++++++++++++++++++
 .../components/feast/FeastSearchContainer.tsx | 19 ++++++++++++-
 fronts-client/src/reducers/rootReducer.ts     |  2 ++
 fronts-client/src/types/Recipe.ts             | 21 +++++++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 fronts-client/src/bundles/recipesBundle.ts
 create mode 100644 fronts-client/src/types/Recipe.ts

diff --git a/fronts-client/src/bundles/recipesBundle.ts b/fronts-client/src/bundles/recipesBundle.ts
new file mode 100644
index 00000000000..40a330f43dc
--- /dev/null
+++ b/fronts-client/src/bundles/recipesBundle.ts
@@ -0,0 +1,27 @@
+import createAsyncResourceBundle from 'lib/createAsyncResourceBundle';
+import { Recipe } from 'types/Recipe';
+
+type RecipesState = Recipe[];
+
+export const { actions, reducer, selectors } =
+  createAsyncResourceBundle<RecipesState>('recipes', {
+    indexById: true,
+    // Add stub data in the absence of proper search data.
+    initialData: [
+      {
+        id: 'example-recipe',
+        featuredImage: {
+          url: 'https://media.guim.co.uk/7f96c515c4e320b8ded848f23ffdef8bd311fcad/245_1381_2750_2751/2000.jpg',
+          mediaId: '7f96c515c4e320b8ded848f23ffdef8bd311fcad',
+          cropId: '',
+          source: 'The Guardian. Food stylist: Loic Parisot.',
+          photographer: 'Robert Billington',
+          caption:
+            'Felicity Cloake’s Thai green curry works with chicken, seafood, pork, beef or tofu.',
+          mediaApiUri: '',
+          width: 2000,
+          height: 2000,
+        },
+      },
+    ],
+  });
diff --git a/fronts-client/src/components/feast/FeastSearchContainer.tsx b/fronts-client/src/components/feast/FeastSearchContainer.tsx
index f0c31e74ffa..cbe4aae6d13 100644
--- a/fronts-client/src/components/feast/FeastSearchContainer.tsx
+++ b/fronts-client/src/components/feast/FeastSearchContainer.tsx
@@ -3,7 +3,11 @@ import TextInput from 'components/inputs/TextInput';
 import ShortVerticalPinline from 'components/layout/ShortVerticalPinline';
 import { styled, theme } from 'constants/theme';
 import React from 'react';
+import { connect } from 'react-redux';
 import { media } from 'util/mediaQueries';
+import { selectors as recipeSelectors } from 'bundles/recipesBundle';
+import { State } from 'types/State';
+import { Recipe } from 'types/Recipe';
 
 const InputContainer = styled.div`
   margin-bottom: 10px;
@@ -47,9 +51,13 @@ const Title = styled.h1`
 
 type Props = {
   rightHandContainer?: React.ReactElement<any>;
+  recipes: Recipe[];
 };
 
-export const FeastSearchContainer = ({ rightHandContainer }: Props) => (
+const FeastSearchContainerComponent = ({
+  rightHandContainer,
+  recipes,
+}: Props) => (
   <React.Fragment>
     <InputContainer>
       <TextInputContainer>
@@ -64,6 +72,15 @@ export const FeastSearchContainer = ({ rightHandContainer }: Props) => (
           <ShortVerticalPinline />
         </Title>
       </ResultsHeadingContainer>
+      {recipes.map((recipe) => JSON.stringify(recipe))}
     </FixedContentContainer>
   </React.Fragment>
 );
+
+const mapStateToProps = (state: State) => ({
+  recipes: recipeSelectors.selectAll(state),
+});
+
+export const FeastSearchContainer = connect(mapStateToProps)(
+  FeastSearchContainerComponent
+);
diff --git a/fronts-client/src/reducers/rootReducer.ts b/fronts-client/src/reducers/rootReducer.ts
index 038d95dbb51..c3575faa506 100644
--- a/fronts-client/src/reducers/rootReducer.ts
+++ b/fronts-client/src/reducers/rootReducer.ts
@@ -26,6 +26,7 @@ import groups from 'reducers/groupsReducer';
 import { reducer as focusReducer } from 'bundles/focusBundle';
 import { reducer as featureSwitches } from 'reducers/featureSwitchesReducer';
 import { reducer as notificationsReducer } from 'bundles/notificationsBundle';
+import { reducer as recipesReducer } from 'bundles/recipesBundle';
 
 const rootReducer = (state: any = { feed: {} }, action: any) => ({
   fronts: fronts(state.fronts, action),
@@ -53,6 +54,7 @@ const rootReducer = (state: any = { feed: {} }, action: any) => ({
   externalArticles: externalArticles(state.externalArticles, action),
   pageViewData: pageViewData(state.pageViewData, action),
   notifications: notificationsReducer(state.notifications, action),
+  recipes: recipesReducer(state.recipes, action),
 });
 
 export default rootReducer;
diff --git a/fronts-client/src/types/Recipe.ts b/fronts-client/src/types/Recipe.ts
new file mode 100644
index 00000000000..e11e4e0186e
--- /dev/null
+++ b/fronts-client/src/types/Recipe.ts
@@ -0,0 +1,21 @@
+export type RecipeImage = {
+  url: string;
+  mediaId?: string;
+  cropId?: string;
+  source?: string;
+  photographer?: string;
+  imageType?: string;
+  caption?: string;
+  mediaApiUri?: string;
+  displayCredit?: boolean;
+  width?: number;
+  height?: number;
+};
+
+// Incomplete – add as we need more properties. Eventually, this would
+// be useful to derive from a package.
+export type Recipe = {
+  id: string;
+  featuredImage: RecipeImage; // the latter is an old image format that appears in our test fixtures
+  previewImage?: RecipeImage;
+};