Added option to pass along caption/channel from feed postcomposer int…

…o articlecomposer;
homebase-id · Sep 20, 2023 · 9c728d4 · 9c728d4
1 parent 3b74f0b
commit 9c728d4
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 31 deletions.
diff --git a/packages/common-app/src/hooks/socialFeed/article/useArticleComposer.ts b/packages/common-app/src/hooks/socialFeed/article/useArticleComposer.ts
@@ -17,7 +17,15 @@ export const EMPTY_POST: Article = {
   abstract: '',
 };
 
-const useArticleComposer = ({ channelKey, postKey }: { channelKey?: string; postKey?: string }) => {
+const useArticleComposer = ({
+  channelKey,
+  postKey,
+  caption,
+}: {
+  channelKey?: string;
+  postKey?: string;
+  caption?: string;
+}) => {
   const dotYouClient = useDotYouClient().getDotYouClient();
   const { data: serverData } = useBlog({
     channelSlug: channelKey,
@@ -39,6 +47,7 @@ const useArticleComposer = ({ channelKey, postKey }: { channelKey?: string; post
     ...serverData?.activeBlog,
     content: {
       ...EMPTY_POST,
+      caption: caption ?? EMPTY_POST.caption,
       authorOdinId: dotYouClient.getIdentity(),
       id: getNewId(),
       ...serverData?.activeBlog?.content,

diff --git a/packages/feed-app/src/components/SocialFeed/PostComposer.tsx b/packages/feed-app/src/components/SocialFeed/PostComposer.tsx
@@ -171,7 +171,7 @@ const PostComposer = ({
               <Link
                 type="mute"
                 className={`px-2 py-1`}
-                to="/owner/feed/new"
+                to={`/owner/feed/new?caption=${caption}&channel=${channel.channelId}`}
                 title="Convert into an article"
               >
                 <Article className="h-4 w-4" />

diff --git a/packages/feed-app/src/templates/SocialFeed/ArticleComposerPage.tsx b/packages/feed-app/src/templates/SocialFeed/ArticleComposerPage.tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import {
   ActionButton,
   ActionGroup,
@@ -25,6 +25,7 @@ import { createPortal } from 'react-dom';
 
 export const ArticleComposerPage = () => {
   const { channelKey, postKey } = useParams();
+  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const [isOptionsDialogOpen, setIsOptionsDialogOpen] = useState(false);
   const [isConfirmUnpublish, setIsConfirmUnpublish] = useState(false);
@@ -53,7 +54,8 @@ export const ArticleComposerPage = () => {
     error,
   } = useArticleComposer({
     postKey,
-    channelKey,
+    channelKey: channelKey || searchParams.get('channel') || undefined,
+    caption: searchParams.get('caption') || undefined,
   });
 
   const PostButton = ({ className }: { className?: string }) => {
@@ -118,6 +120,37 @@ export const ArticleComposerPage = () => {
         ]}
         actions={
           <>
+            <ActionGroup
+              type="mute"
+              size="square"
+              options={[
+                {
+                  label: t('Options'),
+                  onClick: () => setIsOptionsDialogOpen(!isOptionsDialogOpen),
+                },
+                ...(!(postFile.fileId && !isPublished)
+                  ? [
+                      {
+                        label: t('Remove'),
+                        onClick: () => {
+                          doRemovePost();
+                          navigate('/owner/feed/articles');
+                        },
+                        icon: Trash,
+                        confirmOptions: {
+                          title: t('Remove'),
+                          body: `${t('Are you sure you want to remove')} "${
+                            postFile?.content?.caption || t('New article')
+                          }"`,
+                          buttonText: t('Remove'),
+                        },
+                      },
+                    ]
+                  : []),
+              ]}
+            >
+              ...
+            </ActionGroup>
             {postFile.fileId && !isPublished ? (
               <ActionButton
                 type="remove"
@@ -139,33 +172,6 @@ export const ArticleComposerPage = () => {
                 className="m-2"
               />
             ) : null}
-            <ActionGroup
-              type="mute"
-              size="square"
-              options={[
-                {
-                  label: t('Options'),
-                  onClick: () => setIsOptionsDialogOpen(!isOptionsDialogOpen),
-                },
-                {
-                  label: t('Remove'),
-                  onClick: () => {
-                    doRemovePost();
-                    navigate('/owner/feed/articles');
-                  },
-                  icon: Trash,
-                  confirmOptions: {
-                    title: t('Remove'),
-                    body: `${t('Are you sure you want to remove')} "${
-                      postFile?.content?.caption || t('New article')
-                    }"`,
-                    buttonText: t('Remove'),
-                  },
-                },
-              ]}
-            >
-              ...
-            </ActionGroup>
             <PostButton />
           </>
         }