Migrate utils into typescript (#2443)

Signed-off-by: achour94 <[email protected]>

Author: achour94

src/components/custom-aggrid/custom-aggrid-header.jsx

@@ -31,7 +31,7 @@ import { mergeSx } from '../utils/functions';
 import { useLocalizedCountries } from 'components/utils/localized-countries-hook';
 import CustomAggridBooleanFilter from './custom-aggrid-filters/custom-aggrid-boolean-filter';
 import CustomAggridDurationFilter from './custom-aggrid-filters/custom-aggrid-duration-filter';
-import { countDecimalPlaces } from '../../utils/rounding.js';
+import { countDecimalPlaces } from '../../utils/rounding';
 import { computeTolerance } from '../../hooks/use-aggrid-local-row-filter';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 

src/components/dialogs/export-dialog.jsx

@@ -33,7 +33,7 @@ import { isBlankOrEmpty } from 'components/utils/validation-functions';
 import TextField from '@mui/material/TextField';
 import { useSelector } from 'react-redux';
 import { useParameterState } from './parameters/parameters.jsx';
-import { PARAM_DEVELOPER_MODE } from '../../utils/config-params.js';
+import { PARAM_DEVELOPER_MODE } from '../../utils/config-params';
 
 const STRING_LIST = 'STRING_LIST';
 

src/hooks/use-aggrid-local-row-filter.ts

@@ -36,7 +36,7 @@ export const computeTolerance = (value: undefined | null | number | string | str
     if (isNumber(value)) {
         decimalPrecision = countDecimalPlaces(value);
     } else {
-        decimalPrecision = countDecimalPlacesFromString(value);
+        decimalPrecision = countDecimalPlacesFromString(value as string);
     }
     // tolerance is multiplied by 0.5 to simulate the fact that the database value is rounded (in the front, from the user viewpoint)
     // more than 13 decimal after dot will likely cause rounding errors due to double precision

src/utils/NotificationType.js renamed to src/utils/NotificationType.ts

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-export function getNominalVoltageColor(nominalVoltage) {
+export function getNominalVoltageColor(nominalVoltage: number): number[] {
     if (nominalVoltage >= 300) {
         return [255, 0, 0];
     } else if (nominalVoltage >= 170 && nominalVoltage < 300) {

src/utils/UIconstants.js renamed to src/utils/UIconstants.ts

@@ -9,22 +9,16 @@ const MAX_TITLE_LENGTH = 300;
 const MAX_STUDY_NAME_LENGTH = 200;
 const SEPARATOR = ' | ';
 
-export const computeFullPath = (parents) => {
-    let path = '';
-
-    for (let i = 0; i < parents.length; i++) {
-        path = '/' + parents[i] + path;
-    }
-
-    return path;
+export const computeFullPath = (parents: string[]) => {
+    return parents.reduce((path, parent) => `${path}/${parent}`, '');
 };
 
-const computePath = (parents, maxAllowedPathSize) => {
+const computePath = (parents: string[], maxAllowedPathSize: number) => {
     let testedPath = '';
     let path = '';
 
-    for (let i = 0; i < parents.length; i++) {
-        testedPath += '/' + parents[i];
+    for (const parent of parents) {
+        testedPath += '/' + parent;
         if (testedPath.length > maxAllowedPathSize) {
             return '...' + path;
         }
@@ -35,23 +29,23 @@ const computePath = (parents, maxAllowedPathSize) => {
     return path;
 };
 
-const computePageTitleWithFirstDirectory = (pageTitle, parents) => {
+const computePageTitleWithFirstDirectory = (pageTitle: string, parents: string[]) => {
     return pageTitle + (parents.length > 1 ? '...' : '') + '/' + parents[0];
 };
 
-const computePageTitleWithFullPath = (pageTitle, parents) => {
+const computePageTitleWithFullPath = (pageTitle: string, parents: string[]) => {
     const maxAllowedPathSize = MAX_TITLE_LENGTH - pageTitle.length - '...'.length;
 
     pageTitle = pageTitle + computePath(parents, maxAllowedPathSize);
 
     return pageTitle;
 };
 
-const limitChar = (str, limit) => {
+const limitChar = (str: string, limit: number) => {
     return str.length > limit ? str.substring(0, limit) + '...' : str;
 };
 
-export const computePageTitle = (appName, studyName, parents) => {
+export const computePageTitle = (appName: string, studyName?: string | null, parents?: string[] | null) => {
     if (!studyName) {
         return appName;
     }

src/utils/colors.js renamed to src/utils/colors.ts

@@ -40,11 +40,11 @@ export const PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD = 'highVoltageAbsoluteThre
 export const MAP_BASEMAP_MAPBOX = 'mapbox';
 export const MAP_BASEMAP_CARTO = 'carto';
 export const MAP_BASEMAP_CARTO_NOLABEL = 'cartonolabel';
-export const basemap_style_theme_key = (basemap) => basemap + 'Style';
+export const basemap_style_theme_key = (basemap: string) => basemap + 'Style';
 
 const COMMON_CONFIG_PARAMS_NAMES = new Set([PARAM_THEME, PARAM_LANGUAGE]);
 
-export function getAppName(paramName) {
+export function getAppName(paramName: string) {
     return COMMON_CONFIG_PARAMS_NAMES.has(paramName) ? COMMON_APP_NAME : APP_NAME;
 }
 
@@ -54,6 +54,6 @@ const PARAM_SA_PROPORTIONAL_THRESHOLD = new Set([
     PARAM_SA_HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD,
 ]);
 
-export const isProportionalSAParam = (param) => {
+export const isProportionalSAParam = (param: string) => {
     return PARAM_SA_PROPORTIONAL_THRESHOLD.has(param);
 };

src/utils/compute-title.js renamed to src/utils/compute-title.ts

@@ -11,10 +11,29 @@ import { FormattedMessage } from 'react-intl';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
-import PropTypes from 'prop-types';
 import { CancelButton } from '@gridsuite/commons-ui';
+import { ReactElement } from 'react';
+import { SxProps, Theme } from '@mui/material';
 
-const SelectOptionsDialog = ({ open, onClose, onClick, title, child, style, validateKey }) => {
+interface SelectOptionsDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onClick: () => void;
+    title: string;
+    child: ReactElement;
+    style?: SxProps<Theme>;
+    validateKey?: string;
+}
+
+const SelectOptionsDialog = ({
+    open,
+    onClose,
+    onClick,
+    title,
+    child,
+    style,
+    validateKey,
+}: SelectOptionsDialogProps) => {
     const handleClose = () => {
         onClose();
     };
@@ -26,21 +45,11 @@ const SelectOptionsDialog = ({ open, onClose, onClick, title, child, style, vali
             <DialogActions>
                 <CancelButton onClick={handleClose} />
                 <Button onClick={onClick} variant="outlined">
-                    <FormattedMessage id={validateKey || 'validate'} />
+                    <FormattedMessage id={validateKey ?? 'validate'} />
                 </Button>
             </DialogActions>
         </Dialog>
     );
 };
 
-SelectOptionsDialog.propTypes = {
-    open: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onClick: PropTypes.func.isRequired,
-    title: PropTypes.string.isRequired,
-    child: PropTypes.element.isRequired,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-    validateKey: PropTypes.string,
-};
-
 export { SelectOptionsDialog };