feeds-fun 1.14.1 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/DiscoveryForm.vue

@@ -24,30 +24,44 @@
 
     <div v-else-if="foundFeeds === null"></div>
 
-    <p
+    <div
       v-else-if="foundFeeds.length === 0"
-      class="ffun-info-attention"
-      >No feeds found.</p
-    >
+      class="ffun-info-attention">
+      <p
+        class="ffun-info-error"
+        v-for="message in messages">
+        {{ message.message }}
+      </p>
+
+      <p v-if="messages.length === 0"> No feeds found. </p>
+    </div>
 
     <div
       v-for="feed in foundFeeds"
       :key="feed.url">
       <feed-info :feed="feed" />
 
-      <button
-        class="ffun-form-button"
-        v-if="!addedFeeds[feed.url]"
-        :disabled="disableInputs"
-        @click.prevent="addFeed(feed.url)">
-        Add
-      </button>
-
       <p
-        v-else
-        class="ffun-info-good"
-        >Feed added</p
-      >
+        v-if="feed.isLinked"
+        class="ffun-info-good">
+        You are already subscribed to this feed.
+      </p>
+
+      <template v-else>
+        <button
+          class="ffun-form-button"
+          v-if="!addedFeeds[feed.url]"
+          :disabled="disableInputs"
+          @click.prevent="addFeed(feed.url)">
+          Add
+        </button>
+
+        <p
+          v-else
+          class="ffun-info-good"
+          >Feed added</p
+        >
+      </template>
     </div>
   </div>
 </template>
@@ -74,17 +88,22 @@
 
   const addedFeeds = ref<{[key: string]: boolean}>({});
 
+  let messages = ref<t.ApiMessage[]>([]);
+
   const foundFeeds = computedAsync(async () => {
     if (searhedUrl.value === "") {
       return null;
     }
 
     searching.value = true;
+    messages.value = [];
 
     let feeds: t.FeedInfo[] = [];
 
     try {
-      feeds = await api.discoverFeeds({url: searhedUrl.value});
+      const answer = await api.discoverFeeds({url: searhedUrl.value});
+      feeds = answer.feeds;
+      messages.value = answer.messages;
     } catch (e) {
       console.error(e);
     }

package/src/components/OPMLUpload.vue

@@ -43,6 +43,9 @@
   import * as api from "@/logic/api";
   import {computedAsync} from "@vueuse/core";
   import {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const globalSettings = useGlobalSettingsStore();
 
   const opmlFile = ref<File | null>(null);
 
@@ -76,6 +79,10 @@
     try {
       await api.addOPML({content: content});
 
+      // loading an OPML file is pretty rare and significantly changes the list of feeds
+      // => we can force data to be reloaded
+      globalSettings.updateDataVersion();
+
       loading.value = false;
       loaded.value = true;
       error.value = false;

package/src/layouts/SidePanelLayout.vue

@@ -35,7 +35,7 @@
         class="ffun-form-button p-1 my-1 block w-full text-center"
         v-if="reloadButton"
         href="#"
-        @click="globalSettings.dataVersion += 1"
+        @click="globalSettings.updateDataVersion()"
         >Reload</a
       >
 

package/src/logic/api.ts

@@ -167,13 +167,19 @@ export async function discoverFeeds({url}: {url: string}) {
   const response = await post({url: API_DISCOVER_FEEDS, data: {url: url}});
 
   const feeds = [];
+  const messages = [];
 
   for (let rawFeed of response.feeds) {
     const feed = t.feedInfoFromJSON(rawFeed);
     feeds.push(feed);
   }
 
-  return feeds;
+  for (let rawMessage of response.messages) {
+    const message = t.apiMessageFromJSON(rawMessage);
+    messages.push(message);
+  }
+
+  return {feeds, messages};
 }
 
 export async function addFeed({url}: {url: string}) {

package/src/logic/types.ts

@@ -287,24 +287,28 @@ export type FeedInfo = {
   readonly title: string;
   readonly description: string;
   readonly entries: EntryInfo[];
+  readonly isLinked: boolean;
 };
 
 export function feedInfoFromJSON({
   url,
   title,
   description,
-  entries
+  entries,
+  isLinked
 }: {
   url: string;
   title: string;
   description: string;
   entries: any[];
+  isLinked: boolean;
 }): FeedInfo {
   return {
     url: toURL(url),
     title,
     description,
-    entries: entries.map(entryInfoFromJSON)
+    entries: entries.map(entryInfoFromJSON),
+    isLinked
   };
 }
 
@@ -478,3 +482,19 @@ export function collectionFeedInfoFromJSON({
     id: toFeedId(id)
   });
 }
+
+export class ApiMessage {
+  readonly type: string;
+  readonly code: string;
+  readonly message: string;
+
+  constructor({type, code, message}: {type: string; code: string; message: string}) {
+    this.type = type;
+    this.code = code;
+    this.message = message;
+  }
+}
+
+export function apiMessageFromJSON({type, code, message}: {type: string; code: string; message: string}): ApiMessage {
+  return new ApiMessage({type, code, message});
+}

package/src/views/DiscoveryView.vue

@@ -10,16 +10,26 @@
 
     <h2>Lood feeds from an OPML file</h2>
 
+    <div class="ffun-info-good">
+      <p>
+        <a
+          href="https://en.wikipedia.org/wiki/OPML"
+          target="_blank"
+          >OPML</a
+        >
+        is a widely-used format for transferring news feed lists between platforms.
+      </p>
+
+      <p
+        >Export your feeds from your old reader in OPML format and import them into our reader to seamlessly
+        transition!</p
+      >
+    </div>
+
     <opml-upload />
 
     <h2>Search for a feed</h2>
 
-    <div class="ffun-info-attention">
-      <p> The discovery feature is experimental and might not work on all websites. </p>
-
-      <p> If we can’t find a feed for a site, try finding the feed's URL manually, then enter it in the form. </p>
-    </div>
-
     <discovery-form />
   </side-panel-layout>
 </template>