fix unsaved + add edit page loader

templates/backOffice/default/app/package.json

@@ -62,6 +62,7 @@
     "postcss-nested": "^5.0.5",
     "tailwindcss": "^2.0.3",
     "typescript": "^4.1.2",
-    "vite": "^2.0.1"
+    "vite": "^2.0.1",
+    "vite-plugin-svgr": "^0.2.0"
   }
 }

templates/backOffice/default/app/src/components/Loader/Loader.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReactComponent as LoaderIcon } from './loader.svg';
+
+function Loader({ width }: { width: string }) {
+    return (
+        <div className="flex items-center justify-center h-full">
+            <LoaderIcon width={width} />
+        </div>
+    );
+}
+
+export default Loader;

templates/backOffice/default/app/src/components/Loader/index.ts

@@ -0,0 +1 @@
+export { default } from './Loader';

templates/backOffice/default/app/src/components/Menu/Menu.css

@@ -12,4 +12,12 @@
 
 .Menu-blocks-item {
   @apply flex-shrink-0 px-6;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
 }

templates/backOffice/default/app/src/hooks/data.ts

@@ -7,7 +7,7 @@ import { CURRENT_LOCAL } from '../constants';
 import { GroupTypeResponse, GroupTypeStore, IBlock } from "../types";
 import { setBlocks } from "../redux/blocks";
 import { setGroup } from "../redux/group";
-import { setUnsaved } from "../redux/ui";
+import { setHashSaved, setUnsaved } from "../redux/ui";
 
 async function fetcher(url: string, config: AxiosRequestConfig = {}) {
   try {
@@ -47,6 +47,8 @@ export function useGroup() {
         const { jsonContent, ...rest } = data;
 
         dispatch(setGroup(rest));
+        dispatch(setUnsaved(false));
+        dispatch(setHashSaved(data));
 
         if (jsonContent) {
           dispatch(setBlocks(JSON.parse(jsonContent))); 
@@ -77,8 +79,12 @@ export function useCreateOrUpdateGroup() {
       }
     ),
     {
-      onSuccess: (data: GroupTypeStore) => {
+      onSuccess: (data: GroupTypeStore, variables) => {
         dispatch(setUnsaved(false));
+        dispatch(setHashSaved({
+          ...data,
+          jsonContent: JSON.stringify(variables.blocks),
+        }));
 
         if(!id && data.id) {
           dispatch(setGroup(data));

templates/backOffice/default/app/src/index.d.ts

@@ -0,0 +1,13 @@
+// Fix typescript error for plugin vite-plugin-svgr
+
+declare module "*.svg" {
+    import * as React from "react";
+
+    export const ReactComponent: React.FunctionComponent<
+      React.SVGProps<SVGSVGElement> & { title?: string }
+    >;
+
+    const src: string;
+    export default src;
+  }
+

templates/backOffice/default/app/src/pages/CreateGroup.tsx

@@ -24,7 +24,9 @@ export default function CreateGroup() {
   }, []);
 
   useEffect(() => {
-    dispatch(setUnsaved(!!group.title || blocks.length > 0));
+    if(!isUnsaved){
+      dispatch(setUnsaved(!!group.title || blocks.length > 0));
+    }
   }, [group, blocks]);
 
   const onSave = () => {

templates/backOffice/default/app/src/pages/EditGroup.tsx

@@ -4,44 +4,38 @@ import { Prompt } from "react-router-dom";
 import hash from 'object-hash';
 
 import { RootState } from "../redux/store";
-import { setUnsaved } from "../redux/ui";
+import { setUnsaved, setHashSaved } from "../redux/ui";
 import { useCreateOrUpdateGroup, useGroup } from "../hooks/data";
 import Menu from "../components/Menu";
 import Group from "../components/Group";
+import Loader from "../components/Loader";
 
 export default function EditGroup() {
+  const { isLoading, isFetchedAfterMount } = useGroup();
   const dispatch = useDispatch();
-  const { data } = useGroup();
-  const [initialHash, setInitialHash] = useState<string>("");
   const group = useSelector((state: RootState) => state.group);
   const blocks = useSelector((state: RootState) => state.blocks);
   const isUnsaved = useSelector((state: RootState) => state.ui.isUnsaved);
+  const hashSaved = useSelector((state: RootState) => state.ui.hashSaved);
   const mutation = useCreateOrUpdateGroup();
 
   useEffect(() => {
-    dispatch(setUnsaved(false));
+    if(!isUnsaved){
+      const currentHash = hash({
+        ...group,
+        jsonContent: JSON.stringify(blocks),
+      });
 
-    if(data){
-      setInitialHash(hash(data));
+      dispatch(setUnsaved(hashSaved !== currentHash));
     }
-  }, [data]);
-
-  useEffect(() => {
-    const currentHash = hash({
-      ...group,
-      jsonContent: JSON.stringify(blocks),
-    });
-
-    dispatch(setUnsaved(initialHash !== currentHash));
   }, [group, blocks]);
 
   const onSave = () => {
     mutation.mutate({ group, blocks });
+  }
 
-    setInitialHash(hash({
-      ...group,
-      jsonContent: JSON.stringify(blocks),
-    }));
+  if(!isFetchedAfterMount || isLoading) {
+    return <Loader width="80px" />;
   }
 
   return (

templates/backOffice/default/app/src/redux/ui.ts

@@ -1,9 +1,11 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import hash from 'object-hash';
 
-import { uiStoreType } from "../types";
+import { GroupTypeResponse, uiStoreType } from "../types";
 
 export let initialState: uiStoreType = {
   isUnsaved: false,
+  hashSaved: "",
 };
 
 const uiSlice = createSlice({
@@ -13,9 +15,12 @@ const uiSlice = createSlice({
     setUnsaved(state, action: PayloadAction<boolean>) {
       state.isUnsaved = action.payload;
     },
+    setHashSaved(state, action: PayloadAction<GroupTypeResponse>) {
+      state.hashSaved = hash(action.payload);
+    },
   },
 });
 
-export const { setUnsaved } = uiSlice.actions;
+export const { setUnsaved, setHashSaved } = uiSlice.actions;
 
 export default uiSlice.reducer;

templates/backOffice/default/app/src/types.d.ts

@@ -46,4 +46,5 @@ export type BlockPluginDefinition<TProp = { [key: string]: any }> = {
 
 export type uiStoreType = {
   isUnsaved: boolean;
+  hashSaved: string;
 };

templates/backOffice/default/app/vite.config.ts

@@ -2,10 +2,11 @@ const path = require("path");
 
 import { defineConfig } from "vite";
 import reactRefresh from "@vitejs/plugin-react-refresh";
+import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh()],
+  plugins: [reactRefresh(), svgr()],
   build: {
     manifest: true,
     rollupOptions: {