Optimize the project structure and introduce DDD design (#394)

projects/app/src/web/common/hooks/useConfirm.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useRef, useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
+  Button
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+
+export const useConfirm = (props: { title?: string | null; content?: string | null }) => {
+  const { t } = useTranslation();
+  const { title = t('Warning'), content } = props;
+  const [customContent, setCustomContent] = useState(content);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const cancelRef = useRef(null);
+  const confirmCb = useRef<any>();
+  const cancelCb = useRef<any>();
+
+  return {
+    openConfirm: useCallback(
+      (confirm?: any, cancel?: any, customContent?: string) => {
+        confirmCb.current = confirm;
+        cancelCb.current = cancel;
+
+        customContent && setCustomContent(customContent);
+
+        return onOpen;
+      },
+      [onOpen]
+    ),
+    ConfirmModal: useCallback(
+      () => (
+        <AlertDialog
+          isOpen={isOpen}
+          leastDestructiveRef={cancelRef}
+          autoFocus={false}
+          onClose={onClose}
+        >
+          <AlertDialogOverlay>
+            <AlertDialogContent maxW={'min(90vw,400px)'}>
+              <AlertDialogHeader fontSize="lg" fontWeight="bold">
+                {title}
+              </AlertDialogHeader>
+
+              <AlertDialogBody>{customContent}</AlertDialogBody>
+
+              <AlertDialogFooter>
+                <Button
+                  variant={'base'}
+                  onClick={() => {
+                    onClose();
+                    typeof cancelCb.current === 'function' && cancelCb.current();
+                  }}
+                >
+                  {t('Cancel')}
+                </Button>
+                <Button
+                  ml={4}
+                  onClick={() => {
+                    onClose();
+                    typeof confirmCb.current === 'function' && confirmCb.current();
+                  }}
+                >
+                  {t('Confirm')}
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogOverlay>
+        </AlertDialog>
+      ),
+      [customContent, isOpen, onClose, t, title]
+    )
+  };
+};

projects/app/src/web/common/hooks/useCopyData.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next';
+import { useToast } from './useToast';
+
+/**
+ * copy text data
+ */
+export const useCopyData = () => {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  return {
+    copyData: async (
+      data: string,
+      title: string | null = t('common.Copy Successful'),
+      duration = 1000
+    ) => {
+      try {
+        if (navigator.clipboard) {
+          await navigator.clipboard.writeText(data);
+        } else {
+          throw new Error('');
+        }
+      } catch (error) {
+        const textarea = document.createElement('textarea');
+        textarea.value = data;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+      }
+
+      toast({
+        title,
+        status: 'success',
+        duration
+      });
+    }
+  };
+};

projects/app/src/web/common/hooks/useEditTitle.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useRef } from 'react';
+import { ModalFooter, ModalBody, Input, useDisclosure, Button } from '@chakra-ui/react';
+import MyModal from '@/components/MyModal';
+
+export const useEditTitle = ({
+  title,
+  placeholder = ''
+}: {
+  title: string;
+  placeholder?: string;
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const onSuccessCb = useRef<(content: string) => void | Promise<void>>();
+  const onErrorCb = useRef<(err: any) => void>();
+  const defaultValue = useRef('');
+
+  const onOpenModal = useCallback(
+    ({
+      defaultVal,
+      onSuccess,
+      onError
+    }: {
+      defaultVal: string;
+      onSuccess: (content: string) => any;
+      onError?: (err: any) => void;
+    }) => {
+      onOpen();
+      onSuccessCb.current = onSuccess;
+      onErrorCb.current = onError;
+      defaultValue.current = defaultVal;
+    },
+    [onOpen]
+  );
+
+  const onclickConfirm = useCallback(async () => {
+    if (!inputRef.current) return;
+    try {
+      const val = inputRef.current.value;
+      await onSuccessCb.current?.(val);
+
+      onClose();
+    } catch (err) {
+      onErrorCb.current?.(err);
+    }
+  }, [onClose]);
+
+  // eslint-disable-next-line react/display-name
+  const EditModal = useCallback(
+    () => (
+      <MyModal isOpen={isOpen} onClose={onClose} title={title}>
+        <ModalBody>
+          <Input
+            ref={inputRef}
+            defaultValue={defaultValue.current}
+            placeholder={placeholder}
+            autoFocus
+            maxLength={20}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button mr={3} variant={'base'} onClick={onClose}>
+            取消
+          </Button>
+          <Button onClick={onclickConfirm}>确认</Button>
+        </ModalFooter>
+      </MyModal>
+    ),
+    [isOpen, onClose, onclickConfirm, placeholder, title]
+  );
+
+  return {
+    onOpenModal,
+    EditModal
+  };
+};

projects/app/src/web/common/hooks/useLoading.tsx

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+import LoadingComponent from '@/components/Loading';
+
+export const useLoading = (props?: { defaultLoading: boolean }) => {
+  const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
+
+  const Loading = useCallback(
+    ({
+      loading,
+      fixed = true,
+      text = '',
+      zIndex
+    }: {
+      loading?: boolean;
+      fixed?: boolean;
+      text?: string;
+      zIndex?: number;
+    }): JSX.Element | null => {
+      return isLoading || loading ? (
+        <LoadingComponent fixed={fixed} text={text} zIndex={zIndex} />
+      ) : null;
+    },
+    [isLoading]
+  );
+
+  return {
+    isLoading,
+    setIsLoading,
+    Loading
+  };
+};

projects/app/src/web/common/hooks/useMarkdown.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+export const getMd = async (url: string) => {
+  const response = await fetch(`/docs/${url}`);
+  const textContent = await response.text();
+  return textContent;
+};
+
+export const useMarkdown = ({ url }: { url: string }) => {
+  const { data = '' } = useQuery([url], () => getMd(url));
+
+  return {
+    data
+  };
+};

projects/app/src/web/common/hooks/usePagination.tsx

@@ -0,0 +1,188 @@
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import type { PagingData } from '@/types/index.d';
+import { IconButton, Flex, Box, Input } from '@chakra-ui/react';
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
+import { useMutation } from '@tanstack/react-query';
+import { useToast } from './useToast';
+import { throttle } from 'lodash';
+
+const thresholdVal = 100;
+
+export function usePagination<T = any>({
+  api,
+  pageSize = 10,
+  params = {},
+  defaultRequest = true,
+  type = 'button',
+  onChange
+}: {
+  api: (data: any) => any;
+  pageSize?: number;
+  params?: Record<string, any>;
+  defaultRequest?: boolean;
+  type?: 'button' | 'scroll';
+  onChange?: (pageNum: number) => void;
+}) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const { toast } = useToast();
+  const [pageNum, setPageNum] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [data, setData] = useState<T[]>([]);
+  const maxPage = useMemo(() => Math.ceil(total / pageSize) || 1, [pageSize, total]);
+
+  const { mutate, isLoading } = useMutation({
+    mutationFn: async (num: number = pageNum) => {
+      try {
+        const res: PagingData<T> = await api({
+          pageNum: num,
+          pageSize,
+          ...params
+        });
+        setPageNum(num);
+        res.total !== undefined && setTotal(res.total);
+        setData(res.data);
+        onChange && onChange(num);
+      } catch (error: any) {
+        toast({
+          title: error?.message || '获取数据异常',
+          status: 'error'
+        });
+        console.log(error);
+      }
+      return null;
+    }
+  });
+
+  const Pagination = useCallback(() => {
+    return (
+      <Flex alignItems={'center'} justifyContent={'end'}>
+        <IconButton
+          isDisabled={pageNum === 1}
+          icon={<ArrowBackIcon />}
+          aria-label={'left'}
+          size={'sm'}
+          w={'28px'}
+          h={'28px'}
+          isLoading={isLoading}
+          onClick={() => mutate(pageNum - 1)}
+        />
+        <Flex mx={2} alignItems={'center'}>
+          <Input
+            defaultValue={pageNum}
+            w={'50px'}
+            size={'xs'}
+            type={'number'}
+            min={1}
+            max={maxPage}
+            onBlur={(e) => {
+              const val = +e.target.value;
+              if (val === pageNum) return;
+              if (val >= maxPage) {
+                mutate(maxPage);
+              } else if (val < 1) {
+                mutate(1);
+              } else {
+                mutate(+e.target.value);
+              }
+            }}
+            onKeyDown={(e) => {
+              // @ts-ignore
+              const val = +e.target.value;
+              if (val && e.keyCode === 13) {
+                if (val === pageNum) return;
+                if (val >= maxPage) {
+                  mutate(maxPage);
+                } else if (val < 1) {
+                  mutate(1);
+                } else {
+                  mutate(val);
+                }
+              }
+            }}
+          />
+          <Box mx={2}>/</Box>
+          {maxPage}
+        </Flex>
+        <IconButton
+          isDisabled={pageNum === maxPage}
+          icon={<ArrowForwardIcon />}
+          aria-label={'left'}
+          size={'sm'}
+          isLoading={isLoading}
+          w={'28px'}
+          h={'28px'}
+          onClick={() => mutate(pageNum + 1)}
+        />
+      </Flex>
+    );
+  }, [isLoading, maxPage, mutate, pageNum]);
+
+  const ScrollData = useCallback(
+    ({ children, ...props }: { children: React.ReactNode }) => {
+      const loadText = useMemo(() => {
+        if (isLoading) return '请求中……';
+        if (total <= data.length) return '已加载全部';
+        return '点击加载更多';
+      }, []);
+
+      return (
+        <Box {...props} ref={elementRef} overflow={'overlay'}>
+          {children}
+          <Box
+            mt={2}
+            fontSize={'xs'}
+            color={'blackAlpha.500'}
+            textAlign={'center'}
+            cursor={loadText === '点击加载更多' ? 'pointer' : 'default'}
+            onClick={() => {
+              if (loadText !== '点击加载更多') return;
+              mutate(pageNum + 1);
+            }}
+          >
+            {loadText}
+          </Box>
+        </Box>
+      );
+    },
+    [data.length, isLoading, mutate, pageNum, total]
+  );
+
+  useEffect(() => {
+    if (!elementRef.current || type !== 'scroll') return;
+
+    const scrolling = throttle((e: Event) => {
+      const element = e.target as HTMLDivElement;
+      if (!element) return;
+      // 当前滚动位置
+      const scrollTop = element.scrollTop;
+      // 可视高度
+      const clientHeight = element.clientHeight;
+      // 内容总高度
+      const scrollHeight = element.scrollHeight;
+      // 判断是否滚动到底部
+      if (scrollTop + clientHeight + thresholdVal >= scrollHeight) {
+        mutate(pageNum + 1);
+      }
+    }, 100);
+    elementRef.current.addEventListener('scroll', scrolling);
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      elementRef.current?.removeEventListener('scroll', scrolling);
+    };
+  }, [elementRef, mutate, pageNum, type]);
+
+  useEffect(() => {
+    defaultRequest && mutate(1);
+  }, []);
+
+  return {
+    pageNum,
+    pageSize,
+    total,
+    data,
+    isLoading,
+    Pagination,
+    ScrollData,
+    getData: mutate
+  };
+}

