feat: community backends page

src/pages/backends/hooks/use-community-backend.ts

@@ -0,0 +1,40 @@
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useState } from 'react';
+
+const useCommunityBackend = () => {
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    title: string;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    title: ''
+  });
+
+  const openModal = (action: PageActionType, title: string) => {
+    setOpenModalStatus({
+      open: true,
+      title: title,
+      action
+    });
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({
+      open: false,
+      action: PageAction.CREATE,
+      title: ''
+    });
+  };
+
+  return {
+    openCommunityModalStatus: openModalStatus,
+    setOpenCommunityModalStatus: setOpenModalStatus,
+    openCommunityModal: openModal,
+    closeCommunityModal: closeModal
+  };
+};
+
+export default useCommunityBackend;

src/pages/backends/hooks/use-create-backend.tsx

@@ -0,0 +1,69 @@
+import IconFont from '@/components/icon-font';
+import { PageAction } from '@/config';
+import useBodyScroll from '@/hooks/use-body-scroll';
+import { ListItem } from '../config/types';
+import useCommunityBackend from './use-community-backend';
+import useCustomBackend from './use-custom-backend';
+
+const useCreateBackend = () => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
+  const { openCommunityModal, closeCommunityModal, openCommunityModalStatus } =
+    useCommunityBackend();
+  const { openCustomModal, closeCustomModal, openCustomModalStatus } =
+    useCustomBackend();
+
+  const addItems = [
+    {
+      label: 'backend.add.community',
+      locale: true,
+      key: 'community',
+      value: 'community',
+      icon: <IconFont type="icon-public" />
+    },
+    {
+      label: 'backend.add.custom',
+      locale: true,
+      key: 'custom',
+      value: 'custom',
+      icon: <IconFont type="icon-person" />
+    }
+  ];
+
+  const handleEditBackend = (
+    action: PageAction,
+    title: string,
+    row: ListItem
+  ) => {
+    openCustomModal(action, title, row);
+    saveScrollHeight();
+  };
+
+  const handleCloseModal = (type: 'community' | 'custom') => {
+    if (type === 'community') {
+      closeCommunityModal();
+    } else {
+      closeCustomModal();
+    }
+    restoreScrollHeight();
+  };
+
+  const handleAddBackend = (type: 'community' | 'custom') => {
+    if (type === 'community') {
+      openCommunityModal(PageAction.CREATE, 'Add Community Backend');
+    } else {
+      openCustomModal(PageAction.CREATE, 'Add Custom Backend');
+    }
+    saveScrollHeight();
+  };
+
+  return {
+    closeBackendModal: handleCloseModal,
+    addBackend: handleAddBackend,
+    editBackend: handleEditBackend,
+    openBackendModalStatus: openCustomModalStatus, // for create custom backend and edit
+    openCommunityModalStatus: openCommunityModalStatus, // for create community backend
+    addActions: addItems
+  };
+};
+
+export default useCreateBackend;

src/pages/backends/hooks/use-custom-backend.ts

@@ -1,11 +1,9 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import useBodyScroll from '@/hooks/use-body-scroll';
 import { useState } from 'react';
 import { ListItem } from '../config/types';
 
-const useCreateBackend = () => {
-  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
+const useCustomBackend = () => {
   const [openModalStatus, setOpenModalStatus] = useState<{
     open: boolean;
     action: PageActionType;
@@ -26,7 +24,6 @@ const useCreateBackend = () => {
       action,
       currentData: row
     });
-    saveScrollHeight();
   };
 
   const closeModal = () => {
@@ -36,15 +33,14 @@ const useCreateBackend = () => {
       currentData: undefined,
       title: ''
     });
-    restoreScrollHeight();
   };
 
   return {
-    openBackendModalStatus: openModalStatus,
-    setOpenBackendModalStatus: setOpenModalStatus,
-    openBackendModal: openModal,
-    closeBackendModal: closeModal
+    openCustomModalStatus: openModalStatus,
+    setOpenCustomModalStatus: setOpenModalStatus,
+    openCustomModal: openModal,
+    closeCustomModal: closeModal
   };
 };
 
-export default useCreateBackend;
+export default useCustomBackend;