Toggle showing read items

internal/feeds/store.go

@@ -55,6 +55,17 @@ func (fs *FeedStore) GetUnread() *[]ItemWithFeed {
 	return items
 }
 
+func (fs *FeedStore) GetAll() *[]ItemWithFeed {
+	items := &[]ItemWithFeed{}
+	fs.getDB().Table("items").
+		Select("items.*, feeds.title as feed_title, feeds.homepage_url as feed_homepage_url").
+		Order("items.created desc, items.title").
+		Joins("left join feeds on feeds.id = items.feed_id").
+		Find(items)
+
+	return items
+}
+
 func (fs *FeedStore) SaveFeed(feed Feed) {
 	fs.getDB().Omit("Items").Clauses(clause.OnConflict{
 		Columns:   []clause.Column{{Name: "id"}},

internal/server/api.go

@@ -33,6 +33,10 @@ func (a *API) GetUnread(c *fiber.Ctx) error {
 	return c.JSON(a.FeedStore.GetUnread())
 }
 
+func (a *API) GetAll(c *fiber.Ctx) error {
+	return c.JSON(a.FeedStore.GetAll())
+}
+
 func (a *API) PostRead(c *fiber.Ctx) error {
 	a.FeedStore.MarkAsRead(c.Params("id"))
 	return nil

internal/server/main.go

@@ -52,6 +52,7 @@ func Start(port string) error {
 	app.Get("/api/feed/:id", api.GetFeed)
 	app.Get("/api/item/:id", api.GetItem)
 	app.Get("/api/unread", api.GetUnread)
+	app.Get("/api/all", api.GetAll)
 	app.Post("/api/read/:id", api.PostRead)
 	app.Post("/api/read", api.PostReadAll)
 	app.Get("/api/refresh", api.RefreshAll)

views/index.html

@@ -37,6 +37,9 @@
 
       <div id="app">
         <div class="menu">
+          <button title="Show Read" v-on:click="toggleShowRead()">
+            <svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 9a4 4 0 110 8 4 4 0 010-8zm0-3.5a10 10 0 019.7 7.6.8.8 0 01-1.5.3 8.5 8.5 0 00-16.4 0 .8.8 0 01-1.5-.3A10 10 0 0112 5.5z" fill="#212121" fill-rule="nonzero"/></svg>
+          </button>
           <button title="Toggle dark mode" v-on:click="toggleDarkMode()">
             <svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 22a10 10 0 100-20 10 10 0 000 20zm0-2V4a8 8 0 110 16z" fill="#212121" fill-rule="nonzero"/></svg>
           </button>
@@ -124,13 +127,14 @@
             opml: '',
             isBusy: false,
             isDark: false,
+            showRead: false,
           },
           computed: {
             shownItems() {
               if (this.selectedFeed === '') {
-                return this.items;
+                return this.items.filter(item => !item.Read || item.Read === this.showRead);
               } else {
-                return this.items.filter(item => item.FeedID === this.selectedFeed);
+                return this.items.filter(item => item.FeedID === this.selectedFeed && (!item.Read || item.Read === this.showRead));
               }
             },
             unread() {
@@ -163,8 +167,6 @@
                 this.selectedItem = undefined;
               } else {
                 this.selectedItem = item.ID;
-
-                // document.querySelector(`feed-item[data-id='${item.ID}']`).content = item.Content || item.Description;
                 document.getElementById(this.selectedItem).scrollIntoView();
                 item.Read = true;
                 fetch(`/api/read/${item.ID}`, {method: "POST"})
@@ -272,6 +274,21 @@
                   console.error(err);
                   this.setBusy(false);
                 });
+            },
+            toggleShowRead() {
+              this.showRead = !this.showRead;
+
+              if (this.showRead && !this.items.some(item => item.Read)) {
+                this.setBusy(true);
+                fetch('/api/all').then(res => res.json()).then(items => this.items = items)
+                  .then(() => {
+                    this.setBusy(false);
+                  })
+                  .catch(err => {
+                    console.error(err);
+                    this.setBusy(false);
+                  });
+              }
             }
           },
           created() {