@webinex/chatify 2.0.0-alpha13 → 2.0.0-alpha14

package/src/audit/AuditPanel.tsx

@@ -1,76 +1,76 @@
-import classNames from 'classnames';
-import { AuditSearch } from './AuditSearch';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { AuditSearchUtil } from './AuditSearchValue';
-import { auditApi } from './auditApi';
-import { AuditChatList } from './AuditChatList';
-import { CustomizeContext, defaultLocalizer, Localizer, LocalizerContext } from '@webinex/chatify';
-import { AuditConversationPanel } from './AuditConversationPanel';
-import { AuditPanelCustomizeValue } from './AuditPanelCustomizeValue';
-
-export interface AuditPanelProps {
-  className?: string;
-  style?: React.CSSProperties;
-  localizer?: Localizer;
-  customize?: AuditPanelCustomizeValue;
-
-  /**
-   * Maximum number of chats to load.
-   * @default 100
-   */
-  max?: number;
-}
-
-function useData(props: AuditPanelProps, values: string[]) {
-  const { max } = props;
-  const query = useMemo(() => AuditSearchUtil.queryOf(values), [values]);
-
-  const { currentData: chats, isLoading } = auditApi.useGetAuditChatListQuery(
-    {
-      ...query!,
-      pagingRule: { skip: 0, take: max! },
-      includeTotal: true,
-    },
-    { skip: !query },
-  );
-
-  return useMemo(() => ({ chats: chats?.items ?? [], isLoading }), [chats, isLoading]);
-}
-
-const EMPTY = Object.freeze({} as AuditPanelCustomizeValue);
-
-export function AuditPanel(props: AuditPanelProps) {
-  props = { max: 100, customize: EMPTY, ...props };
-  const { className, style, localizer = defaultLocalizer, customize = EMPTY, max } = props;
-  const [values, setValues] = useState<string[]>([]);
-  const { chats, isLoading } = useData(props, values);
-
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const resetSelected = useCallback(() => setSelectedId(null), []);
-
-  useEffect(() => {
-    if (chats.every((x) => x.id !== selectedId)) {
-      setSelectedId(null);
-    }
-  }, [chats, selectedId]);
-
-  return (
-    <CustomizeContext.Provider value={customize}>
-      <LocalizerContext.Provider value={localizer}>
-        <div className={classNames(className, 'wxchtf-audit-panel')} style={style}>
-          <AuditSearch onSearch={setValues} />
-          <div className={classNames('wxchtf-audit-body', { '--conversation-opened': !!selectedId })}>
-            <AuditChatList
-              items={chats}
-              loading={isLoading}
-              selected={selectedId}
-              onSelect={setSelectedId}
-              top={Math.min(chats.length, max!)}
-            />
-            {selectedId && <AuditConversationPanel id={selectedId} onClose={resetSelected} />}
-          </div>
-        </div>
-      </LocalizerContext.Provider>
-    </CustomizeContext.Provider>
-  );
-}
+import classNames from 'classnames';
+import { AuditSearch } from './AuditSearch';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AuditSearchUtil } from './AuditSearchValue';
+import { auditApi } from './auditApi';
+import { AuditChatList } from './AuditChatList';
+import { CustomizeContext, defaultLocalizer, Localizer, LocalizerContext } from '@webinex/chatify';
+import { AuditConversationPanel } from './AuditConversationPanel';
+import { AuditPanelCustomizeValue } from './AuditPanelCustomizeValue';
+
+export interface AuditPanelProps {
+  className?: string;
+  style?: React.CSSProperties;
+  localizer?: Localizer;
+  customize?: AuditPanelCustomizeValue;
+
+  /**
+   * Maximum number of chats to load.
+   * @default 100
+   */
+  max?: number;
+}
+
+function useData(props: AuditPanelProps, values: string[]) {
+  const { max } = props;
+  const query = useMemo(() => AuditSearchUtil.queryOf(values), [values]);
+
+  const { currentData: chats, isLoading } = auditApi.useGetAuditChatListQuery(
+    {
+      ...query!,
+      pagingRule: { skip: 0, take: max! },
+      includeTotal: true,
+    },
+    { skip: !query },
+  );
+
+  return useMemo(() => ({ chats: chats?.items ?? [], isLoading }), [chats, isLoading]);
+}
+
+const EMPTY = Object.freeze({} as AuditPanelCustomizeValue);
+
+export function AuditPanel(props: AuditPanelProps) {
+  props = { max: 100, customize: EMPTY, ...props };
+  const { className, style, localizer = defaultLocalizer, customize = EMPTY, max } = props;
+  const [values, setValues] = useState<string[]>([]);
+  const { chats, isLoading } = useData(props, values);
+
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const resetSelected = useCallback(() => setSelectedId(null), []);
+
+  useEffect(() => {
+    if (chats.every((x) => x.id !== selectedId)) {
+      setSelectedId(null);
+    }
+  }, [chats, selectedId]);
+
+  return (
+    <CustomizeContext.Provider value={customize}>
+      <LocalizerContext.Provider value={localizer}>
+        <div className={classNames(className, 'wxchtf-audit-panel')} style={style}>
+          <AuditSearch onSearch={setValues} />
+          <div className={classNames('wxchtf-audit-body', { '--conversation-opened': !!selectedId })}>
+            <AuditChatList
+              items={chats}
+              loading={isLoading}
+              selected={selectedId}
+              onSelect={setSelectedId}
+              top={Math.min(chats.length, max!)}
+            />
+            {selectedId && <AuditConversationPanel id={selectedId} onClose={resetSelected} />}
+          </div>
+        </div>
+      </LocalizerContext.Provider>
+    </CustomizeContext.Provider>
+  );
+}

