set print width to 120 instead of default 80. (#79)

Author: capyq

.prettierrc.json

@@ -1,5 +1,6 @@
 {
     "trailingComma": "es5",
     "tabWidth": 4,
+    "printWidth": 120,
     "singleQuote": true
 }

README.md

@@ -5,7 +5,7 @@ This template setup the authentication mechanism and provides a configured empty
 
 To customize this repository for an app, search and replace the string `XXX` with the name of the app. For example, GridXXX -> GridFoo, gridXXX-app -> gridfoo-app.
 
-Create a new view in study-server and replace `yyy` with the new token in rest api `src/rest/study.ts`. 
+Create a new view in study-server and replace `yyy` with the new token in rest api `src/rest/study.ts`.
 
 ## Typescript config
 
@@ -20,7 +20,7 @@ To check dependencies license compatibility with this project one locally, pleas
 npm run licenses-check
 ```
 
-Notes : 
+Notes :
 * Check [license-checker-config.json](license-checker-config.json) for license white list and exclusion.
 If you need to update this list, please inform organization's owners.
 * Excluded dependencies :

license-checker-config.json

@@ -1,5 +1,5 @@
 {
-    "onlyAllow" : [
+    "onlyAllow": [
         "MPL-2.0",
         "MIT",
         "BSD-3-Clause",

src/__mocks__/svgrMock.js

@@ -7,9 +7,7 @@
 
 import React from 'react';
 
-const SvgrMock = React.forwardRef((props, ref) => (
-    <span ref={ref} {...props} />
-));
+const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);
 
 export const ReactComponent = SvgrMock;
 export default SvgrMock;

src/components/app-top-bar.tsx

@@ -5,26 +5,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, {
-    FunctionComponent,
-    useCallback,
-    useEffect,
-    useState,
-} from 'react';
-import {
-    LIGHT_THEME,
-    logout,
-    TopBar,
-    UserManagerState,
-} from '@gridsuite/commons-ui';
+import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import { LIGHT_THEME, logout, TopBar, UserManagerState } from '@gridsuite/commons-ui';
 import Parameters, { useParameterState } from './parameters';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-    fetchAppsAndUrls,
-    fetchVersion,
-    MetadataJson,
-} from '../utils/rest-api';
+import { fetchAppsAndUrls, fetchVersion, MetadataJson } from '../utils/rest-api';
 import { getServersInfos } from '../rest/study';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as PowsyblLogo } from '../images/powsybl_logo.svg';
@@ -47,8 +33,7 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
 
     const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME);
 
-    const [languageLocal, handleChangeLanguage] =
-        useParameterState(PARAM_LANGUAGE);
+    const [languageLocal, handleChangeLanguage] = useParameterState(PARAM_LANGUAGE);
 
     const [showParameters, setShowParameters] = useState(false);
     const displayParameters = useCallback(() => setShowParameters(true), []);
@@ -77,27 +62,18 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
                 appVersion={AppPackage.version}
                 appLicense={AppPackage.license}
                 onParametersClick={displayParameters}
-                onLogoutClick={() =>
-                    logout(dispatch, props.userManager.instance)
-                }
+                onLogoutClick={() => logout(dispatch, props.userManager.instance)}
                 onLogoClick={() => navigate('/', { replace: true })}
                 user={props.user ?? undefined}
                 appsAndUrls={appsAndUrls}
-                globalVersionPromise={() =>
-                    fetchVersion().then(
-                        (res) => res?.deployVersion ?? 'unknown'
-                    )
-                }
+                globalVersionPromise={() => fetchVersion().then((res) => res?.deployVersion ?? 'unknown')}
                 additionalModulesPromise={getServersInfos}
                 onThemeClick={handleChangeTheme}
                 theme={themeLocal}
                 onLanguageClick={handleChangeLanguage}
                 language={languageLocal}
             />
-            <Parameters
-                showParameters={showParameters}
-                hideParameters={hideParameters}
-            />
+            <Parameters showParameters={showParameters} hideParameters={hideParameters} />
         </>
     );
 };

src/components/app-wrapper.tsx

@@ -8,12 +8,7 @@
 import App from './app';
 import React, { FunctionComponent } from 'react';
 import { CssBaseline } from '@mui/material';
-import {
-    createTheme,
-    StyledEngineProvider,
-    Theme,
-    ThemeProvider,
-} from '@mui/material/styles';
+import { createTheme, StyledEngineProvider, Theme, ThemeProvider } from '@mui/material/styles';
 import {
     card_error_boundary_en,
     card_error_boundary_fr,
@@ -118,15 +113,10 @@ const messages: Record<GsLangUser, IntlConfig['messages']> = {
 const basename = new URL(document.querySelector('base')?.href ?? '').pathname;
 
 const AppWrapperWithRedux: FunctionComponent = () => {
-    const computedLanguage = useSelector(
-        (state: AppState) => state.computedLanguage
-    );
+    const computedLanguage = useSelector((state: AppState) => state.computedLanguage);
     const theme = useSelector((state: AppState) => state[PARAM_THEME]);
     return (
-        <IntlProvider
-            locale={computedLanguage}
-            messages={messages[computedLanguage]}
-        >
+        <IntlProvider locale={computedLanguage} messages={messages[computedLanguage]}>
             <BrowserRouter basename={basename}>
                 <StyledEngineProvider injectFirst>
                     <ThemeProvider theme={getMuiTheme(theme)}>

src/components/app.test.tsx

@@ -15,11 +15,7 @@ import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import App from './app';
 import { store } from '../redux/store';
-import {
-    createTheme,
-    StyledEngineProvider,
-    ThemeProvider,
-} from '@mui/material/styles';
+import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { SnackbarProvider } from '@gridsuite/commons-ui';
 import { CssBaseline } from '@mui/material';
 

src/components/app.tsx

@@ -5,21 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, {
-    FunctionComponent,
-    useCallback,
-    useEffect,
-    useState,
-} from 'react';
+import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-    Navigate,
-    Route,
-    Routes,
-    useLocation,
-    useMatch,
-    useNavigate,
-} from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useMatch, useNavigate } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { Box, Typography } from '@mui/material';
 import {
@@ -30,11 +18,7 @@ import {
     initializeAuthenticationProd,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
-import {
-    selectComputedLanguage,
-    selectLanguage,
-    selectTheme,
-} from '../redux/actions';
+import { selectComputedLanguage, selectLanguage, selectTheme } from '../redux/actions';
 import { AppState } from '../redux/reducer';
 import {
     ConfigParameters,
@@ -44,12 +28,7 @@ import {
     fetchIdpSettings,
     fetchValidateUser,
 } from '../utils/rest-api';
-import {
-    APP_NAME,
-    COMMON_APP_NAME,
-    PARAM_LANGUAGE,
-    PARAM_THEME,
-} from '../utils/config-params';
+import { APP_NAME, COMMON_APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { getComputedLanguage } from '../utils/language';
 import AppTopBar, { AppTopBarProps } from './app-top-bar';
 import ReconnectingWebSocket from 'reconnecting-websocket';
@@ -61,19 +40,11 @@ const App: FunctionComponent = () => {
 
     const user = useSelector((state: AppState) => state.user);
 
-    const signInCallbackError = useSelector(
-        (state: AppState) => state.signInCallbackError
-    );
-    const authenticationRouterError = useSelector(
-        (state: AppState) => state.authenticationRouterError
-    );
-    const showAuthenticationRouterLogin = useSelector(
-        (state: AppState) => state.showAuthenticationRouterLogin
-    );
+    const signInCallbackError = useSelector((state: AppState) => state.signInCallbackError);
+    const authenticationRouterError = useSelector((state: AppState) => state.authenticationRouterError);
+    const showAuthenticationRouterLogin = useSelector((state: AppState) => state.showAuthenticationRouterLogin);
 
-    const [userManager, setUserManager] = useState<
-        AppTopBarProps['userManager']
-    >({ instance: null, error: null });
+    const [userManager, setUserManager] = useState<AppTopBarProps['userManager']>({ instance: null, error: null });
 
     const navigate = useNavigate();
 
@@ -91,11 +62,7 @@ const App: FunctionComponent = () => {
                         break;
                     case PARAM_LANGUAGE:
                         dispatch(selectLanguage(param.value));
-                        dispatch(
-                            selectComputedLanguage(
-                                getComputedLanguage(param.value)
-                            )
-                        );
+                        dispatch(selectComputedLanguage(getComputedLanguage(param.value)));
                         break;
                     default:
                         break;
@@ -105,27 +72,26 @@ const App: FunctionComponent = () => {
         [dispatch]
     );
 
-    const connectNotificationsUpdateConfig =
-        useCallback((): ReconnectingWebSocket => {
-            const ws = connectNotificationsWsUpdateConfig();
-            ws.onmessage = function (event) {
-                let eventData = JSON.parse(event.data);
-                if (eventData.headers?.parameterName) {
-                    fetchConfigParameter(eventData.headers.parameterName)
-                        .then((param) => updateParams([param]))
-                        .catch((error) =>
-                            snackError({
-                                messageTxt: error.message,
-                                headerId: 'paramsRetrievingError',
-                            })
-                        );
-                }
-            };
-            ws.onerror = function (event) {
-                console.error('Unexpected Notification WebSocket error', event);
-            };
-            return ws;
-        }, [updateParams, snackError]);
+    const connectNotificationsUpdateConfig = useCallback((): ReconnectingWebSocket => {
+        const ws = connectNotificationsWsUpdateConfig();
+        ws.onmessage = function (event) {
+            let eventData = JSON.parse(event.data);
+            if (eventData.headers?.parameterName) {
+                fetchConfigParameter(eventData.headers.parameterName)
+                    .then((param) => updateParams([param]))
+                    .catch((error) =>
+                        snackError({
+                            messageTxt: error.message,
+                            headerId: 'paramsRetrievingError',
+                        })
+                    );
+            }
+        };
+        ws.onerror = function (event) {
+            console.error('Unexpected Notification WebSocket error', event);
+        };
+        return ws;
+    }, [updateParams, snackError]);
 
     // Can't use lazy initializer because useMatch is a hook
     const [initialMatchSilentRenewCallbackUrl] = useState(
@@ -144,9 +110,7 @@ const App: FunctionComponent = () => {
         // need subfunction when async as suggested by rule react-hooks/exhaustive-deps
         (async function initializeAuthentication() {
             try {
-                console.debug(
-                    `auth dev mode: ${process.env.REACT_APP_USE_AUTHENTICATION}`
-                );
+                console.debug(`auth dev mode: ${process.env.REACT_APP_USE_AUTHENTICATION}`);
                 const initAuth =
                     process.env.REACT_APP_USE_AUTHENTICATION === 'true'
                         ? initializeAuthenticationProd(
@@ -174,11 +138,7 @@ const App: FunctionComponent = () => {
             }
         })();
         // Note: dispatch and initialMatchSilentRenewCallbackUrl won't change
-    }, [
-        initialMatchSigninCallbackUrl,
-        initialMatchSilentRenewCallbackUrl,
-        dispatch,
-    ]);
+    }, [initialMatchSigninCallbackUrl, initialMatchSilentRenewCallbackUrl, dispatch]);
 
     useEffect(() => {
         if (user !== null) {
@@ -203,13 +163,7 @@ const App: FunctionComponent = () => {
             const ws = connectNotificationsUpdateConfig();
             return () => ws.close();
         }
-    }, [
-        user,
-        dispatch,
-        updateParams,
-        snackError,
-        connectNotificationsUpdateConfig,
-    ]);
+    }, [user, dispatch, updateParams, snackError, connectNotificationsUpdateConfig]);
 
     return (
         <>
@@ -221,33 +175,16 @@ const App: FunctionComponent = () => {
                             path="/"
                             element={
                                 <Box mt={20}>
-                                    <Typography
-                                        variant="h3"
-                                        color="textPrimary"
-                                        align="center"
-                                    >
+                                    <Typography variant="h3" color="textPrimary" align="center">
                                         Connected
                                     </Typography>
                                 </Box>
                             }
                         />
-                        <Route
-                            path="/sign-in-callback"
-                            element={
-                                <Navigate
-                                    replace
-                                    to={getPreLoginPath() || '/'}
-                                />
-                            }
-                        />
+                        <Route path="/sign-in-callback" element={<Navigate replace to={getPreLoginPath() || '/'} />} />
                         <Route
                             path="/logout-callback"
-                            element={
-                                <h1>
-                                    Error: logout failed; you are still logged
-                                    in.
-                                </h1>
-                            }
+                            element={<h1>Error: logout failed; you are still logged in.</h1>}
                         />
                         <Route
                             path="*"
@@ -263,9 +200,7 @@ const App: FunctionComponent = () => {
                         userManager={userManager}
                         signInCallbackError={signInCallbackError}
                         authenticationRouterError={authenticationRouterError}
-                        showAuthenticationRouterLogin={
-                            showAuthenticationRouterLogin
-                        }
+                        showAuthenticationRouterLogin={showAuthenticationRouterLogin}
                         dispatch={dispatch}
                         navigate={navigate}
                         location={location}
@@ -278,7 +213,5 @@ const App: FunctionComponent = () => {
 export default App;
 
 function validateUserDev(): Promise<boolean> {
-    return new Promise((resolve) =>
-        window.setTimeout(() => resolve(true), 500)
-    );
+    return new Promise((resolve) => window.setTimeout(() => resolve(true), 500));
 }