Add drag and drop logic for recipe feed item -> card

fronts-client/src/actions/Cards.ts

@@ -36,7 +36,7 @@ import noop from 'lodash/noop';
 import { selectOpenParentFrontOfCard } from 'bundles/frontsUI';
 import { getPageViewData } from 'actions/PageViewData';
 import { startOptionsModal } from './OptionsModal';
-import { getArticleEntitiesFromDrop } from 'util/card';
+import { getCardEntitiesFromDrop } from 'util/card';
 import {
   RemoveActionCreator,
   InsertActionCreator,
@@ -375,7 +375,7 @@ export const createArticleEntitiesFromDrop = (
 ): ThunkResult<Promise<Card | undefined>> => {
   return async (dispatch, getState) => {
     const isEdition = selectEditMode(getState()) === 'editions';
-    const [maybeCard, maybeExternalArticle] = await getArticleEntitiesFromDrop(
+    const [maybeCard, maybeExternalArticle] = await getCardEntitiesFromDrop(
       drop,
       isEdition,
       dispatch

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

@@ -9,7 +9,7 @@ interface ComponentProps {
 
 export const RecipeFeedItem = ({ recipe }: ComponentProps) => {
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>, dragNode: HTMLDivElement) => {
-    event.dataTransfer.setData('capi', JSON.stringify(recipe));
+    event.dataTransfer.setData('recipe', JSON.stringify(recipe));
     if (dragNode) {
       event.dataTransfer.setDragImage(
         dragNode,

fronts-client/src/util/card.ts

@@ -30,12 +30,13 @@ import {
   isGuardianUrl,
   isValidURL,
 } from 'util/url';
+import {Recipe} from "../types/Recipe";
 
 // Ideally we will convert this to a type. See
 // https://trello.com/c/wIMDut8V/138-add-a-type-to-the-createcard-function-in-src-shared-util-cardts
 const createCard = (
   id: string,
-  isEdition: boolean,
+  isEditionsApp: boolean,
   imageHide: boolean = false,
   imageReplace: boolean = false,
   imageCutoutReplace: boolean = false,
@@ -54,8 +55,8 @@ const createCard = (
     ...(imageCutoutReplace ? { imageCutoutReplace, imageCutoutSrc } : {}),
     ...(showByline ? { showByline } : {}),
     ...(showQuotedHeadline ? { showQuotedHeadline } : {}),
-    ...(isEdition || showKickerCustom ? { showKickerCustom: true } : {}),
-    ...(isEdition || showKickerCustom ? { customKicker } : {}),
+    ...(isEditionsApp || showKickerCustom ? { showKickerCustom: true } : {}),
+    ...(isEditionsApp || showKickerCustom ? { customKicker } : {}),
   },
 });
 
@@ -133,19 +134,25 @@ const cloneActiveImageMeta = ({ meta }: Card): CardMeta => {
 };
 
 /**
- * Given a resource id, extract the appropriate entities -- an Card
+ * Given a resource id, extract the appropriate entities -- a Card
  * and possibly an ExternalArticle. The resource id can be a few different things:
  *  - a article, tag or section (either the full URL or the ID)
+ *  - a recipe for the Feast app
  *  - an external link.
  */
-const getArticleEntitiesFromDrop = async (
+const getCardEntitiesFromDrop = async (
   drop: MappableDropType,
   isEdition: boolean,
   dispatch: Dispatch
 ): Promise<TArticleEntities> => {
   if (drop.type === 'CAPI') {
     return getArticleEntitiesFromFeedDrop(drop.data, isEdition);
   }
+
+  if (drop.type === 'RECIPE') {
+    return getRecipeEntityFromFeedDrop(drop.data)
+  }
+
   const droppedDataURL = drop.data.trim();
   const resourceIdOrUrl = isGoogleRedirectUrl(droppedDataURL)
     ? getRelevantURLFromGoogleRedirectURL(droppedDataURL)
@@ -249,6 +256,12 @@ const getArticleEntitiesFromDrop = async (
   return [];
 };
 
+const getRecipeEntityFromFeedDrop = (recipe: Recipe): [Card] => {
+  const card = createCard(recipe.id, false);
+
+  return [card];
+}
+
 const getArticleEntitiesFromFeedDrop = (
   capiArticle: CapiArticle,
   isEdition: boolean
@@ -333,7 +346,7 @@ export {
   createCard,
   cloneCard,
   cloneActiveImageMeta,
-  getArticleEntitiesFromDrop,
+  getCardEntitiesFromDrop,
   snapMetaWhitelist,
   marketingParamsWhiteList,
 };

fronts-client/src/util/collectionUtils.ts

@@ -3,6 +3,7 @@ import { ThunkResult, Dispatch } from 'types/Store';
 import { PosSpec } from 'lib/dnd';
 import { insertCardWithCreate } from 'actions/Cards';
 import { CapiArticle } from 'types/Capi';
+import {Recipe} from "../types/Recipe";
 
 export interface RefDrop {
   type: 'REF';
@@ -13,14 +14,23 @@ export interface CAPIDrop {
   data: CapiArticle;
 }
 
-export type MappableDropType = RefDrop | CAPIDrop;
+export interface RecipeDrop {
+  type: 'RECIPE';
+  data: Recipe;
+}
+
+export type MappableDropType = RefDrop | CAPIDrop | RecipeDrop;
 
-const dropToArticle = (e: React.DragEvent): MappableDropType | null => {
+const dropToCard = (e: React.DragEvent): MappableDropType | null => {
   const map = {
     capi: (data: string): CAPIDrop => ({
       type: 'CAPI',
       data: JSON.parse(data),
     }),
+    recipe: (data: string): RecipeDrop => ({
+      type: 'RECIPE',
+      data: JSON.parse(data)
+    }),
     text: (url: string): RefDrop => ({ type: 'REF', data: url }),
   };
 
@@ -40,7 +50,7 @@ const insertCardFromDropEvent = (
   persistTo: 'collection' | 'clipboard'
 ): ThunkResult<void> => {
   return (dispatch: Dispatch) => {
-    const dropType = dropToArticle(e);
+    const dropType = dropToCard(e);
     if (!dropType) {
       return;
     }