feat(SFT-68): displaying saved layout when loading existing forms

.php-cs-fixer.dist.php

@@ -1,7 +1,8 @@
 <?php
 
 $finder = PhpCsFixer\Finder::create()
-    ->in(__DIR__ . '/packages/plugin');
+    ->in(__DIR__ . '/packages/plugin')
+;
 
 return (new PhpCsFixer\Config())
     ->setRules([
@@ -20,4 +21,5 @@
         'ternary_to_null_coalescing' => true,
     ])
     ->setRiskyAllowed(true)
-    ->setFinder($finder);
+    ->setFinder($finder)
+;

packages/client/src/app/pages/forms/edit/builder/tabs/layout-editor/field-layout/cell/cell-types/cell-field/cell-field.tsx

@@ -17,13 +17,17 @@ export const CellField: React.FC<Props> = ({ uid }) => {
   const type = useFieldType(field?.typeClass);
   const dispatch = useAppDispatch();
 
+  if (field?.properties === undefined) {
+    return null;
+  }
+
   return (
     <CellFieldWrapper
       onClick={(): void => {
         dispatch(setFocusedItem({ type: FocusType.Field, uid }));
       }}
     >
-      <Label>{field.properties.label || type.name}</Label>
+      <Label>{field.properties.label || type?.name}</Label>
       <Text />
     </CellFieldWrapper>
   );

packages/client/src/app/pages/forms/edit/builder/tabs/layout-editor/field-layout/cell/cell.tsx

@@ -17,7 +17,7 @@ type Props = {
 export const Cell: React.FC<Props> = ({ cell, order }) => {
   const dispatch = useAppDispatch();
 
-  const [{ isDragging }, drag] = useDrag(
+  const [, drag] = useDrag(
     () => ({
       type: 'LayoutField',
       item: (): Record<string, string> => {

packages/client/src/app/pages/forms/edit/builder/tabs/layout-editor/field-layout/field-layout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { selectCurrentPage } from '@editor/store/slices/context';
 
 import { selectPage } from '../../../../store/slices/pages';
 
@@ -8,7 +9,8 @@ import { PageTabs } from './page-tabs/page-tabs';
 import { FieldLayoutWrapper } from './field-layout.styles';
 
 export const FieldLayout: React.FC = () => {
-  const page = useSelector(selectPage('page-uid-1'));
+  const { uid: pageUid } = useSelector(selectCurrentPage);
+  const page = useSelector(selectPage(pageUid));
 
   return (
     <FieldLayoutWrapper>

packages/client/src/app/pages/forms/edit/builder/tabs/layout-editor/field-layout/page-tabs/tab/tab.styles.ts

@@ -1,10 +1,20 @@
+import { colors } from '@ff-client/styles/variables';
 import styled from 'styled-components';
 
-export const TabWrapper = styled.div`
+type TabWrapperProps = {
+  active?: boolean;
+};
+
+export const TabWrapper = styled.div<TabWrapperProps>`
   box-shadow: 0 0 0 1px #cdd8e4, 0 2px 12px rgb(205 216 228 / 50%);
 
   padding: 4px 18px;
   border-radius: 4px 4px 0 0;
+  background: ${({ active }) => (active ? colors.gray050 : 'white')};
+
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 export const NewTabWrapper = styled(TabWrapper)`

packages/client/src/app/pages/forms/edit/builder/tabs/layout-editor/field-layout/page-tabs/tab/tab.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import type { Page } from '@editor/builder/types/layout';
 import { useAppDispatch } from '@ff-client/app/pages/forms/edit/store';
-import { unfocus } from '@ff-client/app/pages/forms/edit/store/slices/context';
+import {
+  selectCurrentPage,
+  setPage,
+} from '@ff-client/app/pages/forms/edit/store/slices/context';
 
 import { TabWrapper } from './tab.styles';
 
 export const Tab: React.FC<Page> = (page) => {
+  const { uid } = useSelector(selectCurrentPage);
   const dispatch = useAppDispatch();
 
   return (
     <TabWrapper
+      active={uid === page.uid}
       onClick={(): void => {
-        dispatch(unfocus());
+        dispatch(setPage(page.uid));
       }}
     >
       {page.label}

packages/client/src/app/pages/forms/edit/builder/types/layout.ts

@@ -5,7 +5,6 @@ export type Layout = {
 export type Page = {
   uid: string;
   label: string;
-  handle: string;
   layoutUid: string;
   order: number;
 };

packages/client/src/app/pages/forms/edit/store/slices/cells.ts

@@ -17,6 +17,9 @@ export const cellsSlice = createSlice({
   name: 'cells',
   initialState,
   reducers: {
+    set: (state, action: PayloadAction<CellState>) => {
+      state.splice(0, state.length, ...action.payload);
+    },
     add: (state, action: PayloadAction<Omit<Cell, 'order'>>) => {
       const highestOrder = Math.max(
         -1,
@@ -40,7 +43,7 @@ export const cellsSlice = createSlice({
   },
 });
 
-export const { moveTo, add, remove } = cellsSlice.actions;
+export const { set, moveTo, add, remove } = cellsSlice.actions;
 
 export const selectCellsInRow =
   (row: Row) =>

packages/client/src/app/pages/forms/edit/store/slices/fields.ts

@@ -30,6 +30,9 @@ export const fieldsSlice = createSlice({
   name: 'fields',
   initialState,
   reducers: {
+    set: (state, action: PayloadAction<FieldState>) => {
+      state.splice(0, state.length, ...action.payload);
+    },
     add: (
       state,
       action: PayloadAction<{ fieldType: FieldType; uid: string }>
@@ -64,7 +67,7 @@ export const fieldsSlice = createSlice({
   },
 });
 
-export const { add, remove, edit } = fieldsSlice.actions;
+export const { set, add, remove, edit } = fieldsSlice.actions;
 
 export const selectField =
   (uid: string) =>

packages/client/src/app/pages/forms/edit/store/slices/form.ts

@@ -75,8 +75,7 @@ export const {
   clearErrors,
 } = formSlice.actions;
 
-export const selectForm = (state: RootState): Form | undefined =>
-  state.form;
+export const selectForm = (state: RootState): Form | undefined => state.form;
 
 export default formSlice.reducer;
 

packages/client/src/app/pages/forms/edit/store/slices/layouts.ts

@@ -16,6 +16,9 @@ export const layoutsSlice = createSlice({
   name: 'layouts',
   initialState,
   reducers: {
+    set: (state, action: PayloadAction<LayoutState>) => {
+      state.splice(0, state.length, ...action.payload);
+    },
     add: (state, action: PayloadAction<Layout>) => {
       state.push(action.payload);
     },
@@ -25,7 +28,7 @@ export const layoutsSlice = createSlice({
   },
 });
 
-export const { add, remove } = layoutsSlice.actions;
+export const { set, add, remove } = layoutsSlice.actions;
 
 export const selectLayout =
   (uid: string) =>
@@ -35,7 +38,7 @@ export const selectLayout =
 export const selectPageLayout =
   (page: Page) =>
   (state: RootState): Layout | undefined =>
-    state.layouts.find((layout) => layout.uid === page.layoutUid);
+    state.layouts.find((layout) => layout.uid === page?.layoutUid);
 
 export default layoutsSlice.reducer;
 

packages/client/src/app/pages/forms/edit/store/slices/pages.ts

@@ -10,20 +10,15 @@ type SwapPayload = {
   targetUid: string;
 };
 
-const initialState: PagesState = [
-  {
-    uid: 'page-uid-1',
-    label: 'Page One',
-    handle: 'page-one',
-    layoutUid: 'layout-uid-1',
-    order: 1,
-  },
-];
+const initialState: PagesState = [];
 
 export const pagesSlice = createSlice({
   name: 'pages',
   initialState,
   reducers: {
+    set: (state, action: PayloadAction<PagesState>) => {
+      state.splice(0, state.length, ...action.payload);
+    },
     add: (state, action: PayloadAction<Page>) => {
       const maxOrder = Math.max(...state.map((page) => page.order)) ?? -1;
 
@@ -53,7 +48,7 @@ export const pagesSlice = createSlice({
   },
 });
 
-export const { swap, add, remove } = pagesSlice.actions;
+export const { set, add, swap, remove } = pagesSlice.actions;
 
 export const selectPages = (state: RootState): Page[] => state.pages;
 

packages/client/src/app/pages/forms/edit/store/slices/rows.ts

@@ -16,6 +16,9 @@ export const rowsSlice = createSlice({
   name: 'rows',
   initialState,
   reducers: {
+    set: (state, action: PayloadAction<RowState>) => {
+      state.splice(0, state.length, ...action.payload);
+    },
     add: (state, action: PayloadAction<{ layoutUid: string; uid: string }>) => {
       const { layoutUid, uid } = action.payload;
       const highestOrder = Math.max(
@@ -47,7 +50,7 @@ export const rowsSlice = createSlice({
   },
 });
 
-export const { swap, add, remove } = rowsSlice.actions;
+export const { set, add, swap, remove } = rowsSlice.actions;
 
 export const selectRowsInLayout =
   (layout: Layout | undefined) =>

packages/client/src/app/pages/forms/edit/store/thunks/pages.ts

@@ -17,7 +17,6 @@ export const addNewPage = (): AppThunk => (dispatch, getState) => {
     addPage({
       uid: pageUid,
       label: `Page ${nextPageNumber}`,
-      handle: `page${nextPageNumber}`,
       layoutUid,
       order: nextPageNumber,
     })

packages/client/src/queries/forms.ts

@@ -1,8 +1,18 @@
 import type { UseQueryResult } from 'react-query';
 import { useQuery } from 'react-query';
 import { useAppDispatch } from '@editor/store';
-import { update } from '@editor/store/slices/form';
-import type { EditableProperty, Form } from '@ff-client/types/forms';
+import { set as setCells } from '@editor/store/slices/cells';
+import { setPage } from '@editor/store/slices/context';
+import { set as setFields } from '@editor/store/slices/fields';
+import { update as updateForm } from '@editor/store/slices/form';
+import { set as setLayouts } from '@editor/store/slices/layouts';
+import { set as setPages } from '@editor/store/slices/pages';
+import { set as setRows } from '@editor/store/slices/rows';
+import type {
+  EditableProperty,
+  ExtendedFormType,
+  Form,
+} from '@ff-client/types/forms';
 import type { AxiosError } from 'axios';
 import axios from 'axios';
 
@@ -14,17 +24,31 @@ export const useQueryForms = (): UseQueryResult<Form[], AxiosError> => {
 
 export const useQuerySingleForm = (
   id?: number
-): UseQueryResult<Form, AxiosError> => {
+): UseQueryResult<ExtendedFormType, AxiosError> => {
   const dispatch = useAppDispatch();
 
-  return useQuery<Form, AxiosError>(
+  return useQuery<ExtendedFormType, AxiosError>(
     ['forms', id],
-    () => axios.get<Form>(`/client/api/forms/${id}`).then((res) => res.data),
+    () =>
+      axios
+        .get<ExtendedFormType>(`/client/api/forms/${id}`)
+        .then((res) => res.data),
     {
       staleTime: Infinity,
       enabled: !!id,
       onSuccess: (form) => {
-        dispatch(update(form));
+        const {
+          layout: { fields, pages, layouts, rows, cells },
+        } = form;
+
+        dispatch(updateForm(form));
+        dispatch(setFields(fields));
+        dispatch(setPages(pages));
+        dispatch(setLayouts(layouts));
+        dispatch(setRows(rows));
+        dispatch(setCells(cells));
+
+        dispatch(setPage(pages.find(Boolean)?.uid));
       },
     }
   );

packages/client/src/types/forms.ts

@@ -1,3 +1,5 @@
+import type { Cell, Layout, Page, Row } from '@editor/builder/types/layout';
+import type { Field } from '@editor/store/slices/fields';
 import type { GenericValue } from '@ff-client/types/properties';
 
 export type Properties = {
@@ -13,6 +15,16 @@ export type Form = {
   properties: Properties;
 };
 
+export type ExtendedFormType = Form & {
+  layout: {
+    fields: Field[];
+    pages: Page[];
+    layouts: Layout[];
+    rows: Row[];
+    cells: Cell[];
+  };
+};
+
 export type Attribute = {
   index?: number;
   key: string;
@@ -36,7 +48,7 @@ type BaseEditableProperty<T> = {
   instructions: string;
   category?: string;
   order: number;
-  value: string | number;
+  value: T;
   placeholder: string;
   section?: string;
   options?: GenericValue[];