Remove unused parameters

This commit is contained in:
Nicola Benaglia 2025-04-12 17:56:04 +02:00
parent 72e47ab38e
commit 774d88561b
2 changed files with 185 additions and 151 deletions

View File

@ -1,46 +1,68 @@
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; import React, {
import { AppsDevModeHome } from "./AppsDevModeHome"; useCallback,
import { Spacer } from "../../common/Spacer"; useContext,
import { MyContext, getBaseApiReact } from "../../App"; useEffect,
import { AppInfo } from "./AppInfo"; useMemo,
useRef,
useState,
} from 'react';
import { AppsDevModeHome } from './AppsDevModeHome';
import { Spacer } from '../../common/Spacer';
import { MyContext, getBaseApiReact } from '../../App';
import { AppInfo } from './AppInfo';
import { import {
executeEvent, executeEvent,
subscribeToEvent, subscribeToEvent,
unsubscribeFromEvent, unsubscribeFromEvent,
} from "../../utils/events"; } from '../../utils/events';
import { AppsParent } from "./Apps-styles"; import { AppsParent } from './Apps-styles';
import AppViewerContainer from "./AppViewerContainer"; import AppViewerContainer from './AppViewerContainer';
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from 'short-unique-id';
import { AppPublish } from "./AppPublish"; import { AppPublish } from './AppPublish';
import { AppsLibraryDesktop } from "./AppsLibraryDesktop"; import { AppsLibraryDesktop } from './AppsLibraryDesktop';
import { AppsCategoryDesktop } from "./AppsCategoryDesktop"; import { AppsCategoryDesktop } from './AppsCategoryDesktop';
import { AppsNavBarDesktop } from "./AppsNavBarDesktop"; import { AppsNavBarDesktop } from './AppsNavBarDesktop';
import { Box, ButtonBase } from "@mui/material"; import { Box, ButtonBase } from '@mui/material';
import { HomeIcon } from "../../assets/Icons/HomeIcon"; import { HomeIcon } from '../../assets/Icons/HomeIcon';
import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import { Save } from "../Save/Save"; import { Save } from '../Save/Save';
import { HubsIcon } from "../../assets/Icons/HubsIcon"; import { HubsIcon } from '../../assets/Icons/HubsIcon';
import { AppsDevModeNavBar } from "./AppsDevModeNavBar"; import { AppsDevModeNavBar } from './AppsDevModeNavBar';
import { CoreSyncStatus } from "../CoreSyncStatus"; import { AppsIcon } from '../../assets/Icons/AppsIcon';
import { AppsIcon } from "../../assets/Icons/AppsIcon"; import { IconWrapper } from '../Desktop/DesktopFooter';
import { IconWrapper } from "../Desktop/DesktopFooter";
const uid = new ShortUniqueId({ length: 8 }); const uid = new ShortUniqueId({ length: 8 });
export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, desktopViewMode, isApps}) => { export const AppsDevMode = ({
mode,
setMode,
show,
myName,
goToHome,
setDesktopSideView,
hasUnreadDirects,
isDirects,
isGroups,
hasUnreadGroups,
toggleSideViewGroups,
toggleSideViewDirects,
setDesktopViewMode,
desktopViewMode,
isApps,
}) => {
const [availableQapps, setAvailableQapps] = useState([]); const [availableQapps, setAvailableQapps] = useState([]);
const [selectedAppInfo, setSelectedAppInfo] = useState(null); const [selectedAppInfo, setSelectedAppInfo] = useState(null);
const [selectedCategory, setSelectedCategory] = useState(null) const [selectedCategory, setSelectedCategory] = useState(null);
const [tabs, setTabs] = useState([]); const [tabs, setTabs] = useState([]);
const [selectedTab, setSelectedTab] = useState(null); const [selectedTab, setSelectedTab] = useState(null);
const [isNewTabWindow, setIsNewTabWindow] = useState(false); const [isNewTabWindow, setIsNewTabWindow] = useState(false);
const [categories, setCategories] = useState([]) const [categories, setCategories] = useState([]);
const iframeRefs = useRef({}); const iframeRefs = useRef({});
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
executeEvent("appsDevModeSetTabsToNav", { executeEvent('appsDevModeSetTabsToNav', {
data: { data: {
tabs: tabs, tabs: tabs,
selectedTab: selectedTab, selectedTab: selectedTab,
@ -50,17 +72,16 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
}, 100); }, 100);
}, [show, tabs, selectedTab, isNewTabWindow]); }, [show, tabs, selectedTab, isNewTabWindow]);
const navigateBackFunc = (e) => { const navigateBackFunc = (e) => {
if (['category', 'appInfo-from-category', 'appInfo', 'library', 'publish'].includes(mode)) { if (
[
'category',
'appInfo-from-category',
'appInfo',
'library',
'publish',
].includes(mode)
) {
// Handle the various modes as needed // Handle the various modes as needed
if (mode === 'category') { if (mode === 'category') {
setMode('library'); setMode('library');
@ -78,17 +99,16 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
} else if (mode === 'publish') { } else if (mode === 'publish') {
setMode('library'); setMode('library');
} }
} else if(selectedTab?.tabId) { } else if (selectedTab?.tabId) {
executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}) executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
} }
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("devModeNavigateBack", navigateBackFunc); subscribeToEvent('devModeNavigateBack', navigateBackFunc);
return () => { return () => {
unsubscribeFromEvent("devModeNavigateBack", navigateBackFunc); unsubscribeFromEvent('devModeNavigateBack', navigateBackFunc);
}; };
}, [mode, selectedTab]); }, [mode, selectedTab]);
@ -100,58 +120,52 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
}; };
setTabs((prev) => [...prev, newTab]); setTabs((prev) => [...prev, newTab]);
setSelectedTab(newTab); setSelectedTab(newTab);
setMode("viewer"); setMode('viewer');
setIsNewTabWindow(false); setIsNewTabWindow(false);
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("appsDevModeAddTab", addTabFunc); subscribeToEvent('appsDevModeAddTab', addTabFunc);
return () => { return () => {
unsubscribeFromEvent("appsDevModeAddTab", addTabFunc); unsubscribeFromEvent('appsDevModeAddTab', addTabFunc);
}; };
}, [tabs]); }, [tabs]);
const updateTabFunc = (e) => { const updateTabFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
if(!data.tabId) return if (!data.tabId) return;
const findIndexTab = tabs.findIndex((tab)=> tab?.tabId === data?.tabId) const findIndexTab = tabs.findIndex((tab) => tab?.tabId === data?.tabId);
if(findIndexTab === -1) return if (findIndexTab === -1) return;
const copyTabs = [...tabs] const copyTabs = [...tabs];
const newTab ={ const newTab = {
...copyTabs[findIndexTab], ...copyTabs[findIndexTab],
url: data.url url: data.url,
};
} copyTabs[findIndexTab] = newTab;
copyTabs[findIndexTab] = newTab
setTabs(copyTabs); setTabs(copyTabs);
setSelectedTab(newTab); setSelectedTab(newTab);
setMode("viewer"); setMode('viewer');
setIsNewTabWindow(false); setIsNewTabWindow(false);
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("appsDevModeUpdateTab", updateTabFunc); subscribeToEvent('appsDevModeUpdateTab', updateTabFunc);
return () => { return () => {
unsubscribeFromEvent("appsDevModeUpdateTab", updateTabFunc); unsubscribeFromEvent('appsDevModeUpdateTab', updateTabFunc);
}; };
}, [tabs]); }, [tabs]);
const setSelectedTabFunc = (e) => { const setSelectedTabFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
if(!e.detail?.isDevMode) return if (!e.detail?.isDevMode) return;
setSelectedTab(data); setSelectedTab(data);
setTimeout(() => { setTimeout(() => {
executeEvent("appsDevModeSetTabsToNav", { executeEvent('appsDevModeSetTabsToNav', {
data: { data: {
tabs: tabs, tabs: tabs,
selectedTab: data, selectedTab: data,
@ -162,12 +176,11 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
setIsNewTabWindow(false); setIsNewTabWindow(false);
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("setSelectedTabDevMode", setSelectedTabFunc); subscribeToEvent('setSelectedTabDevMode', setSelectedTabFunc);
return () => { return () => {
unsubscribeFromEvent("setSelectedTabDevMode", setSelectedTabFunc); unsubscribeFromEvent('setSelectedTabDevMode', setSelectedTabFunc);
}; };
}, [tabs, isNewTabWindow]); }, [tabs, isNewTabWindow]);
@ -175,14 +188,14 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
const data = e.detail?.data; const data = e.detail?.data;
const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId); const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId);
if (copyTabs?.length === 0) { if (copyTabs?.length === 0) {
setMode("home"); setMode('home');
} else { } else {
setSelectedTab(copyTabs[0]); setSelectedTab(copyTabs[0]);
} }
setTabs(copyTabs); setTabs(copyTabs);
setSelectedTab(copyTabs[0]); setSelectedTab(copyTabs[0]);
setTimeout(() => { setTimeout(() => {
executeEvent("appsDevModeSetTabsToNav", { executeEvent('appsDevModeSetTabsToNav', {
data: { data: {
tabs: copyTabs, tabs: copyTabs,
selectedTab: copyTabs[0], selectedTab: copyTabs[0],
@ -192,93 +205,101 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("removeTabDevMode", removeTabFunc); subscribeToEvent('removeTabDevMode', removeTabFunc);
return () => { return () => {
unsubscribeFromEvent("removeTabDevMode", removeTabFunc); unsubscribeFromEvent('removeTabDevMode', removeTabFunc);
}; };
}, [tabs]); }, [tabs]);
const setNewTabWindowFunc = (e) => { const setNewTabWindowFunc = (e) => {
setIsNewTabWindow(true); setIsNewTabWindow(true);
setSelectedTab(null) setSelectedTab(null);
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("devModeNewTabWindow", setNewTabWindowFunc); subscribeToEvent('devModeNewTabWindow', setNewTabWindowFunc);
return () => { return () => {
unsubscribeFromEvent("devModeNewTabWindow", setNewTabWindowFunc); unsubscribeFromEvent('devModeNewTabWindow', setNewTabWindowFunc);
}; };
}, [tabs]); }, [tabs]);
return ( return (
<AppsParent <AppsParent
sx={{ sx={{
flexDirection: 'row' , flexDirection: 'row',
position: !show && 'fixed', position: !show && 'fixed',
left: !show && '-200vw', left: !show && '-200vw',
}} }}
> >
<Box
<Box sx={{ sx={{
width: '60px', width: '60px',
flexDirection: 'column', flexDirection: 'column',
height: '100vh', height: '100vh',
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
gap: '25px' gap: '25px',
}}> }}
>
<ButtonBase <ButtonBase
sx={{ sx={{
width: '60px', width: '60px',
height: '60px', height: '60px',
paddingTop: '23px' paddingTop: '23px',
}} }}
onClick={() => { onClick={() => {
goToHome(); goToHome();
}} }}
> >
<HomeIcon <HomeIcon
height={34} height={34}
color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"} color={
desktopViewMode === 'home' ? 'white' : 'rgba(250, 250, 250, 0.5)'
}
/> />
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode('apps') setDesktopViewMode('apps');
}} }}
> >
<IconWrapper <IconWrapper
color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
label="Apps" label="Apps"
disableWidth disableWidth
> >
<AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} /> <AppsIcon
height={30}
color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
/>
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode('chat') setDesktopViewMode('chat');
}} }}
> >
<IconWrapper <IconWrapper
color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"} color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
: desktopViewMode === 'chat'
? 'white'
: 'rgba(250, 250, 250, 0.5)'
}
label="Chat" label="Chat"
disableWidth disableWidth
> >
<MessagingIcon <MessagingIcon
height={30} height={30}
color={ color={
(hasUnreadDirects || hasUnreadGroups) hasUnreadDirects || hasUnreadGroups
? "var(--unread)" ? 'var(--unread)'
: desktopViewMode === 'chat' : desktopViewMode === 'chat'
? "white" ? 'white'
: "rgba(250, 250, 250, 0.5)" : 'rgba(250, 250, 250, 0.5)'
} }
/> />
</IconWrapper> </IconWrapper>
@ -286,42 +307,48 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
<Save isDesktop disableWidth myName={myName} /> <Save isDesktop disableWidth myName={myName} />
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode('dev') setDesktopViewMode('dev');
}} }}
> >
<IconWrapper <IconWrapper
color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} color={
desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
}
label="Dev" label="Dev"
disableWidth disableWidth
> >
<AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} /> <AppsIcon
color={
desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
}
height={30}
/>
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
{mode !== 'home' && ( {mode !== 'home' && <AppsDevModeNavBar />}
<AppsDevModeNavBar />
)}
</Box> </Box>
{mode === 'home' && (
{mode === "home" && ( <Box
<Box sx={{ sx={{
display: 'flex', display: 'flex',
width: '100%', width: '100%',
flexDirection: 'column', flexDirection: 'column',
height: '100vh', height: '100vh',
overflow: 'auto' overflow: 'auto',
}}> }}
>
<Spacer height="30px" /> <Spacer height="30px" />
<AppsDevModeHome myName={myName} availableQapps={availableQapps} setMode={setMode} myApp={null} myWebsite={null} /> <AppsDevModeHome
myName={myName}
availableQapps={availableQapps}
setMode={setMode}
myApp={null}
myWebsite={null}
/>
</Box> </Box>
)} )}
{tabs.map((tab) => { {tabs.map((tab) => {
if (!iframeRefs.current[tab.tabId]) { if (!iframeRefs.current[tab.tabId]) {
iframeRefs.current[tab.tabId] = React.createRef(); iframeRefs.current[tab.tabId] = React.createRef();
@ -338,18 +365,25 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
); );
})} })}
{isNewTabWindow && mode === "viewer" && ( {isNewTabWindow && mode === 'viewer' && (
<> <>
<Box sx={{ <Box
sx={{
display: 'flex', display: 'flex',
width: '100%', width: '100%',
flexDirection: 'column', flexDirection: 'column',
height: '100vh', height: '100vh',
overflow: 'auto' overflow: 'auto',
}}> }}
>
<Spacer height="30px" /> <Spacer height="30px" />
<AppsDevModeHome myName={myName} availableQapps={availableQapps} setMode={setMode} myApp={null} myWebsite={null} /> <AppsDevModeHome
myName={myName}
availableQapps={availableQapps}
setMode={setMode}
myApp={null}
myWebsite={null}
/>
</Box> </Box>
</> </>
)} )}

View File

@ -6,7 +6,7 @@ import { getBaseApiReact } from '../App';
import '../styles/CoreSyncStatus.css'; import '../styles/CoreSyncStatus.css';
import { useTheme } from '@mui/material'; import { useTheme } from '@mui/material';
export const CoreSyncStatus = ({ imageSize, position }) => { export const CoreSyncStatus = () => {
const [nodeInfos, setNodeInfos] = useState({}); const [nodeInfos, setNodeInfos] = useState({});
const [coreInfos, setCoreInfos] = useState({}); const [coreInfos, setCoreInfos] = useState({});
const [isUsingGateway, setIsUsingGateway] = useState(false); const [isUsingGateway, setIsUsingGateway] = useState(false);