WIP: use RTK Query for groups

ui2/src/app/store.ts

@@ -1,9 +1,11 @@
 import {configureStore} from "@reduxjs/toolkit"
+import {apiSlice} from "@/features/api/slice"
+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 groupsReducer from "@/slices/groups"
+import groupsReducer from "@/features/groups/slice"
 import usersReducer from "@/slices/users"
 import tagDetailsReducer from "@/slices/tagDetails"
 import groupDetailsReducer from "@/slices/groupDetails"
@@ -14,6 +16,7 @@ import dragndropReducer from "@/slices/dragndrop"
 
 export const store = configureStore({
   reducer: {
+    auth: authSliceReducer,
     currentUser: currentUserReducer,
     dualPanel: dualPanelReducer,
     navBar: navBarReducer,
@@ -25,6 +28,9 @@ export const store = configureStore({
     userDetails: userDetailsReducer,
     uploader: uploaderReducer,
     sizes: sizesSliceReducer,
-    dragndrop: dragndropReducer
-  }
+    dragndrop: dragndropReducer,
+    [apiSlice.reducerPath]: apiSlice.reducer
+  },
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware().concat(apiSlice.middleware)
 })

ui2/src/app/withTypes.ts

@@ -0,0 +1,8 @@
+import {createAsyncThunk} from "@reduxjs/toolkit"
+
+import type {RootState, AppDispatch} from "./types"
+
+export const createAppAsyncThunk = createAsyncThunk.withTypes<{
+  state: RootState
+  dispatch: AppDispatch
+}>()

ui2/src/components/users/EditButton.tsx

@@ -3,7 +3,7 @@ import {Button} from "@mantine/core"
 import {IconEdit} from "@tabler/icons-react"
 
 import {openModal} from "@/components/modals/Generic"
-import {fetchGroups} from "@/slices/groups"
+import {fetchGroups} from "@/features/groups/slice"
 import {
   fetchUserDetails,
   selectUserDetails,

ui2/src/components/users/EditUserModal.tsx

@@ -18,7 +18,7 @@ import {selectUserDetails} from "@/slices/userDetails"
 
 import {RootState} from "@/app/types"
 import type {SliceState, SliceStateStatus, UserDetails} from "@/types"
-import {selectAllGroups, selectAllGroupsStatus} from "@/slices/groups"
+import {selectAllGroups, selectAllGroupsStatus} from "@/features/groups/slice"
 
 type GenericModalArgs = {
   userId: string

ui2/src/components/users/NewButton.tsx

@@ -4,7 +4,7 @@ import {IconPlus} from "@tabler/icons-react"
 
 import {openModal} from "@/components/modals/Generic"
 import {updateUserDetails} from "@/slices/userDetails"
-import {fetchGroups} from "@/slices/groups"
+import {fetchGroups} from "@/features/groups/slice"
 import NewUserModal from "./NewUserModal"
 import type {UserDetails} from "@/types"
 

ui2/src/components/users/NewUserModal.tsx

@@ -17,7 +17,7 @@ import {UserEditableFields, Group as GroupType} from "@/types"
 
 import {RootState} from "@/app/types"
 import type {SliceStateStatus, UserDetails} from "@/types"
-import {selectAllGroups, selectAllGroupsStatus} from "@/slices/groups"
+import {selectAllGroups, selectAllGroupsStatus} from "@/features/groups/slice"
 import {makeRandomString} from "@/utils"
 import {emailValidator, usernameValidator} from "./validators"
 

ui2/src/features/api/slice.ts

@@ -0,0 +1,52 @@
+import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react"
+import {getBaseURL} from "@/utils"
+
+import type {Group} from "@/types"
+import type {RootState} from "@/app/types"
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: `${getBaseURL()}api`,
+  prepareHeaders: (headers, {getState}) => {
+    const state = getState() as RootState
+    const token = state.auth.token
+    const remote_user = state.auth.remote_user
+    const remote_groups = state.auth.remote_groups
+    const remote_name = state.auth.remote_name
+    const remote_email = state.auth.remote_email
+
+    if (token) {
+      headers.set("authorization", `Bearer ${token}`)
+    }
+
+    if (remote_user) {
+      headers.set("Remote-User", remote_user)
+    }
+    if (remote_groups) {
+      headers.set("Remote-Groups", remote_groups)
+    }
+    if (remote_name) {
+      headers.set("Remote-Name", remote_name)
+    }
+    if (remote_email) {
+      headers.set("Remote-Email", remote_email)
+    }
+
+    headers.set("Content-Type", "application/json")
+
+    return headers
+  }
+})
+
+// Define our single API slice object
+export const apiSlice = createApi({
+  reducerPath: "api",
+  baseQuery: baseQuery,
+  endpoints: builder => ({
+    getGroups: builder.query<Group[], void>({
+      query: () => "/groups/"
+    })
+  })
+})
+
+// Export the auto-generated hook for the `getPosts` query endpoint
+export const {useGetGroupsQuery} = apiSlice

ui2/src/features/auth/slice.ts

@@ -0,0 +1,58 @@
+import Cookies from "js-cookie"
+import {createSlice} from "@reduxjs/toolkit"
+import type {RootState} from "@/app/types"
+import {createAppAsyncThunk} from "@/app/withTypes"
+import {getDefaultHeaders} from "@/utils"
+
+const COOKIE_NAME = "access_token"
+
+interface AuthState {
+  token: string | null
+  remote_user: string | null
+  remote_groups: string | null
+  remote_email: string | null
+  remote_name: string | null
+}
+
+const initialState: AuthState = {
+  token: null,
+  remote_user: null,
+  remote_groups: null,
+  remote_email: null,
+  remote_name: null
+}
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  // Remove the reducer definitions
+  reducers: {
+    cookieLoaded: state => {
+      const headers = getDefaultHeaders()
+      const token = Cookies.get(COOKIE_NAME)
+
+      if (headers["Remote-User"]) {
+        state.remote_user = headers["Remote-User"]
+      }
+
+      if (headers["Remote-Groups"]) {
+        state.remote_groups = headers["Remote-Groups"]
+      }
+
+      if (headers["Remote-Email"]) {
+        state.remote_email = headers["Remote-Email"]
+      }
+
+      if (headers["Remote-Name"]) {
+        state.remote_name = headers["Remote-Name"]
+      }
+
+      if (token) {
+        state.token = token
+      }
+    }
+  }
+})
+
+export const {cookieLoaded} = authSlice.actions
+export default authSlice.reducer

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

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

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

