@spacemade/ui 0.0.1

package/src/store/slice/api/mediaApiSlice.ts

@@ -0,0 +1,276 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { Media, MediaPayload } from '@store/model'
+import { BASE_API_URL } from '@helpers/api'
+import {
+	cleanEmptyValues,
+	ensureNoDuplicateData,
+	keysToCamel,
+} from '@helpers/data-transform'
+import { createUniqueTokenByObject } from '@helpers/string'
+import { ApiPagingResponse, OptionType } from '@helpers/types'
+
+type GetParams = {
+	nameLike?: string
+	type?: string
+	date?: string
+	ownerId?: string
+	selectedIds?: string[]
+	limit?: number
+	page?: number
+}
+
+export const mediaApiSlice = createApi({
+	reducerPath: 'api/media',
+	baseQuery: fetchBaseQuery({
+		baseUrl: BASE_API_URL,
+		credentials: 'include',
+	}),
+	tagTypes: ['LocalMedia', 'InfinityMedia'],
+	endpoints: (builder) => ({
+		getMediaList: builder.query<ApiPagingResponse<Media>, GetParams>({
+			query: (params) => ({
+				url: `/media`,
+				params,
+			}),
+			providesTags: ['LocalMedia'],
+			transformResponse: (res) => keysToCamel(res),
+		}),
+
+		getInfinityMedia: builder.query<ApiPagingResponse<Media>, GetParams>({
+			query: (params) => ({
+				url: `/media`,
+				params,
+			}),
+			providesTags: ['InfinityMedia'],
+			serializeQueryArgs: ({
+				endpointName,
+				queryArgs: { nameLike, type, date, ownerId, limit, selectedIds },
+			}) => {
+				const token = createUniqueTokenByObject(
+					cleanEmptyValues({
+						nameLike,
+						type,
+						date,
+						ownerId,
+						limit,
+						selectedIds,
+					})
+				)
+
+				return endpointName + `-${token}`
+			},
+			merge: (currentCache, newItems, otherArgs) => {
+				const newResults = ensureNoDuplicateData(
+					currentCache.results,
+					newItems.results
+				)
+				currentCache.results.push(...newResults)
+
+				const args = otherArgs.arg
+				const selectedIds = args.selectedIds || []
+				currentCache.results.sort((a, b) => {
+					const aIsSelected = selectedIds.includes(a.id)
+					const bIsSelected = selectedIds.includes(b.id)
+
+					if (aIsSelected && !bIsSelected) {
+						return -1
+					}
+					if (!aIsSelected && bIsSelected) {
+						return 1
+					}
+
+					// Agenth are either selected or not selected, so sort by date
+					return (
+						new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+					)
+				})
+
+				currentCache.next = newItems.next
+				currentCache.previous = newItems.previous
+				currentCache.count = newItems.count
+			},
+			forceRefetch({ currentArg, previousArg }) {
+				return currentArg?.page !== previousArg?.page
+			},
+			transformResponse: (res) => keysToCamel(res),
+		}),
+
+		getOneMedia: builder.query<Media, { id: string }>({
+			query: ({ id }) => ({
+				url: `/media/${id}`,
+			}),
+			providesTags: ['LocalMedia'],
+			transformResponse: ({ media }: { media: Media }) => keysToCamel(media),
+		}),
+
+		updateMedia: builder.mutation<Media, { payload: MediaPayload }>({
+			query: ({ payload: { id, ...patch } }) => ({
+				url: `/media/${id}`,
+				method: 'PATCH',
+				body: patch,
+			}),
+			async onQueryStarted(args, { dispatch, queryFulfilled, getState }) {
+				const mediaUpdatedId = args.payload.id
+				const mediaUpdatedAltText = args.payload.altText
+				const mediaUpdatedCaption = args.payload.caption
+				const mediaUpdatedTitle = args.payload.title
+
+				for (const {
+					endpointName,
+					originalArgs,
+				} of mediaApiSlice.util.selectInvalidatedBy(getState(), [
+					{ type: 'InfinityMedia' },
+				])) {
+					if (endpointName !== 'getInfinityMedia') continue
+
+					dispatch(
+						mediaApiSlice.util.updateQueryData(
+							endpointName,
+							originalArgs,
+							(draft) => {
+								const updatedResults = draft.results.map((media) =>
+									media.id === mediaUpdatedId
+										? ({
+												...media,
+												details: {
+													...media.details,
+													altText: mediaUpdatedAltText || '',
+													caption: mediaUpdatedCaption || '',
+													title: mediaUpdatedTitle || '',
+												},
+										  } as Media)
+										: media
+								)
+								draft.results = updatedResults
+							}
+						)
+					)
+				}
+			},
+			invalidatesTags: ['LocalMedia'],
+			transformResponse: ({ media }: { media: Media }) => keysToCamel(media),
+		}),
+
+		deleteMedia: builder.mutation<void, { media: Media }>({
+			query: ({ media }) => ({
+				url: `/media/${media.id}`,
+				method: 'DELETE',
+			}),
+			invalidatesTags: ['LocalMedia'],
+		}),
+
+		bulkDeleteMedia: builder.mutation<{ ids: string }, { media: Media[] }>({
+			query: ({ media }) => ({
+				url: `/media/bulk/delete`,
+				method: 'POST',
+				body: {
+					ids: media.map(({ id }) => id),
+				},
+			}),
+			async onQueryStarted(args, { dispatch, queryFulfilled, getState }) {
+				const deletedMediaIds = args.media.map(({ id }) => id)
+
+				for (const {
+					endpointName,
+					originalArgs,
+				} of mediaApiSlice.util.selectInvalidatedBy(getState(), [
+					{ type: 'InfinityMedia' },
+				])) {
+					if (endpointName !== 'getInfinityMedia') continue
+
+					dispatch(
+						mediaApiSlice.util.updateQueryData(
+							endpointName,
+							originalArgs,
+							(draft) => {
+								const updatedResults = draft.results.filter(
+									(media) => !deletedMediaIds.includes(media.id)
+								)
+								draft.results = updatedResults
+								draft.count = draft.count - deletedMediaIds.length
+							}
+						)
+					)
+				}
+			},
+			invalidatesTags: ['LocalMedia'],
+		}),
+
+		bulkMediaUpload: builder.mutation<
+			{ message: string; media: string[] },
+			{ files: File[] }
+		>({
+			query: ({ files }) => {
+				const formData = new FormData()
+				for (const file of files) {
+					formData.append('files[]', file)
+				}
+
+				return {
+					url: '/media/upload',
+					method: 'POST',
+					body: formData,
+				}
+			},
+			async onQueryStarted(args, { dispatch, queryFulfilled }) {
+				try {
+					await queryFulfilled
+					dispatch(mediaApiSlice.util.resetApiState())
+				} catch (err) {
+					// ignore
+				}
+			},
+			invalidatesTags: ['LocalMedia'],
+		}),
+
+		reuploadMedia: builder.mutation<
+			{ message: string; media: string },
+			{ file: File; mediaId: string }
+		>({
+			query: ({ file, mediaId }) => {
+				const formData = new FormData()
+				formData.append('files[]', file)
+
+				return {
+					url: `/media/${mediaId}/reupload`,
+					method: 'POST',
+					body: formData,
+				}
+			},
+			invalidatesTags: ['LocalMedia'],
+		}),
+
+		checkMediaSlugAvailability: builder.query<
+			{ value: string; isAvailable: boolean },
+			string
+		>({
+			query: (value) => ({
+				url: '/search/availability/media',
+				params: {
+					value,
+				},
+			}),
+			transformResponse: (res) => keysToCamel(res),
+		}),
+
+		getDateOptions: builder.query<OptionType[], void>({
+			query: () => ({
+				url: '/media/date-options',
+			}),
+			transformResponse: ({ options }) => keysToCamel(options),
+		}),
+	}),
+})
+
+export const {
+	useGetMediaListQuery,
+	useGetInfinityMediaQuery,
+	useGetOneMediaQuery,
+	useUpdateMediaMutation,
+	useDeleteMediaMutation,
+	useBulkDeleteMediaMutation,
+	useBulkMediaUploadMutation,
+	useReuploadMediaMutation,
+	useLazyCheckMediaSlugAvailabilityQuery,
+	useGetDateOptionsQuery,
+} = mediaApiSlice

