enforce loading of modals to not display outdated data

nerdgeschoss · Jan 16, 2025 · 316b620 · 316b620
1 parent e86a238
commit 316b620
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 14 deletions.
diff --git a/app/frontend/components/modal/modal.tsx b/app/frontend/components/modal/modal.tsx
@@ -153,7 +153,7 @@ export function ModalWrapper({
                 onClose={() => closeId(modal.id)}
                 large={modal.large}
               >
-                <Frame url={modal.url} />
+                <Frame url={modal.url} awaitLoading />
               </Modal>
             </ModalInfoContext.Provider>
           ))}

diff --git a/app/frontend/sprinkles/frame.tsx b/app/frontend/sprinkles/frame.tsx
@@ -4,27 +4,30 @@ import { useReaction } from './reaction';
 
 interface Props {
   url: string;
+  awaitLoading?: boolean;
 }
 
 interface State {
   data: unknown;
   component: FunctionComponent<{ data: unknown }> | null;
 }
 
-export function Frame({ url }: Props): JSX.Element | null {
+export function Frame({ url, awaitLoading }: Props): JSX.Element | null {
   const reaction = useReaction();
   const [state, setComponentState] = useState<State | null>(null);
   useEffect(() => {
     let subscription: MetaCacheSubscription | null = null;
-    reaction.history.cache.fetch(url).then((meta) => {
-      const data = meta.meta.props;
-      reaction.componentFor(meta.meta.component).then((component) => {
-        setComponentState({ data, component });
-        subscription = reaction.history.cache.subscribe(url, (newData) => {
-          setComponentState({ data: newData, component });
+    reaction.history.cache
+      .fetch(url, { force: awaitLoading })
+      .then((result) => {
+        const data = result.meta.props;
+        reaction.componentFor(result.meta.component).then((component) => {
+          setComponentState({ data, component });
+          subscription = reaction.history.cache.subscribe(url, (newData) => {
+            setComponentState({ data: newData, component });
+          });
         });
       });
-    });
     return () => {
       subscription?.unsubscribe();
     };

diff --git a/app/frontend/sprinkles/meta_cache.ts b/app/frontend/sprinkles/meta_cache.ts
@@ -9,8 +9,11 @@ export class MetaCache {
   private cache = new Map<string, Meta>();
   private subscriptions = new Map<string, MetaCacheSubscription[]>();
 
-  async fetch(url: string): Promise<CacheResult> {
-    if (this.cache.has(url)) {
+  async fetch(
+    url: string,
+    { force }: { force?: boolean } = {}
+  ): Promise<CacheResult> {
+    if (!force && this.cache.has(url)) {
       return { meta: this.cache.get(url)!, fresh: false };
     }
     return { meta: await this.refresh(url), fresh: true };

diff --git a/app/views/sprint_feedbacks/edit_retro.tsx b/app/views/sprint_feedbacks/edit_retro.tsx
@@ -4,8 +4,8 @@ import { useTranslate } from '../../frontend/util/dependencies';
 import { handleError } from '../../frontend/util/errors';
 import { Stack } from '../../frontend/components/stack/stack';
 import { Button } from '../../frontend/components/button/button';
+import { TextArea } from '../../frontend/components/text_area/text_area';
 import { useForm } from '@nerdgeschoss/react-use-form-library';
-import { TextField } from '../../frontend/components/text_field/text_field';
 import { useReaction } from '../../frontend/sprinkles/reaction';
 import { useModalInfo } from '../../frontend/components/modal/modal';
 import { NumberField } from '../../frontend/components/number_field/number_field';
@@ -60,7 +60,7 @@ export default function ({
             {...fields.retroRating}
             label={t('sprint_feedbacks.edit_retro.rating')}
           />
-          <TextField
+          <TextArea
             {...fields.retroText}
             label={t('sprint_feedbacks.edit_retro.text')}
           />

diff --git a/app/views/sprint_feedbacks/show.tsx b/app/views/sprint_feedbacks/show.tsx
@@ -73,7 +73,9 @@ export default function ({
                 <Text multiline>{feedback.retroText}</Text>
                 {feedback.permitEditRetroNotes && (
                   <Button
-                    title="leave feedback"
+                    title={
+                      feedback.retroText ? 'edit feedback' : 'leave feedback'
+                    }
                     onClick={() =>
                       modal.present(
                         `/en/sprint_feedbacks/${feedback.id}/edit_retro`