Skip to content

Commit

Permalink
Set layouts as empty array if not loaded yet
Browse files Browse the repository at this point in the history
  • Loading branch information
standeren committed Oct 19, 2023
1 parent bd3b60c commit 14b2c03
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 20 deletions.
6 changes: 3 additions & 3 deletions frontend/packages/ux-editor/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ export function App() {

useEffect(() => {
if (
areLayoutSetsFetched &&
selectedLayoutSetInPreview &&
(!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSetInPreview))
areLayoutSetsFetched &&
selectedLayoutSetInPreview &&
(!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSetInPreview))
)
removeSelectedLayoutSetInPreview();
}, [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export const Elements = () => {
const selectedLayout: string = useSelector(selectedLayoutNameSelector);
const selectedLayoutSet: string = useSelector(selectedLayoutSetSelector);
const layoutSetsQuery = useLayoutSetsQuery(org, app);
const formLayoutSettingsQuery = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
const { receiptLayoutName } = formLayoutSettingsQuery.data;
const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
const receiptName = formLayoutSettings?.receiptLayoutName;
const layoutSetNames = layoutSetsQuery?.data?.sets;

const hideComponents = selectedLayout === 'default' || selectedLayout === undefined;
Expand Down Expand Up @@ -56,7 +56,7 @@ export const Elements = () => {
<Paragraph className={classes.noPageSelected} size='small'>
{t('left_menu.no_components_selected')}
</Paragraph>
) : receiptLayoutName === selectedLayout ? (
) : receiptName === selectedLayout ? (
<ConfPageToolbar />
) : (
<DefaultToolbar />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,48 +20,46 @@ import { setSelectedLayoutInLocalStorage } from '../../utils/localStorageUtils';
import { PageAccordion } from './PageAccordion';
import { RenderedFormContainer } from './RenderedFormContainer';
import { ReceiptContent } from './ReceiptContent';
import {PageSpinner} from "app-shared/components";

/**
* @component
* Displays the column containing accordions with componnets for each page
* Displays the column containing accordions with components for each page
*
* @returns {ReactNode} - The rendered component
*/
export const DesignView = (): ReactNode => {
const dispatch = useDispatch();
const { org, app } = useStudioUrlParams();
const selectedLayoutSet: string = useSelector(selectedLayoutSetSelector);
const addLayoutMutation = useAddLayoutMutation(org, app, selectedLayoutSet);
const { data: layouts } = useFormLayoutsQuery(org, app, selectedLayoutSet);

const { data: instanceId } = useInstanceIdQuery(org, app);
const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
const formLayoutSettingsQuery = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
const receiptName = formLayoutSettingsQuery.data.receiptLayoutName;

const layoutOrder = formLayoutSettingsQuery.data.pages.order;

const receiptName = formLayoutSettings?.receiptLayoutName;
const layoutOrder = formLayoutSettings?.pages.order;

const [searchParams, setSearchParams] = useSearchParams();
const searchParamsLayout = searchParams.get('layout');
const [openAccordion, setOpenAccordion] = useState(searchParamsLayout);

const { t } = useTranslation();

const addLayoutMutation = useAddLayoutMutation(org, app, selectedLayoutSet);

const [openAccordion, setOpenAccordion] = useState(searchParamsLayout);

/**
* Maps the IFormLayouts object to a list of FormLayouts
*/
const mapIFormLayoutsToFormLayouts = (iFormLayouts: IFormLayouts): FormLayout[] => {
if (!layouts) return [];
return Object.entries(iFormLayouts).map(([key, value]) => ({
page: key,
data: value,
}));
};

const [formLayoutData, setFormLayoutData] = useState<FormLayout[]>(mapIFormLayoutsToFormLayouts(layouts));

const [formLayoutData, setFormLayoutData] = useState<FormLayout[]>(
mapIFormLayoutsToFormLayouts(layouts),
);
const designViewIsReady = formLayoutData && formLayoutSettings;

useEffect(() => {
setOpenAccordion(searchParamsLayout);
Expand Down Expand Up @@ -133,7 +131,7 @@ export const DesignView = (): ReactNode => {
* Displays the pages as an ordered list
*/
const displayPageAccordions = layoutOrder.map((pageName, i) => {
const layout = formLayoutData.find((formLayout) => formLayout.page === pageName);
const layout = formLayoutData?.find((formLayout) => formLayout.page === pageName);

// If the layout does not exist, return null
if (layout === undefined) return null;
Expand All @@ -159,6 +157,8 @@ export const DesignView = (): ReactNode => {
);
});

if (!designViewIsReady) return <PageSpinner/>

return (
<div className={classes.root}>
<div>
Expand Down

0 comments on commit 14b2c03

Please sign in to comment.