From 7ceb96a93eb4e1450db11ff73a4cb6757e801305 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 20 Jul 2023 13:35:43 +0800
Subject: [PATCH] fix edit rss ui

---
 packages/api/src/utils/createTask.ts      | 15 ++++++
 packages/web/pages/settings/rss/index.tsx | 66 ++++++++++++++---------
 2 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/packages/api/src/utils/createTask.ts b/packages/api/src/utils/createTask.ts
index 4db367f29..220276ebd 100644
--- a/packages/api/src/utils/createTask.ts
+++ b/packages/api/src/utils/createTask.ts
@@ -582,6 +582,21 @@ export const enqueueRssFeedFetch = async (
     ),
   }
 
+  // If there is no Google Cloud Project Id exposed, it means that we are in local environment
+  if (env.dev.isLocal || !GOOGLE_CLOUD_PROJECT) {
+    // Calling the handler function directly.
+    setTimeout(() => {
+      axios
+        .post(env.queue.rssFeedTaskHandlerUrl, payload, {
+          headers,
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+    }, 0)
+    return nanoid()
+  }
+
   const createdTasks = await createHttpTaskWithToken({
     project: GOOGLE_CLOUD_PROJECT,
     queue: 'omnivore-rss-queue',
diff --git a/packages/web/pages/settings/rss/index.tsx b/packages/web/pages/settings/rss/index.tsx
index 17ddb78d9..79c02c01e 100644
--- a/packages/web/pages/settings/rss/index.tsx
+++ b/packages/web/pages/settings/rss/index.tsx
@@ -28,12 +28,12 @@ export default function Rss(): JSX.Element {
   )
   const [onDeleteId, setOnDeleteId] = useState<string>('')
   const [onEditId, setOnEditId] = useState('')
-  const [name, setName] = useState('')
+  const [onEditName, setOnEditName] = useState('')
 
   async function updateSubscription(): Promise<void> {
     const result = await updateSubscriptionMutation({
       id: onEditId,
-      name,
+      name: onEditName,
     })
     if (result) {
       showSuccessToast('RSS feed updated', { position: 'bottom-right' })
@@ -76,20 +76,24 @@ export default function Rss(): JSX.Element {
             <SettingsTableRow
               key={subscription.id}
               title={
-                <HStack
-                  alignment={'center'}
-                  distribution={'start'}
-                  css={{ width: '400px' }}
-                >
-                  <FormInput
-                    value={onEditId ? name : subscription.name}
-                    onClick={(e) => e.stopPropagation()}
-                    onChange={(e) => setName(e.target.value)}
-                    placeholder="Description"
-                    disabled={!onEditId}
-                  />
-                  {onEditId ? (
-                    <HStack alignment={'center'} distribution={'start'}>
+                onEditId === subscription.id ? (
+                  <HStack alignment={'center'} distribution={'start'}>
+                    <FormInput
+                      value={onEditName}
+                      onClick={(e) => e.stopPropagation()}
+                      onChange={(e) => setOnEditName(e.target.value)}
+                      placeholder="Description"
+                      css={{
+                        m: '0px',
+                        fontSize: '18px',
+                        '@mdDown': {
+                          fontSize: '12px',
+                          fontWeight: 'bold',
+                        },
+                        width: '400px',
+                      }}
+                    />
+                    <HStack>
                       <FloppyDisk
                         style={{ cursor: 'pointer', marginLeft: '5px' }}
                         color={theme.colors.omnivoreCtaYellow.toString()}
@@ -98,9 +102,7 @@ export default function Rss(): JSX.Element {
                           await updateSubscription()
                           setOnEditId('')
                         }}
-                      >
-                        Save
-                      </FloppyDisk>
+                      />
                       <XCircle
                         style={{ cursor: 'pointer', marginLeft: '5px' }}
                         color={theme.colors.omnivoreRed.toString()}
@@ -108,22 +110,34 @@ export default function Rss(): JSX.Element {
                           e.stopPropagation()
                           setOnEditId('')
                         }}
-                      >
-                        Cancel
-                      </XCircle>
+                      />
                     </HStack>
-                  ) : (
+                  </HStack>
+                ) : (
+                  <HStack alignment={'center'} distribution={'start'}>
+                    <StyledText
+                      css={{
+                        m: '0px',
+                        fontSize: '18px',
+                        '@mdDown': {
+                          fontSize: '12px',
+                          fontWeight: 'bold',
+                        },
+                      }}
+                    >
+                      {subscription.name}
+                    </StyledText>
                     <Pencil
                       style={{ cursor: 'pointer', marginLeft: '5px' }}
                       color={theme.colors.omnivoreLightGray.toString()}
                       onClick={(e) => {
                         e.stopPropagation()
-                        setName(subscription.name)
+                        setOnEditName(subscription.name)
                         setOnEditId(subscription.id)
                       }}
                     />
-                  )}
-                </HStack>
+                  </HStack>
+                )
               }
               isLast={i === subscriptions.length - 1}
               onDelete={() => {