Merge pull request #710 from omnivore-app/OMN-657

[OMN-657]: Archive button should change to unarchive on web if an article has already been archived

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -1,5 +1,5 @@
 import { Separator } from "@radix-ui/react-separator"
-import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react"
+import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa, Tray } from "phosphor-react"
 import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticleQuery"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
@@ -150,14 +150,38 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
 
       <MenuSeparator layout={props.layout} />
 
-      <Button style='articleActionIcon' onClick={() => props.articleActionHandler('archive')}>
-        <TooltipWrapped
-          tooltipContent="Archive"
-          tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
-        >
-          <ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
-        </TooltipWrapped>
-      </Button>
+      {!props.article?.isArchived ? (
+          <Button
+            style="articleActionIcon"
+            onClick={() => props.articleActionHandler('archive')}
+          >
+            <TooltipWrapped
+              tooltipContent="Archive"
+              tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+            >
+              <ArchiveBox
+                size={24}
+                color={theme.colors.readerFont.toString()}
+              />
+            </TooltipWrapped>
+          </Button>
+        ) : (
+          <Button
+            style="articleActionIcon"
+            onClick={() => props.articleActionHandler('unarchive')}
+          >
+            <TooltipWrapped
+              tooltipContent="Unarchive"
+              tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+            >
+              <Tray
+                size={24}
+                color={theme.colors.readerFont.toString()}
+              />
+            </TooltipWrapped>
+          </Button>
+        )}
+
       {/* <MenuSeparator layout={props.layout} />
 
       <Button style='articleActionIcon'>

packages/web/lib/networking/queries/useGetArticleQuery.tsx

@@ -40,6 +40,7 @@ export type ArticleAttributes = {
   author?: string
   image?: string
   savedAt: string
+  isArchived: boolean
   createdAt: string
   publishedAt?: string
   description?: string

packages/web/pages/[username]/[slug]/index.tsx

@@ -62,6 +62,28 @@ export default function Home(): JSX.Element {
 
   const actionHandler = useCallback(async(action: string, arg?: unknown) => {
     switch (action) {
+      case 'unarchive':
+          if (article) {
+            removeItemFromCache(cache, mutate, article.id)
+
+            setLinkArchivedMutation({
+              linkId: article.id,
+              archived: false,
+            }).then((res) => {
+              if (res) {
+                showSuccessToast('Link unarchived', {
+                  position: 'bottom-right',
+                })
+              } else {
+                showErrorToast('Error unarchiving link', {
+                  position: 'bottom-right',
+                })
+              }
+            })
+
+            router.push(`/home`)
+          }
+          break
       case 'archive':
         if (article) {
           removeItemFromCache(cache, mutate, article.id)