refactor(front): Fix #104 .

3 files changed, 10 insertions, 9 deletions

diff --git a/Timeline/ClientApp/src/app/data/timeline.ts b/Timeline/ClientApp/src/app/data/timeline.ts
index 19bb3d45..a8875701 100644
--- a/Timeline/ClientApp/src/app/data/timeline.ts
+++ b/Timeline/ClientApp/src/app/data/timeline.ts
@@ -20,6 +20,7 @@ export const timelineVisibilityTooltipTranslationMap: Record<
 };
 
 export interface TimelineInfo {
+  uniqueId: string;
   name: string;
   description: string;
   owner: User;
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index 66935e00..924e7883 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -26,7 +26,7 @@ export interface TimelineCardComponentProps<TTimeline, TManageItems> {
 }
 
 export interface TimelinePageTemplateUIProps<
-  TTimeline extends { name: string },
+  TTimeline extends { uniqueId: string },
   TManageItems
 > {
   avatarKey?: string | number;
@@ -43,7 +43,7 @@ export interface TimelinePageTemplateUIProps<
 }
 
 export default function TimelinePageTemplateUI<
-  TTimeline extends { name: string },
+  TTimeline extends { uniqueId: string },
   TEditItems
 >(
   props: TimelinePageTemplateUIProps<TTimeline, TEditItems>
@@ -127,11 +127,11 @@ export default function TimelinePageTemplateUI<
 
   const [cardHeight, setCardHeight] = React.useState<number>(0);
 
-  const genCardCollapseLocalStorageKey = (timelineName: string): string =>
-    `timeline.${timelineName}.cardCollapse`;
+  const genCardCollapseLocalStorageKey = (uniqueId: string): string =>
+    `timeline.${uniqueId}.cardCollapse`;
 
   const cardCollapseLocalStorageKey =
-    timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;
+    timeline != null ? genCardCollapseLocalStorageKey(timeline.uniqueId) : null;
 
   const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(true);
   React.useEffect(() => {
@@ -171,7 +171,7 @@ export default function TimelinePageTemplateUI<
                 <TimelinePostEdit
                   onPost={props.onPost}
                   onHeightChange={onPostEditHeightChange}
-                  timelineName={timeline.name}
+                  timelineUniqueId={timeline.uniqueId}
                 />
               </>
             );
@@ -202,7 +202,7 @@ export default function TimelinePageTemplateUI<
                 const newState = !infoCardCollapse;
                 setInfoCardCollapse(newState);
                 window.localStorage.setItem(
-                  genCardCollapseLocalStorageKey(timeline.name),
+                  genCardCollapseLocalStorageKey(timeline.uniqueId),
                   newState.toString()
                 );
               }}
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
index d1c09036..894d6ad4 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
@@ -86,7 +86,7 @@ export interface TimelinePostEditProps {
   className?: string;
   onPost: TimelinePostSendCallback;
   onHeightChange?: (height: number) => void;
-  timelineName: string;
+  timelineUniqueId: string;
 }
 
 const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
@@ -99,7 +99,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   const [text, setText] = React.useState<string>('');
   const [imageBlob, setImageBlob] = React.useState<Blob | null>(null);
 
-  const draftLocalStorageKey = `timeline.${props.timelineName}.postDraft`;
+  const draftLocalStorageKey = `timeline.${props.timelineUniqueId}.postDraft`;
 
   React.useEffect(() => {
     setText(window.localStorage.getItem(draftLocalStorageKey) ?? '');