mtdb_movie/common/resources/client/admin/appearance/appearance-layout.tsx

import {Link, Navigate, Outlet, useLocation} from 'react-router-dom';
import {useEffect, useRef} from 'react';
import {IconButton} from '../../ui/buttons/icon-button';
import {CloseIcon} from '../../icons/material/Close';
import {Button} from '../../ui/buttons/button';
import {appearanceState, AppearanceValues} from './appearance-store';
import {useSaveAppearanceChanges} from './requests/save-appearance-changes';
import {useAppearanceValues} from './requests/appearance-values';
import {Trans} from '../../i18n/trans';
import {useForm, useFormContext} from 'react-hook-form';
import {Form} from '../../ui/forms/form';
import {ProgressCircle} from '../../ui/progress/progress-circle';
import {SectionHeader} from './section-header';
import {FileUploadProvider} from '../../uploads/uploader/file-upload-provider';
import {useAppearanceEditorMode} from './commands/use-appearance-editor-mode';
import {StaticPageTitle} from '../../seo/static-page-title';
import {useSettings} from '../../core/settings/use-settings';

export function AppearanceLayout() {
  const {isAppearanceEditorActive} = useAppearanceEditorMode();
  const {data} = useAppearanceValues();
  const {base_url} = useSettings();
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const {pathname} = useLocation();

  useEffect(() => {
    // only set defaults snapshot once on route init
    if (data?.defaults && !appearanceState().defaults) {
      appearanceState().setDefaults(data.defaults);
    }
  }, [data]);

  useEffect(() => {
    if (iframeRef.current) {
      appearanceState().setIframeWindow(iframeRef.current.contentWindow!);
    }
  }, []);

  useEffect(() => {
    const sectionName = pathname.split('/')[3];
    appearanceState().preview.navigate(sectionName);
  }, [pathname]);

  // make sure appearance editor iframe can't be nested
  if (isAppearanceEditorActive) {
    return <Navigate to="/admin" />;
  }

  return (
    <div className="h-screen items-center md:flex">
      <StaticPageTitle>
        <Trans message="Appearance" />
      </StaticPageTitle>
      <Sidebar values={data?.values} />
      <div className="relative h-full flex-auto">
        <iframe
          ref={iframeRef}
          className="h-full w-full max-md:hidden"
          src={`${base_url}?appearanceEditor=true`}
        />
      </div>
    </div>
  );
}

interface SidebarProps {
  values: AppearanceValues | undefined;
}
function Sidebar({values}: SidebarProps) {
  const spinner = (
    <div className="flex h-full flex-auto items-center justify-center">
      <ProgressCircle isIndeterminate aria-label="Loading editor" />
    </div>
  );

  return (
    <div className="relative z-10 h-full w-full border-r bg shadow-lg @container md:w-320">
      {values ? <AppearanceForm defaultValues={values} /> : spinner}
    </div>
  );
}

interface AppearanceFormProps {
  defaultValues: AppearanceValues;
}

function AppearanceForm({defaultValues}: AppearanceFormProps) {
  const form = useForm<AppearanceValues>({defaultValues});
  const {watch, reset} = form;
  const saveChanges = useSaveAppearanceChanges();

  useEffect(() => {
    const subscription = watch(value => {
      appearanceState().preview.setValues(value as AppearanceValues);
    });
    return () => subscription.unsubscribe();
  }, [watch]);

  return (
    <Form
      className="flex h-full flex-col"
      form={form}
      onSubmit={values => {
        saveChanges.mutate(values, {
          onSuccess: () => reset(values),
        });
      }}
    >
      <Header isLoading={saveChanges.isPending} />
      <SectionHeader />
      <div className="flex-auto overflow-y-auto px-14 py-20">
        <FileUploadProvider>
          <Outlet />
        </FileUploadProvider>
      </div>
    </Form>
  );
}

interface HeaderProps {
  isLoading: boolean;
}
function Header({isLoading}: HeaderProps) {
  const {
    formState: {dirtyFields},
  } = useFormContext<AppearanceValues>();
  const isDirty = Object.keys(dirtyFields).length;
  return (
    <div className="flex h-50 flex-shrink-0 items-center border-b pr-10">
      <IconButton
        border="border-r"
        className="text-muted"
        elementType={Link}
        to=".."
      >
        <CloseIcon />
      </IconButton>
      <div className="pl-10">
        <Trans message="Appearance editor" />
      </div>
      <Button
        variant="flat"
        color="primary"
        className="ml-auto block"
        disabled={!isDirty || isLoading}
        type="submit"
      >
        {isDirty ? <Trans message="Save" /> : <Trans message="Saved" />}
      </Button>
    </div>
  );
}