Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Fixed realtime avatar not appearing

Browse source
This commit is contained in:
Nakul Nagargade 2024-10-22 18:02:58 +05:30
parent add11e6480
commit f51491df66
6 changed files with 45 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/AppBuilder/Header/EditorHeader.jsx
View file

@ -6,11 +6,11 @@ import LogoNavDropdown from '@/_components/LogoNavDropdown';
import HeaderActions from './HeaderActions';
import { AppVersionsManager } from './AppVersionsManager';
import RealtimeAvatars from '@/Editor/RealtimeAvatars';
// import UpdatePresence from '@/Editor/Header/UpdatePresence';
import SolidIcon from '@/_ui/Icon/SolidIcons';
import useStore from '@/AppBuilder/_stores/store';
import RightTopHeaderButtons from './RightTopHeaderButtons/RightTopHeaderButtons';
import BuildSuggestions from './BuildSuggestions';
import UpdatePresenceMultiPlayer from './UpdatePresenceMultiPlayer';
export const EditorHeader = ({ darkMode }) => {
const { isSaving, saveError, isVersionReleased } = useStore(
@ -98,18 +98,14 @@ export const EditorHeader = ({ darkMode }) => {
<RealtimeAvatars />
</div>
)}
{/* {shouldEnableMultiplayer && <UpdatePresence />} */}
{shouldEnableMultiplayer && <UpdatePresenceMultiPlayer />}
</div>
</div>
<div className="navbar-seperator"></div>
{/* <div className="d-flex align-items-center p-0" style={{ marginRight: '12px' }}></div> */}
</div>
<div className="d-flex align-items-center p-0">
<div className="d-flex version-manager-container p-0 mx-2 align-items-center ">
{/* {editingVersion && ( */}
{/* <EnvironmentManager darkMode={darkMode} /> */}
{/* )} */}
{/* <div className="navbar-seperator"></div> */}
<div className="d-flex p-0 mx-2 align-items-center ">
<AppVersionsManager darkMode={darkMode} />
</div>
</div>

33
frontend/src/AppBuilder/Header/UpdatePresenceMultiPlayer.jsx Normal file
View file

@ -0,0 +1,33 @@
import React, { useEffect } from 'react';
// eslint-disable-next-line import/no-unresolved
import { useUpdatePresence } from '@y-presence/react';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
export default function UpdatePresenceMultiPlayer() {
const { user } = useStore(
(state) => ({
user: state.user,
}),
shallow
);
const updatePresence = useUpdatePresence();
useEffect(() => {
if (user) {
const initialPresence = {
firstName: user.firstName ?? '',
lastName: user.lastName ?? '',
email: user.email ?? '',
image: '',
editingVersionId: '',
x: 0,
y: 0,
color: '',
};
updatePresence(initialPresence);
}
}, [user, updatePresence]);
return <></>;
}

3
frontend/src/AppBuilder/Viewer/PreviewSettings.jsx
View file

@ -33,7 +33,6 @@ const PreviewSettings = ({ isMobileLayout, showHeader, darkMode }) => {
<>
<AppVersionsManager darkMode={darkMode} />
<div className="navbar-seperator"></div>
{/* <EnvironmentManager darkMode={darkMode} /> */}
</>
)}
<span>
@ -78,8 +77,6 @@ const PreviewSettings = ({ isMobileLayout, showHeader, darkMode }) => {
</Offcanvas.Header>
{previewNavbar && (
<Offcanvas.Body>
<span style={{ marginTop: '4px' }}>{/* <EnvironmentManager darkMode={darkMode} /> */}</span>
<hr className="m-0" />
<span>
<AppVersionsManager darkMode={darkMode} />
</span>

7
frontend/src/AppBuilder/Viewer/Viewer.jsx
View file

@ -97,10 +97,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
const switchPage = useStore((state) => state.switchPage);
const showHeader = !globalSettings?.hideHeader && isAppLoaded;
// ---remove
const handleAppEnvironmentChanged = useCallback((environment) => {
console.log('setAppVersionCurrentEnvironment', environment);
}, []);
useEffect(() => {
updateCanvasHeight(currentPageComponents);
@ -151,7 +147,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
pages={pages}
currentPageId={currentPageId ?? homePageId}
showViewerNavigation={!isPagesSidebarHidden}
handleAppEnvironmentChanged={handleAppEnvironmentChanged}
changeToDarkMode={changeToDarkMode}
/>
)}
@ -163,7 +158,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
pages={pages}
currentPageId={currentPageId ?? homePageId}
showViewerNavigation={!isPagesSidebarHidden}
handleAppEnvironmentChanged={handleAppEnvironmentChanged}
changeToDarkMode={changeToDarkMode}
/>
)}
@ -216,7 +210,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
pages={pages}
currentPageId={currentPageId ?? homePageId}
showViewerNavigation={!isPagesSidebarHidden}
handleAppEnvironmentChanged={handleAppEnvironmentChanged}
switchPage={switchPage}
changeToDarkMode={changeToDarkMode}
/>

9
frontend/src/_helpers/authorizeWorkspace.js
View file

@ -8,6 +8,7 @@ import {
redirectToErrorPage,
} from './routes';
import { ERROR_TYPES } from './constants';
import useStore from '@/AppBuilder/_stores/store';
/* [* Be cautious: READ THE CASES BEFORE TOUCHING THE CODE. OTHERWISE YOU MAY SEE ENDLESS REDIRECTIONS (AKA ROUTES-BURMUDA-TRIANGLE) *]
What is this function?
@ -133,6 +134,14 @@ export const authorizeUserAndHandleErrors = (workspace_id, workspace_slug, callb
authenticationService
.authorize()
.then((data) => {
useStore.getState().setUser({
email: data.current_user.email,
firstName: data.current_user.first_name,
lastName: data.current_user.last_name,
id: data.current_user.id,
avatarId: data.current_user.avatar_id,
groups: data.group_permissions.map((group) => group.group),
});
/* CASE-1 */
const { current_organization_name } = data;
/* add the user details like permission and user previlliage details to the subject */

6
frontend/src/_styles/pages-sidebar.scss
View file

@ -39,10 +39,4 @@
}
}
}
.canvas-box {
&.close {
margin-left: 22px !important;
}
}
}