logic to block editing if someone else is editing

Author: raheeliftikhar5

client/packages/lowcoder/src/constants/applicationConstants.ts

@@ -92,6 +92,7 @@ export interface ApplicationMeta {
   isLocalMarketplace?: boolean;
   applicationStatus: "NORMAL" | "RECYCLED" | "DELETED";
   editingUserId: string | null;
+  lastEditedAt: number;
 }
 
 export interface FolderMeta {

client/packages/lowcoder/src/pages/common/header.tsx

@@ -332,6 +332,7 @@ type HeaderProps = {
 // header in editor page
 export default function Header(props: HeaderProps) {
   const editorState = useContext(EditorContext);
+  const { blockEditing } = useContext(ExternalEditorContext);
   const { togglePanel } = props;
   const { toggleEditorModeStatus } = props;
   const { left, bottom, right } = props.panelStatus;
@@ -348,23 +349,17 @@ export default function Header(props: HeaderProps) {
   const [editingUser, setEditingUser] = useState<CurrentUser>();
 
   const isModule = appType === AppTypeEnum.Module;
-  const blockEditing = useMemo(
-    () => user.id !== application?.editingUserId,
-    [application?.editingUserId]
-  );
 
   useEffect(() => {
     if(blockEditing && application && Boolean(application?.editingUserId)) {
       UserApi.getUserDetail(application.editingUserId!)
         .then(resp => {
           if (validateResponse(resp)) {
-            console.log(resp.data.data);
             setEditingUser(resp.data.data);
           }
         });
     }
   }, [blockEditing]);
-  console.log(user.id, application?.editingUserId);
 
   const editorModeOptions = [
     {

client/packages/lowcoder/src/pages/editor/AppEditor.tsx

@@ -32,6 +32,8 @@ import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL";
 import history from "util/history";
 import Flex from "antd/es/flex";
 import React from "react";
+import dayjs from "dayjs";
+import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -52,13 +54,16 @@ const AppEditor = React.memo(() => {
   const paramViewMode = params.viewMode || window.location.pathname.split("/")[3];
   const viewMode = (paramViewMode === "view" || paramViewMode === "admin") ? "published" : paramViewMode === "view_marketplace" ? "view_marketplace" : "editing";
   const currentUser = useSelector(getUser);
+  const application = useSelector(currentApplication);
   const dispatch = useDispatch();
   const fetchOrgGroupsFinished = useSelector(getFetchOrgGroupsFinished);
   const isCommonSettingsFetching = useSelector(getIsCommonSettingFetching);
   const orgId = currentUser.currentOrgId;
   const firstRendered = useRef(false);
+  const fetchInterval = useRef<number>(0);
   const [isDataSourcePluginRegistered, setIsDataSourcePluginRegistered] = useState(false);
   const [appError, setAppError] = useState('');
+  const [blockEditing, setBlockEditing] = useState<boolean>(false);
 
   setGlobalSettings({ applicationId, isViewMode: paramViewMode === "view" });
 
@@ -83,7 +88,22 @@ const AppEditor = React.memo(() => {
   });
 
   const readOnly = isUserViewMode;
-  const compInstance = useRootCompInstance(appInfo, readOnly, isDataSourcePluginRegistered);
+  const compInstance = useRootCompInstance(
+    appInfo,
+    readOnly,
+    isDataSourcePluginRegistered,
+    blockEditing,
+  );
+
+  useEffect(() => {
+    if (currentUser && application) {
+      const lastEditedAt = dayjs(application?.lastEditedAt);
+      const lastEditedDiff = dayjs().diff(lastEditedAt, 'minutes');
+      const shouldBlockEditing = currentUser.id !== application?.createBy && lastEditedDiff < 5;
+      setBlockEditing(shouldBlockEditing);
+      console.log('blockEditing', shouldBlockEditing, {user_id: currentUser.id, editingUserId: application.createBy, lastEditedDiff});
+    }
+  }, [application, currentUser]);
 
   // fetch dataSource and plugin
   useEffect(() => {
@@ -100,7 +120,7 @@ const AppEditor = React.memo(() => {
       dispatch(fetchQueryLibraryDropdown());
     }
   }, [dispatch, applicationId, paramViewMode]);
-  
+
   const fetchJSDataSourceByApp = () => {
     DatasourceApi.fetchJsDatasourceByApp(applicationId).then((res) => {
       res.data.data.forEach((i) => {
@@ -117,7 +137,7 @@ const AppEditor = React.memo(() => {
     }
   }, [dispatch, fetchOrgGroupsFinished, orgId]);
 
-  useEffect(() => {
+  const fetchApplication = useCallback(() => {
     dispatch(
       fetchApplicationInfo({
         type: viewMode,
@@ -142,6 +162,20 @@ const AppEditor = React.memo(() => {
     );
   }, [viewMode, applicationId, dispatch]);
 
+  useEffect(() => {
+    fetchApplication();
+  }, [fetchApplication]);
+
+  // useEffect(() => {
+  //   if(!blockEditing) return clearInterval(fetchInterval.current);
+  //   if(blockEditing) {
+  //     fetchInterval.current = window.setInterval(() => {
+  //       fetchApplication();
+  //     }, 60000);
+  //   }
+  //   return () => clearInterval(fetchInterval.current);
+  // }, [blockEditing, fetchApplication]);
+
   const fallbackUI = useMemo(() => (
     <Flex align="center" justify="center" vertical style={{
       height: '300px',
@@ -182,6 +216,7 @@ const AppEditor = React.memo(() => {
           <AppEditorInternalView
             appInfo={appInfo}
             readOnly={readOnly}
+            blockEditing={blockEditing}
             loading={
               !fetchOrgGroupsFinished || !isDataSourcePluginRegistered || isCommonSettingsFetching
             }

client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx

@@ -35,7 +35,8 @@ import { isEqual } from "lodash";
 function useSaveComp(
   applicationId: string,
   readOnly: boolean,
-  rootCompInstance: RootCompInstanceType | undefined
+  rootCompInstance: RootCompInstanceType | undefined,
+  blockEditing?: boolean,
 ) {
   const originalComp = rootCompInstance?.comp;
   // throttle comp change
@@ -45,7 +46,7 @@ function useSaveComp(
   const [prevJsonStr, setPrevJsonStr] = useState<string>();
 
   useEffect(() => {
-    if (readOnly) {
+    if (readOnly || blockEditing) {
       return;
     }
     if (!comp || comp === prevComp) {
@@ -74,6 +75,7 @@ function useSaveComp(
 
 interface AppEditorInternalViewProps {
   readOnly: boolean;
+  blockEditing?: boolean;
   appInfo: AppSummaryInfo;
   loading: boolean;
   compInstance: RootCompInstanceType;
@@ -83,7 +85,7 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
   const isUserViewMode = useUserViewMode();
   const extraExternalEditorState = useSelector(getExternalEditorState);
   const dispatch = useDispatch();
-  const { readOnly, appInfo, compInstance } = props;
+  const { readOnly, blockEditing, appInfo, compInstance } = props;
 
   const [externalEditorState, setExternalEditorState] = useState<ExternalEditorContextState>({
     changeExternalState: (state: Partial<ExternalEditorContextState>) => {
@@ -92,8 +94,7 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
     applicationId: appInfo.id,
     appType: AppTypeEnum.Application,
   });
-  useSaveComp(appInfo.id, readOnly, compInstance);
-
+  
   useEffect(() => {
     setExternalEditorState((s) => ({
       ...s,
@@ -102,16 +103,25 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
       appType: appInfo.appType,
       applicationId: appInfo.id,
       hideHeader: window.location.pathname.split("/")[3] === "admin",
+      blockEditing,
       ...extraExternalEditorState,
     }));
-  }, [compInstance?.history, extraExternalEditorState, readOnly, appInfo.appType, appInfo.id]);
+  }, [
+    compInstance?.history,
+    extraExternalEditorState,
+    readOnly,
+    appInfo.appType, appInfo.id,
+    blockEditing,
+  ]);
 
   useEffect(() => {
     message.config({
       top: isUserViewMode ? 0 : 48,
     });
   }, [isUserViewMode]);
 
+  useSaveComp(appInfo.id, readOnly, compInstance, blockEditing);
+
   const loading =
     !compInstance || !compInstance.comp || !compInstance.comp.preloaded || props.loading;
 

client/packages/lowcoder/src/pages/editor/useRootCompInstance.tsx

@@ -7,7 +7,12 @@ import { useCompInstance } from "comps/utils/useCompInstance";
 import { MarkAppInitialized, perfMark } from "util/perfUtils";
 import { QueryApi } from "api/queryApi";
 
-export function useRootCompInstance(appInfo: AppSummaryInfo, readOnly: boolean, isReady: boolean) {
+export function useRootCompInstance(
+  appInfo: AppSummaryInfo,
+  readOnly: boolean,
+  isReady: boolean,
+  blockEditing?: boolean,
+) {
   const appId = appInfo.id;
   const params = useMemo(() => {
     return {
@@ -28,7 +33,7 @@ export function useRootCompInstance(appInfo: AppSummaryInfo, readOnly: boolean,
     };
   }, [appId, appInfo.dsl, appInfo.moduleDsl, isReady, readOnly]);
   const [comp, container] = useCompInstance(params);
-  const history = useAppHistory(container, readOnly, appId);
+  const history = useAppHistory(container, readOnly, appId, blockEditing);
 
   useUnmount(() => {
     comp?.clearPreload();

client/packages/lowcoder/src/util/context/ExternalEditorContext.ts

@@ -38,6 +38,11 @@ export interface ExternalEditorContextState {
    */
   showScriptsAndStyleModal?: boolean;
 
+  /**
+   * whether to block editing if someone else is editing the app
+   */
+  blockEditing?: boolean;
+
   changeExternalState?: (state: Partial<ExternalEditorContextState>) => void;
 }
 

client/packages/lowcoder/src/util/editoryHistory.ts

@@ -12,7 +12,12 @@ import { showCost } from "util/perfUtils";
 
 type OperationType = AppSnapshotContext["operations"];
 
-export function useAppHistory(compContainer: CompContainer, readOnly: boolean, appId: string) {
+export function useAppHistory(
+  compContainer: CompContainer,
+  readOnly: boolean,
+  appId: string,
+  blockEditing?: boolean,
+) {
   const reduxDispatch = useDispatch();
 
   return useMemo(() => {
@@ -32,7 +37,7 @@ export function useAppHistory(compContainer: CompContainer, readOnly: boolean, a
     };
 
     compContainer.addChangeListener((actions) => {
-      if (readOnly || !actions) {
+      if (readOnly || !actions || blockEditing) {
         return;
       }
       // maybe slow: comparing dsl by `toJson`