package/src/audit/AuditPanelCustomizeValue.ts

@@ -1,11 +1,11 @@
-import { ChatListCustomizeValue, ConversationCustomizeValue } from '@webinex/chatify';
-import { AuditConversationPanel } from './AuditConversationPanel';
-import { AuditChatList } from './AuditChatList';
-import { AuditSearch } from './AuditSearch';
-
-export type AuditPanelCustomizeValue = ConversationCustomizeValue &
-  ChatListCustomizeValue & {
-    AuditConversationPanel?: typeof AuditConversationPanel.Component;
-    AuditChatList?: typeof AuditChatList.Component;
-    AuditSearch?: typeof AuditSearch.Component;
-  };
+import { ChatListCustomizeValue, ConversationCustomizeValue } from '@webinex/chatify';
+import { AuditConversationPanel } from './AuditConversationPanel';
+import { AuditChatList } from './AuditChatList';
+import { AuditSearch } from './AuditSearch';
+
+export type AuditPanelCustomizeValue = ConversationCustomizeValue &
+  ChatListCustomizeValue & {
+    AuditConversationPanel?: typeof AuditConversationPanel.Component;
+    AuditChatList?: typeof AuditChatList.Component;
+    AuditSearch?: typeof AuditSearch.Component;
+  };

package/src/audit/AuditSearch.tsx

