Add recipe cards to collections and clipboard

app/model/editions/EditionsClientCollection.scala

@@ -10,16 +10,26 @@ case class EditionsClientCard(id: String, cardType: Option[CardType], frontPubli
 
 object EditionsClientCard {
  def fromCard(card: EditionsCard): EditionsClientCard = {
+ val id = card.cardType match {
+ case CardType.Article => "internal-code/page/" + card.id
+ case _ => card.id
+ }
+
  EditionsClientCard(
- "internal-code/page/" + card.id,
+ id,
  Some(card.cardType),
  card.addedOn,
  card.metadata.map(ClientCardMetadata.fromCardMetadata)
  )
  }
  def toCard(card: EditionsClientCard): EditionsCard = {
+ val id = card.cardType match {
+ case Some(CardType.Article) | None => card.id.split("/").last
+ case _ => card.id
+ }
+
  EditionsCard(
- card.id.split("/").last,
+ id,
  card.cardType.getOrElse(CardType.Article),
  card.frontPublicationDate,
  card.meta.map(_.toCardMetadata)

fronts-client/src/bundles/fixtures/recipe1.json

@@ -8,6 +8,7 @@
  ],
  "cuisineIds": [],
  "description": "The words “crab” and “butterscotch” aren’t often put together, but trust me on this one. Mixed with egg or mayonnaise, this also makes a great tart or sandwich filling, incidentally.",
+ "difficultyLevel": "easy",
  "featuredImage": {
  "url": "https://i.guim.co.uk/img/media/67f51e74f91032bd893349aa3a8c66ad55659bdd/30_111_2949_3201/master/2949.jpg?width=1600&dpr=1&s=none",
  "mediaId": "67f51e74f91032bd893349aa3a8c66ad55659bdd",

fronts-client/src/bundles/recipesBundle.ts

@@ -3,11 +3,12 @@ import { Recipe } from 'types/Recipe';
 import recipe1 from './fixtures/recipe1.json';
 import recipe2 from './fixtures/recipe2.json';
 
-type RecipesState = Recipe[];
-
 export const { actions, reducer, selectors } =
- createAsyncResourceBundle<RecipesState>('recipes', {
+ createAsyncResourceBundle<Recipe>('recipes', {
  indexById: true,
  // Add stub data in the absence of proper search data.
- initialData: [recipe1, recipe2],
+ initialData: {
+ [recipe1.id]: recipe1,
+ [recipe2.id]: recipe2,
+ },
  });

fronts-client/src/components/FrontsEdit/CollectionComponents/Card.tsx

@@ -1,15 +1,15 @@
 import { Dispatch } from 'types/Store';
 import React from 'react';
 import { connect } from 'react-redux';
-import Article from 'components/article/Article';
+import Article from 'components/card/article/ArticleCard';
 import type { State } from 'types/State';
 import { createSelectCardType } from 'selectors/cardSelectors';
 import {
  selectExternalArticleFromCard,
  selectSupportingArticleCount,
 } from 'selectors/shared';
 import { CardSizes, CardMeta } from 'types/Collection';
-import SnapLink from 'components/snapLink/SnapLink';
+import SnapLink from 'components/card/snapLink/SnapLinkCard';
 import {
  copyCardImageMetaWithPersist,
  addImageToCard,
@@ -43,6 +43,7 @@ import { isLive as isArticleLive } from 'util/CAPIUtils';
 import { DefaultDropIndicator } from 'components/DropZone';
 import DragIntentContainer from 'components/DragIntentContainer';
 import { CardTypes, CardTypesMap } from 'constants/cardTypes';
+import { RecipeCard } from 'components/card/recipe/RecipeCard';
 
 export const createCardId = (id: string) => `collection-item-${id}`;
 
@@ -95,7 +96,7 @@ type CardContainerProps = ContainerProps & {
  addImageToCard: (id: string, response: ValidationResponse) => void;
  updateCardMeta: (id: string, meta: CardMeta) => void;
  clearCardSelection: (id: string) => void;
- type: CardTypes;
+ type?: CardTypes;
  isSelected: boolean;
  numSupportingArticles: number;
  editMode: EditMode;
@@ -203,6 +204,25 @@ class Card extends React.Component<CardContainerProps> {
  : this.state.showCardSublinks && children}
  </>
  );
+ case CardTypesMap.RECIPE:
+ return (
+ <>
+ <RecipeCard
+ frontId={frontId}
+ collectionId={collectionId}
+ id={uuid}
+ isUneditable={isUneditable}
+ {...getNodeProps()}
+ onDelete={this.onDelete}
+ onAddToClipboard={this.handleAddToClipboard}
+ onClick={isUneditable ? undefined : () => onSelect(uuid)}
+ size={size}
+ textSize={textSize}
+ showMeta={showMeta}
+ />
+ {getSublinks}
+ </>
+ );
  default:
  return (
  <p>

fronts-client/src/components/article/ArticleBody.tsx → fronts-client/src/components/card/article/ArticleBody.tsx

@@ -2,36 +2,36 @@ import React from 'react';
 import { styled, theme } from 'constants/theme';
 import startCase from 'lodash/startCase';
 import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
-import CardHeading from '../card/CardHeading';
-import BasePlaceholder from '../BasePlaceholder';
+import CardHeading from '../CardHeading';
+import BasePlaceholder from '../../BasePlaceholder';
 import { getPillarColor } from 'util/getPillarColor';
-import CardMetaContainer from '../card/CardMetaContainer';
-import CardContent from '../card/CardContent';
+import CardMetaContainer from '../CardMetaContainer';
+import CardContent from '../CardContent';
 import { notLiveLabels, liveBlogTones } from 'constants/fronts';
 import TextPlaceholder from 'components/TextPlaceholder';
 import { ThumbnailSmall, ThumbnailCutout } from 'components/image/Thumbnail';
-import CardMetaHeading from '../card/CardMetaHeading';
-import { HoverActionsButtonWrapper } from '../inputs/HoverActionButtonWrapper';
+import CardMetaHeading from '../CardMetaHeading';
+import { HoverActionsButtonWrapper } from '../../inputs/HoverActionButtonWrapper';
 import {
  HoverViewButton,
  HoverOphanButton,
  HoverDeleteButton,
  HoverAddToClipboardButton,
-} from '../inputs/HoverActionButtons';
-import { HoverActionsAreaOverlay } from '../CollectionHoverItems';
+} from '../../inputs/HoverActionButtons';
+import { HoverActionsAreaOverlay } from '../../CollectionHoverItems';
 import { CardSizes } from 'types/Collection';
-import CardMetaContent from '../card/CardMetaContent';
-import CardDraftMetaContent from '../card/CardDraftMetaContent';
+import CardMetaContent from '../CardMetaContent';
+import CardDraftMetaContent from '../CardDraftMetaContent';
 import DraggableArticleImageContainer from './DraggableArticleImageContainer';
 import { media } from 'util/mediaQueries';
 import ArticleGraph from './ArticleGraph';
-import { VideoIcon } from '../icons/Icons';
-import CardHeadingContainer from '../card/CardHeadingContainer';
-import CardSettingsDisplay from '../card/CardSettingsDisplay';
-import CircularIconContainer from '../icons/CircularIconContainer';
+import { VideoIcon } from '../../icons/Icons';
+import CardHeadingContainer from '../CardHeadingContainer';
+import CardSettingsDisplay from '../CardSettingsDisplay';
+import CircularIconContainer from '../../icons/CircularIconContainer';
 import { ImageMetadataContainer } from 'components/image/ImageMetaDataContainer';
 import EditModeVisibility from 'components/util/EditModeVisibility';
-import PageViewDataWrapper from '../PageViewDataWrapper';
+import PageViewDataWrapper from '../../PageViewDataWrapper';
 import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper';
 
 const ThumbnailPlaceholder = styled(BasePlaceholder)`

fronts-client/src/components/article/Article.tsx → fronts-client/src/components/card/article/ArticleCard.tsx

@@ -6,16 +6,16 @@ import noop from 'lodash/noop';
 import {
  createSelectArticleFromCard,
  selectCard,
-} from '../../selectors/shared';
+} from '../../../selectors/shared';
 import { selectors } from 'bundles/externalArticlesBundle';
 import type { State } from 'types/State';
-import { DerivedArticle } from '../../types/Article';
-import CardBody from '../card/CardBody';
-import CardContainer from '../card/CardContainer';
-import CardMetaHeading from '../card/CardMetaHeading';
+import { DerivedArticle } from '../../../types/Article';
+import CardBody from '../CardBody';
+import CardContainer from '../CardContainer';
+import CardMetaHeading from '../CardMetaHeading';
 import ArticleBody from './ArticleBody';
 import { CardSizes } from 'types/Collection';
-import DragIntentContainer from '../DragIntentContainer';
+import DragIntentContainer from '../../DragIntentContainer';
 import { selectFeatureValue } from 'selectors/featureSwitchesSelectors';
 import { theme } from 'constants/theme';
 import { getPillarColor } from 'util/getPillarColor';
@@ -72,7 +72,7 @@ interface ComponentState {
  isDraggingImageOver: boolean;
 }
 
-class ArticleComponent extends React.Component<ComponentProps, ComponentState> {
+class ArticleCard extends React.Component<ComponentProps, ComponentState> {
  public state = {
  isDraggingImageOver: false,
  };
@@ -195,6 +195,6 @@ const createMapStateToProps = () => {
  };
 };
 
-export { ArticleComponentProps, ArticleComponent };
+export { ArticleComponentProps, ArticleCard };
 
-export default connect(createMapStateToProps)(ArticleComponent);
+export default connect(createMapStateToProps)(ArticleCard);

fronts-client/src/components/article/ArticleGraph.tsx → fronts-client/src/components/card/article/ArticleGraph.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { AreaChart, Area, XAxis, YAxis } from 'recharts';
 import { PageViewStory } from 'types/PageViewData';
-import { theme } from '../../constants/theme';
+import { theme } from '../../../constants/theme';
 import type { State } from 'types/State';
 import { connect } from 'react-redux';
-import { selectDataForArticle } from '../../selectors/pageViewDataSelectors';
+import { selectDataForArticle } from '../../../selectors/pageViewDataSelectors';
 
 interface ArticleGraphContainerProps {
  articleId: string;

fronts-client/src/components/article/__tests__/Article.spec.tsx → fronts-client/src/components/card/article/__tests__/Article.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, cleanup } from 'react-testing-library';
-import { ArticleComponent } from '../Article';
+import { ArticleCard } from '../ArticleCard';
 import '@testing-library/jest-dom/extend-expect';
 import derivedArticle from 'fixtures/derivedArticle';
 import { ThemeProvider } from 'styled-components';
-import { theme } from '../../../constants/theme';
+import { theme } from '../../../../constants/theme';
 import { Provider } from 'react-redux';
 import configureStore from 'util/configureStore';
 
@@ -28,7 +28,7 @@ describe('Article component ', () => {
  const { getByTestId } = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  children={<React.Fragment />}
  article={derivedArticle}
@@ -49,7 +49,7 @@ describe('Article component ', () => {
  const { getByTestId } = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  children={<React.Fragment />}
  article={draftArticle}
@@ -68,7 +68,7 @@ describe('Article component ', () => {
  const { getByTestId } = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  children={<React.Fragment />}
  article={takenDownArticle}
@@ -87,7 +87,7 @@ describe('Article component ', () => {
  const { getByTestId } = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  children={<React.Fragment />}
  article={undefined}
@@ -106,7 +106,7 @@ describe('Article component ', () => {
  const { getByTestId } = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  children={<React.Fragment />}
  article={takenDownArticle}
@@ -125,7 +125,7 @@ describe('Article component ', () => {
  let renderResult = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  children={<React.Fragment />}
  article={takenDownArticle}
@@ -143,7 +143,7 @@ describe('Article component ', () => {
  renderResult = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  children={<React.Fragment />}
  article={takenDownArticle}
@@ -164,7 +164,7 @@ it('should show the page view data graph if 3 conditions are true: canShowPageVi
  const { getByTestId } = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  collectionId={'collectionId'}
  children={<React.Fragment />}
@@ -183,7 +183,7 @@ it('should NOT show the page view data graph if any of these conditions are fals
  const { container } = render(
  <Provider store={store}>
  <ThemeProvider theme={theme}>
- <ArticleComponent
+ <ArticleCard
  frontId={'uk'}
  collectionId={'collectionId'}
  children={<React.Fragment />}