@@ -9,7 +9,7 @@ import {
   selectGroupsByIds,
   clearSelection,
   selectGroupById
-} from "@/slices/groups"
+} from "@/features/groups/slice"
 import {openModal} from "@/components/modals/Generic"
 
 import type {Group} from "@/types"

ui2/src/components/groups/DeleteModal.tsx → ui2/src/features/groups/components/DeleteModal.tsx

@@ -1,6 +1,6 @@
 import {useState} from "react"
 import {store} from "@/app/store"
-import {removeGroups} from "@/slices/groups"
+import {removeGroups} from "@/features/groups/slice"
 import GenericModal from "@/components/modals/Generic"
 import type {Group} from "@/types"
 

ui2/src/components/groups/EditGroupModal.tsx → ui2/src/features/groups/components/EditGroupModal.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip
 } from "@mantine/core"
 
-import {updateGroup} from "@/slices/groups"
+import {updateGroup} from "@/features/groups/slice"
 import {selectGroupDetails} from "@/slices/groupDetails"
 import {RootState} from "@/app/types"
 import type {GroupDetails, SliceState} from "@/types"

ui2/src/components/groups/GroupRow.tsx → ui2/src/features/groups/components/GroupRow.tsx

@@ -1,7 +1,11 @@
 import {Link} from "react-router-dom"
 import {useDispatch, useSelector} from "react-redux"
 import {Table, Checkbox} from "@mantine/core"
