feeds-fun 1.17.0 → 1.18.0

package/src/stores/entries.ts

@@ -5,13 +5,21 @@ import _ from "lodash";
 import * as t from "@/logic/types";
 import * as e from "@/logic/enums";
 import * as api from "@/logic/api";
+import * as utils from "@/logic/utils";
 import {Timer} from "@/logic/timer";
 import {computedAsync} from "@vueuse/core";
 import {useGlobalSettingsStore} from "@/stores/globalSettings";
 import * as events from "@/logic/events";
+import {useGlobalState} from "@/stores/globalState";
+
+enum Mode {
+  News = "news",
+  PublicCollection = "public-collection"
+}
 
 export const useEntriesStore = defineStore("entriesStore", () => {
   const globalSettings = useGlobalSettingsStore();
+  const globalState = useGlobalState();
 
   const entries = ref<{[key: t.EntryId]: t.Entry}>({});
   const requestedEntries = ref<{[key: t.EntryId]: boolean}>({});
@@ -20,17 +28,74 @@ export const useEntriesStore = defineStore("entriesStore", () => {
 
   const canUndoMarkRead = computed(() => readHistory.value.length > 0);
 
-  function registerEntry(entry: t.Entry) {
-    if (entry.id in entries.value) {
-      if (entry.body === null && entries.value[entry.id].body !== null) {
-        entry.body = entries.value[entry.id].body;
+  const mode = ref<Mode | null>(null);
+  const modePublicCollectionSlug = ref<t.CollectionSlug | null>(null);
+
+  function setNewsMode() {
+    if (mode.value == Mode.News) {
+      return;
+    }
+
+    mode.value = Mode.News;
+
+    globalSettings.updateDataVersion();
+  }
+
+  function setPublicCollectionMode(collectionSlug: t.CollectionSlug) {
+    if (mode.value == Mode.PublicCollection && modePublicCollectionSlug.value === collectionSlug) {
+      return;
+    }
+
+    mode.value = Mode.PublicCollection;
+    modePublicCollectionSlug.value = collectionSlug;
+
+    globalSettings.updateDataVersion();
+  }
+
+  // Public collections uses fixed sorting order
+  // News uses dynamic sorting order and should keep it between switching views
+  // So, if we set globalSettings.entriesOrderProperties in PublicCollection view
+  // we'll break News view sorting and confuse users
+  // => we hardcode specific order properties for PublicCollection mode
+  const activeOrderProperties = computed(() => {
+    if (mode.value === null) {
+      // Return most general order for the case when mode is not set yet
+      return e.EntriesOrderProperties.get(e.EntriesOrder.Published) as unknown as e.EntriesOrderProperty;
+    }
+
+    if (mode.value == Mode.News) {
+      // use saved order mode for News view
+      return globalSettings.entriesOrderProperties as unknown as e.EntriesOrderProperty;
+    }
+
+    if (mode.value == Mode.PublicCollection) {
+      // use fixed Published order for Public Collection view
+      return e.EntriesOrderProperties.get(e.EntriesOrder.Published) as unknown as e.EntriesOrderProperty;
+    }
+
+    console.error(`Unknown mode ${mode.value}`);
+
+    return e.EntriesOrderProperties.get(e.EntriesOrder.Published) as unknown as e.EntriesOrderProperty;
+  });
+
+  // We bulk update entries to avoid performance degradation
+  // on triggering multiple reactivity updates for each entry
+  function registerEntries(newEntries: t.Entry[]) {
+    let delta: {[key: t.EntryId]: t.Entry} = {};
+
+    for (const entry of newEntries) {
+      if (entry.id in entries.value) {
+        if (entry.body === null && entries.value[entry.id].body !== null) {
+          entry.body = entries.value[entry.id].body;
+        }
       }
+      delta[entry.id] = entry;
     }
 
-    entries.value[entry.id] = entry;
+    entries.value = {...entries.value, ...delta};
   }
 
-  const loadedEntriesReport = computedAsync(async () => {
+  async function loadEntriesAccordingToMode() {
     const periodProperties = e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod);
 
     if (periodProperties === undefined) {
@@ -39,23 +104,74 @@ export const useEntriesStore = defineStore("entriesStore", () => {
 
     const period = periodProperties.seconds;
 
+    if (mode.value === Mode.News) {
+      return await api.getLastEntries({
+        period: period
+      });
+    }
+
+    if (mode.value === Mode.PublicCollection) {
+      return await api.getLastCollectionEntries({
+        period: period,
+        collectionSlug: modePublicCollectionSlug.value
+      });
+    }
+
+    throw new Error(`Unknown mode ${mode.value}`);
+  }
+
+  const loadedEntriesReport = computedAsync(async () => {
     // force refresh
     globalSettings.dataVersion;
 
-    const loadedEntries = await api.getLastEntries({
-      period: period
-    });
+    if (mode.value === null) {
+      // Do nothing until the mode is set
+      return null;
+    }
+
+    const loadedEntries = await loadEntriesAccordingToMode();
 
     const report = [];
 
+    registerEntries(loadedEntries);
+
     for (const entry of loadedEntries) {
-      registerEntry(entry);
       report.push(entry.id);
     }
 
     return report;
   }, null);
 
+  const _sortedEntries = computed(() => {
+    if (loadedEntriesReport.value === null) {
+      return [];
+    }
+
+    const field = activeOrderProperties.value.orderField;
+    const direction = activeOrderProperties.value.direction;
+
+    const report = utils.sortIdsList({ids: loadedEntriesReport.value, storage: entries.value, field, direction});
+
+    return report;
+  });
+
+  const visibleEntries = computed(() => {
+    let report = _sortedEntries.value.slice();
+
+    if (!globalSettings.showRead) {
+      report = report.filter((entryId) => {
+        if (displayedEntryId.value == entryId) {
+          // always show read entries with open body
+          // otherwise, they will hide right after opening it
+          return true;
+        }
+        return !entries.value[entryId].hasMarker(e.Marker.Read);
+      });
+    }
+
+    return report;
+  });
+
   function requestFullEntry({entryId}: {entryId: t.EntryId}) {
     if (entryId in entries.value && entries.value[entryId].body !== null) {
       return;
@@ -71,11 +187,9 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       return;
     }
 
-    const entries = await api.getEntriesByIds({ids: ids});
+    const loadedEntries = await api.getEntriesByIds({ids: ids});
 
-    for (const entry of entries) {
-      registerEntry(entry);
-    }
+    registerEntries(loadedEntries);
 
     requestedEntries.value = {};
   }
@@ -96,7 +210,11 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       entries.value[entryId].setMarker(marker);
     }
 
-    await api.setMarker({entryId: entryId, marker: marker});
+    // This method may be called from public access pages, like public collections
+    // In such case user may be not logged in and we should not send API requests
+    if (globalState.isLoggedIn) {
+      await api.setMarker({entryId: entryId, marker: marker});
+    }
   }
 
   async function removeMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
@@ -111,10 +229,14 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       entries.value[entryId].removeMarker(marker);
     }
 
-    await api.removeMarker({entryId: entryId, marker: marker});
+    // This method may be called from public access pages, like public collections
+    // In such case user may be not logged in and we should not send API requests
+    if (globalState.isLoggedIn) {
+      await api.removeMarker({entryId: entryId, marker: marker});
+    }
   }
 
-  async function displayEntry({entryId}: {entryId: t.EntryId}) {
+  async function displayEntry({entryId, view}: {entryId: t.EntryId; view: events.EventsViewName}) {
     displayedEntryId.value = entryId;
 
     requestFullEntry({entryId: entryId});
@@ -126,7 +248,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       });
     }
 
-    await events.newsBodyOpened({entryId: entryId});
+    await events.newsBodyOpened({entryId: entryId, view: view});
   }
 
   function hideEntry({entryId}: {entryId: t.EntryId}) {
@@ -145,6 +267,14 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     removeMarker({entryId: entryId, marker: e.Marker.Read});
   }
 
+  // TODO: Refactor for better loading tracking in the front code and in the GUI.
+  //       Currently, this property is working only for the first load.
+  //       => It should always be refactored to work correctly.
+  // ATTENTION: check every usage of this property while refactoring
+  const loading = computed(() => {
+    return loadedEntriesReport.value === null;
+  });
+
   return {
     entries,
     requestFullEntry,
@@ -155,6 +285,11 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     displayEntry,
     hideEntry,
     undoMarkRead,
-    canUndoMarkRead
+    canUndoMarkRead,
+    setNewsMode,
+    setPublicCollectionMode,
+    loading,
+    visibleEntries,
+    activeOrderProperties
   };
 });

package/src/stores/globalSettings.ts

@@ -1,5 +1,4 @@
-import {ref, watch} from "vue";
-import {useRouter} from "vue-router";
+import {ref, computed} from "vue";
 import {defineStore} from "pinia";
 import {computedAsync} from "@vueuse/core";
 import {useGlobalState} from "@/stores/globalState";
@@ -8,7 +7,6 @@ import * as e from "@/logic/enums";
 import * as api from "@/logic/api";
 
 export const useGlobalSettingsStore = defineStore("globalSettings", () => {
-  const router = useRouter();
   const globalState = useGlobalState();
 
   // General
@@ -20,6 +18,10 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   const entriesOrder = ref(e.EntriesOrder.Score);
   const showRead = ref(true);
 
+  const entriesOrderProperties = computed(() => {
+    return e.EntriesOrderProperties.get(entriesOrder.value);
+  });
+
   // Feeds
   const showFeedsDescriptions = ref(true);
   const feedsOrder = ref(e.FeedsOrder.Title);
@@ -28,10 +30,6 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   // Rules
   const rulesOrder = ref(e.RulesOrder.Tags);
 
-  watch(mainPanelMode, (newValue, oldValue) => {
-    router.push({name: mainPanelMode.value, params: {}});
-  });
-
   function updateDataVersion() {
     dataVersion.value++;
   }
@@ -64,6 +62,7 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     lastEntriesPeriod,
     entriesOrder,
     showRead,
+    entriesOrderProperties,
     dataVersion,
     updateDataVersion,
     showFeedsDescriptions,

package/src/views/AuthView.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch, provide, onBeforeMount} from "vue";
   import {useRouter} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useSupertokens} from "@/stores/supertokens";
   import {useGlobalState} from "@/stores/globalState";
   import {computedAsync} from "@vueuse/core";
-  import {computed, ref, onBeforeMount} from "vue";
   import * as settings from "@/logic/settings";
 
   const globalSettings = useGlobalSettingsStore();
@@ -26,6 +26,8 @@
 
   const router = useRouter();
 
+  provide("eventsViewName", "auth");
+
   const linkProcessed = ref(false);
 
   function goToWorkspace() {

package/src/views/CollectionsView.vue

@@ -2,11 +2,20 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Collections </template>
 
-    <div class="ffun-info-common">
+    <div
+      v-if="collections.collectionsOrder.length > 0"
+      class="ffun-info-common">
       <p>We've prepared thematic collections just for you.</p>
       <p>News from collections are always tagged, ensuring you get the full power of Feeds Fun!</p>
     </div>
 
+    <div
+      v-else
+      class="ffun-info-common">
+      <p>There are no collections.</p>
+      <p>Ask the server administrator to create some.</p>
+    </div>
+
     <div
       v-for="collectionId in collections.collectionsOrder"
       :key="collectionId"
@@ -17,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import {computedAsync} from "@vueuse/core";
   import * as api from "@/logic/api";
   import * as t from "@/logic/types";
@@ -29,6 +38,8 @@
 
   const collections = useCollectionsStore();
 
+  provide("eventsViewName", "collections");
+
   globalSettings.mainPanelMode = e.MainPanelMode.Collections;
 </script>
 

package/src/views/DiscoveryView.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import * as api from "@/logic/api";
@@ -42,6 +42,8 @@
 
   const globalSettings = useGlobalSettingsStore();
 
+  provide("eventsViewName", "discovery");
+
   globalSettings.mainPanelMode = e.MainPanelMode.Discovery;
 </script>
 

package/src/views/FeedsView.vue

@@ -57,7 +57,7 @@
 
 <script lang="ts" setup>
   import _ from "lodash";
-  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useFeedsStore} from "@/stores/feeds";
@@ -69,6 +69,8 @@
 
   const feedsStore = useFeedsStore();
 
+  provide("eventsViewName", "feeds");
+
   globalSettings.mainPanelMode = e.MainPanelMode.Feeds;
 
   const sortedFeeds = computed(() => {

package/src/views/MainView.vue

@@ -162,7 +162,9 @@
       </main-description>
     </main-block>
 
-    <main-header-line> Curated news collections <br class="md:hidden" />for easy start </main-header-line>
+    <main-header-line v-if="collections.collectionsOrder.length > 0">
+      Curated news collections <br class="md:hidden" />for easy start
+    </main-header-line>
 
     <main-block>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -177,7 +179,14 @@
             </template>
 
             <template #description>
-              {{ collections.collections[collectionId].description }}
+              <div>{{ collections.collections[collectionId].description }}</div>
+              <div class="mt-2">
+                <a
+                  :href="publicCollectionHref(collections.collections[collectionId].slug)"
+                  class="ffun-normal-link pt-4">
+                  Read the news
+                </a>
+              </div>
             </template>
           </main-item>
         </template>
@@ -195,8 +204,18 @@
 </template>
 
 <script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import * as settings from "@/logic/settings";
+  import {useRouter, RouterLink, RouterView} from "vue-router";
   import {useCollectionsStore} from "@/stores/collections";
+  import * as t from "@/logic/types";
 
+  const router = useRouter();
   const collections = useCollectionsStore();
+
+  provide("eventsViewName", "main");
+
+  function publicCollectionHref(collectionSlug: t.CollectionSlug) {
+    return router.resolve({name: "public-collection", params: {collectionSlug: collectionSlug}}).href;
+  }
 </script>

package/src/views/NewsView.vue

@@ -9,6 +9,9 @@
 
     <template #side-menu-item-2>
       Sort by
+      <!-- Remember that we should use entriesStore.activeOrderProperties everywhere in the News view-->
+      <!-- Here, It should be in sync with this selector (and globalSettings.entriesOrder) on the NewsView, -->
+      <!-- so, it should work fine -->
       <config-selector
         :values="e.EntriesOrderProperties"
         v-model:property="globalSettings.entriesOrder" />
@@ -35,8 +38,7 @@
     <template #side-footer>
       <tags-filter
         :tags="tagsCount"
-        :show-create-rule="true"
-        change-source="news_tags_filter" />
+        :show-create-rule="true" />
     </template>
 
     <template #main-header>
@@ -53,10 +55,16 @@
       :collections-notification_="!hasEntries"
       :collections-warning_="false" />
 
+    <notifications-loaded-old-news
+      :entries="entriesStore.loadedEntriesReport || []"
+      :period="e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod)" />
+
     <entries-list
+      :loading="entriesStore.loading"
       :entriesIds="entriesReport"
-      :time-field="timeField"
+      :time-field="entriesStore.activeOrderProperties.timeField"
       :tags-count="tagsCount"
+      :show-score="true"
       :showFromStart="25"
       :showPerPage="25" />
   </side-panel-layout>
@@ -64,10 +72,12 @@
 
 <script lang="ts" setup>
   import {computed, ref, onUnmounted, watch, provide} from "vue";
+  import {useRoute, useRouter} from "vue-router";
   import {computedAsync} from "@vueuse/core";
   import * as api from "@/logic/api";
   import * as tagsFilterState from "@/logic/tagsFilterState";
   import * as e from "@/logic/enums";
+  import * as utils from "@/logic/utils";
   import type * as t from "@/logic/types";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useEntriesStore} from "@/stores/entries";
@@ -76,107 +86,37 @@
   const globalSettings = useGlobalSettingsStore();
   const entriesStore = useEntriesStore();
 
-  const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
-
-  provide("tagsStates", tagsStates);
-
-  globalSettings.mainPanelMode = e.MainPanelMode.Entries;
-
-  globalSettings.updateDataVersion();
-
-  const entriesWithOpenedBody = ref<{[key: t.EntryId]: boolean}>({});
-
-  const _sortedEntries = computed(() => {
-    if (entriesStore.loadedEntriesReport === null) {
-      return [];
-    }
-
-    const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
-
-    if (orderProperties === undefined) {
-      throw new Error(`Unknown order ${globalSettings.entriesOrder}`);
-    }
-
-    const field = orderProperties.orderField;
-    const direction = orderProperties.direction;
-
-    // let report = entriesStore.loadedEntriesReport.slice();
-
-    // Pre-map to avoid repeated lookups in the comparator
-    const mapped = entriesStore.loadedEntriesReport.map((entryId) => {
-      // @ts-ignore
-      return {entryId, value: entriesStore.entries[entryId][field]};
-    });
+  const route = useRoute();
+  const router = useRouter();
 
-    mapped.sort((a: {entryId: t.EntryId; value: any}, b: {entryId: t.EntryId; value: any}) => {
-      if (a.value === null && b.value === null) {
-        return 0;
-      }
-
-      if (a.value === null) {
-        return 1;
-      }
+  entriesStore.setNewsMode();
 
-      if (b.value === null) {
-        return -1;
-      }
-
-      if (a.value < b.value) {
-        return direction;
-      }
-
-      if (a.value > b.value) {
-        return -direction;
-      }
-
-      return 0;
-    });
+  const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
 
-    const report = mapped.map((x) => x.entryId);
+  provide("tagsStates", tagsStates);
+  provide("eventsViewName", "news");
 
-    return report;
+  tagsFilterState.setSyncingTagsWithRoute({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    route,
+    router
   });
 
-  const _visibleEntries = computed(() => {
-    let report = _sortedEntries.value.slice();
-
-    if (!globalSettings.showRead) {
-      report = report.filter((entryId) => {
-        if (entriesStore.displayedEntryId == entryId) {
-          // always show read entries with open body
-          // otherwise, they will hide right after opening it
-          return true;
-        }
-        return !entriesStore.entries[entryId].hasMarker(e.Marker.Read);
-      });
-    }
+  globalSettings.mainPanelMode = e.MainPanelMode.Entries;
 
-    return report;
-  });
+  globalSettings.updateDataVersion();
 
   const entriesReport = computed(() => {
-    let report = _visibleEntries.value.slice();
+    let report = entriesStore.visibleEntries.slice();
 
     report = tagsStates.value.filterByTags(report, (entryId) => entriesStore.entries[entryId].tags);
     return report;
   });
 
   const tagsCount = computed(() => {
-    const tagsCount: {[key: string]: number} = {};
-
-    for (const entryId of entriesReport.value) {
-      const entry = entriesStore.entries[entryId];
+    const entriesToProcess = entriesReport.value.map((entryId) => entriesStore.entries[entryId]);
 
-      for (const tag of entry.tags) {
-        if (tag in tagsCount) {
-          tagsCount[tag] += 1;
-        } else {
-          tagsCount[tag] = 1;
-        }
-      }
-    }
-
-    return tagsCount;
+    return utils.countTags(entriesToProcess);
   });
 
   const entriesNumber = computed(() => {
@@ -188,6 +128,10 @@
   });
 
   const hasRules = computed(() => {
+    if (entriesStore.loading) {
+      return false;
+    }
+
     if (entriesStore.loadedEntriesReport === null) {
       return false;
     }
@@ -201,16 +145,6 @@
     }
     return false;
   });
-
-  const timeField = computed(() => {
-    const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
-
-    if (orderProperties === undefined) {
-      throw new Error(`Unknown entries order: ${globalSettings.entriesOrder}`);
-    }
-
-    return orderProperties.timeField;
-  });
 </script>
 
 <style></style>