package/src/store/slice/api/orgApiSlice.ts

@@ -0,0 +1,185 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { HYDRATE } from '@store/hydrate'
+import { Org, OrgMembership } from '@store/model'
+import { BASE_API_URL } from '@helpers/api'
+import { keysToCamel } from '@helpers/data-transform'
+import { ApiPagingResponse } from '@helpers/types'
+import type { RootState } from '@store/store'
+
+type CreateOrgPayload = {
+  name: string
+  slug?: string
+  contactEmail?: string
+  orgType?: string
+  termsAccept: boolean
+}
+
+type UpdateOrgPayload = {
+  orgId: string
+  name?: string | null
+  slug?: string | null
+  profileMediaId?: string | null
+}
+
+export const orgApiSlice = createApi({
+  reducerPath: 'api/orgs',
+  baseQuery: fetchBaseQuery({
+    baseUrl: BASE_API_URL,
+    credentials: 'include',
+  }),
+  extractRehydrationInfo(action, { reducerPath }) {
+    if (action.type === HYDRATE) {
+      return (action as any).payload[reducerPath]
+    }
+  },
+  tagTypes: ['OrgMemberships', 'OrgGroups', 'OrgGroupPermissions', 'ActiveOrg'],
+  endpoints: (builder) => ({
+    listOrgs: builder.query<OrgMembership[], void>({
+      async queryFn(_arg, api, _extraOptions, baseQuery) {
+        const state = api.getState() as RootState
+        const account = state.account
+        const canFetch =
+          !!account?.user?.id &&
+          !!account?.isConnected
+
+        if (!canFetch) {
+          return { data: [] }
+        }
+
+        const result = await baseQuery('/orgs')
+        if (result.error) return { error: result.error }
+
+        const memberships = (result.data as { memberships?: OrgMembership[] })?.memberships ?? []
+        return { data: keysToCamel(memberships) }
+      },
+      providesTags: ['OrgMemberships'],
+    }),
+
+    listOrgMemberships: builder.query<
+      ApiPagingResponse<OrgMembership>,
+      { orgId: string; limit?: number; page?: number }
+    >({
+      query: ({ orgId, ...params }) => ({
+        url: `/orgs/${orgId}/membership`,
+        params,
+      }),
+      transformResponse: (res) => keysToCamel(res),
+      providesTags: ['OrgMemberships'],
+    }),
+
+    createOrg: builder.mutation<Org, CreateOrgPayload>({
+      query: ({ name, slug, contactEmail, orgType, termsAccept }) => ({
+        url: `/orgs`,
+        method: 'POST',
+        body: {
+          name,
+          slug,
+          contact_email: contactEmail,
+          org_type: orgType,
+          terms_accept: termsAccept,
+        },
+      }),
+      transformResponse: ({ org }: { org: Org }) => keysToCamel(org),
+      invalidatesTags: ['OrgMemberships'],
+    }),
+
+    getActiveOrg: builder.query<{ orgId: string | null }, void>({
+      query: () => `/orgs/active`,
+      transformResponse: (res) => keysToCamel(res) as { orgId: string | null },
+      providesTags: ['ActiveOrg'],
+    }),
+
+    setActiveOrg: builder.mutation<{ orgId: string }, { orgId: string }>({
+      query: ({ orgId }) => ({
+        url: `/orgs/active`,
+        method: 'POST',
+        body: { org_id: orgId },
+      }),
+      transformResponse: (res) => keysToCamel(res) as { orgId: string },
+      invalidatesTags: ['ActiveOrg'],
+    }),
+
+    updateOrg: builder.mutation<Org, UpdateOrgPayload>({
+      query: ({ orgId, name, slug, profileMediaId }) => ({
+        url: `/orgs/${orgId}`,
+        method: 'PATCH',
+        body: {
+          name,
+          slug,
+          profile_media_id: profileMediaId,
+        },
+      }),
+      transformResponse: ({ org }: { org: Org }) => keysToCamel(org),
+      invalidatesTags: ['OrgMemberships'],
+    }),
+
+    inviteOrgMember: builder.mutation<
+      { message: string },
+      {
+        orgId: string
+        email?: string
+        userId?: string
+        role: string
+        orgGroupId?: string | null
+        captcha: string | null
+      }
+    >({
+      query: ({ orgId, email, userId, role, orgGroupId, captcha }) => ({
+        url: `/orgs/${orgId}/membership`,
+        method: 'POST',
+        body: {
+          email,
+          user_id: userId,
+          role,
+          org_group_id: orgGroupId,
+          captcha,
+        },
+      }),
+      invalidatesTags: ['OrgMemberships'],
+    }),
+
+    removeOrgMember: builder.mutation<
+      { message: string },
+      { orgId: string; membershipId: string }
+    >({
+      query: ({ orgId, membershipId }) => ({
+        url: `/orgs/${orgId}/membership/${membershipId}`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: ['OrgMemberships'],
+    }),
+
+    acceptOrgInvite: builder.mutation<
+      {
+        message: string
+        inviteAccepted: boolean
+        status: string
+        needsProfileUpdate?: boolean
+        entityName?: string | null
+        entityType?: string
+      },
+      { orgId: string; token: string }
+    >({
+      query: ({ orgId, token }) => ({
+        url: `/orgs/${orgId}/accept`,
+        method: 'POST',
+        body: { token },
+      }),
+    }),
+  }),
+})
+
+export const {
+  useListOrgsQuery,
+  useLazyListOrgsQuery,
+  useListOrgMembershipsQuery,
+  useCreateOrgMutation,
+  useGetActiveOrgQuery,
+  useLazyGetActiveOrgQuery,
+  useSetActiveOrgMutation,
+  useUpdateOrgMutation,
+  useInviteOrgMemberMutation,
+  useRemoveOrgMemberMutation,
+  useAcceptOrgInviteMutation,
+  util: { getRunningQueriesThunk },
+} = orgApiSlice

package/src/store/slice/api/orgGroupApiSlice.ts

@@ -0,0 +1,146 @@
+import { orgApiSlice } from '@store/slice/api/orgApiSlice'
+import type {
+  OrgGroup,
+  OrgGroupPermissionPayload,
+  OrgGroupPermissionRow,
+  OrgMembership,
+} from '@store/model'
+import { keysToCamel } from '@helpers/data-transform'
+import { ApiPagingResponse } from '@helpers/types'
+
+export const orgGroupApiSlice = orgApiSlice.injectEndpoints({
+  endpoints: (builder) => ({
+    listOrgGroups: builder.query<
+      ApiPagingResponse<OrgGroup>,
+      { orgId: string; limit?: number; page?: number }
+    >({
+      query: ({ orgId, ...params }) => ({
+        url: `/orgs/${orgId}/groups`,
+        params,
+      }),
+      transformResponse: (res) => keysToCamel(res),
+      providesTags: ['OrgGroups'],
+    }),
+
+    getOrgGroup: builder.query<
+      OrgGroup,
+      { orgId: string; groupId: string }
+    >({
+      query: ({ orgId, groupId }) => ({
+        url: `/orgs/${orgId}/groups/${groupId}`,
+      }),
+      transformResponse: ({ group }: { group: OrgGroup }) => keysToCamel(group),
+      providesTags: ['OrgGroups'],
+    }),
+
+    createOrgGroup: builder.mutation<
+      OrgGroup,
+      { orgId: string; name: string; description?: string | null }
+    >({
+      query: ({ orgId, ...body }) => ({
+        url: `/orgs/${orgId}/groups`,
+        method: 'POST',
+        body,
+      }),
+      transformResponse: ({ group }: { group: OrgGroup }) => keysToCamel(group),
+      invalidatesTags: ['OrgGroups'],
+    }),
+
+    updateOrgGroup: builder.mutation<
+      OrgGroup,
+      { orgId: string; groupId: string; name?: string; description?: string | null }
+    >({
+      query: ({ orgId, groupId, ...body }) => ({
+        url: `/orgs/${orgId}/groups/${groupId}`,
+        method: 'PATCH',
+        body,
+      }),
+      transformResponse: ({ group }: { group: OrgGroup }) => keysToCamel(group),
+      invalidatesTags: ['OrgGroups'],
+    }),
+
+    deleteOrgGroup: builder.mutation<
+      { message: string },
+      { orgId: string; groupId: string }
+    >({
+      query: ({ orgId, groupId }) => ({
+        url: `/orgs/${orgId}/groups/${groupId}`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: ['OrgGroups', 'OrgMemberships'],
+    }),
+
+    getOrgGroupPermissions: builder.query<
+      OrgGroupPermissionRow[],
+      { orgId: string; groupId: string }
+    >({
+      query: ({ orgId, groupId }) => ({
+        url: `/orgs/${orgId}/groups/${groupId}/permissions`,
+      }),
+      transformResponse: ({ permissions }: { permissions: OrgGroupPermissionRow[] }) =>
+        keysToCamel(permissions),
+      providesTags: ['OrgGroupPermissions'],
+    }),
+
+    updateOrgGroupPermissions: builder.mutation<
+      OrgGroupPermissionRow[],
+      { orgId: string; groupId: string; permissions: OrgGroupPermissionPayload[] }
+    >({
+      query: ({ orgId, groupId, permissions }) => ({
+        url: `/orgs/${orgId}/groups/${groupId}/permissions`,
+        method: 'PATCH',
+        body: {
+          permissions: permissions.map((permission) => ({
+            app_key: permission.appKey,
+            action: permission.action,
+            allowed: permission.allowed,
+            role: permission.role,
+          })),
+        },
+      }),
+      transformResponse: ({ permissions }: { permissions: OrgGroupPermissionRow[] }) =>
+        keysToCamel(permissions),
+      invalidatesTags: ['OrgGroupPermissions'],
+    }),
+
+    addOrgGroupMember: builder.mutation<
+      OrgMembership,
+      { orgId: string; groupId: string; membershipId: string }
+    >({
+      query: ({ orgId, groupId, membershipId }) => ({
+        url: `/orgs/${orgId}/groups/${groupId}/members`,
+        method: 'POST',
+        body: { membership_id: membershipId },
+      }),
+      transformResponse: ({ membership }: { membership: OrgMembership }) =>
+        keysToCamel(membership),
+      invalidatesTags: ['OrgMemberships', 'OrgGroups'],
+    }),
+
+    removeOrgGroupMember: builder.mutation<
+      OrgMembership,
+      { orgId: string; groupId: string; membershipId: string }
+    >({
+      query: ({ orgId, groupId, membershipId }) => ({
+        url: `/orgs/${orgId}/groups/${groupId}/members/${membershipId}`,
+        method: 'DELETE',
+      }),
+      transformResponse: ({ membership }: { membership: OrgMembership }) =>
+        keysToCamel(membership),
+      invalidatesTags: ['OrgMemberships', 'OrgGroups'],
+    }),
+  }),
+  overrideExisting: false,
+})
+
+export const {
+  useListOrgGroupsQuery,
+  useGetOrgGroupQuery,
+  useCreateOrgGroupMutation,
+  useUpdateOrgGroupMutation,
+  useDeleteOrgGroupMutation,
+  useGetOrgGroupPermissionsQuery,
+  useUpdateOrgGroupPermissionsMutation,
+  useAddOrgGroupMemberMutation,
+  useRemoveOrgGroupMemberMutation,
+} = orgGroupApiSlice

package/src/store/slice/api/pageApiSlice.ts

@@ -0,0 +1,111 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { HYDRATE } from '@store/hydrate'
+import { BASE_API_URL } from '@helpers/api'
+import { keysToCamel } from '@helpers/data-transform'
+import { ApiPagingResponse } from '@helpers/types'
+import { Page, PagePayload } from '@store/model/page.model'
+
+type ListParams = {
+  siteId: string
+  parentId?: string
+  status?: string
+  nameLike?: string
+  limit?: number
+  page?: number
+}
+
+export const pageApiSlice = createApi({
+  reducerPath: 'api/page',
+  baseQuery: fetchBaseQuery({
+    baseUrl: BASE_API_URL,
+    credentials: 'include',
+  }),
+  extractRehydrationInfo(action, { reducerPath }) {
+    if (action.type === HYDRATE) return (action as any).payload[reducerPath]
+  },
+  tagTypes: ['Pages', 'Page'],
+  endpoints: (builder) => ({
+    getPages: builder.query<ApiPagingResponse<Page>, ListParams>({
+      query: ({ siteId, ...params }) => ({
+        url: '/pages',
+        params: {
+          siteId,
+          ...params,
+        },
+      }),
+      providesTags: (_result, _err, { siteId }) => [{ type: 'Pages', id: siteId }],
+      transformResponse: (res: unknown) => keysToCamel(res) as ApiPagingResponse<Page>,
+    }),
+    getPageTree: builder.query<{ results: Page[] }, { siteId: string }>({
+      query: ({ siteId }) => `/pages/tree/${siteId}`,
+      providesTags: (_result, _err, { siteId }) => [{ type: 'Pages', id: siteId }],
+      transformResponse: (res: unknown) => keysToCamel(res) as { results: Page[] },
+    }),
+    getOnePage: builder.query<Page, { id: string }>({
+      query: ({ id }) => `/pages/${id}`,
+      providesTags: (_result, _err, { id }) => [{ type: 'Page', id }],
+      transformResponse: ({ page }: { page: Page }) => keysToCamel(page),
+    }),
+    createPage: builder.mutation<Page, { payload: PagePayload }>({
+      query: ({ payload }) => ({
+        url: '/pages',
+        method: 'POST',
+        body: {
+          site_id: payload.siteId,
+          parent_id: payload.parentId,
+          slug: payload.slug,
+          name: payload.name,
+          intro: payload.intro,
+          content: payload.content,
+          icon: payload.icon,
+          sort_order: payload.sortOrder,
+          status: payload.status,
+          is_homepage: payload.isHomepage,
+        },
+      }),
+      invalidatesTags: (_result, _err, { payload }) => [{ type: 'Pages', id: payload.siteId }],
+      transformResponse: ({ page }: { page: Page }) => keysToCamel(page),
+    }),
+    updatePage: builder.mutation<Page, { payload: PagePayload & { id: string } }>({
+      query: ({ payload: { id, ...payload } }) => ({
+        url: `/pages/${id}`,
+        method: 'PATCH',
+        body: {
+          parent_id: payload.parentId,
+          slug: payload.slug,
+          name: payload.name,
+          intro: payload.intro,
+          content: payload.content,
+          icon: payload.icon,
+          sort_order: payload.sortOrder,
+          status: payload.status,
+          is_homepage: payload.isHomepage,
+        },
+      }),
+      invalidatesTags: (_result, _err, { payload }) => [
+        { type: 'Pages', id: payload.siteId },
+        { type: 'Page', id: payload.id },
+      ],
+      transformResponse: ({ page }: { page: Page }) => keysToCamel(page),
+    }),
+    deletePage: builder.mutation<void, { id: string; siteId: string }>({
+      query: ({ id }) => ({
+        url: `/pages/${id}`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: (_result, _err, { id, siteId }) => [
+        { type: 'Pages', id: siteId },
+        { type: 'Page', id },
+      ],
+    }),
+  }),
+})
+
+export const {
+  useGetPagesQuery,
+  useGetPageTreeQuery,
+  useGetOnePageQuery,
+  useCreatePageMutation,
+  useUpdatePageMutation,
+  useDeletePageMutation,
+} = pageApiSlice