Skip to content

Concurrency user display #1175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Sep 20, 2024
Merged

Concurrency user display #1175

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f80d8bc
Visual Control for concurrent App Edit
Sep 9, 2024
4ac37a8
Visual Control for concurrent App Edit 2
Sep 9, 2024
8470a42
Block editing if someone else is editing the app
raheeliftikhar5 Sep 16, 2024
737c25c
logic to block editing if someone else is editing
raheeliftikhar5 Sep 18, 2024
5f6c18f
added memoization in appEditor
raheeliftikhar5 Sep 19, 2024
a6f4bd4
logic to wait for editing enabled
raheeliftikhar5 Sep 19, 2024
1d2b53d
added popover to show countdown and check editing status button
raheeliftikhar5 Sep 19, 2024
e969ee5
Merge branch 'dev' into concurrency-user-display
FalkWolsky Sep 19, 2024
10b5c35
Small Text Changes
Sep 19, 2024
975bcf8
Text Translations for App Editor concurency Display
Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
added memoization in appEditor
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Sep 19, 2024
commit 5f6c18fab1215ca374cbea9bc97a8f38474d2c74
49 changes: 36 additions & 13 deletions client/packages/lowcoder/src/pages/editor/AppEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,21 +46,37 @@ const AppEditorInternalView = lazy(
);

const AppEditor = React.memo(() => {
const showAppSnapshot = useSelector(showAppSnapshotSelector);
const dispatch = useDispatch();
const params = useParams<AppPathParams>();
const isUserViewModeCheck = useUserViewMode();
const isUserViewMode = params.viewMode ? isUserViewModeCheck : true;
const applicationId = params.applicationId || window.location.pathname.split("/")[2];
const paramViewMode = params.viewMode || window.location.pathname.split("/")[3];
const viewMode = (paramViewMode === "view" || paramViewMode === "admin") ? "published" : paramViewMode === "view_marketplace" ? "view_marketplace" : "editing";
const showAppSnapshot = useSelector(showAppSnapshotSelector);
const currentUser = useSelector(getUser);
const application = useSelector(currentApplication);
const dispatch = useDispatch();
const fetchOrgGroupsFinished = useSelector(getFetchOrgGroupsFinished);
const isCommonSettingsFetching = useSelector(getIsCommonSettingFetching);
const orgId = currentUser.currentOrgId;
const application = useSelector(currentApplication);

const isUserViewMode = useMemo(
() => params.viewMode ? isUserViewModeCheck : true,
[params.viewMode, isUserViewModeCheck]
);
const applicationId = useMemo(
() => params.applicationId || window.location.pathname.split("/")[2],
[params.applicationId, window.location.pathname]
);
const paramViewMode = useMemo(
() => params.viewMode || window.location.pathname.split("/")[3],
[params.viewMode, window.location.pathname]
);
const viewMode = useMemo(
() => (paramViewMode === "view" || paramViewMode === "admin")
? "published"
: paramViewMode === "view_marketplace" ? "view_marketplace" : "editing",
[paramViewMode]
);

const firstRendered = useRef(false);
const fetchInterval = useRef<number>(0);
const orgId = useMemo(() => currentUser.currentOrgId, [currentUser.currentOrgId]);
const [isDataSourcePluginRegistered, setIsDataSourcePluginRegistered] = useState(false);
const [appError, setAppError] = useState('');
const [blockEditing, setBlockEditing] = useState<boolean>(false);
Expand Down Expand Up @@ -99,7 +115,8 @@ const AppEditor = React.memo(() => {
if (currentUser && application) {
const lastEditedAt = dayjs(application?.lastEditedAt);
const lastEditedDiff = dayjs().diff(lastEditedAt, 'minutes');
const shouldBlockEditing = currentUser.id !== application?.createBy && lastEditedDiff < 5;
// const shouldBlockEditing = currentUser.id !== application?.createBy && lastEditedDiff < 5;
const shouldBlockEditing = lastEditedDiff < 5;
setBlockEditing(shouldBlockEditing);
console.log('blockEditing', shouldBlockEditing, {user_id: currentUser.id, editingUserId: application.createBy, lastEditedDiff});
}
Expand All @@ -120,16 +137,22 @@ const AppEditor = React.memo(() => {
dispatch(fetchQueryLibraryDropdown());
}
}, [dispatch, applicationId, paramViewMode]);

const fetchJSDataSourceByApp = () => {
const fetchJSDataSourceByApp = useCallback(() => {
DatasourceApi.fetchJsDatasourceByApp(applicationId).then((res) => {
res.data.data.forEach((i) => {
registryDataSourcePlugin(i.type, i.id, i.pluginDefinition);
});
setIsDataSourcePluginRegistered(true);
});
dispatch(setShowAppSnapshot(false));
};
}, [
applicationId,
registryDataSourcePlugin,
setIsDataSourcePluginRegistered,
setShowAppSnapshot,
dispatch,
]);

useEffect(() => {
if (!fetchOrgGroupsFinished) {
Expand Down Expand Up @@ -160,7 +183,7 @@ const AppEditor = React.memo(() => {
}
})
);
}, [viewMode, applicationId, dispatch]);
}, [viewMode, applicationId, dispatch, fetchJSDataSourceByApp]);

useEffect(() => {
fetchApplication();
Expand Down