add support for tags

commafeed-client/src/app/client.ts

@@ -22,6 +22,7 @@ import {
     StarRequest,
     SubscribeRequest,
     Subscription,
+    TagRequest,
     UserModel,
 } from "./types"
 
@@ -48,6 +49,8 @@ export const client = {
         mark: (req: MarkRequest) => axiosInstance.post("entry/mark", req),
         markMultiple: (req: MultipleMarkRequest) => axiosInstance.post("entry/markMultiple", req),
         star: (req: StarRequest) => axiosInstance.post("entry/star", req),
+        getTags: () => axiosInstance.get<string[]>("entry/tags"),
+        tag: (req: TagRequest) => axiosInstance.post("entry/tag", req),
     },
     feed: {
         get: (id: string) => axiosInstance.get<Subscription>(`feed/get/${id}`),

commafeed-client/src/app/slices/entries.ts

@@ -2,13 +2,15 @@ import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
 import { client } from "app/client"
 import { Constants } from "app/constants"
 import { RootState } from "app/store"
-import { Entries, Entry, MarkRequest } from "app/types"
+import { Entries, Entry, MarkRequest, TagRequest } from "app/types"
 import { scrollToWithCallback } from "app/utils"
 import { flushSync } from "react-dom"
 // eslint-disable-next-line import/no-cycle
 import { reloadTree } from "./tree"
+// eslint-disable-next-line import/no-cycle
+import { reloadTags } from "./user"
 
-export type EntrySourceType = "category" | "feed"
+export type EntrySourceType = "category" | "feed" | "tag"
 export type EntrySource = { type: EntrySourceType; id: string }
 export type ExpendableEntry = Entry & { expanded?: boolean }
 
@@ -40,16 +42,18 @@ const initialState: EntriesState = {
     scrollingToEntry: false,
 }
 
-const getEndpoint = (sourceType: EntrySourceType) => (sourceType === "category" ? client.category.getEntries : client.feed.getEntries)
+const getEndpoint = (sourceType: EntrySourceType) =>
+    sourceType === "category" || sourceType === "tag" ? client.category.getEntries : client.feed.getEntries
 export const loadEntries = createAsyncThunk<Entries, EntrySource, { state: RootState }>("entries/load", async (source, thunkApi) => {
     const state = thunkApi.getState()
     const endpoint = getEndpoint(source.type)
     const result = await endpoint({
-        id: source.id,
+        id: source.type === "tag" ? Constants.categories.all.id : source.id,
         order: state.user.settings?.readingOrder,
         readType: state.user.settings?.readingMode,
         offset: 0,
         limit: 50,
+        tag: source.type === "tag" ? source.id : undefined,
     })
     return result.data
 })
@@ -235,6 +239,10 @@ export const selectNextEntry = createAsyncThunk<
         )
     }
 })
+export const tagEntry = createAsyncThunk<void, TagRequest, { state: RootState }>("entries/entry/tag", async (arg, thunkApi) => {
+    await client.entry.tag(arg)
+    thunkApi.dispatch(reloadTags())
+})
 
 export const entriesSlice = createSlice({
     name: "entries",
@@ -305,6 +313,13 @@ export const entriesSlice = createSlice({
             state.entries = [...state.entries, ...entriesToAdd]
             state.hasMore = action.payload.hasMore
         })
+        builder.addCase(tagEntry.pending, (state, action) => {
+            state.entries
+                .filter(e => +e.id === action.meta.arg.entryId)
+                .forEach(e => {
+                    e.tags = action.meta.arg.tags
+                })
+        })
     },
 })
 

commafeed-client/src/app/slices/redirect.ts

@@ -32,6 +32,10 @@ export const redirectToFeed = createAsyncThunk("redirect/feed", (id: string | nu
 export const redirectToFeedDetails = createAsyncThunk("redirect/feed/details", (id: string, thunkApi) =>
     thunkApi.dispatch(redirectTo(`/app/feed/${id}/details`))
 )
+export const redirectToTag = createAsyncThunk("redirect/tag", (id: string, thunkApi) => thunkApi.dispatch(redirectTo(`/app/tag/${id}`)))
+export const redirectToTagDetails = createAsyncThunk("redirect/tag/details", (id: string, thunkApi) =>
+    thunkApi.dispatch(redirectTo(`/app/tag/${id}/details`))
+)
 export const redirectToAdd = createAsyncThunk("redirect/add", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/add")))
 export const redirectToSettings = createAsyncThunk("redirect/settings", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/settings")))
 export const redirectToAdminUsers = createAsyncThunk("redirect/admin/users", (_, thunkApi) =>

commafeed-client/src/app/slices/user.ts

@@ -4,17 +4,20 @@ import { createAsyncThunk, createSlice, isAnyOf } from "@reduxjs/toolkit"
 import { client } from "app/client"
 import { RootState } from "app/store"
 import { ReadingMode, ReadingOrder, Settings, SharingSettings, UserModel, ViewMode } from "app/types"
+// eslint-disable-next-line import/no-cycle
 import { reloadEntries } from "./entries"
 
 interface UserState {
     settings?: Settings
     profile?: UserModel
+    tags?: string[]
 }
 
 const initialState: UserState = {}
 
 export const reloadSettings = createAsyncThunk("settings/reload", () => client.user.getSettings().then(r => r.data))
 export const reloadProfile = createAsyncThunk("profile/reload", () => client.user.getProfile().then(r => r.data))
+export const reloadTags = createAsyncThunk("entries/tags", () => client.entry.getTags().then(r => r.data))
 export const changeReadingMode = createAsyncThunk<void, ReadingMode, { state: RootState }>(
     "settings/readingMode",
     (readingMode, thunkApi) => {
@@ -85,6 +88,9 @@ export const userSlice = createSlice({
         builder.addCase(reloadProfile.fulfilled, (state, action) => {
             state.profile = action.payload
         })
+        builder.addCase(reloadTags.fulfilled, (state, action) => {
+            state.tags = action.payload
+        })
         builder.addCase(changeReadingMode.pending, (state, action) => {
             if (!state.settings) return
             state.settings.readingMode = action.meta.arg