@orangelogic/orange-dam-content-browser-sdk 1.0.1-test

package/src/store/auth/auth.slice.ts

@@ -0,0 +1,295 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '@/store';
+import { resetImportStatus } from '@/store/assets/assets.slice';
+import {
+  GetAccessKeyRes,
+  GetAccessKeyResponseCode,
+  OAuthRes,
+} from '@/types/auth';
+import { getRequestUrl } from '@/utils/getRequestUrl';
+import { deleteData, getData, storeData } from '@/utils/storage';
+import { generateRandomString } from '@/utils/string';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+
+import { assetsApi } from '../assets/assets.api';
+import { searchApi } from '../search/search.api';
+import { userApi } from '../user/user.api';
+import {
+  abortAuthService,
+  authAbortController,
+  CANCEL_AUTH_MESSAGE,
+  getAccessKeyService,
+  getAccessTokenService,
+  requestAuthorizeService,
+} from './auth.service';
+
+export const AUTH_FEATURE_KEY = 'auth';
+export const AUTH_FEATURE_ACCESS_KEY_KEY = `${AUTH_FEATURE_KEY}_access_key_key`;
+export const AUTH_FEATURE_SITE_URL_KEY = `${AUTH_FEATURE_KEY}_site_url_key`;
+export const USE_SESSION = 'useSession';
+
+export type AuthState = {
+  siteUrl: string;
+  userConfigSiteUrl?: string;
+  nonce?: string;
+  accessToken?: string;
+  accessKey?: string;
+  oAuthUrl?: string;
+  error?: string;
+  status: 'authenticated' | 'unauthenticated' | 'restoreSession' | 'requestLogin' | 'waitForAuthorise';
+  useSession: string;
+};
+
+// #region Slice
+const initialState: AuthState = {
+  siteUrl: '',
+  status: 'unauthenticated',
+  useSession: '',
+};
+
+export const authSlice = createSlice({
+  name: AUTH_FEATURE_KEY,
+  initialState,
+  reducers: {
+    setAccessToken: (state, action: PayloadAction<string | undefined>) => {
+      state.accessToken = action.payload;
+    },
+    updateAuthTokens: (state, action: PayloadAction<Partial<AuthState>>) => {
+      state.status = 'authenticated';
+      state.accessKey = action.payload.accessKey;
+      state.accessToken = action.payload.accessToken;
+    },
+    setSiteUrl: (state, action: PayloadAction<string>) => {
+      state.error = '';
+      state.siteUrl = action.payload;
+    },
+    setUserConfigSiteUrl: (state, action: PayloadAction<string>) => {
+      state.userConfigSiteUrl = action.payload;
+    },
+    generateNonce: (state) => {
+      state.nonce = generateRandomString(12);
+    },
+    logout: (state) => {
+      state.status = 'unauthenticated';
+      state.error = '';
+      state.accessKey = undefined;
+      state.accessToken = undefined;
+      state.oAuthUrl = undefined;
+      state.siteUrl = state.userConfigSiteUrl ?? '';
+      state.nonce = undefined;
+      state.useSession = '';
+      deleteData(AUTH_FEATURE_ACCESS_KEY_KEY);
+      deleteData(AUTH_FEATURE_SITE_URL_KEY);
+      deleteData(USE_SESSION);
+      deleteData('selectedSortOrder');
+      deleteData('selectedSortDirection');
+      deleteData('selectedView');
+      deleteData('newlySelectedFacet');
+      deleteData('newFacets');
+      deleteData('selectedFilter');
+      deleteData('selectedIsSeeThrough');
+      deleteData('searchText');
+      deleteData('lastLocation');
+    },
+    setAuthStatus: (state, action: PayloadAction<AuthState['status']>) => {
+      state.status = action.payload;
+    },
+    setUseSession: (state, action: PayloadAction<string>) => {
+      state.useSession = action.payload;
+      storeData(USE_SESSION, action.payload);
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        oAuth.fulfilled,
+        (state, { payload }) => {
+          if (payload) {
+            const { accessKey, accessToken, siteUrl } = payload;
+            state.accessKey = accessKey;
+            state.accessToken = accessToken;
+            state.status = 'authenticated';
+            state.siteUrl = siteUrl;
+            storeData(AUTH_FEATURE_ACCESS_KEY_KEY, accessKey ?? '');
+            storeData(AUTH_FEATURE_SITE_URL_KEY, siteUrl);
+          }
+        },
+      )
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      .addCase(oAuth.rejected, (state, action) => {
+        state.error = action.payload as string;
+        state.status = 'unauthenticated';
+        deleteData(AUTH_FEATURE_ACCESS_KEY_KEY);
+      })
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      .addCase(oAuth.pending, (state) => {
+        state.error = '';
+      });
+  },
+});
+
+export default authSlice.reducer;
+export const { logout, setAccessToken, generateNonce, setSiteUrl, setUserConfigSiteUrl, setUseSession } = authSlice.actions;
+// #endregion
+
+// #region Selector
+export const authenticatedSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].status == 'authenticated';
+
+export const accessTokenSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].accessToken;
+
+export const oAuthUrlSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].oAuthUrl;
+
+export const siteUrlSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].siteUrl;
+
+export const userConfigSiteUrlSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].userConfigSiteUrl;
+
+export const authErrorSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].error;
+
+export const nonceSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].nonce;
+
+export const authStateSelector = (rootState: RootState) => 
+  rootState[AUTH_FEATURE_KEY].status;
+
+export const useSessionSelector = (rootState: RootState) =>
+  rootState[AUTH_FEATURE_KEY].useSession;
+
+export const appAuthUrlSelector = (rootState: RootState) => {
+  const siteUrl = rootState[AUTH_FEATURE_KEY].siteUrl;
+  return siteUrl ? getRequestUrl(siteUrl, `AppAuth?RID=${rootState[AUTH_FEATURE_KEY].nonce}`) : '';
+};
+// #endregion
+
+// #region Action
+export const cancelAuth = createAsyncThunk(`${AUTH_FEATURE_KEY}/oauth`, (_, { dispatch, getState }) => {
+  if (!authenticatedSelector(getState() as RootState)) {
+    abortAuthService();
+    dispatch(authSlice.actions.setAuthStatus('unauthenticated'));
+  }
+});
+
+export const oAuth = createAsyncThunk<OAuthRes, { siteUrl: string }>(
+  `${AUTH_FEATURE_KEY}/oauth`,
+  async ({ siteUrl }, { rejectWithValue, dispatch, getState }) => {
+    dispatch(authSlice.actions.setSiteUrl(siteUrl));
+    dispatch(authSlice.actions.setAuthStatus('requestLogin'));
+
+    const execute = async () => {
+      dispatch(generateNonce());
+      const nonce = nonceSelector(getState() as RootState);
+      const resp = await requestAuthorizeService(nonce ?? '');
+      if (authAbortController.signal.aborted) {
+        throw Error(CANCEL_AUTH_MESSAGE);
+      }
+      const requestID = resp.requestID;
+      const popupUrl = appAuthUrlSelector(getState() as RootState);
+      dispatch(authSlice.actions.setAuthStatus('waitForAuthorise'));
+      window.open(popupUrl, '_blank');
+      const getAccessKeyData = await getAccessKeyService(requestID);
+      if (getAccessKeyData.accessKey) {
+        const tokenResp = await getAccessTokenService(getAccessKeyData.accessKey);
+        if (tokenResp.accessToken) {
+          return {
+            code: GetAccessKeyResponseCode.Authorized,
+            accessKey: getAccessKeyData.accessKey,
+            accessToken: tokenResp.accessToken,
+            siteUrl,
+          };
+        }
+      }
+      return getAccessKeyData;
+    };
+
+    let getOAuthResult: Awaited<ReturnType<typeof execute>>;
+    try {
+      getOAuthResult = await execute();
+      if (getOAuthResult.code !== GetAccessKeyResponseCode.Authorized) {
+        return rejectWithValue((getOAuthResult as GetAccessKeyRes).message);
+      }
+
+      // Login successfully, reset other state
+      dispatch(resetImportStatus());
+      dispatch(searchApi.util.resetApiState());
+      dispatch(assetsApi.util.resetApiState());
+      dispatch(userApi.util.resetApiState());
+
+      return getOAuthResult as OAuthRes;
+    } catch (exception) {
+      return rejectWithValue((exception as Error).message);
+    }
+  },
+);
+
+export const initAuthInfoFromCache = createAsyncThunk(
+  `${AUTH_FEATURE_KEY}/initAuthInfoFromCache`,
+  async (_, { dispatch, rejectWithValue, getState }) => {
+    dispatch(authSlice.actions.setAuthStatus('restoreSession'));
+
+    const execute = async () => {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      let siteUrl = siteUrlSelector(getState() as RootState);
+      if (!siteUrl) {
+        siteUrl = await getData(AUTH_FEATURE_SITE_URL_KEY) ?? '';
+        if (!siteUrl) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          siteUrl = userConfigSiteUrlSelector(getState() as RootState) ?? '';
+        }
+        if (siteUrl) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          dispatch(setSiteUrl(siteUrl));
+        }
+      }
+
+      if (!siteUrl) {
+        return false;
+      }
+
+      const accessKey = await getData(AUTH_FEATURE_ACCESS_KEY_KEY);
+
+      if (accessKey) {
+        const accessToken = (
+          await getAccessTokenService(accessKey)
+        ).accessToken;
+        if (accessToken) {
+          dispatch(
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            authSlice.actions.updateAuthTokens({
+              accessKey,
+              accessToken,
+            }),
+          );
+          return true;
+        }
+      }
+      return false;
+    };
+
+    let isSuccess = false;
+
+    try {
+      isSuccess = await execute();
+      if (!isSuccess) {
+        return rejectWithValue('Unable to recover access key');
+      }
+
+      dispatch(resetImportStatus());
+      dispatch(searchApi.util.resetApiState());
+      dispatch(assetsApi.util.resetApiState());
+      dispatch(userApi.util.resetApiState());
+    } catch (exception) {
+      return rejectWithValue((exception as Error).message);
+    } finally {
+      if (!isSuccess) {
+        dispatch(logout());
+      }
+    }
+  },
+);
+// #endregion

