refactor(comments): refactor comments page dialog

mogland · Sep 1, 2023 · 52762da · 52762da
1 parent b437063
commit 52762da
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 184 deletions.
diff --git a/src/pages/Categories/index.tsx b/src/pages/Categories/index.tsx
@@ -442,37 +442,7 @@ export const CategoriesPage: BasicPage = () => {
  );
  })}
  </div>
-
- {modalData && modal(modalData, navigate, handleModalClose)}
  <AddDialog />
  </div>
  );
 };
-
-const modal = (data, navigate, onClose) => {
- return (
- <Modal
- title={`相关文章`}
- size={"md"}
- options={{
- cancelText: "关闭",
- }}
- onClose={onClose}
- >
- {data.map((item) => {
- return (
- <div
- key={item.id}
- className={styles.modalItem}
- onClick={() => {
- navigate(jump(`/write/post?id=${item.id}`));
- }}
- >
- <h1>{item.title}</h1>
- <p>点击前往编辑页</p>
- </div>
- );
- })}
- </Modal>
- );
-};
diff --git a/src/pages/Comments/Table/column.tsx b/src/pages/Comments/Table/column.tsx
@@ -1,9 +1,12 @@
 import {
+ generateAnyActionsColumn,
  generateSelectColumn,
  genereateCreatedColumn,
 } from "@components/widgets/AnyListDataTable/anyColumn";
+import { _private } from "@states/private";
 import type { ColumnDef } from "@tanstack/react-table";
 import { mailAvatar } from "@utils/avatar";
+import { Edit } from "lucide-react";
 
 export interface CommentReaction {
  like: number;
@@ -74,4 +77,16 @@ export const commentsListColumns: ColumnDef<CommentsListColumns>[] = [
  },
  },
  genereateCreatedColumn<CommentsListColumns>(),
+ generateAnyActionsColumn<CommentsListColumns>({
+ menus: [
+ {
+ title: "修改",
+ onClick: (row) => {
+ _private.showModal = true
+ _private.modalDataId = row.id
+ },
+ icon: <Edit className="mr-2 h-4 w-4" />,
+ }
+ ],
+ }),
 ];
diff --git a/src/pages/Comments/component.tsx b/src/pages/Comments/component.tsx
@@ -15,22 +15,19 @@ import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 import { Select } from "@components/widgets/ThemeComponent/ThemeSelect";
 import { Label } from "@components/ui/label";
