From 87fa9611ec4456b490bd4a65322bb9d2cf70d0fa Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 25 Nov 2022 11:16:20 +0800
Subject: [PATCH] Add web UI for editing bylines

---
 packages/web/components/patterns/CardMenu.tsx |  2 +-
 .../templates/homeFeed/EditTitleModal.tsx     | 27 +++++++++++++++----
 .../mutations/updatePageMutation.ts           |  9 +++----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/patterns/CardMenu.tsx b/packages/web/components/patterns/CardMenu.tsx
index c22a9d9c5..394419baf 100644
--- a/packages/web/components/patterns/CardMenu.tsx
+++ b/packages/web/components/patterns/CardMenu.tsx
@@ -50,7 +50,7 @@ export function CardMenu(props: CardMenuProps): JSX.Element {
       />
       <DropdownOption
         onSelect={() => props.actionHandler('editTitle')}
-        title="Edit Title"
+        title="Edit Metadata"
       />
       {isVipUser(props.viewer) && (
         <DropdownOption
diff --git a/packages/web/components/templates/homeFeed/EditTitleModal.tsx b/packages/web/components/templates/homeFeed/EditTitleModal.tsx
index a913d34f2..6cab4a025 100644
--- a/packages/web/components/templates/homeFeed/EditTitleModal.tsx
+++ b/packages/web/components/templates/homeFeed/EditTitleModal.tsx
@@ -9,7 +9,7 @@ import { StyledText } from '../../elements/StyledText'
 import { CrossIcon } from '../../elements/images/CrossIcon'
 import { theme } from '../../tokens/stitches.config'
 import { FormInput } from '../../elements/FormElements'
-import { useState, useCallback } from 'react'
+import { useState } from 'react'
 import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { StyledTextArea } from '../../elements/StyledTextArea'
 import { updatePageMutation } from '../../../lib/networking/mutations/updatePageMutation'
@@ -18,11 +18,12 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 type EditTitleModalProps = {
   onOpenChange: (open: boolean) => void
   item: LibraryItem
-  updateItem: (item: LibraryItem) => Promise<void>,
+  updateItem: (item: LibraryItem) => Promise<void>
 }
 
 export function EditTitleModal(props: EditTitleModalProps): JSX.Element {
   const [title, setTitle] = useState(props.item.node.title)
+  const [author, setAuthor] = useState(props.item.node.author)
   const [description, setDescription] = useState(props.item.node.description)
 
   const handleUpdateTitle = async () => {
@@ -31,14 +32,16 @@ export function EditTitleModal(props: EditTitleModalProps): JSX.Element {
         pageId: props.item.node.id,
         title,
         description,
+        byline: author,
       })
-      
+
       if (res) {
         await props.updateItem({
           cursor: props.item.cursor,
           node: {
             ...props.item.node,
             title: title,
+            author: author,
             description: description,
           },
         })
@@ -52,7 +55,7 @@ export function EditTitleModal(props: EditTitleModalProps): JSX.Element {
         })
       }
     } else {
-      showErrorToast('Title can\'t be empty', {
+      showErrorToast('Title must be a non-empty value', {
         position: 'bottom-right',
       })
     }
@@ -65,7 +68,7 @@ export function EditTitleModal(props: EditTitleModalProps): JSX.Element {
         css={{ bg: '$grayBg', pt: '0px' }}
         onInteractOutside={() => {
           // remove focus from modal
-          (document.activeElement as HTMLElement).blur()
+          ;(document.activeElement as HTMLElement).blur()
         }}
       >
         <VStack distribution="start" css={{ p: '$2' }}>
@@ -110,6 +113,20 @@ export function EditTitleModal(props: EditTitleModalProps): JSX.Element {
                   p: '$2',
                 }}
               />
+              <StyledText css={{ mt: '22px', mb: '6px' }}>Author</StyledText>
+              <FormInput
+                type="author"
+                value={author}
+                autoFocus
+                placeholder="Edit Author"
+                onChange={(event) => setAuthor(event.target.value)}
+                css={{
+                  borderRadius: '8px',
+                  border: '1px solid $grayTextContrast',
+                  width: '100%',
+                  p: '$2',
+                }}
+              />
               <StyledText css={{ mt: '22px', mb: '6px' }}>
                 Description
               </StyledText>
diff --git a/packages/web/lib/networking/mutations/updatePageMutation.ts b/packages/web/lib/networking/mutations/updatePageMutation.ts
index f499eb5ed..2520fe61e 100644
--- a/packages/web/lib/networking/mutations/updatePageMutation.ts
+++ b/packages/web/lib/networking/mutations/updatePageMutation.ts
@@ -3,17 +3,16 @@ import { gqlFetcher } from '../networkHelpers'
 
 export type UpdatePageInput = {
   pageId: string
-  title: string,
-  description: string,
+  title: string
+  byline?: string | undefined
+  description: string
 }
 
 export async function updatePageMutation(
   input: UpdatePageInput
 ): Promise<string | undefined> {
   const mutation = gql`
-    mutation UpdatePage(
-      $input: UpdatePageInput!
-    ) {
+    mutation UpdatePage($input: UpdatePageInput!) {
       updatePage(input: $input) {
         ... on UpdatePageSuccess {
           updatedPage {