feeds-fun 0.0.4

package/src/stores/entries.ts

@@ -0,0 +1,217 @@
+import {computed, ref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {defineStore} from "pinia";
+import _ from "lodash";
+import * as t from "@/logic/types";
+import * as e from "@/logic/enums";
+import * as api from "@/logic/api";
+import {Timer} from "@/logic/timer";
+import {computedAsync} from "@vueuse/core";
+import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+export const useEntriesStore = defineStore("entriesStore", () => {
+  const globalSettings = useGlobalSettingsStore();
+
+  const entries = ref<{[key: t.EntryId]: t.Entry}>({});
+  const requestedEntries = ref<{[key: t.EntryId]: boolean}>({});
+
+  const requiredTags = ref<{[key: string]: boolean}>({});
+  const excludedTags = ref<{[key: string]: boolean}>({});
+
+  const firstTimeEntriesLoading = ref(true);
+
+  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;
+      }
+    }
+
+    entries.value[entry.id] = entry;
+  }
+
+  const loadedEntriesReport = computedAsync(async () => {
+    const periodProperties = e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod);
+
+    if (periodProperties === undefined) {
+      throw new Error(`Unknown period ${globalSettings.lastEntriesPeriod}`);
+    }
+
+    const period = periodProperties.seconds;
+
+    // force refresh
+    globalSettings.dataVersion;
+
+    const loadedEntries = await api.getLastEntries({
+      period: period
+    });
+
+    const report = [];
+
+    for (const entry of loadedEntries) {
+      registerEntry(entry);
+      report.push(entry.id);
+    }
+
+    firstTimeEntriesLoading.value = false;
+
+    return report;
+  }, []);
+
+  const entriesReport = computedAsync(async () => {
+    let report = loadedEntriesReport.value.slice();
+
+    if (!globalSettings.showRead) {
+      report = report.filter((entryId) => {
+        return !entries.value[entryId].hasMarker(e.Marker.Read);
+      });
+    }
+
+    report = report.filter((entryId) => {
+      for (const tag of entries.value[entryId].tags) {
+        if (excludedTags.value[tag]) {
+          return false;
+        }
+      }
+      return true;
+    });
+
+    report = report.filter((entryId) => {
+      for (const tag of Object.keys(requiredTags.value)) {
+        if (requiredTags.value[tag] && !entries.value[entryId].tags.includes(tag)) {
+          return false;
+        }
+      }
+      return true;
+    });
+
+    report = report.sort((a: t.EntryId, b: t.EntryId) => {
+      const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
+
+      if (orderProperties === undefined) {
+        throw new Error(`Unknown order ${globalSettings.entriesOrder}`);
+      }
+
+      const field = orderProperties.orderField;
+
+      const valueA = _.get(entries.value[a], field, null);
+      const valueB = _.get(entries.value[b], field, null);
+
+      if (valueA === null && valueB === null) {
+        return 0;
+      }
+
+      if (valueA === null) {
+        return 1;
+      }
+
+      if (valueB === null) {
+        return -1;
+      }
+
+      if (valueA < valueB) {
+        return 1;
+      }
+
+      if (valueA > valueB) {
+        return -1;
+      }
+
+      return 0;
+    });
+
+    return report;
+  }, []);
+
+  const reportTagsCount = computed(() => {
+    const tagsCount: {[key: string]: number} = {};
+
+    for (const entryId of entriesReport.value) {
+      const entry = entries.value[entryId];
+
+      for (const tag of entry.tags) {
+        if (tag in tagsCount) {
+          tagsCount[tag] += 1;
+        } else {
+          tagsCount[tag] = 1;
+        }
+      }
+    }
+
+    return tagsCount;
+  });
+
+  function requestFullEntry({entryId}: {entryId: t.EntryId}) {
+    if (entryId in entries.value && entries.value[entryId].body !== null) {
+      return;
+    }
+
+    requestedEntries.value[entryId] = true;
+  }
+
+  async function loadFullEntries() {
+    const ids: t.EntryId[] = Object.keys(requestedEntries.value).map((key) => t.toEntryId(key));
+
+    if (ids.length === 0) {
+      return;
+    }
+
+    const entries = await api.getEntriesByIds({ids: ids});
+
+    for (const entry of entries) {
+      registerEntry(entry);
+    }
+
+    requestedEntries.value = {};
+  }
+
+  const requestedEntriesTimer = new Timer(loadFullEntries, 1000);
+
+  requestedEntriesTimer.start();
+
+  async function setMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
+    await api.setMarker({entryId: entryId, marker: marker});
+
+    if (entryId in entries.value) {
+      entries.value[entryId].setMarker(marker);
+    }
+  }
+
+  async function removeMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
+    await api.removeMarker({entryId: entryId, marker: marker});
+
+    if (entryId in entries.value) {
+      entries.value[entryId].removeMarker(marker);
+    }
+  }
+
+  function requireTag({tag}: {tag: string}) {
+    requiredTags.value[tag] = true;
+    excludedTags.value[tag] = false;
+  }
+
+  function excludeTag({tag}: {tag: string}) {
+    excludedTags.value[tag] = true;
+    requiredTags.value[tag] = false;
+  }
+
+  function resetTag({tag}: {tag: string}) {
+    excludedTags.value[tag] = false;
+    requiredTags.value[tag] = false;
+  }
+
+  return {
+    entries,
+    entriesReport,
+    reportTagsCount,
+    requestFullEntry,
+    setMarker,
+    removeMarker,
+    requireTag,
+    excludeTag,
+    resetTag,
+    requiredTags,
+    excludedTags,
+    firstTimeEntriesLoading
+  };
+});