package/src/store/index.ts

@@ -0,0 +1,27 @@
+import { configureStore } from '@reduxjs/toolkit';
+import type { TypedUseSelectorHook } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import authReducer, { AUTH_FEATURE_KEY } from './auth/auth.slice';
+import assetsReducer, { ASSETS_FEATURE_KEY } from './assets/assets.slice';
+import { searchApi } from './search/search.api';
+import { assetsApi } from './assets/assets.api';
+import { userApi } from './user/user.api';
+
+export const store = configureStore({
+  reducer: {
+    [AUTH_FEATURE_KEY]: authReducer,
+    [ASSETS_FEATURE_KEY]: assetsReducer,
+    [searchApi.reducerPath]: searchApi.reducer,
+    [userApi.reducerPath]: userApi.reducer,
+    [assetsApi.reducerPath]: assetsApi.reducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat([searchApi.middleware, userApi.middleware, assetsApi.middleware]),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/src/store/search/search.api.ts

@@ -0,0 +1,319 @@
+import _mapKeys from 'lodash-es/mapKeys';
+import _camelCase from 'lodash-es/camelCase';
+
+import {
+  DEFAULT_VIEW_SIZE, ORIGINAL_VIEW_SIZE, FIELD_CORTEX_PATH, FIELD_DOC_TYPE, FIELD_EXTENSION, FIELD_FILE_SIZE,
+  FIELD_HAS_BROWSER_CHILDREN,
+  FIELD_IDENTIFIER, FIELD_KEYWORDS, FIELD_MAX_HEIGHT, FIELD_MAX_WIDTH, FIELD_SCRUB_URL, FIELD_SUBTYPE, FIELD_TITLE_WITH_FALLBACK, FIELD_ALLOW_ATS_LINK,
+} from '@/consts/data';
+import { Asset, Folder, GetContentRequest, GetContentResponse } from '@/types/search';
+import { AppBaseQuery, GetValueByKeyCaseInsensitive } from '@/utils/api';
+import { isNullOrWhiteSpace } from '@/utils/string';
+import { createApi } from '@reduxjs/toolkit/query/react';
+
+const NATURAL_SORT_ORDER_REFERENCE_ID = 'OR4ND000000063615';
+
+const resolveFolderExtraFilters = (searchText: string) => {
+  if (isNullOrWhiteSpace(searchText)) {
+    return 'MediaType:Story OR MediaType:Album';
+  }
+  return `(MediaType:Story OR MediaType:Album) AND Story_Title:${searchText}`;
+};
+
+const resolveAssetExtraFilters = ({
+  extensions,
+  searchText,
+  statuses,
+  visibilityClasses,
+}: {
+  extensions: string[];
+  searchText: string;
+  statuses: string[];
+  visibilityClasses: string[];
+}) => {
+  let statusQuery = '';
+  if (statuses?.length) {
+    statusQuery = statuses
+      .map(status => `WorkflowStatus:${status}`)
+      .join(' OR ');
+    if (statuses.length > 1) {
+      statusQuery = `(${statusQuery})`;
+    }
+  }
+
+  let extensionsQuery = '';
+  if (extensions?.length) {
+    extensionsQuery = extensions
+      .map(extension => `FileExtension:${extension}`)
+      .join(' OR ');
+    if (extensions.length > 1) {
+      extensionsQuery = `(${extensionsQuery})`;
+    }
+  }
+
+  let visibilityClassesQuery = '';
+  if (visibilityClasses?.length) {
+    visibilityClassesQuery = visibilityClasses
+      .map(visibilityClass => `Purpose:${visibilityClass}`)
+      .join(' OR ');
+    if (visibilityClasses.length > 1) {
+      visibilityClassesQuery = `(${visibilityClassesQuery})`;
+    }
+  }
+
+  const searchTextQuery = isNullOrWhiteSpace(searchText) ? '' : `Text:${searchText}`;
+
+  const filters = [statusQuery, extensionsQuery, visibilityClassesQuery, searchTextQuery].filter(filter => filter.length > 0);
+
+  return filters.join(' AND ');
+};
+
+// Define a service using a base URL and expected endpoints
+export const searchApi = createApi({
+  reducerPath: 'searchApi',
+  baseQuery: AppBaseQuery,
+  tagTypes: ['Folders', 'Images', 'ImagesInFolders'],
+  endpoints: (builder) => ({
+    getFolders: builder.query({
+      query: ({
+        folder,
+        searchText,
+        useSession,
+      }: {
+        folder: Folder;
+        searchText: string;
+        useSession?: string;
+      }) => {
+        const params = [
+          [
+            'extraFilters',
+            resolveFolderExtraFilters(searchText),
+          ],
+          ['fields', FIELD_CORTEX_PATH],
+          ['fields', FIELD_DOC_TYPE],
+          ['fields', FIELD_TITLE_WITH_FALLBACK],
+          ['fields', FIELD_HAS_BROWSER_CHILDREN],
+          ['objectRecordID', folder.id],
+          ['orderBy', NATURAL_SORT_ORDER_REFERENCE_ID],
+          ['seeThru', !isNullOrWhiteSpace(searchText)],
+        ];
+
+        if (useSession) {
+          params.push(['UseSession', useSession]);
+        }
+
+        return {
+          url: '/webapi/extensibility/integrations/contentBrowserSDK/getcontent_4bw_v1',
+          params,
+        };
+      },
+      transformResponse: (
+        response: GetContentResponse,
+        _meta,
+        arg,
+      ): Folder[] => {
+        return (
+          response.contentItems
+            ?.map((item) => {
+              return {
+                id: item.recordID,
+                title:
+                  GetValueByKeyCaseInsensitive(item.fields, FIELD_TITLE_WITH_FALLBACK) ?? '',
+                docType:
+                  GetValueByKeyCaseInsensitive(item.fields, FIELD_DOC_TYPE) ?? '',
+                path: [...arg.folder.path, arg.folder.title],
+                fullPath: (
+                  GetValueByKeyCaseInsensitive(item.fields, FIELD_CORTEX_PATH) ?? ''
+                ).replace(/^Root\//i, ''),
+                parents: [...arg.folder.parents, arg.folder],
+                hasChildren: (GetValueByKeyCaseInsensitive(item.fields, FIELD_HAS_BROWSER_CHILDREN) ?? '0') === '1' ? true : false,
+              };
+            }) ?? []
+        );
+      },
+      providesTags: (_result, _error, arg) => {
+        return [{ type: 'Folders', id: arg.folder.id }];
+      },
+    }),
+    getCollections: builder.query({
+      query: ({
+        folder,
+        useSession,
+      }) => {
+        const params = [
+          ['fields', FIELD_CORTEX_PATH],
+          ['fields', FIELD_DOC_TYPE],
+          ['fields', FIELD_TITLE_WITH_FALLBACK],
+          ['seeThru', true],
+          ['subtypeCriteria', folder],
+        ];
+
+        if (useSession) {
+          params.push(['UseSession', useSession]);
+        }
+
+        return {
+          url: '/webapi/extensibility/integrations/contentBrowserSDK/getcontent_4bw_v1',
+          params,
+        };
+      },
+      transformResponse: (
+        response: GetContentResponse,
+        _meta,
+      ): Folder[] => {
+        return (
+          response.contentItems
+            ?.map((item) => ({
+              id: item.recordID,
+              title:
+                GetValueByKeyCaseInsensitive(item.fields, FIELD_TITLE_WITH_FALLBACK) ?? '',
+              docType:
+                GetValueByKeyCaseInsensitive(item.fields, FIELD_DOC_TYPE) ?? '',
+              path: [],
+              fullPath: (
+                GetValueByKeyCaseInsensitive(item.fields, FIELD_CORTEX_PATH) ?? ''
+              ).replace(/^Root\//i, ''),
+              parents: [],
+              hasChildren: false,
+            })) ?? []
+        );
+      },
+      providesTags: (_result, _error, arg) => {
+        return [{ type: 'Folders', id: arg.folder.id }];
+      },
+    }),
+    getAssets: builder.query({
+      query: ({
+        extensions,
+        folderID,
+        isSeeThrough,
+        mediaTypes,
+        start,
+        pageSize,
+        searchText,
+        sortOrder,
+        statuses,
+        visibilityClasses,
+        useSession,
+      }: GetContentRequest) => {
+        const mappedMediaTypes = mediaTypes.map((mediaType) => ['subtypeCriteria', mediaType]);
+        const params = [
+          ['objectRecordID', folderID],
+          ['fields', FIELD_TITLE_WITH_FALLBACK],
+          ['fields', DEFAULT_VIEW_SIZE],
+          ['fields', ORIGINAL_VIEW_SIZE],
+          ['fields', FIELD_KEYWORDS],
+          ['fields', FIELD_MAX_WIDTH],
+          ['fields', FIELD_MAX_HEIGHT],
+          ['fields', FIELD_FILE_SIZE],
+          ['fields', FIELD_DOC_TYPE],
+          ['fields', FIELD_SUBTYPE],
+          ['fields', FIELD_IDENTIFIER],
+          ['fields', FIELD_EXTENSION],
+          ['seeThru', isSeeThrough],
+          ['start', start],
+          ['limit', pageSize],
+        ];
+        const extraFilters = resolveAssetExtraFilters({
+          extensions,
+          searchText,
+          statuses,
+          visibilityClasses,
+        });
+        if (extraFilters) {
+          params.push(['extraFilters', extraFilters]);
+        }
+        if (sortOrder) {
+          params.push(['orderBy', sortOrder]);
+        }
+        if (mappedMediaTypes.length) {
+          params.push(...mappedMediaTypes);
+        }
+        if (useSession) {
+          params.push(['UseSession', useSession]);
+        }
+        return {
+          url: '/webapi/extensibility/integrations/contentBrowserSDK/getcontent_4bw_v1',
+          params,
+        };
+      },
+      transformResponse: (
+        response: GetContentResponse,
+      ): {
+        facets: Record<string, Record<string, number>>;
+        items: Asset[];
+        totalCount: number;
+      } => ({
+        facets: _mapKeys(response.facets, (_, key) => _camelCase(key)),
+        items:
+          response.contentItems?.map((item) => {
+            let extension = GetValueByKeyCaseInsensitive(item.fields, FIELD_EXTENSION) ?? '';
+            if (extension && !extension.startsWith('.')) {
+              extension = '.' + extension;
+            }
+            return {
+              docType: GetValueByKeyCaseInsensitive(item.fields, FIELD_DOC_TYPE) ?? '',
+              docSubType: GetValueByKeyCaseInsensitive(item.fields, FIELD_SUBTYPE) ?? '',
+              extension,
+              height: GetValueByKeyCaseInsensitive(item.fields, FIELD_MAX_HEIGHT) ?? '0',
+              id: item.recordID,
+              identifier: GetValueByKeyCaseInsensitive(item.fields, FIELD_IDENTIFIER) ?? '',
+              imageUrl: GetValueByKeyCaseInsensitive(item.fields, DEFAULT_VIEW_SIZE) ?? '',
+              originalUrl: GetValueByKeyCaseInsensitive(item.fields, ORIGINAL_VIEW_SIZE) ?? '',
+              name: GetValueByKeyCaseInsensitive(item.fields, FIELD_TITLE_WITH_FALLBACK) ?? '',
+              scrubUrl: GetValueByKeyCaseInsensitive(item.fields, FIELD_SCRUB_URL) ?? '',
+              size: GetValueByKeyCaseInsensitive(item.fields, FIELD_FILE_SIZE) ?? '0 MB',
+              tags: GetValueByKeyCaseInsensitive(item.fields, FIELD_KEYWORDS) ?? '',
+              width: GetValueByKeyCaseInsensitive(item.fields, FIELD_MAX_WIDTH) ?? '0',
+              allowATSLink: GetValueByKeyCaseInsensitive(item.fields, FIELD_ALLOW_ATS_LINK) === 'True',
+            } as Asset;
+          }) ?? [],
+        totalCount: response.totalCount,
+      }),
+      providesTags: (_result, _error, arg) => {
+        return [
+          {
+            extensions: arg.extensions,
+            id: arg.folderID,
+            isSeeThrough: arg.isSeeThrough,
+            mediaTypes: arg.mediaTypes,
+            searchText: arg.searchText,
+            sortOrder: arg.sortOrder,
+            statuses: arg.statuses,
+            type: 'ImagesInFolders',
+          },
+          'Images',
+        ];
+      },
+      merge: (currentCachedData, responseData, request) => {
+        if (request.arg.start > 0) {
+          currentCachedData.items.push(...responseData.items);
+          return currentCachedData;
+        } else {
+          return responseData;
+        }
+      },
+      forceRefetch({ currentArg, previousArg }) {
+        return currentArg !== previousArg;
+      },
+      serializeQueryArgs: ({ endpointName, queryArgs }) => {
+        return {
+          endpointName,
+          extensions: queryArgs.extensions,
+          id: queryArgs.folderID,
+          isSeeThrough: queryArgs.isSeeThrough,
+          mediaTypes: queryArgs.mediaTypes,
+          searchText: queryArgs.searchText,
+          sortOrder: queryArgs.sortOrder,
+          statuses: queryArgs.statuses,
+          type: 'ImagesInFolders',
+        };
+      },
+    }),
+  }),
+});
+
+// Export hooks for usage in functional components, which are
+// auto-generated based on the defined endpoints
+export const { useGetFoldersQuery, useGetCollectionsQuery, useGetAssetsQuery } =
+  searchApi;

package/src/store/search/search.slice.ts

@@ -0,0 +1,28 @@
+import { Folder } from '@/types/search';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { searchApi } from './search.api';
+
+export const RootFolder: Folder = Object.freeze({
+  id: '',
+  title: '',
+  docType: 'Story',
+  path: [],
+  parents: [],
+  fullPath: '',
+  hasChildren: true,
+});
+
+// #region Thunk
+export const explorePath = createAsyncThunk(
+  'auth/explorePath',
+  async (folder: Folder, { dispatch }) => {
+    dispatch(
+      searchApi.util.invalidateTags([
+        { type: 'ImagesInFolders', id: folder.id },
+      ]),
+    );
+
+    return true;
+  },
+);
+// #endregion

package/src/store/user/user.api.ts

@@ -0,0 +1,29 @@
+import { store } from '@/store';
+import { UserInfo } from '@/types/user';
+import { AppBaseQuery } from '@/utils/api';
+import { createApi } from '@reduxjs/toolkit/query/react';
+
+import { AUTH_FEATURE_KEY } from '../auth/auth.slice';
+
+// Define a service using a base URL and expected endpoints
+export const userApi = createApi({
+  reducerPath: 'userApi',
+  baseQuery: AppBaseQuery,
+  endpoints: (builder) => ({
+    getUserInfo: builder.query({
+      query: () => '/webapi/extensibility/integrations/gab/authorization/getuserinfo_4bs_v1',
+      transformResponse: (response: UserInfo): UserInfo => {
+        const authState = store.getState()[AUTH_FEATURE_KEY];
+        
+        return {
+          ...response,
+          avatar: `${authState.siteUrl}/${response.avatar}`,
+        };
+      },
+    }),
+  }),
+});
+
+// Export hooks for usage in functional components, which are
+// auto-generated based on the defined endpoints
+export const { useGetUserInfoQuery } = userApi;