feat: refactor field

Author: ev-d

…ess-list/address-block/address-block.tsx …mponents/address-block/address-block.tsxfeatures/settings/permissions/components/address-list/address-block/address-block.tsx renamed to features/settings/permissions/components/address-block/address-block.tsx features/settings/permissions/components/address-list/address-block/address-block.tsx renamed to features/settings/permissions/components/address-block/address-block.tsx

@@ -1,11 +1,12 @@
-import { FC } from 'react';
+import { FC, useCallback } from 'react';
 import { useFieldArray } from 'react-hook-form';
 
-import { AddressItem } from 'features/settings/permissions/components/address-list/address-item';
+import { AddressField } from 'features/settings/permissions/components';
 import { Wrapper } from './styles';
 
 import {
   EditPermissionsSchema,
+  FieldSchema,
   PermissionKeys,
 } from 'features/settings/permissions/types';
 import { InputBlock } from '../input-block';
@@ -19,20 +20,36 @@ export const AddressBlock: FC<AddressBlockProps> = ({
   permission,
   readonly,
 }) => {
-  const { fields, update, append } = useFieldArray<EditPermissionsSchema>({
-    name: permission,
-  });
+  const { fields, update, append, remove } =
+    useFieldArray<EditPermissionsSchema>({
+      name: permission,
+    });
+
+  const handleUpdateField = useCallback(
+    (content: FieldSchema, index: number) => {
+      update(index, content);
+    },
+    [update],
+  );
+
+  const handleRemoveField = useCallback(
+    (index: number) => {
+      remove(index);
+    },
+    [remove],
+  );
 
   return (
     <Wrapper>
       {fields.map((field, index) => {
         return (
-          <AddressItem
+          <AddressField
             key={field.id}
-            field={field}
             index={index}
             readonly={readonly}
-            update={update}
+            permission={permission}
+            onUpdate={handleUpdateField}
+            onRemove={handleRemoveField}
           />
         );
       })}

…ents/address-list/address-block/index.ts …ssions/components/address-block/index.tsfeatures/settings/permissions/components/address-list/address-block/index.ts renamed to features/settings/permissions/components/address-block/index.ts features/settings/permissions/components/address-list/address-block/index.ts renamed to features/settings/permissions/components/address-block/index.ts

@@ -0,0 +1,64 @@
+import { FC, useMemo } from 'react';
+
+import { AddressBadge, AddressPopoverSelectable } from 'shared/components';
+
+import {
+  FieldSchema,
+  PermissionKeys,
+} from 'features/settings/permissions/types';
+import { useController } from 'react-hook-form';
+
+export type AddressItemProps = {
+  index: number;
+  permission: PermissionKeys;
+  onUpdate: (field: FieldSchema, index: number) => void;
+  onRemove: (index: number) => void;
+  readonly?: boolean;
+};
+
+export const AddressField: FC<AddressItemProps> = ({
+  index,
+  permission,
+  onUpdate,
+  onRemove,
+  readonly,
+}) => {
+  const {
+    field: { value },
+  } = useController({ name: `${permission}.${index}` });
+  const { account, action } = value as FieldSchema;
+  const isChecked = action === 'revoke';
+
+  const bgColor = useMemo(() => {
+    if (isChecked) return 'error';
+    if (action === 'grant') return 'success';
+    return 'default';
+  }, [isChecked, action]);
+
+  const handleChangeField = () => {
+    switch (action) {
+      case 'grant':
+        onRemove(index);
+        break;
+      case 'display':
+        onUpdate({ account, action: 'revoke' }, index);
+        break;
+      case 'revoke':
+        onUpdate({ account, action: 'display' }, index);
+        break;
+    }
+  };
+
+  if (readonly) {
+    return <AddressBadge address={account} />;
+  }
+
+  return (
+    <AddressPopoverSelectable
+      address={account}
+      checked={isChecked}
+      bgColor={bgColor}
+      onCheckedChange={handleChangeField}
+    />
+  );
+};

…nts/address-list/address-block/styles.ts …sions/components/address-block/styles.tsfeatures/settings/permissions/components/address-list/address-block/styles.ts renamed to features/settings/permissions/components/address-block/styles.ts features/settings/permissions/components/address-list/address-block/styles.ts renamed to features/settings/permissions/components/address-block/styles.ts

@@ -0,0 +1 @@
+export { AddressField } from './address-field';

features/settings/permissions/components/address-field/address-field.tsx

@@ -1,4 +1,6 @@
-export * from './address-list';
 export { PermissionsAction } from './permissions-action';
 export { RoleDescription } from './role-description';
 export { FormBackdrop } from './form-backdrop';
+export { InputBlock } from './input-block';
+export { AddressField } from './address-field';
+export { AddressBlock } from './address-block';