...

5 files changed, 38 insertions, 33 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
index b2b349bc..e62f76fa 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -10,7 +10,11 @@ import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
 import CollapseButton from "../timeline-common/CollapseButton";
 
 export interface TimelineCardTemplateProps
-  extends Omit<TimelineCardComponentProps<"">, "onManage" | "onMember"> {
+  extends Omit<TimelineCardComponentProps<"">, "operations"> {
+  operations: Pick<
+    TimelineCardComponentProps<"">["operations"],
+    "onHighlight" | "onBookmark"
+  >;
   infoArea: React.ReactElement;
   manageArea:
     | { type: "member"; onMember: () => void }
@@ -33,13 +37,13 @@ function TimelineCardTemplate({
   collapse,
   infoArea,
   manageArea,
-  onBookmark,
-  onHighlight,
+  operations,
   toggleCollapse,
   syncStatus,
   className,
 }: TimelineCardTemplateProps): React.ReactElement | null {
   const { t } = useTranslation();
+  const { onBookmark, onHighlight } = operations;
 
   return (
     <div className={clsx("cru-card p-2 clearfix", className)}>
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 35b31ec2..f66d14e0 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -110,7 +110,7 @@ export default function TimelinePageTemplate<TManageItem>(
             : undefined,
         }));
 
-        const others = {
+        const operations = {
           onPost: service.hasPostPermission(user, timeline)
             ? onPost
             : undefined,
@@ -189,20 +189,20 @@ export default function TimelinePageTemplate<TManageItem>(
         };
 
         if (type === "cache") {
-          return [{ timeline, posts, ...others }, "syncing"];
+          return [{ timeline, posts, operations }, "syncing"];
         } else if (type === "offline") {
-          return [{ timeline, posts, ...others }, "offline"];
+          return [{ timeline, posts, operations }, "offline"];
         } else {
           if (postListState == null) {
-            return [{ timeline, posts, ...others }, "syncing"];
+            return [{ timeline, posts, operations }, "syncing"];
           } else {
             const { type: postListType } = postListState;
             if (postListType === "synced") {
-              return [{ timeline, posts, ...others }, "synced"];
+              return [{ timeline, posts, operations }, "synced"];
             } else if (postListType === "cache") {
-              return [{ timeline, posts, ...others }, "syncing"];
+              return [{ timeline, posts, operations }, "syncing"];
             } else if (postListType === "offline") {
-              return [{ timeline, posts, ...others }, "offline"];
+              return [{ timeline, posts, operations }, "offline"];
             }
           }
         }
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 20ec6e43..b2824c84 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -13,14 +13,16 @@ import { TimelineSyncStatus } from "./SyncStatusBadge";
 
 export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
-  onManage?: (item: TManageItems | "property") => void;
-  onMember: () => void;
-  onBookmark?: () => void;
-  onHighlight?: () => void;
-  className?: string;
-  collapse: boolean;
   syncStatus: TimelineSyncStatus;
+  operations: {
+    onManage?: (item: TManageItems | "property") => void;
+    onMember: () => void;
+    onBookmark?: () => void;
+    onHighlight?: () => void;
+  };
+  collapse: boolean;
   toggleCollapse: () => void;
+  className?: string;
 }
 
 export interface TimelinePageTemplateUIProps<TManageItems> {
@@ -28,11 +30,13 @@ export interface TimelinePageTemplateUIProps<TManageItems> {
     | {
         timeline: TimelineInfo;
         posts?: TimelinePostInfoEx[];
-        onManage?: (item: TManageItems | "property") => void;
-        onMember: () => void;
-        onBookmark?: () => void;
-        onHighlight?: () => void;
-        onPost?: TimelinePostSendCallback;
+        operations: {
+          onManage?: (item: TManageItems | "property") => void;
+          onMember: () => void;
+          onBookmark?: () => void;
+          onHighlight?: () => void;
+          onPost?: TimelinePostSendCallback;
+        };
       }
     | I18nText;
   syncStatus: TimelineSyncStatus;
@@ -155,10 +159,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
           <CardComponent
             className="timeline-template-card"
             timeline={data.timeline}
-            onManage={data.onManage}
-            onMember={data.onMember}
-            onBookmark={data.onBookmark}
-            onHighlight={data.onHighlight}
+            operations={data.operations}
             syncStatus={syncStatus}
             collapse={cardCollapse}
             toggleCollapse={toggleCardCollapse}
@@ -180,7 +181,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
             <Spinner variant="primary" animation="grow" />
           </div>
         )}
-        {data != null && data.onPost != null ? (
+        {data != null && data.operations.onPost != null ? (
           <>
             <div
               style={{ height: bottomSpaceHeight }}
@@ -188,7 +189,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
             />
             <TimelinePostEdit
               className="fixed-bottom"
-              onPost={data.onPost}
+              onPost={data.operations.onPost}
               onHeightChange={onPostEditHeightChange}
               timelineUniqueId={data.timeline.uniqueId}
             />
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
index f4dbb67d..920f504d 100644
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
@@ -13,8 +13,8 @@ export type OrdinaryTimelineManageItem = "delete";
 export type TimelineInfoCardProps = TimelineCardComponentProps<OrdinaryTimelineManageItem>;
 
 const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const { onMember, onManage, ...otherProps } = props;
-  const { timeline } = props;
+  const { timeline, operations } = props;
+  const { onManage, onMember } = operations;
 
   const avatar = useAvatar(timeline?.owner?.username);
 
@@ -66,7 +66,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
           };
         }
       })()}
-      {...otherProps}
+      {...props}
     />
   );
 };
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index f31a939f..01d2c096 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -13,8 +13,8 @@ export type PersonalTimelineManageItem = "avatar" | "nickname";
 export type UserInfoCardProps = TimelineCardComponentProps<PersonalTimelineManageItem>;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const { onMember, onManage, ...otherProps } = props;
-  const { timeline } = props;
+  const { timeline, operations } = props;
+  const { onManage, onMember } = operations;
 
   const avatar = useAvatar(timeline?.owner?.username);
 
@@ -66,7 +66,7 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
           };
         }
       })()}
-      {...otherProps}
+      {...props}
     />
   );
 };