+import { Dialog, DialogHeader } from "@components/ui/dialog";
+import { useSnapshot } from "valtio";
+import { _private } from "@states/private";
+import { DialogContent } from "@radix-ui/react-dialog";
 
 interface EditModalProps {
- tabsList: {
+ status: {
  name: string;
  status: number;
  }[];
- select: string[];
- setShowEditModal: (show: boolean) => void;
- setSelect: React.Dispatch<React.SetStateAction<string[]>>;
- setComments: (comments: any) => void;
- // setInSideLoading: (loading: boolean) => void;
- tab: number;
- page: number;
 }
 
-export const EditModal: React.FC<EditModalProps> = ({
+export const EditModal: React.FC<any> = ({
  tabsList,
  select,
  setShowEditModal,
@@ -147,126 +144,36 @@ export const EditModal: React.FC<EditModalProps> = ({
  );
 };
 
-interface CommentsListProps {
- comments: {
- data: {
- id: string;
- author: string;
- email: string;
- text: string;
- parent?: {
- author: string;
- created: string;
- text: string;
- };
- post: {
- id: string;
- title: string;
- };
- created: string;
- }[];
- };
- // inSideLoading: boolean;
- select: string[];
- setSelect: React.Dispatch<React.SetStateAction<string[]>>;
- jump: (path: string) => void;
- mailAvatar: (email: string) => string;
-}
-
-export const CommentsList: React.FC<CommentsListProps> = ({
- comments,
- // inSideLoading,
- select,
- setSelect,
- jump,
- mailAvatar,
-}) => {
- const header = useMemo(() => ["AUTHOR", "CONTENT", "ORIGIN", "DATE"], []);
- const handleItemClick = useCallback(
- (item: { id: string }) => {
- if (select.includes(item.id)) {
- setSelect(select.filter((i) => i !== item.id));
- } else {
- setSelect([...select, item.id]);
- }
- },
- [select, setSelect]
+export const _EditModal: React.FC<EditModalProps> = (props) => {
+ const { showModal, modalDataId } = useSnapshot(_private);
+ const { data } = useSWR(`/comments/${modalDataId}`);
+ const { trigger } = useSWRMutation(
+ `/comments/${modalDataId}`,
+ (key: string, { arg }: { arg: string }) => {
+ return apiClient(key, {
+ method: "PUT",
+ body: JSON.stringify(arg),
+ });
+ }
  );
 
+ const handleConfirm = async () => {
+ await trigger(data);
+ _private.showModal = false;
+ _private.modalDataId = "";
+ };
+
  return (
- <>
- {/* <Loading loading={inSideLoading} /> */}
- <div
- // className={clsx("loading", !inSideLoading && "loaded")}
- >
- <TableContainer
- header={header}
- headerStyle={{
- gridTemplateColumns: "1fr 2fr 2fr 2fr",
- }}
- >
- {comments?.data &&
- comments?.data.map((item) => {
- const tableItemHeader = ["AUTHOR", "CONTENT", "ORIGIN", "DATE"];
- const tableItemStyle = {
- gridTemplateColumns: "1fr 2fr 2fr 2fr",
- };
- const isItemSelected = select.includes(item.id);
- const className = clsx(isItemSelected && postStyles.select);
- const postTitle = item.post?.title;
- const createdTime = new Date(item.created).toLocaleString();
- const replyAuthor = item.parent?.author;
- const replyCreatedTime = item.parent?.created.split("T")[0];
- const replyText = item.parent?.text;
- return (
- <TableItem
- key={item.id}
- style={tableItemStyle}
- aria-label={item.id}
- className={className}
- header={tableItemHeader}
- onClick={() => handleItemClick(item)}
- >
- <TableItemValue>
- <div style={{ display: "flex", alignItems: "center" }}>
- <img
- src={mailAvatar(item.email)}
- alt={item.author}
- style={{
- width: "30px",
- height: "30px",
- borderRadius: "50%",
- marginRight: "10px",
- }}
- />
- {item.author}
- </div>
- </TableItemValue>
- <TableItemValue>
- {item.text}
- {item.parent && (
- <div className={styles.reply}>
- <div className={styles.replyAuthor}>
- {replyAuthor} 在 {replyCreatedTime} 说：
- </div>
- <div className={styles.replyContent}>{replyText}</div>
- </div>
- )}
- </TableItemValue>
- <TableItemValue
- onClick={() => {
- jump(`/write/post?id=${item.post?.id}`);
- }}
- style={{ cursor: "pointer" }}
- >
- {postTitle}
- </TableItemValue>
- <TableItemValue>{createdTime}</TableItemValue>
- </TableItem>
- );
- })}
- </TableContainer>
- </div>
- </>
+ <Dialog
+ open={showModal}
+ onOpenChange={(e) => {
+ _private.showModal = e;
+ }}
+ defaultOpen={false}
+ >
+ <DialogContent>
+ <DialogHeader>编辑评论</DialogHeader>
+ </DialogContent>
+ </Dialog>
  );
 };
diff --git a/src/pages/Comments/index.tsx b/src/pages/Comments/index.tsx
@@ -17,6 +17,7 @@ import { CommentsTable } from "./Table/data-table";
 import { commentsListColumns } from "./Table/column";
 import { Button } from "@components/ui/button";
 import { _private } from "@states/private";
+import { useSnapshot } from "valtio";
 
 const tabsList = [
  {
@@ -43,26 +44,15 @@ export const CommentsPage: BasicPage = () => {
  const navigate = useNavigate();
  const [tab, setTab] = useState(status ? Number(status) : 0);
 
- const [select, setSelect] = useState<string[]>([]);
- const [showEditModal, setShowEditModal] = useState(false);
- // const [inSideLoading, setInSideLoading] = useState(true);
+ const { showModal } = useSnapshot(_private);
 
  const { data, mutate } = useSWR<any>(`/comments?status=${tab}&page=${page}`);
 
  useEffect(() => {
  navigate(jump(`/comments?status=${tab}&page=${page}`));
  mutate();
- setSelect([]);
  }, [page, tab]);
 
- const handleDelete = () => {
- setSelect([]);
- mutate((prev) => ({
- data: prev.data.filter((item) => !select.includes(item.id)),
- pagination: prev.pagination,
- }));
- };
-
  const { trigger: updateStatus } = useSWRMutation(
  `/comments/`,
  (
@@ -85,16 +75,6 @@ export const CommentsPage: BasicPage = () => {
  }
  );
 
- const handleUpdateStatus = (status: number) => {
- select.forEach((item) => {
- updateStatus({
- item,
- status,
- });
- });
- handleDelete();
- };
-
  return (
  <>
  {/* <Loading loading={!data} /> */}
@@ -146,12 +126,9 @@ export const CommentsPage: BasicPage = () => {
  </Tab.Panels>
  </Tab.Group>
  </div>
- {showEditModal && (
+ {showModal && (
  <EditModal
- tabsList={tabsList}
- select={select}
- setShowEditModal={setShowEditModal}
- setSelect={setSelect}
+ status={tabsList}
  setComments={(comments) => {
  mutate((prev) => ({
  data: comments.data,