feat: authorize notes for listed (#1823)

packages/web/src/javascripts/Components/NotesOptions/ListedActionsMenu.tsx

@@ -14,10 +14,27 @@ type ListedActionsMenuProps = {
 const ListedActionsMenu = ({ application, note }: ListedActionsMenuProps) => {
   const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
   const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)
+  const [isAuthorized, setIsAuthorized] = useState(false)
+
+  useEffect(() => {
+    const authorize = async () => {
+      if (!application.listed.isNoteAuthorizedForListed(note)) {
+        await application.listed.authorizeNoteForListed(note)
+      }
+
+      setIsAuthorized(application.listed.isNoteAuthorizedForListed(note))
+    }
+
+    void authorize()
+  }, [application, note])
 
   const reloadMenuGroup = useCallback(
     async (group: ListedMenuGroup) => {
-      const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
+      if (!isAuthorized) {
+        return
+      }
+
+      const updatedAccountInfo = await application.listed.getListedAccountInfo(group.account, note.uuid)
 
       if (!updatedAccountInfo) {
         return
@@ -39,7 +56,7 @@ const ListedActionsMenu = ({ application, note }: ListedActionsMenuProps) => {
 
       setMenuGroups(updatedGroups)
     },
-    [application, menuGroups, note],
+    [application, menuGroups, note, isAuthorized],
   )
 
   useEffect(() => {
@@ -49,19 +66,21 @@ const ListedActionsMenu = ({ application, note }: ListedActionsMenuProps) => {
         return
       }
 
+      if (!isAuthorized) {
+        return
+      }
+
       try {
-        const listedAccountEntries = await application.getListedAccounts()
+        const listedAccountEntries = await application.listed.getListedAccounts()
 
         if (!listedAccountEntries.length) {
           throw new Error('No Listed accounts found')
         }
 
         const menuGroups: ListedMenuGroup[] = []
-
         await Promise.all(
           listedAccountEntries.map(async (account) => {
-            const accountInfo = await application.getListedAccountInfo(account, note.uuid)
-
+            const accountInfo = await application.listed.getListedAccountInfo(account, note.uuid)
             if (accountInfo) {
               menuGroups.push({
                 name: accountInfo.display_name,
@@ -91,7 +110,11 @@ const ListedActionsMenu = ({ application, note }: ListedActionsMenuProps) => {
     }
 
     void fetchListedAccounts()
-  }, [application, note.uuid])
+  }, [application, note.uuid, isAuthorized])
+
+  if (!isAuthorized) {
+    return null
+  }
 
   return (
     <>

packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx

@@ -17,9 +17,15 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
 
   const [isOpen, setIsOpen] = useState(false)
 
-  const toggleMenu = useCallback(() => {
-    setIsOpen((isOpen) => !isOpen)
-  }, [])
+  const toggleMenu = useCallback(async () => {
+    if (!application.listed.isNoteAuthorizedForListed(note)) {
+      await application.listed.authorizeNoteForListed(note)
+    }
+
+    if (application.listed.isNoteAuthorizedForListed(note)) {
+      setIsOpen((isOpen) => !isOpen)
+    }
+  }, [application, note])
 
   return (
     <div ref={menuContainerRef}>

packages/web/src/javascripts/Components/Preferences/Panes/Listed/Listed.tsx

@@ -19,7 +19,7 @@ const Listed = ({ application }: Props) => {
   const [requestingAccount, setRequestingAccount] = useState<boolean>()
 
   const reloadAccounts = useCallback(async () => {
-    setAccounts(await application.getListedAccounts())
+    setAccounts(await application.listed.getListedAccounts())
   }, [application])
 
   useEffect(() => {
@@ -30,7 +30,7 @@ const Listed = ({ application }: Props) => {
     setRequestingAccount(true)
 
     const requestAccount = async () => {
-      const account = await application.requestNewListedAccount()
+      const account = await application.listed.requestNewListedAccount()
       if (account) {
         const openSettings = await application.alertService.confirm(
           'Your new Listed blog has been successfully created!' +
@@ -43,7 +43,7 @@ const Listed = ({ application }: Props) => {
         )
         reloadAccounts().catch(console.error)
         if (openSettings) {
-          const info = await application.getListedAccountInfo(account)
+          const info = await application.listed.getListedAccountInfo(account)
           if (info) {
             application.deviceInterface.openUrl(info?.settings_url)
           }

packages/web/src/javascripts/Components/Preferences/Panes/Listed/ListedAccountItem.tsx

@@ -18,7 +18,7 @@ const ListedAccountItem: FunctionComponent<Props> = ({ account, showSeparator, a
   useEffect(() => {
     const loadAccount = async () => {
       setIsLoading(true)
-      const info = await application.getListedAccountInfo(account)
+      const info = await application.listed.getListedAccountInfo(account)
       setAccountInfo(info)
       setIsLoading(false)
     }