projects/app/src/web/common/hooks/useRequest.tsx

@@ -0,0 +1,36 @@
+import { useToast } from '@/web/common/hooks/useToast';
+import { useMutation } from '@tanstack/react-query';
+import type { UseMutationOptions } from '@tanstack/react-query';
+import { getErrText } from '@/utils/tools';
+import { useTranslation } from 'react-i18next';
+
+interface Props extends UseMutationOptions<any, any, any, any> {
+  successToast?: string | null;
+  errorToast?: string | null;
+}
+
+export const useRequest = ({ successToast, errorToast, onSuccess, onError, ...props }: Props) => {
+  const { toast } = useToast();
+  const { t } = useTranslation();
+  const mutation = useMutation<unknown, unknown, any, unknown>({
+    ...props,
+    onSuccess(res, variables: void, context: unknown) {
+      onSuccess?.(res, variables, context);
+      successToast &&
+        toast({
+          title: successToast,
+          status: 'success'
+        });
+    },
+    onError(err: any, variables: void, context: unknown) {
+      onError?.(err, variables, context);
+      errorToast &&
+        toast({
+          title: t(getErrText(err, errorToast)),
+          status: 'error'
+        });
+    }
+  });
+
+  return mutation;
+};

projects/app/src/web/common/hooks/useSelectFile.tsx