@@ -1,89 +1,89 @@
-import { Account, chatifyApi, customize, Localizer, useLocalizer } from '@webinex/chatify';
-import { Select } from 'antd';
-import classNames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
-import { AuditSearchUtil } from './AuditSearchValue';
-
-export interface AuditSearchProps {
-  className?: string;
-  onSearch?: (values: string[]) => void;
-}
-
-type Value = { label: JSX.Element; value: string };
-
-function* mapOptions(localizer: Localizer, accounts: Account[] | undefined, searchValue: string) {
-  if (searchValue.length === 0) return;
-
-  if (searchValue.length > 0)
-    yield {
-      label: localizer.audit.textSearchOption(searchValue),
-      value: AuditSearchUtil.TEXT_PREFIX + searchValue,
-    };
-
-  for (const account of accounts?.filter((x) =>
-    x.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()),
-  ) ?? []) {
-    yield {
-      label: localizer.audit.memberSearchOption(account),
-      value: AuditSearchUtil.MEMBER_PREFIX + account.id,
-    };
-  }
-}
-
-function useOptions(accounts: Account[] | undefined, searchValue: string) {
-  const localizer = useLocalizer();
-  return useMemo(
-    () => Array.from(mapOptions(localizer, accounts, searchValue)),
-    [localizer, accounts, searchValue],
-  );
-}
-
-export const AuditSearch = customize('AuditSearch', (props: AuditSearchProps) => {
-  const { className, onSearch } = props;
-  const [searchValue, setSearchValue] = useState('');
-  const [values, setValues] = useState<Value[]>([]);
-  const { data: accounts, isLoading } = chatifyApi.useGetAccountListQuery({});
-  const options = useOptions(accounts, searchValue);
-  const localizer = useLocalizer();
-
-  useEffect(() => {
-    onSearch?.(values.map((x) => x.value));
-  }, [onSearch, values]);
-
-  return (
-    <div className={classNames('wxchtf-search', className)}>
-      <Select<string[], Value>
-        allowClear
-        className="wxchtf-search-select"
-        mode="multiple"
-        value={values.map((x) => x.value)}
-        options={options.length > 0 ? options : values}
-        searchValue={searchValue}
-        onSearch={setSearchValue}
-        onSelect={(_, option) => {
-          setValues((prev) => {
-            if (AuditSearchUtil.isSearchByText(option.value)) {
-              prev = prev.filter((x) => !AuditSearchUtil.isSearchByText(x.value));
-            }
-
-            return [...prev, option];
-          });
-          setSearchValue('');
-        }}
-        onDeselect={(_, option) => {
-          setValues((prev) => prev.filter((x) => x.value !== option.value));
-          setSearchValue('');
-        }}
-        filterOption={false}
-        onDropdownVisibleChange={() => setSearchValue('')}
-        disabled={isLoading}
-        loading={isLoading}
-        placeholder={localizer.audit.searchPlaceholder}
-        notFoundContent={
-          searchValue.length === 0 ? localizer.audit.noInputBlurb : localizer.audit.noChatFound
-        }
-        size="large"
-      />
-    </div>
-  );
-});
+import { Account, chatifyApi, customize, Localizer, useLocalizer } from '@webinex/chatify';
+import { Select } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { AuditSearchUtil } from './AuditSearchValue';
+
+export interface AuditSearchProps {
+  className?: string;
+  onSearch?: (values: string[]) => void;
+}
+
+type Value = { label: JSX.Element; value: string };
+
+function* mapOptions(localizer: Localizer, accounts: Account[] | undefined, searchValue: string) {
+  if (searchValue.length === 0) return;
+
+  if (searchValue.length > 0)
+    yield {
+      label: localizer.audit.textSearchOption(searchValue),
+      value: AuditSearchUtil.TEXT_PREFIX + searchValue,
+    };
+
+  for (const account of accounts?.filter((x) =>
+    x.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()),
+  ) ?? []) {
+    yield {
+      label: localizer.audit.memberSearchOption(account),
+      value: AuditSearchUtil.MEMBER_PREFIX + account.id,
+    };
+  }
+}
+
+function useOptions(accounts: Account[] | undefined, searchValue: string) {
+  const localizer = useLocalizer();
+  return useMemo(
+    () => Array.from(mapOptions(localizer, accounts, searchValue)),
+    [localizer, accounts, searchValue],
+  );
+}
+
+export const AuditSearch = customize('AuditSearch', (props: AuditSearchProps) => {
+  const { className, onSearch } = props;
+  const [searchValue, setSearchValue] = useState('');
+  const [values, setValues] = useState<Value[]>([]);
+  const { data: accounts, isLoading } = chatifyApi.useGetAccountListQuery({});
+  const options = useOptions(accounts, searchValue);
+  const localizer = useLocalizer();
+
+  useEffect(() => {
+    onSearch?.(values.map((x) => x.value));
+  }, [onSearch, values]);
+
+  return (
+    <div className={classNames('wxchtf-search', className)}>
+      <Select<string[], Value>
+        allowClear
+        className="wxchtf-search-select"
+        mode="multiple"
+        value={values.map((x) => x.value)}
+        options={options.length > 0 ? options : values}
+        searchValue={searchValue}
+        onSearch={setSearchValue}
+        onSelect={(_, option) => {
+          setValues((prev) => {
+            if (AuditSearchUtil.isSearchByText(option.value)) {
+              prev = prev.filter((x) => !AuditSearchUtil.isSearchByText(x.value));
+            }
+
+            return [...prev, option];
+          });
+          setSearchValue('');
+        }}
+        onDeselect={(_, option) => {
+          setValues((prev) => prev.filter((x) => x.value !== option.value));
+          setSearchValue('');
+        }}
+        filterOption={false}
+        onDropdownVisibleChange={() => setSearchValue('')}
+        disabled={isLoading}
+        loading={isLoading}
+        placeholder={localizer.audit.searchPlaceholder}
+        notFoundContent={
+          searchValue.length === 0 ? localizer.audit.noInputBlurb : localizer.audit.noChatFound
+        }
+        size="large"
+      />
+    </div>
+  );
+});

package/src/audit/AuditSearchValue.tsx

