move tags in feature folder (#448)

ui2/src/app/store.ts

@@ -4,7 +4,7 @@ import authSliceReducer from "@/features/auth/slice"
 import currentUserReducer from "@/slices/currentUser"
 import dualPanelReducer from "@/slices/dualPanel/dualPanel"
 import navBarReducer from "@/slices/navBar"
-import tagsReducer from "@/slices/tags"
+import tagsReducer from "@/features/tags/tagsSlice"
 import groupsReducer from "@/features/groups/groupsSlice"
 import usersReducer from "@/features/users/usersSlice"
 import {uploaderReducer} from "@/slices/uploader"

ui2/src/components/Node/Tags/index.tsx

@@ -1,6 +1,6 @@
 import {useSelector} from "react-redux"
 import {Pill, Stack} from "@mantine/core"
-import {selectTagsByName} from "@/slices/tags"
+import {selectTagsByName} from "@/features/tags/tagsSlice"
 import type {ColoredTagType} from "@/types"
 import classes from "./Tags.module.css"
 import {RootState} from "@/app/types"

ui2/src/components/modals/EditNodeTags.tsx

@@ -7,7 +7,7 @@ import Error from "@/components/modals/Error"
 import type {NodeType} from "@/types"
 import {MODALS} from "@/cconstants"
 import axios, {AxiosError} from "axios"
-import {store} from "@/app/store"
+//import {store} from "@/app/store"
 
 type Args = {
   node: NodeType
@@ -16,8 +16,8 @@ type Args = {
 }
 
 const EditNodeTagsModal = ({node, onOK, onCancel}: Args) => {
-  const state = store.getState()
-  const allTagNames = Object.values(state.tags.entities).map(t => t.name)
+  // const state = store.getState()
+  const allTagNames: string[] = [] //Object.values(state.tags.entities).map(t => t.name)
   const [tags, setTags] = useState<string[]>(node.tags.map(t => t.name))
   const [error, setError] = useState("")
 

ui2/src/components/tags/ActionButtons.tsx → ui2/src/features/tags/components/ActionButtons.tsx

@@ -1,6 +1,6 @@
 import {useSelector} from "react-redux"
 import {Group} from "@mantine/core"
-import {selectSelectedIds} from "@/slices/tags"
+import {selectSelectedIds} from "@/features/tags/tagsSlice"
 import NewButton from "./NewButton"
 import EditButton from "./EditButton"
 import {DeleteTagsButton} from "./DeleteButton"

ui2/src/components/tags/DeleteButton.tsx → ui2/src/features/tags/components/DeleteButton.tsx

@@ -4,7 +4,7 @@ import {IconTrash} from "@tabler/icons-react"
 import {useDispatch, useSelector} from "react-redux"
 import {useNavigate} from "react-router-dom"
 
-import {selectSelectedIds, clearSelection} from "@/slices/tags"
+import {selectSelectedIds, clearSelection} from "@/features/tags/tagsSlice"
 
 import {DeleteTagModal, DeleteTagsModal} from "./DeleteModal"
 

ui2/src/components/tags/List.tsx → ui2/src/features/tags/components/List.tsx

@@ -7,7 +7,7 @@ import {
   clearSelection,
   selectLastPageSize,
   lastPageSizeUpdate
-} from "@/slices/tags"
+} from "@/features/tags/tagsSlice"
 import {useGetPaginatedTagsQuery} from "@/features/tags/apiSlice"
 
 import Pagination from "@/components/Pagination"

ui2/src/components/tags/TagRow.tsx → ui2/src/features/tags/components/TagRow.tsx

@@ -1,7 +1,11 @@
 import {Link} from "react-router-dom"
 import {useDispatch, useSelector} from "react-redux"
 import {Table, Checkbox, Pill} from "@mantine/core"
-import {selectionAdd, selectionRemove, selectSelectedIds} from "@/slices/tags"
+import {
+  selectionAdd,
+  selectionRemove,
+  selectSelectedIds
+} from "@/features/tags/tagsSlice"
 import type {ColoredTag} from "@/types"
 
 import Check from "@/components/Check"

ui2/src/pages/tags/Details.tsx → ui2/src/features/tags/pages/Details.tsx

@@ -1,5 +1,5 @@
 import {useParams} from "react-router"
-import TagDetails from "@/components/tags/TagDetails.tsx"
+import TagDetails from "@/features/tags/components/TagDetails.tsx"
 
 export default function TagDetailsPage() {
   const {tagId} = useParams()

ui2/src/pages/tags/List.tsx → ui2/src/features/tags/pages/List.tsx

@@ -1,4 +1,4 @@
-import TagsList from "@/components/tags/List"
+import TagsList from "@/features/tags/components/List"
 
 export default function TagsPage() {
   return <TagsList />

ui2/src/features/tags/pages/index.tsx

@@ -0,0 +1,4 @@
+import TagDetails from "./Details"
+import TagsList from "./List"
+
+export {TagsList, TagDetails}

ui2/src/features/tags/tagsSlice.ts

@@ -0,0 +1,70 @@
+import {createSlice, PayloadAction, createSelector} from "@reduxjs/toolkit"
+
+import {RootState} from "@/app/types"
+import type {PaginationType} from "@/types"
+import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
+import {apiSliceWithTags} from "./apiSlice"
+
+export type TagSlice = {
+  selectedIds: Array<string>
+  pagination: PaginationType | null
+  lastPageSize: number
+}
+
+const initialState: TagSlice = {
+  selectedIds: [],
+  pagination: null,
+  lastPageSize: PAGINATION_DEFAULT_ITEMS_PER_PAGES
+}
+const tagsSlice = createSlice({
+  name: "tags",
+  initialState,
+  reducers: {
+    selectionAdd: (state, action: PayloadAction<string>) => {
+      state.selectedIds.push(action.payload)
+    },
+    selectionAddMany: (state, action: PayloadAction<Array<string>>) => {
+      state.selectedIds = action.payload
+    },
+    selectionRemove: (state, action: PayloadAction<string>) => {
+      const newSelectedIds = state.selectedIds.filter(i => i != action.payload)
+      state.selectedIds = newSelectedIds
+    },
+    clearSelection: state => {
+      state.selectedIds = []
+    },
+    lastPageSizeUpdate: (state, action: PayloadAction<number>) => {
+      state.lastPageSize = action.payload
+    }
+  }
+})
+
+export const {
+  selectionAdd,
+  selectionAddMany,
+  selectionRemove,
+  clearSelection,
+  lastPageSizeUpdate
+} = tagsSlice.actions
+export default tagsSlice.reducer
+
+export const selectTagsResult = apiSliceWithTags.endpoints.getTags.select()
+export const selectItems = (_: RootState, items: string[]) => items
+
+export const selectTagsByName = createSelector(
+  [selectTagsResult, selectItems],
+  (tagsData, tagNames) => {
+    return tagsData.data?.filter(t => tagNames.includes(t.name)) || []
+  }
+)
+
+export const selectSelectedIds = (state: RootState) => state.tags.selectedIds
+
+// @ts-ignore
+export const selectItemNames = (state: RootState, names: string[]) => names
+// @ts-ignore
+export const selectItemIds = (state: RootState, itemIds: string[]) => itemIds
+
+export const selectLastPageSize = (state: RootState): number => {
+  return state.tags.lastPageSize
+}

ui2/src/router.tsx

@@ -9,13 +9,9 @@ import Folder from "@/pages/Folder"
 import {loader as folderLoader} from "@/pages/Folder"
 
 import Document from "@/pages/Document"
-
-import TagsList from "@/pages/tags/List"
-
 import {GroupsList, GroupDetails} from "@/features/groups/pages"
 import {UsersList, UserDetails} from "@/features/users/pages"
-
-import TagDetails from "@/pages/tags/Details.tsx"
+import {TagDetails, TagsList} from "@/features/tags/pages"
 
 import {loader as documentLoader} from "@/pages/Document"