feeds-fun 1.21.5 → 1.22.0

package/src/logic/api.ts

@@ -4,92 +4,112 @@ import * as t from "@/logic/types";
 import type * as e from "@/logic/enums";
 import * as settings from "@/logic/settings";
 import * as cookieConsent from "@/plugins/CookieConsent";
+import {useGlobalState} from "@/stores/globalState";
 
-const ENTRY_POINT = "/api";
-
-const API_GET_FEEDS = `${ENTRY_POINT}/get-feeds`;
-const API_GET_LAST_ENTRIES = `${ENTRY_POINT}/get-last-entries`;
-const API_GET_LAST_COLLECTION_ENTRIES = `${ENTRY_POINT}/get-last-collection-entries`;
-const API_GET_ENTRIES_BY_IDS = `${ENTRY_POINT}/get-entries-by-ids`;
-const API_CREATE_OR_UPDATE_RULE = `${ENTRY_POINT}/create-or-update-rule`;
-
-const API_DELETE_RULE = `${ENTRY_POINT}/delete-rule`;
-const API_UPDATE_RULE = `${ENTRY_POINT}/update-rule`;
-const API_GET_RULES = `${ENTRY_POINT}/get-rules`;
-const API_GET_SCORE_DETAILS = `${ENTRY_POINT}/get-score-details`;
-const API_SET_MARKER = `${ENTRY_POINT}/set-marker`;
-const API_REMOVE_MARKER = `${ENTRY_POINT}/remove-marker`;
-const API_DISCOVER_FEEDS = `${ENTRY_POINT}/discover-feeds`;
-const API_ADD_FEED = `${ENTRY_POINT}/add-feed`;
-const API_ADD_OPML = `${ENTRY_POINT}/add-opml`;
-const API_UNSUBSCRIBE = `${ENTRY_POINT}/unsubscribe`;
-const API_GET_COLLECTIONS = `${ENTRY_POINT}/get-collections`;
-const API_GET_COLLECTION_FEEDS = `${ENTRY_POINT}/get-collection-feeds`;
-const API_SUBSCRIBE_TO_COLLECTIONS = `${ENTRY_POINT}/subscribe-to-collections`;
-const API_GET_TAGS_INFO = `${ENTRY_POINT}/get-tags-info`;
-const API_GET_USER_SETTINGS = `${ENTRY_POINT}/get-user-settings`;
-const API_SET_USER_SETTING = `${ENTRY_POINT}/set-user-setting`;
-const API_GET_RESOURCE_HISTORY = `${ENTRY_POINT}/get-resource-history`;
-const API_GET_INFO = `${ENTRY_POINT}/get-info`;
-const API_TRACK_EVENT = `${ENTRY_POINT}/track-event`;
-const API_REMOVE_USER = `${ENTRY_POINT}/remove-user`;
-
-let _onSessionLost: () => void = () => {};
-
-export function init({onSessionLost}: {onSessionLost: () => void}) {
-  _onSessionLost = onSessionLost;
-}
-
-async function post({url, data}: {url: string; data: any}) {
-  try {
-    const response = await axios.post(url, data);
-    return response.data;
-  } catch (error) {
-    console.log(error);
-
-    if (error instanceof Error && "response" in error) {
-      const axiosError = error as AxiosError;
-      if (axiosError.response && axiosError.response.status === 401) {
-        await _onSessionLost();
-      }
-    }
+///////////////
+// API handlers
+///////////////
+
+const publicEntryPoint = "/spa/api/public";
+const privateEntryPoint = "/spa/api/private";
 
-    throw error;
+const apiPublic = axios.create({baseURL: publicEntryPoint, withCredentials: true});
+const apiPrivate = axios.create({baseURL: privateEntryPoint, withCredentials: true});
+
+// It is an open question what should we do in case of session expiration:
+// - redirect to login page
+// - redirect to home page & show notification
+// Currently the easiest way to handle it is to always redirect to login page.
+export function redirectToLogin(returnTo?: string) {
+  if (!returnTo) {
+    returnTo = window.location.pathname + window.location.search;
   }
+  window.location.assign(`/spa/auth/login?return_to=${encodeURIComponent(returnTo)}`);
 }
 
-export async function getFeeds() {
-  const response = await post({url: API_GET_FEEDS, data: {}});
+export function redirectToJoin(returnTo?: string) {
+  if (!returnTo) {
+    returnTo = window.location.pathname + window.location.search;
+  }
+  window.location.assign(`/spa/auth/join?return_to=${encodeURIComponent(returnTo)}`);
+}
 
-  const feeds = [];
+export function logoutRedirect() {
+  window.location.assign("/spa/auth/logout");
+}
 
-  for (let rawFeed of response.feeds) {
-    const feed = t.feedFromJSON(rawFeed);
-    feeds.push(feed);
-  }
+let _refreshingAuth: Promise<void> | null = null;
 
-  return feeds;
+enum Ffun401Behaviour {
+  RedirectToLogin = "redirectToLogin",
+  DoNotRetry = "doNotRetry",
+  ReturnNull = "returnNull"
 }
 
-export async function getLastEntries({period, minTagCount}: {period: number; minTagCount: number}) {
-  const response = await post({
-    url: API_GET_LAST_ENTRIES,
-    data: {
-      period: period,
-      minTagCount: minTagCount
+// We try to refresh auth on 401 responses for private API.
+// For the public API we do nothing, because it most likely means infrastructure issue.
+apiPrivate.interceptors.response.use(
+  (r) => r,
+  async (error) => {
+    const {config, response} = error;
+
+    if (!response) {
+      throw error;
     }
-  });
 
-  const entries = [];
+    if (response.status !== 401) {
+      throw error;
+    }
 
-  for (let rawEntry of response.entries) {
-    const entry = t.entryFromJSON(rawEntry, response.tagsMapping);
-    entries.push(entry);
+    if (config?.ffunRequestRetried) {
+      throw error;
+    }
+
+    if (config?.ffun401Behaviour === Ffun401Behaviour.RedirectToLogin) {
+      redirectToLogin();
+      return; // never reached
+    }
+
+    if (config?.ffun401Behaviour === Ffun401Behaviour.DoNotRetry) {
+      throw error;
+    }
+
+    if (config?.ffun401Behaviour === Ffun401Behaviour.ReturnNull) {
+      return {data: null};
+    }
+
+    (config as any).ffunRequestRetried = true;
+
+    if (!_refreshingAuth) {
+      _refreshingAuth = apiPrivate
+        // @ts-ignore
+        .post("/refresh-auth", undefined, {ffun401Behaviour: Ffun401Behaviour.RedirectToLogin})
+        .then(() => {})
+        .finally(() => {
+          _refreshingAuth = null;
+        });
+    }
+
+    await _refreshingAuth; // all 401s await the same refresh
+
+    return await apiPrivate(config); // retry the original request generically
   }
+);
 
-  return entries;
+async function postPublic({url, data}: {url: string; data: any}) {
+  const response = await apiPublic.post(url, data);
+  return response.data;
 }
 
+async function postPrivate({url, data, config}: {url: string; data: any; config?: any}) {
+  const response = await apiPrivate.post(url, data, config);
+  return response.data;
+}
+
+/////////////
+// Public API
+/////////////
+
 export async function getLastCollectionEntries({
   period,
   collectionSlug,
@@ -99,8 +119,8 @@ export async function getLastCollectionEntries({
   collectionSlug: t.CollectionSlug | null;
   minTagCount: number;
 }) {
-  const response = await post({
-    url: API_GET_LAST_COLLECTION_ENTRIES,
+  const response = await postPublic({
+    url: "/get-last-collection-entries",
     data: {period: period, collectionSlug: collectionSlug, minTagCount: minTagCount}
   });
 
@@ -115,9 +135,157 @@ export async function getLastCollectionEntries({
 }
 
 export async function getEntriesByIds({ids}: {ids: t.EntryId[]}) {
-  const response = await post({
-    url: API_GET_ENTRIES_BY_IDS,
-    data: {ids: ids}
+  const globalState = useGlobalState();
+
+  let response = null;
+
+  if (globalState.loginConfirmed) {
+    response = await postPrivate({
+      url: "/get-entries-by-ids",
+      data: {ids: ids},
+      config: {ffun401Behaviour: Ffun401Behaviour.ReturnNull}
+    });
+  }
+
+  if (!response) {
+    response = await postPublic({
+      url: "/get-entries-by-ids",
+      data: {ids: ids}
+    });
+  }
+
+  const entries = [];
+
+  for (let rawEntry of response.entries) {
+    const entry = t.entryFromJSON(rawEntry, response.tagsMapping);
+    entries.push(entry);
+  }
+
+  return entries;
+}
+
+export async function getCollections() {
+  const response = await postPublic({url: "/get-collections", data: {}});
+
+  const collections = [];
+
+  for (let rawCollection of response.collections) {
+    const collection = t.collectionFromJSON(rawCollection);
+    collections.push(collection);
+  }
+
+  return collections;
+}
+
+export async function getCollectionFeeds({collectionId}: {collectionId: t.CollectionId}) {
+  const response = await postPublic({
+    url: "/get-collection-feeds",
+    data: {collectionId: collectionId}
+  });
+
+  const feeds = [];
+
+  for (let rawFeed of response.feeds) {
+    const feed = t.collectionFeedInfoFromJSON(rawFeed);
+    feeds.push(feed);
+  }
+
+  return feeds;
+}
+
+export async function getTagsInfo({uids}: {uids: string[]}) {
+  const response = await postPublic({url: "/get-tags-info", data: {uids: uids}});
+
+  const tags: {[key: string]: t.TagInfo} = {};
+
+  for (let uid in response.tags) {
+    const rawTag = response.tags[uid];
+    const tag = t.tagInfoFromJSON(rawTag);
+    tags[uid] = tag;
+  }
+
+  return tags;
+}
+
+export async function getInfo() {
+  const response = await postPublic({url: "/get-info", data: {}});
+
+  return t.stateInfoFromJSON(response);
+}
+
+export async function getUser() {
+  const response = await postPrivate({
+    url: "/get-user",
+    data: {},
+    config: {ffun401Behaviour: Ffun401Behaviour.ReturnNull}
+  });
+
+  if (!response) {
+    return null;
+  }
+
+  return t.userInfoFromJSON(response);
+}
+
+export function trackEvent(data: {[key: string]: string | number | null}) {
+  if (!settings.trackEvents) {
+    return;
+  }
+
+  if (!cookieConsent.isAnalyticsAllowed()) {
+    return;
+  }
+
+  const globalState = useGlobalState();
+
+  let url: string;
+
+  if (globalState.loginConfirmed) {
+    url = privateEntryPoint + "/track-event";
+  } else {
+    url = publicEntryPoint + "/track-event";
+  }
+
+  let payload = JSON.stringify({event: data});
+
+  if ("sendBeacon" in navigator) {
+    return navigator.sendBeacon(url, payload);
+  }
+
+  // Fallback: fire-and-forget; avoid preflight by using text/plain + no-cors
+  fetch(url, {
+    method: "POST",
+    keepalive: true,
+    mode: "no-cors",
+    headers: {"Content-Type": "text/plain;charset=UTF-8"},
+    body: payload
+  }).catch(() => {});
+}
+
+//////////////
+// Private API
+//////////////
+
+export async function getFeeds() {
+  const response = await postPrivate({url: "/get-feeds", data: {}});
+
+  const feeds = [];
+
+  for (let rawFeed of response.feeds) {
+    const feed = t.feedFromJSON(rawFeed);
+    feeds.push(feed);
+  }
+
+  return feeds;
+}
+
+export async function getLastEntries({period, minTagCount}: {period: number; minTagCount: number}) {
+  const response = await postPrivate({
+    url: "/get-last-entries",
+    data: {
+      period: period,
+      minTagCount: minTagCount
+    }
   });
 
   const entries = [];
@@ -139,8 +307,8 @@ export async function createOrUpdateRule({
   excludedTags: string[];
   score: number;
 }) {
-  const response = await post({
-    url: API_CREATE_OR_UPDATE_RULE,
+  const response = await postPrivate({
+    url: "/create-or-update-rule",
     data: {
       requiredTags: requiredTags,
       excludedTags: excludedTags,
@@ -151,7 +319,7 @@ export async function createOrUpdateRule({
 }
 
 export async function deleteRule({id}: {id: t.RuleId}) {
-  const response = await post({url: API_DELETE_RULE, data: {id: id}});
+  const response = await postPrivate({url: "/delete-rule", data: {id: id}});
   return response;
 }
 
@@ -166,15 +334,15 @@ export async function updateRule({
   excludedTags: string[];
   score: number;
 }) {
-  const response = await post({
-    url: API_UPDATE_RULE,
+  const response = await postPrivate({
+    url: "/update-rule",
     data: {id: id, score: score, requiredTags: requiredTags, excludedTags: excludedTags}
   });
   return response;
 }
 
 export async function getRules() {
-  const response = await post({url: API_GET_RULES, data: {}});
+  const response = await postPrivate({url: "/get-rules", data: {}});
 
   const rules = [];
 
@@ -187,8 +355,8 @@ export async function getRules() {
 }
 
 export async function getScoreDetails({entryId}: {entryId: t.EntryId}) {
-  const response = await post({
-    url: API_GET_SCORE_DETAILS,
+  const response = await postPrivate({
+    url: "/get-score-details",
     data: {entryId: entryId}
   });
 
@@ -203,21 +371,21 @@ export async function getScoreDetails({entryId}: {entryId: t.EntryId}) {
 }
 
 export async function setMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
-  await post({
-    url: API_SET_MARKER,
+  await postPrivate({
+    url: "/set-marker",
     data: {entryId: entryId, marker: marker}
   });
 }
 
 export async function removeMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
-  await post({
-    url: API_REMOVE_MARKER,
+  await postPrivate({
+    url: "/remove-marker",
     data: {entryId: entryId, marker: marker}
   });
 }
 
 export async function discoverFeeds({url}: {url: string}) {
-  const response = await post({url: API_DISCOVER_FEEDS, data: {url: url}});
+  const response = await postPrivate({url: "/discover-feeds", data: {url: url}});
 
   const feeds = [];
   const messages = [];
@@ -236,71 +404,28 @@ export async function discoverFeeds({url}: {url: string}) {
 }
 
 export async function addFeed({url}: {url: string}) {
-  const response = await post({url: API_ADD_FEED, data: {url: url}});
+  const response = await postPrivate({url: "/add-feed", data: {url: url}});
 
   return t.feedFromJSON(response.feed);
 }
 
 export async function addOPML({content}: {content: string}) {
-  await post({url: API_ADD_OPML, data: {content: content}});
+  await postPrivate({url: "/add-opml", data: {content: content}});
 }
 
 export async function unsubscribe({feedId}: {feedId: t.FeedId}) {
-  await post({url: API_UNSUBSCRIBE, data: {feedId: feedId}});
-}
-
-export async function getCollections() {
-  const response = await post({url: API_GET_COLLECTIONS, data: {}});
-
-  const collections = [];
-
-  for (let rawCollection of response.collections) {
-    const collection = t.collectionFromJSON(rawCollection);
-    collections.push(collection);
-  }
-
-  return collections;
-}
-
-export async function getCollectionFeeds({collectionId}: {collectionId: t.CollectionId}) {
-  const response = await post({
-    url: API_GET_COLLECTION_FEEDS,
-    data: {collectionId: collectionId}
-  });
-
-  const feeds = [];
-
-  for (let rawFeed of response.feeds) {
-    const feed = t.collectionFeedInfoFromJSON(rawFeed);
-    feeds.push(feed);
-  }
-
-  return feeds;
+  await postPrivate({url: "/unsubscribe", data: {feedId: feedId}});
 }
 
 export async function subscribeToCollections({collectionsIds}: {collectionsIds: t.CollectionId[]}) {
-  await post({
-    url: API_SUBSCRIBE_TO_COLLECTIONS,
+  await postPrivate({
+    url: "/subscribe-to-collections",
     data: {collections: collectionsIds}
   });
 }
 
-export async function getTagsInfo({uids}: {uids: string[]}) {
-  const response = await post({url: API_GET_TAGS_INFO, data: {uids: uids}});
-
-  const tags: {[key: string]: t.TagInfo} = {};
-
-  for (let uid in response.tags) {
-    const rawTag = response.tags[uid];
-    const tag = t.tagInfoFromJSON(rawTag);
-    tags[uid] = tag;
-  }
-
-  return tags;
-}
-
 export async function getUserSettings() {
-  const response = await post({url: API_GET_USER_SETTINGS, data: {}});
+  const response = await postPrivate({url: "/get-user-settings", data: {}});
 
   const settings: {[key: string]: t.UserSetting} = {};
 
@@ -313,12 +438,12 @@ export async function getUserSettings() {
 }
 
 export async function setUserSetting({kind, value}: {kind: string; value: string | number | boolean}) {
-  await post({url: API_SET_USER_SETTING, data: {kind: kind, value: value}});
+  await postPrivate({url: "/set-user-setting", data: {kind: kind, value: value}});
 }
 
 export async function getResourceHistory({kind}: {kind: string}) {
-  const response = await post({
-    url: API_GET_RESOURCE_HISTORY,
+  const response = await postPrivate({
+    url: "/get-resource-history",
     data: {kind: kind}
   });
 
@@ -332,24 +457,6 @@ export async function getResourceHistory({kind}: {kind: string}) {
   return history;
 }
 
-export async function getInfo() {
-  const response = await post({url: API_GET_INFO, data: {}});
-
-  return response;
-}
-
-export async function trackEvent(data: {[key: string]: string | number | null}) {
-  if (!settings.trackEvents) {
-    return;
-  }
-
-  if (!cookieConsent.isAnalyticsAllowed()) {
-    return;
-  }
-
-  await post({url: API_TRACK_EVENT, data: {event: data}});
-}
-
 export async function removeUser() {
-  await post({url: API_REMOVE_USER, data: {}});
+  await postPrivate({url: "/remove-user", data: {}});
 }

package/src/logic/enums.ts

@@ -5,6 +5,16 @@ export type AnyEnum = {
   [key in keyof any]: string | number;
 };
 
+//////////////
+// Login state
+//////////////
+
+export enum LoginState {
+  Unknown = "unknown",
+  LoggedOut = "logged-out",
+  LoggedIn = "logged-in"
+}
+
 ///////////////////
 // Main panel modes
 ///////////////////

package/src/logic/events.ts

@@ -18,31 +18,39 @@ export type TagChangeSource = "tags_filter" | "entry_record" | "rule_record";
 export type SidebarVisibilityChangeEvent = "hide" | "show";
 export type SidebarVisibilityChangeSource = "top_sidebar_button";
 
-export async function newsLinkOpened({entryId, view}: {entryId: t.EntryId; view: EventsViewName}) {
-  await api.trackEvent({
+export function newsLinkOpened({entryId, view}: {entryId: t.EntryId; view: EventsViewName}) {
+  api.trackEvent({
     name: "news_link_opened",
     view: view,
     entry_id: entryId
   });
 }
 
-export async function newsBodyOpened({entryId, view}: {entryId: t.EntryId; view: EventsViewName}) {
-  await api.trackEvent({
+export function newsBodyOpened({entryId, view}: {entryId: t.EntryId; view: EventsViewName}) {
+  api.trackEvent({
     name: "news_body_opened",
     view: view,
     entry_id: entryId
   });
 }
 
-export async function socialLinkClicked({linkType, view}: {linkType: string; view: EventsViewName}) {
-  await api.trackEvent({
+export function socialLinkClicked({linkType, view}: {linkType: string; view: EventsViewName}) {
+  api.trackEvent({
     name: "social_link_clicked",
     view: view,
     link_type: linkType
   });
 }
 
-export async function sidebarStateChanged({
+export function authButtonClicked({buttonType, view}: {buttonType: string; view: EventsViewName}) {
+  api.trackEvent({
+    name: "auth_button_clicked",
+    view: view,
+    button_type: buttonType
+  });
+}
+
+export function sidebarStateChanged({
   subEvent,
   view,
   source
@@ -51,7 +59,7 @@ export async function sidebarStateChanged({
   view: EventsViewName;
   source: SidebarVisibilityChangeSource;
 }) {
-  await api.trackEvent({
+  api.trackEvent({
     name: "sidebar_state_changed",
     view: view,
     sub_event: subEvent,
@@ -59,7 +67,7 @@ export async function sidebarStateChanged({
   });
 }
 
-export async function tagStateChanged({
+export function tagStateChanged({
   tag,
   fromState,
   toState,
@@ -74,7 +82,7 @@ export async function tagStateChanged({
 }) {
   // const eventsView = inject<events.EventViewName>("eventsViewName");
 
-  await api.trackEvent({
+  api.trackEvent({
     name: "tag_filter_state_changed",
     tag: tag,
     from_state: fromState,
@@ -84,7 +92,7 @@ export async function tagStateChanged({
   });
 }
 
-export async function trackUtm({
+export function trackUtm({
   utm_source,
   utm_medium,
   utm_campaign
@@ -93,7 +101,7 @@ export async function trackUtm({
   utm_medium: string;
   utm_campaign: string;
 }) {
-  await api.trackEvent({
+  api.trackEvent({
     name: "user_utm",
     utm_source: utm_source,
     utm_medium: utm_medium,