@@ -0,0 +1,44 @@
+import React, { useRef, useCallback } from 'react';
+import { Box } from '@chakra-ui/react';
+import { useToast } from './useToast';
+import { useTranslation } from 'react-i18next';
+
+export const useSelectFile = (props?: { fileType?: string; multiple?: boolean }) => {
+  const { t } = useTranslation();
+  const { fileType = '*', multiple = false } = props || {};
+  const { toast } = useToast();
+  const SelectFileDom = useRef<HTMLInputElement>(null);
+
+  const File = useCallback(
+    ({ onSelect }: { onSelect: (e: File[]) => void }) => (
+      <Box position={'absolute'} w={0} h={0} overflow={'hidden'}>
+        <input
+          ref={SelectFileDom}
+          type="file"
+          accept={fileType}
+          multiple={multiple}
+          onChange={(e) => {
+            if (!e.target.files || e.target.files?.length === 0) return;
+            if (e.target.files.length > 10) {
+              return toast({
+                status: 'warning',
+                title: t('file.Select a maximum of 10 files')
+              });
+            }
+            onSelect(Array.from(e.target.files));
+          }}
+        />
+      </Box>
+    ),
+    [fileType, multiple, t, toast]
+  );
+
+  const onOpen = useCallback(() => {
+    SelectFileDom.current && SelectFileDom.current.click();
+  }, []);
+
+  return {
+    File,
+    onOpen
+  };
+};

projects/app/src/web/common/hooks/useToast.ts

@@ -0,0 +1,13 @@
+import { useToast as uToast, UseToastOptions } from '@chakra-ui/react';
+
+export const useToast = (props?: UseToastOptions) => {
+  const toast = uToast({
+    position: 'top',
+    duration: 2000,
+    ...props
+  });
+
+  return {
+    toast
+  };
+};