feat:完成个人中心收藏页面分组

chentianlu666 · Oct 20, 2023 · a3f14b3 · a3f14b3
1 parent 60fb05a
commit a3f14b3
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 22 deletions.
diff --git a/CC98.Forum/AsyncActions/UserCenter/GetFavoritePosts.ts b/CC98.Forum/AsyncActions/UserCenter/GetFavoritePosts.ts
@@ -13,17 +13,19 @@ import * as Utility from "../../Utility";
 export const getFavoritePosts: ActionCreator<ThunkAction<Promise<Action>, RootState, void, RootAction>> = (
   page: number,
   order: number = 0,
+  group: number = 0,
   //TODO: 下面这段forceLoad基本可以干掉了，我检索了一下这个函数，强制load一直都是true
   forceLoad = false,
   keyword: string = ""
 ) => async (dispatch, getState) => {
+  console.log("getFavoritePosts", page, order, group, forceLoad, keyword);
   try {
     const from = (page - 1) * 10;
     let url = "";
     if (keyword) {
       url = `/topic/me/search-favorite?from=${from}&size=11&keyword=${keyword}`;
     } else {
-      url = `/topic/me/favorite?from=${from}&size=11&order=${order}`;
+      url = `/topic/me/favorite?from=${from}&size=11&order=${order}&groupid=${group}`;
     }
     dispatch(Actions.userCenterLoading());
     const userInfo = getState().userInfo;

diff --git a/CC98.Forum/Components/UserCenter/MyFavoritesPosts.tsx b/CC98.Forum/Components/UserCenter/MyFavoritesPosts.tsx
@@ -9,11 +9,13 @@ import Pager from "./Pager";
 import * as Actions from "../../Actions/UserCenter";
 import { connect } from "react-redux";
 import { RootState, RootAction } from "../../Store";
-import { Select, Input } from "antd";
+import { Select, Input, Modal } from "antd";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 import { getFavoritePosts } from "../../AsyncActions/UserCenter";
 import { ThunkDispatch } from "redux-thunk";
 import Button from "antd/es/button";
+import { getFavoriteAllTopic } from "../../Utility";
+import { type } from "os";
 
 const { Search } = Input;
 const { Option } = Select;
@@ -23,13 +25,20 @@ type ownProps = {
   totalPage: number;
   hasTotal: boolean;
   isLoading: boolean;
-  getInfo: (page: number, order: number, forceLoad: boolean | undefined, keyword?: string) => void;
+  getInfo: (
+    page: number,
+    order: number,
+    group: number,
+    forceLoad: boolean | undefined,
+    keyword?: string
+  ) => void;
   changePage: () => void;
 };
 
 type ownMatch = {
   page: string;
   order: string;
+  group: string;
 };
 
 enum PostOrder {
@@ -38,6 +47,8 @@ enum PostOrder {
   FavorTime = 2, // 收藏时间
 }
 
+const defaultGroup = 0;
+
 type Props = RouteComponentProps<ownMatch> & ownProps;
 
 const parseSearch = (str: string) => {
@@ -51,42 +62,92 @@ const parseSearch = (str: string) => {
   return obj;
 };
 
+type FavoriteTopicGroupType = {
+  count: number;
+  createTime: string;
+  id: number;
+  name: string;
+};
+
+const defaultFavoriteTopicGroup: FavoriteTopicGroupType[] = [
+  {
+    id: 0,
+    name: "默认分组",
+    count: 10,
+    createTime: "1998-09-08T09:08:00+08:00",
+  },
+];
+
 /**
  * 用户中心我收藏的帖子组件
  */
 class Posts extends React.Component<Props> {
+  state = {
+    ModalText: "Content of the modal",
+    visible: false,
+    confirmLoading: false,
+    favoriteTopicList: defaultFavoriteTopicGroup,
+  };
   componentWillReceiveProps(newProps: Props) {
     if (
       this.props.match.params.page !== newProps.match.params.page ||
+      this.props.match.params.order !== newProps.match.params.order ||
       this.props.match.params.order !== newProps.match.params.order
     ) {
       const curPage = parseInt(newProps.match.params.page) || 1;
-      this.props.getInfo(curPage, Number(newProps.match.params.order), true, this.keyword);
+      this.props.getInfo(
+        curPage,
+        Number(newProps.match.params.order),
+        Number(newProps.match.params.group),
+        true,
+        this.keyword
+      );
       window.scroll(0, 0);
     }
   }
   keyword = "";
-  componentDidMount() {
+  async componentDidMount() {
     const curPage = Number(this.props.match.params.page || "1");
     const order = Number(this.props.match.params.order);
+    const group = Number(this.props.match.params.group || "0");
     const keyword = this.getkeyword();
     // 手动输入企图搜索且排序时重定向
     if (order !== PostOrder.LastReply && keyword !== "") {
-      this.props.history.replace(`/usercenter/myfavorites/order/0/1?keyword=${keyword}`);
+      this.props.history.replace(
+        `/usercenter/myfavorites/order/0/group/0/1?keyword=${keyword}`
+      );
     }
     this.keyword = keyword;
-    this.props.getInfo(curPage, order, true, this.keyword);
+    try {
+      let favoriteTopicList = await getFavoriteAllTopic();
+      console.log(favoriteTopicList);
+      this.setState({
+        favoriteTopicList:
+          favoriteTopicList.errorCode === 0
+            ? favoriteTopicList.data
+            : defaultFavoriteTopicGroup,
+      });
+    } catch (e) {
+      this.setState({ favoriteTopicList: defaultFavoriteTopicGroup });
+      console.log(e);
+    }
+    // favoriteTopicList.ok && this.setState({ favoriteTopicList: favoriteTopicList.body });
+    // console.log(favoriteTopicList.json());
+    this.props.getInfo(curPage, order,group, true, this.keyword);
     this.props.changePage();
   }
 
-  changeOrderAndKeyword = (order: number, keyword: string = "") => {
+  changeGroupAndOrderAndKeyword = (group:number,order: number, keyword: string = "") => {
+    console.log(group,order,keyword);
     if (keyword) {
-      this.props.getInfo(1, 0, true, keyword);
-      this.props.history.push(`/usercenter/myfavorites/order/0/1?keyword=${keyword}`);
+      this.props.getInfo(1, 0,0, true, keyword);
+      this.props.history.push(
+        `/usercenter/myfavorites/order/0/group/0/1?keyword=${keyword}`
+      );
     } else {
-      this.props.getInfo(1, order, true);
+      this.props.getInfo(1, order,group, true);
       this.keyword = "";
-      this.props.history.push(`/usercenter/myfavorites/order/${order}/1`);
+      this.props.history.push(`/usercenter/myfavorites/order/${order}/group/${group}/1`);
     }
   };
 
@@ -100,6 +161,32 @@ class Posts extends React.Component<Props> {
     }
   };
 
+  showModal = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  handleOk = () => {
+    this.setState({
+      ModalText: "The modal will be closed after two seconds",
+      confirmLoading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        visible: false,
+        confirmLoading: false,
+      });
+    }, 2000);
+  };
+
+  handleCancel = () => {
+    console.log("Clicked cancel button");
+    this.setState({
+      visible: false,
+    });
+  };
+
   render() {
     if (this.props.isLoading) {
       return (
@@ -129,22 +216,42 @@ class Posts extends React.Component<Props> {
       userRecentPosts.splice(i, 0, <hr key={i} />);
     }
     const order = Number(this.props.match.params.order);
+    const group = Number(this.props.match.params.group); 
 
     const handleSearch = (keyword: string) => {
       this.keyword = keyword;
-      this.changeOrderAndKeyword(order, keyword);
+      this.changeGroupAndOrderAndKeyword(defaultGroup,order, keyword);
     };
+    const { visible, confirmLoading, ModalText } = this.state;
+    console.log(this.state.favoriteTopicList);
+    const options = this.state.favoriteTopicList.map((item) => (
+      <Option key={item.id} value={item.id}>
+        {item.name}
+      </Option>
+    ));
     return (
       <div className="user-posts">
         <div className="user-post-operator">
+          <Select
+            value={group}
+            style={{
+              width: 180,
+              marginRight: 40,
+            }}
+            onChange={(value: number) => {
+              this.changeGroupAndOrderAndKeyword(value,order);
+            }}
+          >
+            {options}
+          </Select>
           <Select
             value={order}
             style={{
               width: 180,
               marginRight: 40,
             }}
             onChange={(value: number) => {
-              this.changeOrderAndKeyword(value);
+              this.changeGroupAndOrderAndKeyword(group,value);
             }}
           >
             <Option value={PostOrder.PostTime}>按发帖时间排序</Option>
@@ -155,14 +262,34 @@ class Posts extends React.Component<Props> {
             defaultValue={this.keyword}
             placeholder="输入关键词"
             onSearch={handleSearch}
-            style={{ width: 280 }}
+            style={{ width: 280, marginRight: 30 }}
             enterButton={
               <Button type="primary" style={{ width: 60 }}>
                 搜索
               </Button>
             }
           />
-          <div className="user-post-operator-tips">收藏搜索目前只能按照最后回复排序</div>
+          <Button
+            type="primary"
+            style={{ width: 80}}
+            onClick={this.showModal}
+          >
+            管理分组
+          </Button>
+          <Modal
+            title="Title"
+            visible={visible}
+            onOk={this.handleOk}
+            confirmLoading={confirmLoading}
+            onCancel={this.handleCancel}
+            key="FavoriteTopicManageModal"
+          >
+            <p>{ModalText}</p>
+          </Modal>
+          <br />
+          <div className="user-post-operator-tips">
+            收藏搜索目前只能按照最后回复排序
+          </div>
         </div>
         <hr />
         {this.props.currentUserFavoriteTopics.length === 0 ? (
@@ -198,8 +325,14 @@ function mapDispatch(dispatch: ThunkDispatch<RootState, void, RootAction>) {
     changePage: () => {
       dispatch(Actions.changeUserCenterPage("myfavoriteposts"));
     },
-    getInfo: (page: number, order: number, forceLoad: boolean | undefined, keyword = "") => {
-      dispatch(getFavoritePosts(page, order, forceLoad, keyword));
+    getInfo: (
+      page: number,
+      order: number,
+      group: number,
+      forceLoad: boolean | undefined,
+      keyword = ""
+    ) => {
+      dispatch(getFavoritePosts(page, order, group,forceLoad, keyword));
     },
   };
 }

diff --git a/CC98.Forum/Components/UserCenter/Router.tsx b/CC98.Forum/Components/UserCenter/Router.tsx
@@ -34,9 +34,9 @@ export default class extends React.Component {
           </Route>
         </Switch>
         <Switch>
-          <Route path="/usercenter/myfavorites/order/:order/:page?" exact component={MyFavoritesPosts} />
+          <Route path="/usercenter/myfavorites/order/:order/group/:group/:page?" exact component={MyFavoritesPosts} />
           <Route path="/usercenter/myfavorites">
-            <Redirect to="/usercenter/myfavorites/order/0" />
+            <Redirect to="/usercenter/myfavorites/order/0/group/0" />
           </Route>
         </Switch>
         <Route path="/usercenter/config" component={Config} />

diff --git a/CC98.Forum/Utility.tsx b/CC98.Forum/Utility.tsx
@@ -2781,12 +2781,28 @@ export async function setHighlight(
   }
   return "ok";
 }
-export async function setFavoriteTopic(topicId) {
+// export async function setFavoriteTopic(topicId) {
+//   const headers = await formAuthorizeHeader();
+//   const url = `/me/favorite/${topicId}`;
+//   const reponse = await cc98Fetch(url, { method: "PUT", headers });
+//   return "ok";
+// }
+//PUT 收藏帖子
+export async function setFavoriteTopic(topicId, groupId = 0) {
   const headers = await formAuthorizeHeader();
-  const url = `/me/favorite/${topicId}`;
+  const url = `/me/favorite/${topicId}?groupid=${groupId}`;
   const reponse = await cc98Fetch(url, { method: "PUT", headers });
   return "ok";
 }
+
+export async function getFavoriteAllTopic() {
+  const headers = await formAuthorizeHeader();
+  const url = `/me/favorite-topic-group`
+  const response = await cc98Fetch(url, { headers });
+  const data = await response.json();
+  return data;
+}
+
 export async function deleteFavoriteTopic(topicId) {
   const headers = await formAuthorizeHeader();
   const url = `/me/favorite/${topicId}`;