fix: collection bug

Author: 521xueweihan

public/locales/en/profile.json

@@ -2,7 +2,6 @@
   "title": "Profile",
   "page_prev": "Previous",
   "page_next": "Next",
-  "read_button": "View",
   "tabs": {
     "dynamic": "Dynamic",
     "favorite": "Favorites",

public/locales/zh/profile.json

@@ -2,7 +2,6 @@
   "title": "个人主页",
   "page_prev": "上一页",
   "page_next": "下一页",
-  "read_button": "查看",
   "tabs": {
     "dynamic": "动态",
     "favorite": "收藏",

src/components/buttons/ActionButton.tsx

@@ -0,0 +1,25 @@
+import React, { MouseEventHandler, ReactNode } from 'react';
+
+interface ActionButtonProps {
+  icon: ReactNode;
+  text: ReactNode;
+  className?: string;
+  onClick: MouseEventHandler<HTMLSpanElement>;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  icon,
+  text,
+  className = '',
+  onClick,
+}) => (
+  <span
+    className={`inline-flex items-center hover:text-blue-400 ${className}`}
+    onClick={onClick}
+  >
+    {icon}
+    {text}
+  </span>
+);
+
+export default ActionButton;

src/components/collection/AddCollection.tsx renamed to src/components/dialog/collection/AddCollection.tsx

@@ -0,0 +1,95 @@
+import { AiFillDelete, AiFillEdit } from 'react-icons/ai';
+
+import BasicDialog from '../BasicDialog';
+
+import { Favorite } from '@/types/repository';
+
+interface DeleteCollectionModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  t: (key: string) => string;
+}
+
+export const DeleteCollectionMoal: React.FC<DeleteCollectionModalProps> = ({
+  visible,
+  onClose,
+  onConfirm,
+  t,
+}) => {
+  return (
+    <BasicDialog
+      className='w-5/6 max-w-xs rounded-md p-6'
+      visible={visible}
+      maskClosable={false}
+      hideClose={true}
+      onClose={onClose}
+    >
+      <div className='text-center'>
+        <div>{t('favorite.dialog.del_title')}</div>
+        <div className='my-2 text-sm text-gray-500'>
+          {t('favorite.dialog.del_desc')}
+        </div>
+      </div>
+      <div className='mt-4 text-center'>
+        <button
+          type='button'
+          onClick={onClose}
+          className='inline-flex items-center justify-center gap-2 rounded-md border-2 border-gray-200 py-1 px-4 text-sm font-semibold text-blue-500 transition-all hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-gray-700 dark:hover:border-blue-500'
+        >
+          {t('favorite.button.cancel')}
+        </button>
+        <button
+          type='button'
+          onClick={onConfirm}
+          className='ml-4 inline-flex items-center justify-center gap-2 rounded-md border border-transparent bg-blue-500 py-1 px-4 text-sm font-semibold text-white transition-all hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800'
+        >
+          {t('favorite.button.confirm')}
+        </button>
+      </div>
+    </BasicDialog>
+  );
+};
+
+interface MobileActionModalProps {
+  visible: boolean;
+  curItem: Favorite;
+  onClose: () => void;
+  onActionClick: (action: 'edit' | 'delete', item: Favorite) => void;
+  t: (key: string) => string;
+}
+
+export const MobileActionModal: React.FC<MobileActionModalProps> = ({
+  visible,
+  curItem,
+  onClose,
+  onActionClick,
+  t,
+}) => {
+  return (
+    <BasicDialog
+      className='w-4/6 max-w-xs rounded-md p-4'
+      visible={visible}
+      maskClosable={true}
+      hideClose={true}
+      onClose={onClose}
+    >
+      <div>
+        <div
+          className='flex cursor-pointer items-center border-b border-gray-100 pb-2 hover:text-blue-500'
+          onClick={() => onActionClick('edit', curItem)}
+        >
+          <AiFillEdit className='mr-2' />
+          {t('favorite.button.edit')}
+        </div>
+        <div
+          className='flex cursor-pointer items-center pt-2 hover:text-red-500'
+          onClick={() => onActionClick('delete', curItem)}
+        >
+          <AiFillDelete className='mr-2' />
+          {t('favorite.button.delete')}
+        </div>
+      </div>
+    </BasicDialog>
+  );
+};

src/components/dialog/collection/CollectionModal.tsx

@@ -31,8 +31,8 @@ import { numFormat } from '@/utils/util';
 
 import MoreInfo from './MoreInfo';
 import Button from '../buttons/Button';
-import AddCollection from '../collection/AddCollection';
 import BasicDialog from '../dialog/BasicDialog';
+import AddCollection from '../dialog/collection/AddCollection';
 import Dropdown, { option } from '../dropdown/Dropdown';
 import { CustomLink, NoPrefetchLink } from '../links/CustomLink';
 import Message from '../message';
@@ -146,6 +146,18 @@ const Info = ({ repo, t, i18n_lang }: RepositoryProps) => {
     }
   };
 
+  const handleOptions = async () => {
+    const res = await getFavoriteOptions();
+    if (res.success) {
+      setFavoriteOptions(
+        res.data?.map((item: { fid: any; name: any }) => ({
+          key: item.fid,
+          value: item.name,
+        })) || [{ key: '', value: t('favorite.default') }]
+      );
+    }
+  };
+
   const handleCollect = async () => {
     if (!isLogin) return login();
 
@@ -157,16 +169,8 @@ const Info = ({ repo, t, i18n_lang }: RepositoryProps) => {
         Message.success(t('favorite.cancel'));
       }
     } else {
-      const res = await getFavoriteOptions();
-      if (res.success) {
-        setFavoriteOptions(
-          res.data?.map((item: { fid: any; name: any }) => ({
-            key: item.fid,
-            value: item.name,
-          })) || [{ key: '', value: t('favorite.default') }]
-        );
-        setOpenModal(true);
-      }
+      handleOptions();
+      setOpenModal(true);
     }
   };
 
@@ -526,7 +530,7 @@ const Info = ({ repo, t, i18n_lang }: RepositoryProps) => {
         </div>
         {/* footer */}
         <div className='flex justify-between'>
-          <AddCollection onFinish={getFavoriteOptions} />
+          <AddCollection onFinish={handleOptions} />
           <Button
             className='py-0 px-3'
             variant='gradient'