Skip to content

Commit

Permalink
use promises to have natural flow of data
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tristan-WorkGH
Tristan-WorkGH committed Dec 19, 2023
1 parent 7d93b09 commit 1235c48
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 89 deletions.
134 changes: 90 additions & 44 deletions demo/src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,52 +436,98 @@ const AppContent = ({ language, onLanguageClick }) => {

const aboutTimerVersion = useRef();
const aboutTimerCmpnt = useRef();
function simulateGetGlobalVersion(setter) {
function simulateGetGlobalVersion() {
console.log('getGlobalVersion() called');
aboutTimerVersion.current = window.setTimeout(
() => setter('1.0.0-demo'),
1250
return new Promise(
(resolve, reject) =>
(aboutTimerVersion.current = window.setTimeout(
() => resolve('1.0.0-demo'),
1250
))
);
}
function simulateGetAdditionalComponents(setComponents) {
function simulateGetAdditionalComponents() {
console.log('getAdditionalComponents() called');
aboutTimerCmpnt.current = window.setTimeout(
() =>
setComponents(
[
{ type: 'server', name: 'Server 1', version: '1.0.0' },
{ type: 'server', name: 'Server 2', version: '1.0.0' },
{
type: 'server',
name: 'Server 3',
version: '1.0.0',
gitTag: 'v1.0.0',
license: 'MPL',
},
{ type: 'server', name: 'Server 4', version: '1.0.0' },
{ type: 'server', name: 'Server 5', version: '1.0.0' },
{ type: 'server', name: 'Server 6', version: '1.0.0' },
{ type: 'server', name: 'Server 7', version: '1.0.0' },
{ type: 'server', name: 'Server 8', version: '1.0.0' },
{ type: 'server', name: 'Server 9', version: '1.0.0' },
{ type: 'app', name: 'My App 1', version: 'demo' },
{
type: 'app',
name: 'My application with a long name',
version: 'v0.0.1-long-tag',
},
{ type: 'other', name: 'Something', version: 'none' },
{
name: 'Component with a very long name without version',
},
].concat(
[...new Array(30)].map(() => ({
name: 'Filling for demo',
version: '???',
}))
)
),
3000
return new Promise(
(resolve, reject) =>
(aboutTimerCmpnt.current = window.setTimeout(
() =>
resolve(
[
{
type: 'server',
name: 'Server 1',
version: '1.0.0',
},
{
type: 'server',
name: 'Server 2',
version: '1.0.0',
},
{
type: 'server',
name: 'Server 3',
version: '1.0.0',
gitTag: 'v1.0.0',
license: 'MPL',
},
{
type: 'server',
name: 'Server 4',
version: '1.0.0',
},
{
type: 'server',
name: 'Server 5',
version: '1.0.0',
},
{
type: 'server',
name: 'Server 6',
version: '1.0.0',
},
{
type: 'server',
name: 'Server 7',
version: '1.0.0',
},
{
type: 'server',
name: 'Server 8',
version: '1.0.0',
},
{
type: 'server',
name: 'Server 9',
version: '1.0.0',
},
{
type: 'app',
name: 'My App 1',
version: 'demo',
},
{
type: 'app',
name: 'My application with a long name',
version: 'v0.0.1-long-tag',
},
{
type: 'other',
name: 'Something',
version: 'none',
},
{
name: 'Component with a very long name without version',
},
].concat(
[...new Array(30)].map(() => ({
name: 'Filling for demo',
version: '???',
}))
)
),
3000
))
);
}

Expand Down Expand Up @@ -714,8 +760,8 @@ const AppContent = ({ language, onLanguageClick }) => {
theme={theme}
appVersion={AppPackage.version}
appLicense={AppPackage.license}
getGlobalVersion={simulateGetGlobalVersion}
getAdditionalModules={
globalVersionPromise={simulateGetGlobalVersion}
additionalModulesPromise={
simulateGetAdditionalComponents
}
onEquipmentLabellingClick={
Expand Down
121 changes: 82 additions & 39 deletions src/components/TopBar/AboutDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,41 @@ import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import { LogoText } from './GridLogo';

function getGlobalVersion(fnPromise, type, setData, setLoader) {
if (fnPromise) {
console.debug('Getting', type, 'globale version...');
return new Promise((resolve, reject) => {
if (setLoader) {
setLoader(true);
}
resolve();
})
.then(() => fnPromise())
.then(
(value) => {
console.debug(type, 'global version is', value);
setData(value ?? null);
},
(reason) => {
console.debug(
type,
"global version isn't available",
reason
);
setData(null);
}
)
.finally(() => {
if (setLoader) {
setLoader(false);
}
});
} else {
console.debug('No getter for global version');
setData(null);
}
}

const dialogExitTransitionDurationMs = 195;

const moduleTypeSort = {
Expand All @@ -61,12 +96,12 @@ function compareModules(c1, c2) {
const AboutDialog = ({
open,
onClose,
getGlobalVersion,
globalVersionPromise,
appName,
appVersion,
appGitTag,
appLicense,
getAdditionalModules,
additionalModulesPromise,
}) => {
const theme = useTheme();
const [isRefreshing, setRefreshState] = useState(false);
Expand All @@ -76,24 +111,27 @@ const AboutDialog = ({
const [startingGlobalVersion, setStartingGlobalVersion] =
useState(undefined);
useEffect(() => {
if (startingGlobalVersion === undefined && getGlobalVersion) {
getGlobalVersion((value) => {
setStartingGlobalVersion(value);
setActualGlobalVersion(value);
});
if (startingGlobalVersion === undefined && globalVersionPromise) {
getGlobalVersion(
globalVersionPromise,
'global',
setStartingGlobalVersion,
undefined
);
}
}, [getGlobalVersion, startingGlobalVersion]);
}, [globalVersionPromise, startingGlobalVersion]);

const [actualGlobalVersion, setActualGlobalVersion] = useState(null);
useEffect(() => {
if (open && getGlobalVersion) {
setLoadingGlobalVersion(true);
getGlobalVersion((value) => {
setLoadingGlobalVersion(false);
setActualGlobalVersion(value || null);
});
if (open && globalVersionPromise) {
getGlobalVersion(
globalVersionPromise,
'actual',
setActualGlobalVersion,
setLoadingGlobalVersion
);
}
}, [open, getGlobalVersion]);
}, [open, globalVersionPromise]);

const [loadingAdditionalModules, setLoadingAdditionalModules] =
useState(false);
Expand All @@ -107,20 +145,32 @@ const AboutDialog = ({
gitTag: appGitTag,
license: appLicense,
};
if (getAdditionalModules) {
setLoadingAdditionalModules(true);
getAdditionalModules((values) => {
setLoadingAdditionalModules(false);
if (Array.isArray(values)) {
setModules([currentApp, ...values]);
} else {
setModules([currentApp]);
}
});
} else {
setModules([currentApp]);
}
} else {
(additionalModulesPromise
? new Promise((resolve) =>
resolve(setLoadingAdditionalModules(true))
).then(() => additionalModulesPromise())
: Promise.reject('no getter')
)
.then(
(values) => (Array.isArray(values) ? values : []),
(reason) => []
)
.then((values) => {
setModules([currentApp, ...values]);
})
.finally(() => setLoadingAdditionalModules(false));
}
}, [
open,
additionalModulesPromise,
appName,
appVersion,
appGitTag,
appLicense,
]);

useEffect(() => {
if (!open) {
// we wait the end of the fade animation of the dialog before reset content
setTimeout(
(setModules, setActualGlobalVersion) => {
Expand All @@ -132,14 +182,7 @@ const AboutDialog = ({
setActualGlobalVersion
);
}
}, [
open,
getAdditionalModules,
appName,
appVersion,
appGitTag,
appLicense,
]);
}, [open]);

const handleClose = useCallback(() => {
if (onClose) {
Expand Down Expand Up @@ -370,8 +413,8 @@ AboutDialog.propTypes = {
appVersion: PropTypes.string,
appGitTag: PropTypes.string,
appLicense: PropTypes.string,
getGlobalVersion: PropTypes.func,
getAdditionalModules: PropTypes.func,
globalVersionPromise: PropTypes.func,
additionalModulesPromise: PropTypes.func,
};

const styles = {
Expand Down
12 changes: 6 additions & 6 deletions src/components/TopBar/TopBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,8 @@ const TopBar = ({
children,
appsAndUrls,
onAboutClick,
getGlobalVersion,
getAdditionalModules,
globalVersionPromise,
additionalModulesPromise,
onThemeClick,
theme,
onEquipmentLabellingClick,
Expand Down Expand Up @@ -753,8 +753,8 @@ const TopBar = ({
appName={appName}
appVersion={appVersion}
appLicense={appLicense}
getGlobalVersion={getGlobalVersion}
getAdditionalModules={getAdditionalModules}
globalVersionPromise={globalVersionPromise}
additionalModulesPromise={additionalModulesPromise}
/>
</Toolbar>
</AppBar>
Expand All @@ -776,8 +776,8 @@ TopBar.propTypes = {
onThemeClick: PropTypes.func,
theme: PropTypes.string,
onAboutClick: PropTypes.func,
getGlobalVersion: PropTypes.func,
getAdditionalModules: PropTypes.func,
globalVersionPromise: PropTypes.func,
additionalModulesPromise: PropTypes.func,
onEquipmentLabellingClick: PropTypes.func,
equipmentLabelling: PropTypes.bool,
withElementsSearch: PropTypes.bool,
Expand Down

0 comments on commit 1235c48

Please sign in to comment.