package/src/stores/globalSettings.ts

@@ -0,0 +1,74 @@
+import {ref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {defineStore} from "pinia";
+import {computedAsync} from "@vueuse/core";
+import {useGlobalState} from "@/stores/globalState";
+
+import * as e from "@/logic/enums";
+import * as api from "@/logic/api";
+
+export const useGlobalSettingsStore = defineStore("globalSettings", () => {
+  const router = useRouter();
+  const globalState = useGlobalState();
+
+  // General
+  const mainPanelMode = ref(e.MainPanelMode.Entries);
+  const dataVersion = ref(0);
+
+  // Entries
+  const lastEntriesPeriod = ref(e.LastEntriesPeriod.Day3);
+  const entriesOrder = ref(e.EntriesOrder.Score);
+  const showEntriesTags = ref(true);
+  const showRead = ref(true);
+
+  // Feeds
+  const showFeedsDescriptions = ref(true);
+  const feedsOrder = ref(e.FeedsOrder.Title);
+  const failedFeedsFirst = ref(false);
+
+  watch(mainPanelMode, (newValue, oldValue) => {
+    router.push({name: mainPanelMode.value, params: {}});
+  });
+
+  function updateDataVersion() {
+    dataVersion.value++;
+  }
+
+  // backend side settings
+  const userSettings = computedAsync(async () => {
+    if (!globalState.isLoggedIn) {
+      return null;
+    }
+
+    // force refresh
+    dataVersion.value;
+
+    return await api.getUserSettings();
+  }, null);
+
+  const info = computedAsync(async () => {
+    if (!globalState.isLoggedIn) {
+      return null;
+    }
+
+    // force refresh
+    dataVersion.value;
+
+    return await api.getInfo();
+  }, null);
+
+  return {
+    mainPanelMode,
+    lastEntriesPeriod,
+    entriesOrder,
+    showEntriesTags,
+    showRead,
+    dataVersion,
+    updateDataVersion,
+    showFeedsDescriptions,
+    userSettings,
+    info,
+    feedsOrder,
+    failedFeedsFirst
+  };
+});

package/src/stores/globalState.ts

@@ -0,0 +1,23 @@
+import {ref, watch, computed} from "vue";
+import {useRouter} from "vue-router";
+import {defineStore} from "pinia";
+import {useSupertokens} from "@/stores/supertokens";
+import * as settings from "@/logic/settings";
+
+import * as e from "@/logic/enums";
+
+export const useGlobalState = defineStore("globalState", () => {
+  const supertokens = useSupertokens();
+
+  const isLoggedIn = computed(() => {
+    if (settings.authMode === settings.AuthMode.SingleUser) {
+      return true;
+    }
+
+    return supertokens.isLoggedIn;
+  });
+
+  return {
+    isLoggedIn
+  };
+});

package/src/stores/supertokens.ts

@@ -0,0 +1,144 @@
+import {ref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {defineStore} from "pinia";
+import {Timer} from "@/logic/timer";
+import SuperTokens from "supertokens-web-js";
+import Session from "supertokens-web-js/recipe/session";
+import Passwordless from "supertokens-web-js/recipe/passwordless";
+import * as passwordless from "supertokens-web-js/recipe/passwordless";
+import {computedAsync} from "@vueuse/core";
+
+export const useSupertokens = defineStore("supertokens", () => {
+  const isLoggedIn = ref<boolean | null>(null);
+
+  async function refresh() {
+    isLoggedIn.value = await Session.doesSessionExist();
+  }
+
+  const refresher = new Timer(refresh, 1000);
+
+  const allowResendAfter = ref(60 * 1000);
+
+  function init({
+    apiDomain,
+    apiBasePath,
+    appName,
+    resendAfter
+  }: {
+    apiDomain: string;
+    apiBasePath: string;
+    appName: string;
+    resendAfter: number;
+  }) {
+    allowResendAfter.value = resendAfter;
+
+    SuperTokens.init({
+      // enableDebugLogs: true,
+      appInfo: {
+        apiDomain: apiDomain,
+        apiBasePath: apiBasePath,
+        appName: appName
+      },
+      recipeList: [Session.init(), Passwordless.init()]
+    });
+
+    refresher.start();
+  }
+
+  async function processError(err: any) {
+    await refresh();
+
+    if (err.isSuperTokensGeneralError === true) {
+      window.alert(err.message);
+    }
+  }
+
+  async function sendMagicLink(email: string) {
+    try {
+      let response = await passwordless.createCode({
+        email
+      });
+
+      return response.status === "OK";
+    } catch (err: any) {
+      await processError(err);
+      return false;
+    }
+  }
+
+  async function logout() {
+    await Session.signOut();
+
+    await passwordless.clearLoginAttemptInfo();
+
+    await refresh();
+  }
+
+  async function resendMagicLink() {
+    try {
+      let response = await passwordless.resendCode();
+
+      if (response.status === "OK") {
+        return true;
+      } else if (response.status === "RESTART_FLOW_ERROR") {
+        // this can happen if the user has already successfully logged in into
+        // another device whilst also trying to login to this one.
+        return false;
+      } else {
+        return false;
+      }
+    } catch (err: any) {
+      await processError(err);
+      return false;
+    }
+  }
+
+  async function hasInitialMagicLinkBeenSent() {
+    return (await passwordless.getLoginAttemptInfo()) !== undefined;
+  }
+
+  async function handleMagicLinkClicked({
+    onSignUp,
+    onSignIn,
+    onSignFailed
+  }: {
+    onSignUp: () => void;
+    onSignIn: () => void;
+    onSignFailed: () => void;
+  }) {
+    try {
+      let response = await passwordless.consumeCode();
+
+      await refresh();
+
+      if (response.status === "OK") {
+        if (response.createdNewUser) {
+          await onSignUp();
+        } else {
+          await onSignIn();
+        }
+      } else {
+        await onSignFailed();
+      }
+    } catch (err: any) {
+      await processError(err);
+    }
+  }
+
+  async function clearLoginAttempt() {
+    await passwordless.clearLoginAttemptInfo();
+  }
+
+  return {
+    allowResendAfter,
+
+    init,
+    sendMagicLink,
+    resendMagicLink,
+    isLoggedIn,
+    logout,
+    hasInitialMagicLinkBeenSent,
+    handleMagicLinkClicked,
+    clearLoginAttempt
+  };
+});

package/src/stores/tags.ts

@@ -0,0 +1,54 @@
+import {computed, ref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {defineStore} from "pinia";
+
+import type * as t from "@/logic/types";
+import * as e from "@/logic/enums";
+import * as api from "@/logic/api";
+import {Timer} from "@/logic/timer";
+import {computedAsync} from "@vueuse/core";
+
+export const useTagsStore = defineStore("tagsStore", () => {
+  const tags = ref<{[key: string]: t.TagInfo}>({});
+  const requestedTags = ref<{[key: string]: boolean}>({});
+
+  const firstTimeTagsLoading = ref(true);
+
+  function registerTag(tag: t.TagInfo) {
+    tags.value[tag.uid] = tag;
+  }
+
+  function requestTagInfo({tagUid}: {tagUid: string}) {
+    if (tagUid in tags.value) {
+      return;
+    }
+
+    requestedTags.value[tagUid] = true;
+  }
+
+  async function loadTagsInfo() {
+    const uids = Object.keys(requestedTags.value);
+
+    if (uids.length === 0) {
+      return;
+    }
+
+    const tagsInfo = await api.getTagsInfo({uids: uids});
+
+    for (const uid in tagsInfo) {
+      const tag = tagsInfo[uid];
+      registerTag(tag);
+    }
+
+    requestedTags.value = {};
+  }
+
+  const requestedTagsTimer = new Timer(loadTagsInfo, 1000);
+
+  requestedTagsTimer.start();
+
+  return {
+    tags,
+    requestTagInfo
+  };
+});

package/src/values/DateTime.vue

@@ -0,0 +1,27 @@
+<template>
+  {{ text }}
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import * as u from "@/logic/utils";
+
+  const properties = defineProps<{
+    value: Date | null;
+    reversed?: boolean;
+  }>();
+
+  const text = computed(() => {
+    if (properties.value === null) {
+      return "—";
+    }
+
+    if (properties.reversed) {
+      return u.timeSince(properties.value);
+    }
+
+    return properties.value.toLocaleString();
+  });
+</script>
+
+<style></style>

package/src/values/FeedId.vue

@@ -0,0 +1,22 @@
+<template>
+  {{ feedId }}
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import type * as t from "@/logic/types";
+
+  const properties = defineProps<{value: t.FeedId}>();
+
+  const feedId = computed(() => {
+    if (properties.value == null) {
+      return `—`;
+    }
+
+    const id = properties.value;
+
+    return id.slice(0, 3) + "***" + id.slice(-3);
+  });
+</script>
+
+<style></style>

package/src/values/Score.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="score"
+    @click.prevent="onClick()">
+    {{ value }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import * as api from "@/logic/api";
+  import type * as t from "@/logic/types";
+
+  const properties = defineProps<{value: number; entryId: t.EntryId}>();
+
+  async function onClick() {
+    const rules = await api.getScoreDetails({entryId: properties.entryId});
+
+    if (rules.length === 0) {
+      alert("No rules for this news");
+      return;
+    }
+
+    rules.sort((a, b) => b.score - a.score);
+
+    const strings = [];
+
+    for (const rule of rules) {
+      strings.push(rule.score.toString().padStart(2, " ") + " — " + rule.tags.join(", "));
+    }
+
+    alert(strings.join("\n"));
+  }
+</script>
+
+<style scoped>
+  .score {
+    display: inline-block;
+    cursor: pointer;
+    padding: 0.25rem;
+    background-color: #c1c1ff;
+  }
+</style>

package/src/values/URL.vue

@@ -0,0 +1,25 @@
+<template>
+  <a
+    :href="value"
+    target="_blank"
+    rel="noopener noreferrer"
+    >{{ renderedText }}</a
+  >
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import type * as t from "@/logic/types";
+
+  const properties = defineProps<{value: t.URL; text?: string | null}>();
+
+  const renderedText = computed(() => {
+    if (properties.text) {
+      return properties.text;
+    }
+
+    return properties.value;
+  });
+</script>
+
+<style></style>

package/src/views/AuthView.vue

@@ -0,0 +1,66 @@
+<template>
+  <wide-layout>
+    <template #header> Feeds Fun </template>
+
+    <div v-if="!linkProcessed">Checking login status...</div>
+
+    <div v-else-if="globalState.isLoggedIn">
+      <button @click="goToWorkspace()">Go To Feeds</button>
+    </div>
+
+    <div v-else>
+      <supertokens-login />
+    </div>
+  </wide-layout>
+</template>
+
+<script lang="ts" setup>
+  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();
+  const globalState = useGlobalState();
+
+  const supertokens = useSupertokens();
+
+  const router = useRouter();
+
+  const linkProcessed = ref(false);
+
+  function goToWorkspace() {
+    router.push({name: globalSettings.mainPanelMode, params: {}});
+  }
+
+  onBeforeMount(async () => {
+    if (globalState.isLoggedIn) {
+      goToWorkspace();
+      return;
+    }
+
+    async function onSignIn() {
+      goToWorkspace();
+    }
+
+    async function onSignFailed() {
+      await supertokens.clearLoginAttempt();
+    }
+
+    if (await supertokens.hasInitialMagicLinkBeenSent()) {
+      await supertokens.handleMagicLinkClicked({
+        onSignUp: onSignIn,
+        onSignIn: onSignIn,
+        onSignFailed: onSignFailed
+      });
+      linkProcessed.value = true;
+    } else {
+      linkProcessed.value = true;
+    }
+  });
+</script>
+
+<style></style>