...

4 files changed, 27 insertions, 19 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/TimelineMember.tsx b/FrontEnd/src/app/views/timeline-common/TimelineMember.tsx
index dd8c7389..51512f15 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineMember.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineMember.tsx
@@ -46,9 +46,10 @@ const TimelineMemberItem: React.FC<{
   );
 };
 
-const TimelineMemberUserSearch: React.FC<{ timeline: HttpTimelineInfo }> = ({
-  timeline,
-}) => {
+const TimelineMemberUserSearch: React.FC<{
+  timeline: HttpTimelineInfo;
+  onChange: () => void;
+}> = ({ timeline, onChange }) => {
   const { t } = useTranslation();
 
   const [userSearchText, setUserSearchText] = useState<string>("");
@@ -120,6 +121,7 @@ const TimelineMemberUserSearch: React.FC<{ timeline: HttpTimelineInfo }> = ({
                         .then(() => {
                           setUserSearchText("");
                           setUserSearchState({ type: "init" });
+                          onChange();
                         });
                     }}
                   />
@@ -139,14 +141,13 @@ const TimelineMemberUserSearch: React.FC<{ timeline: HttpTimelineInfo }> = ({
   );
 };
 
-// TODO: Trigger resync.
-
 export interface TimelineMemberProps {
   timeline: HttpTimelineInfo;
+  onChange: () => void;
 }
 
 const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
-  const { timeline } = props;
+  const { timeline, onChange } = props;
   const members = [timeline.owner, ...timeline.members];
 
   return (
@@ -159,10 +160,9 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
             onAction={
               timeline.manageable && index !== 0
                 ? () => {
-                    void getHttpTimelineClient().memberDelete(
-                      timeline.name,
-                      member.username
-                    );
+                    void getHttpTimelineClient()
+                      .memberDelete(timeline.name, member.username)
+                      .then(onChange);
                   }
                 : undefined
             }
@@ -170,7 +170,7 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
         ))}
       </ListGroup>
       {timeline.manageable ? (
-        <TimelineMemberUserSearch timeline={timeline} />
+        <TimelineMemberUserSearch timeline={timeline} onChange={onChange} />
       ) : null}
     </Container>
   );
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index caab1768..6a8dd63c 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -16,12 +16,14 @@ export interface TimelinePageTemplateProps<TManageItem> {
     Omit<TimelinePageTemplateUIProps<TManageItem>, "CardComponent">
   >;
   notFoundI18nKey: string;
+  reloadKey: number;
+  onReload: () => void;
 }
 
 export default function TimelinePageTemplate<TManageItem>(
   props: TimelinePageTemplateProps<TManageItem>
 ): React.ReactElement | null {
-  const { name } = props;
+  const { name, reloadKey, onReload } = props;
 
   const [dialog, setDialog] = React.useState<null | "property" | "member">(
     null
@@ -68,7 +70,7 @@ export default function TimelinePageTemplate<TManageItem>(
     return () => {
       subscribe = false;
     };
-  }, [name]);
+  }, [name, reloadKey]);
 
   let dialogElement: React.ReactElement | undefined;
   const closeDialog = (): void => setDialog(null);
@@ -85,6 +87,7 @@ export default function TimelinePageTemplate<TManageItem>(
         open
         close={closeDialog}
         timeline={timeline}
+        onChange={onReload}
       />
     );
   } else if (dialog === "member") {
@@ -95,7 +98,12 @@ export default function TimelinePageTemplate<TManageItem>(
     }
 
     dialogElement = (
-      <TimelineMemberDialog open onClose={closeDialog} timeline={timeline} />
+      <TimelineMemberDialog
+        open
+        onClose={closeDialog}
+        timeline={timeline}
+        onChange={onReload}
+      />
     );
   }
 
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 48263486..56be8cfe 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -134,7 +134,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
               className="fixed-bottom"
               timeline={timeline}
               onHeightChange={onPostEditHeightChange}
-              timelineUniqueId={timeline.uniqueId}
             />
           </>
         ) : null}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index b99ec267..a5628a9a 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -10,12 +10,11 @@ import {
 
 import OperationDialog from "../common/OperationDialog";
 
-// TODO: Trigger resync.
-
 export interface TimelinePropertyChangeDialogProps {
   open: boolean;
   close: () => void;
   timeline: HttpTimelineInfo;
+  onChange: () => void;
 }
 
 const labelMap: { [key in TimelineVisibility]: string } = {
@@ -27,7 +26,7 @@ const labelMap: { [key in TimelineVisibility]: string } = {
 const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> = (
   props
 ) => {
-  const { timeline } = props;
+  const { timeline, onChange } = props;
 
   return (
     <OperationDialog
@@ -66,7 +65,9 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
         if (newDescription !== timeline.description) {
           req.description = newDescription;
         }
-        return getHttpTimelineClient().patchTimeline(timeline.name, req);
+        return getHttpTimelineClient()
+          .patchTimeline(timeline.name, req)
+          .then(onChange);
       }}
     />
   );