query-awesome/store/store-mark/index.ts

import { create } from 'zustand';
import { type Result } from '@kevisual/query/query';
import { MarkType, Mark, QueryMark } from '@kevisual/api/query-mark';
import { uniqBy } from 'es-toolkit';
import { useContextKey } from '@kevisual/context';
import { type QueryLoginBrowser } from '@/query/query-login/index.ts'
const queryClient = useContextKey<QueryLoginBrowser>('queryLogin');

type ManagerStore = {
  /** 当前选中的Mark */
  currentMarkId: string;
  setCurrentMarkId: (markId: string) => void;
  markData?: Mark | undefined;
  setMarkData: (mark?: Partial<Mark>) => void;
  /** 获取Mark列表 */
  getList: () => Promise<any>;
  getMarkFromList: (markId: string) => Mark | undefined;
  updateMark: (mark: Mark) => Promise<any>;
  getMark: (markId: string) => Promise<Result<Mark>>;
  deleteMark: (markId: string) => Promise<any>;
  /** Mark列表 */
  list: Mark[];
  setList: (list: Mark[]) => void;
  pagination: {
    current: number;
    pageSize: number;
    total: number;
  };
  setPagination: (pagination: { current: number; pageSize: number; total: number }) => void;
  /** 搜索 */
  search: string;
  setSearch: (search: string) => void;
  /** 初始化 */
  init: (markType: MarkType) => Promise<void>;
  queryMark?: QueryMark;
  markType?: MarkType;
  open: boolean;
  setOpen: (open: boolean) => void;
};
export const useMarkStore = create<ManagerStore>((set, get) => {
  return {
    currentMarkId: '',
    setCurrentMarkId: (markId: string) => set(() => ({ currentMarkId: markId })),
    open: false,
    setOpen: (open: boolean) => set(() => ({ open })),
    getList: async () => {
      const queryMark = get().queryMark!;
      const { search, pagination } = get();
      const res = await queryMark.getMarkList({ page: pagination.current, pageSize: pagination.pageSize, search });
      const oldList = get().list;
      if (res.code === 200) {
        const { pagination, list } = res.data || {};
        const newList = [...oldList, ...list!];
        const uniqueList = uniqBy(newList, (item) => item.id);
        set(() => ({ list: uniqueList }));
        set(() => ({ pagination: { current: pagination!.current, pageSize: pagination!.pageSize, total: pagination!.total } }));
      }
    },
    getMarkFromList: (markId: string) => {
      return get().list.find((item) => item.id === markId);
    },
    updateMark: async (mark: Mark) => {
      const queryMark = get().queryMark!;
      const res = await queryMark.updateMark(mark);
      if (res.code === 200) {
        set((state) => {
          const oldList = state.list;
          const resMark = res.data!;
          const newList = oldList.map((item) => (item.id === mark.id ? mark : item));
          if (!mark.id) {
            newList.unshift(resMark);
          }
          return {
            list: newList,
          };
        });
      }
      return res;
    },
    getMark: async (markId: string) => {
      const queryMark = get().queryMark!;
      const res = await queryMark.getMark(markId);
      return res;
    },
    list: [],
    setList: (list: any[]) => set(() => ({ list })),
    init: async (markType: MarkType = 'wallnote') => {
      // await get().getList();
      console.log('init', set, get);
      const queryMark = new QueryMark({
        query: queryClient as any,
        markType,
      });
      const url = new URL(window.location.href);
      const pageSize = url.searchParams.get('pageSize') || '10';
      set({ queryMark, markType, list: [], pagination: { current: 1, pageSize: parseInt(pageSize), total: 0 }, currentMarkId: '', markData: undefined });
      setTimeout(async () => {
        console.log('get', get);
        get().getList();
      }, 1000);
    },
    deleteMark: async (markId: string) => {
      const queryMark = get().queryMark!;
      const res = await queryMark.deleteMark(markId);
      const currentMarkId = get().currentMarkId;
      if (res.code === 200) {
        // get().getList();
        set((state) => ({
          list: state.list.filter((item) => item.id !== markId),
        }));
        if (currentMarkId === markId) {
          set(() => ({ currentMarkId: '', markData: undefined }));
        }
      }
      return res;
    },
    queryMark: undefined,
    markType: 'simple',
    markData: undefined,
    setMarkData: (mark?: Partial<Mark>) => set(() => ({ markData: mark as Mark })),
    pagination: {
      current: 1,
      pageSize: 10,
      total: 0,
    },
    setPagination: (pagination: { current: number; pageSize: number; total: number }) => set(() => ({ pagination })),
    /** 搜索 */
    search: '',
    setSearch: (search: string) => set(() => ({ search, list: [], pagination: { current: 1, pageSize: 10, total: 0 } })),
  };
});