client: optimize form data

packages/client/package.json

@@ -69,6 +69,7 @@
     "katex": "^0.15.2",
     "kity": "^2.0.4",
     "lib0": "^0.2.47",
+    "lodash.pick": "^4.4.0",
     "lowlight": "^2.5.0",
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^8.4.1",

packages/client/src/components/organization/setting/base/index.tsx

@@ -1,13 +1,11 @@
-import { Avatar, Button, Form, Toast, Typography } from '@douyinfe/semi-ui';
+import { Avatar, Button, Form, Toast } from '@douyinfe/semi-ui';
 import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
 import { ORGANIZATION_LOGOS } from '@think/constants';
 import { IOrganization } from '@think/domains';
 import { DataRender } from 'components/data-render';
 import { ImageUploader } from 'components/image-uploader';
-import { useCreateOrganization, useOrganizationDetail } from 'data/organization';
+import { useOrganizationDetail } from 'data/organization';
 import { useToggle } from 'hooks/use-toggle';
-import { SingleColumnLayout } from 'layouts/single-column';
-import Router from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import styles from './index.module.scss';

packages/client/src/components/wiki/setting/base/index.tsx

@@ -3,7 +3,8 @@ import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
 import { WIKI_AVATARS } from '@think/constants';
 import type { IWiki } from '@think/domains';
 import { ImageUploader } from 'components/image-uploader';
-import { useEffect, useRef, useState } from 'react';
+import { pick } from 'helpers/pick';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import styles from './index.module.scss';
 
@@ -22,32 +23,36 @@ interface IProps {
   update: (arg: IUpdateWIKI) => Promise<void>;
 }
 
+const getFormValueFromWiki = (wiki) => {
+  return pick(wiki, ['name', 'description', 'avatar']);
+};
+
 export const Base: React.FC<IProps> = ({ wiki, update }) => {
   const $form = useRef<FormApi>();
   const [currentCover, setCurrentCover] = useState('');
 
-  const onSubmit = () => {
+  const onSubmit = useCallback(() => {
     $form.current.validate().then((values) => {
       update(values).then(() => {
         Toast.success('操作成功');
       });
     });
-  };
+  }, [update]);
 
-  const setCover = (url) => {
+  const setCover = useCallback((url) => {
     $form.current.setValue('avatar', url);
     setCurrentCover(url);
-  };
+  }, []);
 
   useEffect(() => {
     if (!wiki) return;
-    $form.current.setValues(wiki);
+    $form.current.setValues(getFormValueFromWiki(wiki));
     setCurrentCover(wiki.avatar);
   }, [wiki]);
 
   return (
     <Form
-      initValues={wiki}
+      initValues={getFormValueFromWiki(wiki)}
       style={{ width: '100%' }}
       getFormApi={(formApi) => ($form.current = formApi)}
       onSubmit={onSubmit}

packages/client/src/helpers/pick.ts

@@ -0,0 +1,3 @@
+import pick from 'lodash.pick';
+
+export { pick };

pnpm-lock.yaml

@@ -115,6 +115,7 @@ importers:
       katex: ^0.15.2
       kity: ^2.0.4
       lib0: ^0.2.47
+      lodash.pick: ^4.4.0
       lowlight: ^2.5.0
       markdown-it: ^12.3.2
       markdown-it-anchor: ^8.4.1
@@ -216,6 +217,7 @@ importers:
       katex: 0.15.2
       kity: 2.0.4
       lib0: 0.2.47
+      lodash.pick: 4.4.0
       lowlight: 2.5.0
       markdown-it: 12.3.2
       markdown-it-anchor: 8.4.1_markdown-it@12.3.2
@@ -8245,6 +8247,10 @@ packages:
     resolution: {integrity: sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=}
     dev: false
 
+  /lodash.pick/4.4.0:
+    resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==}
+    dev: false
+
   /lodash.sortby/4.7.0:
     resolution: {integrity: sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=}
     dev: false