[3941] Rollback showOnlyChanges and accordionView from Context as the…

…y can't be shared between dialog and slideouts
craftercms · Oct 9, 2024 · 738f716 · 738f716
1 parent 56d6c3b
commit 738f716
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 17 deletions.
diff --git a/ui/app/src/components/CompareVersionsDialog/CompareVersionsDialogContainer.tsx b/ui/app/src/components/CompareVersionsDialog/CompareVersionsDialogContainer.tsx
@@ -47,7 +47,6 @@ import { initialFieldViewState, useVersionsDialogContext, VersionsDialogContextP
 import { ContentTypeField } from '../../models';
 import { getCompareVersionDialogViewModes, setCompareVersionDialogViewModes } from '../../utils/state';
 import useActiveUser from '../../hooks/useActiveUser';
-import useMount from '../../hooks/useMount';
 import TextDiffView from './FieldsTypesDiffViews/TextDiffView';
 
 export function CompareVersionsDialogContainer(props: CompareVersionsDialogContainerProps) {
@@ -60,14 +59,17 @@ export function CompareVersionsDialogContainer(props: CompareVersionsDialogConta
     contentTypesBranch,
     compareXml
   } = props;
-  const [{ fieldsViewState, showOnlyChanges, accordionView }, contextApiRef] = useVersionsDialogContext();
+  const [{ fieldsViewState }] = useVersionsDialogContext();
   const fieldsViewStateRef = useRef<VersionsDialogContextProps['fieldsViewState']>();
   fieldsViewStateRef.current = fieldsViewState;
   const compareVersionsBranch = versionsBranch?.compareVersionsBranch;
   const item = versionsBranch?.item;
   const baseUrl = useSelection<string>((state) => state.env.authoringBase);
   const { formatMessage } = useIntl();
   const { username } = useActiveUser();
+  const viewModes = getCompareVersionDialogViewModes(username);
+  const [showOnlyChanges, setShowOnlyChanges] = useState<boolean>(viewModes?.entireDiff ?? true);
+  const [accordionView, setAccordionView] = useState<boolean>(viewModes?.accordionView ?? false);
   const [selectionContent, setSelectionContent] = useSpreadState<{
     a: SelectionContentVersion;
     b: SelectionContentVersion;
@@ -141,14 +143,6 @@ export function CompareVersionsDialogContainer(props: CompareVersionsDialogConta
   const sidebarRefs = useRef({});
   const fieldsRefs = useRef({});
 
-  useMount(() => {
-    const viewModes = getCompareVersionDialogViewModes(username);
-    contextApiRef.current.setState({
-      showOnlyChanges: viewModes?.entireDiff ?? true,
-      accordionView: viewModes?.accordionView ?? false
-    });
-  });
-
   useEffect(() => {
     if (preFetchedContent) {
       setSelectionContent(preFetchedContent);
@@ -207,12 +201,12 @@ export function CompareVersionsDialogContainer(props: CompareVersionsDialogConta
   };
 
   const onToggleShowOnlyChanges = () => {
-    contextApiRef.current.setState({ showOnlyChanges: !showOnlyChanges });
+    setShowOnlyChanges(!showOnlyChanges);
     setCompareVersionDialogViewModes(username, { entireDiff: !showOnlyChanges, accordionView });
   };
 
   const onSetAccordionView = (value: boolean) => {
-    contextApiRef.current.setState({ accordionView: value });
+    setAccordionView(value);
     setCompareVersionDialogViewModes(username, { entireDiff: showOnlyChanges, accordionView: value });
   };
 

diff --git a/ui/app/src/components/CompareVersionsDialog/VersionsDialogContext.tsx b/ui/app/src/components/CompareVersionsDialog/VersionsDialogContext.tsx
@@ -34,8 +34,6 @@ export interface VersionsDialogContextProps {
   viewSlideOutState: ViewVersionDialogProps;
   fieldsViewState: LookupTable<FieldViewState>;
   contentType: ContentType;
-  showOnlyChanges: boolean;
-  accordionView: boolean;
 }
 
 export const initialFieldViewState = {
@@ -55,9 +53,7 @@ export const dialogInitialState: VersionsDialogContextProps = {
   compareSlideOutState: { open: false, isFetching: false, error: null },
   viewSlideOutState: { open: false, isFetching: false, error: null },
   fieldsViewState: {},
-  contentType: null,
-  showOnlyChanges: true,
-  accordionView: false
+  contentType: null
 };
 
 export interface VersionsDialogContextApi {