@@ -1,42 +1,42 @@
-import { GetAuditChatListQueryArgs } from './auditApi';
-
-export interface AuditSearchOption {
-  label: JSX.Element;
-  value: string;
-}
-
-const MEMBER_PREFIX = 'member://';
-const TEXT_PREFIX = 'text://';
-
-function queryOf(
-  values: string[],
-): Pick<GetAuditChatListQueryArgs, 'containsOneOfMembers' | 'searchString'> | null {
-  let containsOneOfMembers: string[] | null = values
-    .filter(AuditSearchUtil.isSearchByMember)
-    .map((v) => v.slice(MEMBER_PREFIX.length));
-
-  containsOneOfMembers = containsOneOfMembers.length > 0 ? containsOneOfMembers : null;
-
-  const searchStringValues = values
-    .filter(AuditSearchUtil.isSearchByText)
-    .map((v) => v.slice(TEXT_PREFIX.length));
-
-  const searchString = searchStringValues.length > 0 ? searchStringValues.join(' ') : null;
-
-  if (!containsOneOfMembers && !searchString) {
-    return null;
-  }
-
-  return {
-    containsOneOfMembers,
-    searchString,
-  };
-}
-
-export const AuditSearchUtil = Object.freeze({
-  MEMBER_PREFIX,
-  TEXT_PREFIX,
-  isSearchByMember: (value: string) => value.startsWith(MEMBER_PREFIX),
-  isSearchByText: (value: string) => value.startsWith(TEXT_PREFIX),
-  queryOf,
-});
+import { GetAuditChatListQueryArgs } from './auditApi';
+
+export interface AuditSearchOption {
+  label: JSX.Element;
+  value: string;
+}
+
+const MEMBER_PREFIX = 'member://';
+const TEXT_PREFIX = 'text://';
+
+function queryOf(
+  values: string[],
+): Pick<GetAuditChatListQueryArgs, 'containsOneOfMembers' | 'searchString'> | null {
+  let containsOneOfMembers: string[] | null = values
+    .filter(AuditSearchUtil.isSearchByMember)
+    .map((v) => v.slice(MEMBER_PREFIX.length));
+
+  containsOneOfMembers = containsOneOfMembers.length > 0 ? containsOneOfMembers : null;
+
+  const searchStringValues = values
+    .filter(AuditSearchUtil.isSearchByText)
+    .map((v) => v.slice(TEXT_PREFIX.length));
+
+  const searchString = searchStringValues.length > 0 ? searchStringValues.join(' ') : null;
+
+  if (!containsOneOfMembers && !searchString) {
+    return null;
+  }
+
+  return {
+    containsOneOfMembers,
+    searchString,
+  };
+}
+
+export const AuditSearchUtil = Object.freeze({
+  MEMBER_PREFIX,
+  TEXT_PREFIX,
+  isSearchByMember: (value: string) => value.startsWith(MEMBER_PREFIX),
+  isSearchByText: (value: string) => value.startsWith(TEXT_PREFIX),
+  queryOf,
+});

package/src/audit/auditApi.tsx

