refactor(pages): Using flat components in the RoomDetailPage and Peri…

…odicRoomDetailPage. (#659)

desktop/renderer-app/src/apiMiddleware/flatServer/index.ts

@@ -284,7 +284,7 @@ interface CancelPeriodicRoomPayload {
     periodicUUID: string;
 }
 
-function cancelPeriodicRoom(periodicUUID: string): Promise<CancelPeriodicRoomResult> {
+export function cancelPeriodicRoom(periodicUUID: string): Promise<CancelPeriodicRoomResult> {
     return post<CancelPeriodicRoomPayload, CancelPeriodicRoomResult>("room/cancel/periodic", {
         periodicUUID,
     });
@@ -297,7 +297,7 @@ interface CancelPeriodicSubRoomPayload {
     periodicUUID: string;
 }
 
-function cancelPeriodicSubRoom(
+export function cancelPeriodicSubRoom(
     payload: CancelPeriodicSubRoomPayload,
 ): Promise<CancelPeriodicSubRoomResult> {
     return post<CancelPeriodicSubRoomPayload, CancelPeriodicSubRoomResult>(

desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less

@@ -0,0 +1,22 @@
+.periodic-room-detail-page-header-container {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1;
+    margin: 0 24px;
+    background: #fff;
+}
+
+.periodic-room-detail-page-header-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #444e60;
+    line-height: 1;
+}
+
+.periodic-room-detail-page-panel-container {
+    width: 560px;
+    margin: 0 auto;
+    margin-top: 65px;
+}

desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.tsx

@@ -0,0 +1,157 @@
+import "./index.less";
+
+import { clipboard } from "electron";
+import { MainPageHeader, PeriodicRoomPanel } from "flat-components";
+import { observer } from "mobx-react-lite";
+import React, { useContext, useEffect, useState } from "react";
+import { useHistory, useParams } from "react-router-dom";
+import { useLastLocation } from "react-router-last-location";
+import { MainPageLayoutContainer } from "../../components/MainPageLayoutContainer";
+import { RoomStoreContext } from "../../components/StoreProvider";
+import { errorTips } from "../../components/Tips/ErrorTips";
+import LoadingPage from "../../LoadingPage";
+import { globalStore } from "../../stores/GlobalStore";
+import { useWindowSize } from "../../utils/hooks/useWindowSize";
+import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
+import { cancelPeriodicRoom, cancelPeriodicSubRoom } from "../../apiMiddleware/flatServer";
+import { message } from "antd";
+
+export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPage() {
+    useWindowSize("Main");
+
+    const params = useParams<RouteParams<RouteNameType.PeriodicRoomDetailPage>>();
+    const roomStore = useContext(RoomStoreContext);
+    const [cancelRoomUUIDList, setCancelRoomUUIDList] = useState<string[]>([]);
+    const history = useHistory();
+    const pushHistory = usePushHistory();
+    const previousPage = useLastLocation();
+
+    const { periodicUUID } = params;
+
+    const periodicInfo = roomStore.periodicRooms.get(periodicUUID);
+    const rooms = periodicInfo?.rooms
+        .filter(roomUUID => !cancelRoomUUIDList.includes(roomUUID))
+        .map(roomUUID => roomStore.rooms.get(roomUUID));
+
+    useEffect(() => {
+        roomStore.syncPeriodicRoomInfo(periodicUUID).catch(errorTips);
+    }, [periodicUUID, roomStore]);
+
+    if (!periodicInfo || !rooms) {
+        return <LoadingPage />;
+    }
+
+    const { title, ownerUUID, ownerUserName } = periodicInfo.periodic;
+
+    const isCreator = globalStore.userUUID === ownerUUID;
+
+    // if the room has been cancelled and return to the previous page, an error will be reported
+    const backPreviousPage = (): void => {
+        if (!previousPage?.pathname) {
+            return pushHistory(RouteNameType.HomePage);
+        }
+
+        const previousRouterContainRemoveRoomUUID = cancelRoomUUIDList.some(roomUUID => {
+            return previousPage.pathname.includes(roomUUID);
+        });
+
+        if (previousRouterContainRemoveRoomUUID) {
+            return pushHistory(RouteNameType.HomePage);
+        }
+
+        history.goBack();
+    };
+
+    const onCancelSubPeriodicRoom = async (
+        roomUUID: string,
+        periodicUUID: string,
+    ): Promise<void> => {
+        if (roomUUID) {
+            try {
+                await cancelPeriodicSubRoom({ roomUUID, periodicUUID });
+
+                const nextList = [...cancelRoomUUIDList, roomUUID];
+                const nextRooms = rooms.filter(room => {
+                    return room && !nextList.includes(room.roomUUID);
+                });
+
+                void message.success("已取消该房间");
+
+                if (nextRooms.length === 0) {
+                    pushHistory(RouteNameType.HomePage);
+                } else {
+                    setCancelRoomUUIDList(nextList);
+                }
+            } catch (err) {
+                console.log(err);
+                errorTips(err);
+            }
+        }
+    };
+
+    async function onCancelPeriodicRoom(): Promise<void> {
+        try {
+            if (periodicInfo) {
+                await cancelPeriodicRoom(periodicUUID);
+            }
+        } catch (err) {
+            errorTips(err);
+        }
+
+        pushHistory(RouteNameType.HomePage);
+        await message.success("已取消该房间");
+    }
+
+    function jumpToRoomDetailPage(roomUUID: string, periodicUUID: string): void {
+        pushHistory(RouteNameType.RoomDetailPage, {
+            periodicUUID,
+            roomUUID,
+        });
+    }
+
+    function jumpToModifyOrdinaryRoomPage(roomUUID: string, periodicUUID: string): void {
+        pushHistory(RouteNameType.ModifyOrdinaryRoomPage, {
+            periodicUUID,
+            roomUUID,
+        });
+    }
+
+    function jumpToModifyPeriodicRoomPage(): void {
+        if (periodicInfo) {
+            pushHistory(RouteNameType.ModifyPeriodicRoomPage, {
+                periodicUUID,
+            });
+        }
+    }
+
+    return (
+        <MainPageLayoutContainer>
+            <div className="periodic-room-detail-page-container">
+                <div className="periodic-room-detail-page-header-container">
+                    <MainPageHeader
+                        title={
+                            <>
+                                <h1 className="periodic-room-detail-page-header-title">{title}</h1>
+                            </>
+                        }
+                        onBackPreviousPage={backPreviousPage}
+                    />
+                </div>
+                <div className="periodic-room-detail-page-panel-container fancy-scrollbar">
+                    <PeriodicRoomPanel
+                        rooms={rooms}
+                        userName={ownerUserName}
+                        isCreator={isCreator}
+                        periodicInfo={periodicInfo.periodic}
+                        onCopyInvitation={text => clipboard.writeText(text)}
+                        onCancelPeriodicRoom={onCancelPeriodicRoom}
+                        onCancelSubPeriodicRoom={onCancelSubPeriodicRoom}
+                        jumpToRoomDetailPage={jumpToRoomDetailPage}
+                        jumpToModifyOrdinaryRoomPage={jumpToModifyOrdinaryRoomPage}
+                        jumpToModifyPeriodicRoomPage={jumpToModifyPeriodicRoomPage}
+                    />
+                </div>
+            </div>
+        </MainPageLayoutContainer>
+    );
+});