-import {selectionAdd, selectionRemove, selectSelectedIds} from "@/slices/groups"
+import {
+  selectionAdd,
+  selectionRemove,
+  selectSelectedIds
+} from "@/features/groups/slice"
 import type {Group} from "@/types"
 
 type Args = {

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

@@ -8,15 +8,23 @@ import {
   fetchGroups,
   selectPagination,
   selectLastPageSize
-} from "@/slices/groups"
+} from "@/features/groups/slice"
+import {useGetGroupsQuery} from "@/features/api/slice"
 
 import Pagination from "@/components/Pagination"
 import GroupRow from "./GroupRow"
 import ActionButtons from "./ActionButtons"
 
 export default function GroupsList() {
   const selectedIds = useSelector(selectSelectedIds)
-  const groups = useSelector(selectAllGroups)
+  //const groups = useSelector(selectAllGroups)
+  const {
+    data: groups = [],
+    isLoading,
+    isSuccess,
+    isError,
+    error
+  } = useGetGroupsQuery()
   const dispatch = useDispatch()
   const pagination = useSelector(selectPagination)
   const lastPageSize = useSelector(selectLastPageSize)
@@ -50,6 +58,8 @@ export default function GroupsList() {
     )
   }
 
+  return <>Groups</>
+  /*
   const groupRows = groups.map(g => <GroupRow key={g.id} group={g} />)
 
   return (
@@ -77,6 +87,7 @@ export default function GroupsList() {
       />
     </Stack>
   )
+    */
 }
 
 function Empty() {

ui2/src/components/groups/NewGroupModal.tsx → ui2/src/features/groups/components/NewGroupModal.tsx

@@ -10,7 +10,7 @@ import {
   Tooltip
 } from "@mantine/core"
 
-import {addGroup} from "@/slices/groups"
+import {addGroup} from "@/features/groups/slice"
 import type {GroupDetails} from "@/types"
 
 type Args = {

ui2/src/main.tsx

@@ -7,12 +7,14 @@ import {MantineProvider} from "@mantine/core"
 import "@/index.css"
 import {store} from "@/app/store"
 import {fetchCurrentUser} from "@/slices/currentUser"
+import {cookieLoaded} from "@/features/auth/slice"
 import {fetchTags} from "@/slices/tags"
 
 import theme from "@/themes"
 import router from "./router"
 
 function start_app() {
+  store.dispatch(cookieLoaded())
   store.dispatch(fetchCurrentUser())
   store.dispatch(fetchTags({pageNumber: 1, pageSize: 999}))
 

ui2/src/pages/groups/Details.tsx

@@ -1,5 +1,5 @@
 import {LoaderFunctionArgs, useLoaderData} from "react-router"
-import GroupDetails from "@/components/groups/GroupDetails.tsx"
+import {GroupDetails} from "@/features/groups/components"
 import {fetchGroupDetails} from "@/slices/groupDetails"
 import {store} from "@/app/store"
 

ui2/src/pages/groups/List.tsx

@@ -1,16 +1,5 @@
-import GroupsList from "@/components/groups/List"
-import {fetchGroups} from "@/slices/groups"
-import {store} from "@/app/store"
+import {GroupsList} from "@/features/groups/components"
 
 export default function GroupsPage() {
   return <GroupsList />
 }
-
-export async function loader() {
-  const state = store.getState()
-  await store.dispatch(
-    fetchGroups({pageNumber: 1, pageSize: state.groups.lastPageSize})
-  )
-
-  return null
-}

ui2/src/router.tsx

@@ -15,7 +15,6 @@ import GroupsList from "@/pages/groups/List.tsx"
 import UsersList from "@/pages/users/List.tsx"
 
 import {loader as tagsListLoader} from "@/pages/tags/List"
-import {loader as groupsListLoader} from "@/pages/groups/List"
 import {loader as usersListLoader} from "@/pages/users/List"
 
 import TagDetails from "@/pages/tags/Details.tsx"
@@ -67,8 +66,7 @@ const router = createBrowserRouter([
       },
       {
         path: "/groups",
-        element: <GroupsList />,
-        loader: groupsListLoader
+        element: <GroupsList />
       },
       {
         path: "/groups/:groupId",