支持删除

dashboard/src/components/discussion/DiscussionItem.tsx

@@ -22,8 +22,14 @@ interface IWidget {
   data: IComment;
   onSelect?: Function;
   onCreated?: Function;
+  onDelete?: Function;
 }
-const DiscussionItemWidget = ({ data, onSelect, onCreated }: IWidget) => {
+const DiscussionItemWidget = ({
+  data,
+  onSelect,
+  onCreated,
+  onDelete,
+}: IWidget) => {
   const [edit, setEdit] = useState(false);
   const [currData, setCurrData] = useState<IComment>(data);
   return (
@@ -60,6 +66,11 @@ const DiscussionItemWidget = ({ data, onSelect, onCreated }: IWidget) => {
                 onSelect(e, data);
               }
             }}
+            onDelete={(id: string) => {
+              if (typeof onDelete !== "undefined") {
+                onDelete();
+              }
+            }}
           />
         )}
       </div>

dashboard/src/components/discussion/DiscussionList.tsx

@@ -5,8 +5,9 @@ import DiscussionItem, { IComment } from "./DiscussionItem";
 interface IWidget {
   data: IComment[];
   onSelect?: Function;
+  onDelete?: Function;
 }
-const DiscussionListWidget = ({ data, onSelect }: IWidget) => {
+const DiscussionListWidget = ({ data, onSelect, onDelete }: IWidget) => {
   return (
     <List
       pagination={{
@@ -29,6 +30,11 @@ const DiscussionListWidget = ({ data, onSelect }: IWidget) => {
                 onSelect(e, data);
               }
             }}
+            onDelete={() => {
+              if (typeof onDelete !== "undefined") {
+                onDelete(item.id);
+              }
+            }}
           />
         </List.Item>
       )}

dashboard/src/components/discussion/DiscussionListCard.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
-import { Card, message, Typography } from "antd";
+import { Card, message, Skeleton, Typography } from "antd";
 
 import { get } from "../../request";
 import { ICommentListResponse } from "../api/Comment";
@@ -28,6 +28,8 @@ const DiscussionListCardWidget = ({
 }: IWidget) => {
   const intl = useIntl();
   const [data, setData] = useState<IComment[]>([]);
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     console.log("changedAnswerCount", changedAnswerCount);
     const newData = [...data].map((item) => {
@@ -50,6 +52,8 @@ const DiscussionListCardWidget = ({
     if (url === "") {
       return;
     }
+    setLoading(true);
+
     get<ICommentListResponse>(url)
       .then((json) => {
         console.log(json);
@@ -74,6 +78,9 @@ const DiscussionListCardWidget = ({
           message.error(json.message);
         }
       })
+      .finally(() => {
+        setLoading(false);
+      })
       .catch((e) => {
         message.error(e.message);
       });
@@ -89,8 +96,11 @@ const DiscussionListCardWidget = ({
 
   return (
     <Card title="讨论" extra={"More"}>
-      {data.length > 0 ? (
+      {loading ? (
+        <Skeleton title={{ width: 200 }} paragraph={{ rows: 1 }} active />
+      ) : (
         <DiscussionList
+          data={data}
           onSelect={(
             e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
             comment: IComment
@@ -99,9 +109,16 @@ const DiscussionListCardWidget = ({
               onSelect(e, comment);
             }
           }}
-          data={data}
+          onDelete={(id: string) => {
+            setData((origin) => {
+              return origin.filter((value) => value.id !== id);
+            });
+            if (typeof onItemCountChange !== "undefined") {
+              onItemCountChange(data.length - 1);
+            }
+          }}
         />
-      ) : undefined}
+      )}
 
       {resId && resType ? (
         <CommentCreate
@@ -110,7 +127,6 @@ const DiscussionListCardWidget = ({
           resType={resType}
           onCreated={(e: IComment) => {
             const newData = JSON.parse(JSON.stringify(e));
-            console.log("create", e);
             if (typeof onItemCountChange !== "undefined") {
               onItemCountChange(data.length + 1);
             }

dashboard/src/components/discussion/DiscussionTopicChildren.tsx

@@ -1,4 +1,4 @@
-import { List, message } from "antd";
+import { List, message, Skeleton } from "antd";
 import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import { get } from "../../request";
@@ -16,16 +16,20 @@ const DiscussionTopicChildrenWidget = ({
   onItemCountChange,
 }: IWidget) => {
   const intl = useIntl();
-  const [data, setData] = useState<IComment[]>();
+  const [data, setData] = useState<IComment[]>([]);
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     if (typeof topicId === "undefined") {
       return;
     }
+    setLoading(true);
+
     get<ICommentListResponse>(`/v2/discussion?view=answer&id=${topicId}`)
       .then((json) => {
         console.log(json);
         if (json.ok) {
-          console.log(intl.formatMessage({ id: "flashes.success" }));
+          console.log("ok", json.data);
           const discussions: IComment[] = json.data.rows.map((item) => {
             return {
               id: item.id,
@@ -44,43 +48,54 @@ const DiscussionTopicChildrenWidget = ({
           message.error(json.message);
         }
       })
+      .finally(() => {
+        setLoading(false);
+      })
       .catch((e) => {
         message.error(e.message);
       });
   }, [intl, topicId]);
   return (
     <div>
-      <List
-        pagination={{
-          onChange: (page) => {
-            console.log(page);
-          },
-          pageSize: 10,
-        }}
-        itemLayout="horizontal"
-        dataSource={data}
-        renderItem={(item) => (
-          <List.Item>
-            <DiscussionItem data={item} />
-          </List.Item>
-        )}
-      />
+      {loading ? (
+        <Skeleton title={{ width: 200 }} paragraph={{ rows: 1 }} active />
+      ) : (
+        <List
+          pagination={{
+            onChange: (page) => {
+              console.log(page);
+            },
+            pageSize: 10,
+          }}
+          itemLayout="horizontal"
+          dataSource={data}
+          renderItem={(item) => (
+            <List.Item>
+              <DiscussionItem
+                data={item}
+                onDelete={() => {
+                  console.log("delete", item.id, data);
+                  if (typeof onItemCountChange !== "undefined") {
+                    onItemCountChange(data.length - 1, item.parent);
+                  }
+                  setData((origin) => {
+                    return origin.filter((value) => value.id !== item.id);
+                  });
+                }}
+              />
+            </List.Item>
+          )}
+        />
+      )}
       <DiscussionCreate
         contentType="markdown"
         parent={topicId}
         onCreated={(e: IComment) => {
           console.log("create", e);
           const newData = JSON.parse(JSON.stringify(e));
-          let count = 0;
-          if (typeof data === "undefined") {
-            count = 1;
-            setData([newData]);
-          } else {
-            count = data.length + 1;
-            setData([...data, newData]);
-          }
+          setData([...data, newData]);
           if (typeof onItemCountChange !== "undefined") {
-            onItemCountChange(count, e.parent);
+            onItemCountChange(data.length + 1, e.parent);
           }
         }}
       />