@@ -1,113 +1,113 @@
-import { PagingRule } from '@webinex/asky';
-import { Account, chatifyApi, File, ListSegment, Optional } from '@webinex/chatify';
-
-export interface GetAuditChatListQueryArgs {
-  containsOneOfMembers: string[] | null;
-  searchString: string | null;
-  pagingRule: PagingRule | null;
-  includeTotal: boolean | null;
-}
-
-export interface AuditChatResponse {
-  id: string;
-  workspaceId: string;
-  name: string;
-  createdAt: string;
-  createdById: string;
-  lastMessage: Optional<AuditChatMessage>;
-}
-
-export interface AuditChatMessage {
-  id: string;
-  authorId: string;
-  sentAt: string;
-  text: string | null;
-  files: File[];
-  sentBy: Account;
-}
-
-export interface AuditChatListItem {
-  id: string;
-  workspaceId: string;
-  name: string;
-  createdAt: string;
-  createdById: string;
-  lastMessage: AuditChatMessage;
-}
-
-export interface AuditChat {
-  id: string;
-  workspaceId: string;
-  name: string;
-  createdAt: string;
-  createdById: string;
-}
-
-function qs(params: Record<string, any>): string {
-  const query = new URLSearchParams();
-  Object.entries(params).forEach(([key, value]) => {
-    if (value !== null && value !== undefined) {
-      query.append(key, typeof value === 'string' ? value : JSON.stringify(value));
-    }
-  });
-
-  return query.toString();
-}
-
-export const auditApi = chatifyApi.injectEndpoints({
-  endpoints: (build) => ({
-    getAuditChatList: build.query<ListSegment<AuditChatListItem>, GetAuditChatListQueryArgs>({
-      queryFn: async (args) =>
-        chatifyApi.settings.client.axios
-          .get<ListSegment<AuditChatResponse>>(`audit/chats?${qs({ query: args })}`)
-          .then(({ data }) => ({
-            data: {
-              total: data.total,
-              items: data.items.map(
-                ({ lastMessage, ...x }): AuditChatListItem => ({ ...x, lastMessage: lastMessage.value! }),
-              ),
-            },
-          }))
-          .catch((error) => ({ error })),
-      providesTags: ['chat', 'message'],
-    }),
-
-    getAuditChat: build.query<AuditChat, { id: string }>({
-      queryFn: async (args) =>
-        chatifyApi.settings.client.axios
-          .get(`audit/chats/${encodeURIComponent(args.id)}`)
-          .then(({ data }) => ({ data }))
-          .catch((error) => ({ error })),
-      providesTags: ['chat'],
-    }),
-
-    getAuditChatMessagesInfinite: build.infiniteQuery<
-      ListSegment<AuditChatMessage>,
-      { id: string },
-      { skip: number; take: number }
-    >({
-      queryFn: async (args) => {
-        const {
-          pageParam,
-          queryArg: { id },
-        } = args;
-
-        return chatifyApi.settings.client.axios
-          .get(`audit/messages?${qs({ query: { chatId: id, pagingRule: pageParam, includeTotal: true } })}`)
-          .then(({ data }) => ({ data }))
-          .catch((error) => ({ error }));
-      },
-      infiniteQueryOptions: {
-        initialPageParam: { skip: 0, take: 20 },
-        getNextPageParam: (lastPage, _, lastPageParam) =>
-          lastPage.total > lastPageParam.skip + lastPageParam.take
-            ? {
-                skip: lastPageParam.skip + lastPageParam.take,
-                take: lastPageParam.take,
-              }
-            : undefined,
-      },
-      providesTags: ['message', 'chat'],
-    }),
-  }),
-});
+import { PagingRule } from '@webinex/asky';
+import { Account, chatifyApi, File, ListSegment, Optional } from '@webinex/chatify';
+
+export interface GetAuditChatListQueryArgs {
+  containsOneOfMembers: string[] | null;
+  searchString: string | null;
+  pagingRule: PagingRule | null;
+  includeTotal: boolean | null;
+}
+
+export interface AuditChatResponse {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+  lastMessage: Optional<AuditChatMessage>;
+}
+
+export interface AuditChatMessage {
+  id: string;
+  authorId: string;
+  sentAt: string;
+  text: string | null;
+  files: File[];
+  sentBy: Account;
+}
+
+export interface AuditChatListItem {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+  lastMessage: AuditChatMessage;
+}
+
+export interface AuditChat {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+}
+
+function qs(params: Record<string, any>): string {
+  const query = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== null && value !== undefined) {
+      query.append(key, typeof value === 'string' ? value : JSON.stringify(value));
+    }
+  });
+
+  return query.toString();
+}
+
+export const auditApi = chatifyApi.injectEndpoints({
+  endpoints: (build) => ({
+    getAuditChatList: build.query<ListSegment<AuditChatListItem>, GetAuditChatListQueryArgs>({
+      queryFn: async (args) =>
+        chatifyApi.settings.client.axios
+          .get<ListSegment<AuditChatResponse>>(`audit/chats?${qs({ query: args })}`)
+          .then(({ data }) => ({
+            data: {
+              total: data.total,
+              items: data.items.map(
+                ({ lastMessage, ...x }): AuditChatListItem => ({ ...x, lastMessage: lastMessage.value! }),
+              ),
+            },
+          }))
+          .catch((error) => ({ error })),
+      providesTags: ['chat', 'message'],
+    }),
+
+    getAuditChat: build.query<AuditChat, { id: string }>({
+      queryFn: async (args) =>
+        chatifyApi.settings.client.axios
+          .get(`audit/chats/${encodeURIComponent(args.id)}`)
+          .then(({ data }) => ({ data }))
+          .catch((error) => ({ error })),
+      providesTags: ['chat'],
+    }),
+
+    getAuditChatMessagesInfinite: build.infiniteQuery<
+      ListSegment<AuditChatMessage>,
+      { id: string },
+      { skip: number; take: number }
+    >({
+      queryFn: async (args) => {
+        const {
+          pageParam,
+          queryArg: { id },
+        } = args;
+
+        return chatifyApi.settings.client.axios
+          .get(`audit/messages?${qs({ query: { chatId: id, pagingRule: pageParam, includeTotal: true } })}`)
+          .then(({ data }) => ({ data }))
+          .catch((error) => ({ error }));
+      },
+      infiniteQueryOptions: {
+        initialPageParam: { skip: 0, take: 20 },
+        getNextPageParam: (lastPage, _, lastPageParam) =>
+          lastPage.total > lastPageParam.skip + lastPageParam.take
+            ? {
+                skip: lastPageParam.skip + lastPageParam.take,
+                take: lastPageParam.take,
+              }
+            : undefined,
+      },
+      providesTags: ['message', 'chat'],
+    }),
+  }),
+});