Fix jslint errors.

2024-11-15 11:37:57 +01:00 · 2021-02-16 21:51:59 -08:00 · 2021-02-16 21:51:59 -08:00 · c032d1e311
commit c032d1e311
parent 9cc51b1a9e
44 changed files with 204 additions and 99 deletions
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';

@ -25,14 +25,14 @@ const queryClient = new QueryClient({
  }
 });

-const App = () => {
+const App = ():ReactElement => {
  const appi18n = new AppI18n();
  const locale = appi18n.getBrowserLocale();

  return locale.message ? (
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
-        <IntlProvider locale={locale.code} defaultLocale={Locales.EN.code} messages={locale.message}>
+        <IntlProvider locale={locale.code} defaultLocale={Locales.EN.code} messages={locale.message as Record<string, string> }>
          <CssBaseline />
          <ThemeProvider theme={theme}>
            <Router>
--- a/packages/webapp/src/classes/app-i18n/index.ts
+++ b/packages/webapp/src/classes/app-i18n/index.ts
@ -6,12 +6,12 @@ import 'dayjs/locale/es';
 export class Locale {
    code: LocaleCode;
    label: string;
-    message: any;
+    message: Record<string, string> ;

-    constructor(code: LocaleCode, label: string, message: any) {
+    constructor(code: LocaleCode, label: string, message: unknown) {
        this.code = code;
        this.label = label;
-        this.message = message;
+        this.message = message as Record<string, string>;
    }
 }

--- a/packages/webapp/src/classes/client/client-health-sentinel/index.tsx
+++ b/packages/webapp/src/classes/client/client-health-sentinel/index.tsx
@ -10,7 +10,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import Button from '@material-ui/core/Button';
 import AlertTitle from '@material-ui/lab/AlertTitle';

-const ClientHealthSentinel = () => {
+const ClientHealthSentinel = (): React.ReactElement => {
    const status: ClientStatus = useSelector(activeInstanceStatus);

    const handleOnClose = () => {
--- a/packages/webapp/src/classes/client/mock-client/index.ts
+++ b/packages/webapp/src/classes/client/mock-client/index.ts
@ -36,14 +36,16 @@ class MockClient implements Client {
    }

    deleteAccount(): Promise<void> {
-         return Promise.resolve();
+        return Promise.resolve();
    }

    updateAccountInfo(firstname: string, lastname: string): Promise<void> {
-         return Promise.resolve();
+        console.log("firstname:" + firstname, +lastname)
+        return Promise.resolve();
    }

    updateAccountPassword(pasword: string): Promise<void> {
+        console.log("password:" + pasword)
        return Promise.resolve();
    }

@ -53,6 +55,7 @@ class MockClient implements Client {
    }

    importMap(model: ImportMapInfo): Promise<number> {
+        console.log("model:" + model);
        return Promise.resolve(10);
    }

@ -72,11 +75,12 @@ class MockClient implements Client {
        return Promise.resolve();
    }
    revertHistory(id: number, cid: number): Promise<void> {
+        console.log("model:" + id + cid);
        return Promise.resolve();
    }

    createMap(map: BasicMapInfo): Promise<number> {
-        throw new Error("Method not implemented.");
+        throw new Error("Method not implemented." + map);
    }

    fetchLabels(): Promise<Label[]> {
@ -127,6 +131,7 @@ class MockClient implements Client {
        }
    }
    fetchHistory(id: number): Promise<ChangeHistory[]> {
+        console.log(`Fetching history for ${id}`)
        const result = [{
            id: 1,
            lastModificationBy: 'Paulo',
@ -211,6 +216,7 @@ class MockClient implements Client {
    }

    registerNewUser(user: NewUser): Promise<void> {
+        console.log("user:" + user)
        return Promise.resolve();
    }

@ -220,6 +226,7 @@ class MockClient implements Client {
    }

    resetPassword(email: string): Promise<void> {
+        console.log("email:" + email)
        return Promise.resolve();
    }
 }
--- a/packages/webapp/src/classes/client/rest-client/index.ts
+++ b/packages/webapp/src/classes/client/rest-client/index.ts
@ -163,7 +163,7 @@ export default class RestClient implements Client {
    }

    fetchHistory(id: number): Promise<ChangeHistory[]> {
-        throw new Error('Method not implemented.');
+        throw new Error(`Method not implemented. ${id}`);
    }

    renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
@ -213,6 +213,7 @@ export default class RestClient implements Client {
                }
            ).then(response => {
                const data = response.data;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                const maps: MapInfo[] = (data.mindmapsInfo as any[]).map(m => {
                    return {
                        id: m.id,
@ -247,7 +248,7 @@ export default class RestClient implements Client {
            axios.post(this.baseUrl + '/service/users/',
                JSON.stringify(user),
                { headers: { 'Content-Type': 'application/json' } }
-            ).then(response => {
+            ).then(() => {
                // All was ok, let's sent to success page ...;
                success();
            }).catch(error => {
@ -264,7 +265,7 @@ export default class RestClient implements Client {
        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
            axios.delete(this.baseUrl + `/c/restful/maps/${id}`,
                { headers: { 'Content-Type': 'application/json' } }
-            ).then(response => {
+            ).then(() => {
                success();
            }).catch(error => {
                const errorInfo = this.parseResponseOnError(error.response);
@ -280,7 +281,7 @@ export default class RestClient implements Client {
            axios.put(`${this.baseUrl}/service/users/resetPassword?email=${email}`,
                null,
                { headers: { 'Content-Type': 'application/json' } }
-            ).then(response => {
+            ).then(() => {
                // All was ok, let's sent to success page ...;
                success();
            }).catch(error => {
@ -335,6 +336,7 @@ export default class RestClient implements Client {
                }
            ).then(response => {
                const data = response.data;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                const maps: Label[] = (data.labels as any[]).map(l => {
                    return {
                        id: l.id,
@ -354,7 +356,7 @@ export default class RestClient implements Client {

    deleteLabel(id: number): Promise<void> {
        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
-            axios.delete(this.baseUrl + `/c/restful/label/${id}`).then(response => {
+            axios.delete(this.baseUrl + `/c/restful/label/${id}`).then(() => {
                success();
            }).catch(error => {
                const errorInfo = this.parseResponseOnError(error.response);
@ -364,6 +366,7 @@ export default class RestClient implements Client {
        return new Promise(handler);
    }

+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    private parseResponseOnError = (response: any): ErrorInfo => {
        let result: ErrorInfo | undefined;
        if (response) {
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@ -32,7 +32,7 @@ const ForgotPassword = () => {
    }
  );

-  const handleOnSubmit = (event: React.FormEvent<any>) => {
+  const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    mutation.mutate(email);
  }
@ -59,7 +59,7 @@ const ForgotPassword = () => {
  );
 }

-const ForgotPasswordPage = () => {
+const ForgotPasswordPage = ():React.ReactElement => {

  useEffect(() => {
    document.title = 'Reset Password | WiseMapping';
--- a/packages/webapp/src/components/forgot-password-success-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-success-page/index.tsx
@ -3,12 +3,12 @@ import { FormattedMessage } from 'react-intl'
 import FormContainer from '../layout/form-container';
 import Header from '../layout/header'
 import Footer from '../layout/footer'
-import { Link as RouterLink} from 'react-router-dom'
+import { Link as RouterLink } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';


-const ForgotPasswordSuccessPage = () => {
+const ForgotPasswordSuccessPage = (): React.ReactElement => {
  useEffect(() => {
    document.title = 'Reset Password | WiseMapping';
  });
--- a/packages/webapp/src/components/form/global-error/index.tsx
+++ b/packages/webapp/src/components/form/global-error/index.tsx
@ -7,14 +7,14 @@ type GlobalErrorProps = {
    error?: ErrorInfo;
 }

-const GlobalError = (props: GlobalErrorProps) => {
+const GlobalError = (props: GlobalErrorProps): React.ReactElement | null => {

    const error = props.error;
    const hasError = Boolean(error?.msg);
    const errorMsg = error?.msg;

-    return (hasError ? 
-    <StyledAlert severity="error" variant="filled" hidden={!hasError}> {errorMsg}</StyledAlert> : null);
+    return (hasError ?
+        <StyledAlert severity="error" variant="filled" hidden={!hasError}> {errorMsg}</StyledAlert> : null);

 };

--- a/packages/webapp/src/components/form/input/index.tsx
+++ b/packages/webapp/src/components/form/input/index.tsx
@ -27,7 +27,7 @@ const Input = ({
    fullWidth = true,
    disabled = false

-}: InputProps) => {
+}: InputProps): React.ReactElement => {

    const fieldError = error?.fields?.[name];
    return (
--- a/packages/webapp/src/components/form/submit-button/index.tsx
+++ b/packages/webapp/src/components/form/submit-button/index.tsx
@ -6,15 +6,15 @@ type SubmitButton = {
    value: string;
    disabled?: boolean;
 }
-const SubmitButton = (props: SubmitButton) => {
-    const [disabled, setDisabled] = useState(props.disabled ? true : false);
+const SubmitButton = (props: SubmitButton): React.ReactElement => {
+    const [disabled] = useState(props.disabled ? true : false);
    const intl = useIntl();

    let valueTxt = props.value;
    if (disabled) {
        valueTxt = intl.formatMessage({ id: "common.wait", defaultMessage: "Please wait ..." });
    }
-    const [value, setValue] = useState(valueTxt);
+    const [value] = useState(valueTxt);
    return (
        <Button color="primary" size="medium" variant="contained" type="submit"
            disableElevation={true} disabled={disabled}
--- a/packages/webapp/src/components/layout/footer/index.tsx
+++ b/packages/webapp/src/components/layout/footer/index.tsx
@ -6,7 +6,7 @@ import { StyledFooter } from './styled'
 // eslint-disable-next-line
 const poweredByIcon = require('../../../images/pwrdby-white.svg')

-const Footer = () => {
+const Footer = (): React.ReactElement => {
  return (
    <StyledFooter>
      <div style={{ padding: 0, margin: 0 }}>
--- a/packages/webapp/src/components/layout/header/index.tsx
+++ b/packages/webapp/src/components/layout/header/index.tsx
@ -16,7 +16,7 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
    super(props);
    this.state = { type: props.type };
  }
-  render() {
+  render(): React.ReactElement {
    let signUpButton;
    let signInButton;
    let text;
@ -53,14 +53,14 @@ interface ButtonProps {
  className?: string;
 }

-const SignInButton = (props: ButtonProps) => {
+const SignInButton = (props: ButtonProps): React.ReactElement => {
  return (
    <span className={`${props.className}`}>
      <Button color="primary" size="medium" variant="outlined" component={Link} to="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></Button>
    </span>);
 }

-const SignUpButton = (props: ButtonProps) => {
+const SignUpButton = (props: ButtonProps): React.ReactElement => {
  return (
    <span className={`${props.className}`}>
      <Button color="primary" size="medium" variant="outlined" component={Link} to="/c/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></Button>
--- a/packages/webapp/src/components/login-page/index.tsx
+++ b/packages/webapp/src/components/login-page/index.tsx
@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Link as RouterLink} from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import Header from '../layout/header';
 import Footer from '../layout/footer';
 import SubmitButton from '../form/submit-button';
@ -11,9 +11,11 @@ import Typography from '@material-ui/core/Typography';
 import FormControl from '@material-ui/core/FormControl';
 import Link from '@material-ui/core/Link';

+type ConfigStatusProps = {
+  enabled?: boolean
+}

-const ConfigStatusMessage = (props: any) => {
-  const enabled = props.enabled
+const ConfigStatusMessage = ({ enabled = false }: ConfigStatusProps): React.ReactElement => {
  let result;
  if (enabled === true) {
    result = (<div className="db-warn-msg">
@ -45,7 +47,7 @@ const LoginError = () => {
 }


-const LoginPage = () => {
+const LoginPage = (): React.ReactElement => {
  const intl = useIntl();

  useEffect(() => {
--- a/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
@ -25,7 +25,7 @@ type AccountInfoModel = {
 }

 const defaultModel: AccountInfoModel = { firstname: '', lastname: '', email: '' };
-const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps) => {
+const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps):React.ReactElement => {
    const client: Client = useSelector(activeInstance);
    const queryClient = useQueryClient();
    const [remove, setRemove] = React.useState<boolean>(false);
--- a/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx
@ -19,7 +19,7 @@ type ChangePasswordModel = {
 }

 const defaultModel: ChangePasswordModel = { password: '', retryPassword: '' };
-const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps) => {
+const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps):React.ReactElement => {
    const client: Client = useSelector(activeInstance);
    const [model, setModel] = React.useState<ChangePasswordModel>(defaultModel);
    const [error, setError] = React.useState<ErrorInfo>();
--- a/packages/webapp/src/components/maps-page/account-menu/index.tsx
+++ b/packages/webapp/src/components/maps-page/account-menu/index.tsx
@ -15,7 +15,7 @@ import Link from "@material-ui/core/Link";
 import ExitToAppOutlined from "@material-ui/icons/ExitToAppOutlined";

 type ActionType = 'change-password' | 'account-info' | undefined;
-const AccountMenu = () => {
+const AccountMenu = (): React.ReactElement => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const [action, setAction] = React.useState<ActionType>(undefined);
--- a/packages/webapp/src/components/maps-page/action-chooser/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-chooser/index.tsx
@ -24,7 +24,7 @@ interface ActionProps {
  mapId?: number
 }

-const ActionChooser = (props: ActionProps) => {
+const ActionChooser = (props: ActionProps): React.ReactElement => {
  const { anchor, onClose, mapId } = props;

  const handleOnClose = (action: ActionType): ((event: React.MouseEvent<HTMLLIElement>) => void) => {
--- a/packages/webapp/src/components/maps-page/action-chooser/styled.ts
+++ b/packages/webapp/src/components/maps-page/action-chooser/styled.ts
@ -5,5 +5,5 @@ export const StyledMenuItem = withStyles({
    root: {
      width: '300px',
    }
-  })(MenuItem)
+  })(MenuItem);
  
--- a/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx
@ -1,5 +1,5 @@
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { ErrorInfo } from "../../../../classes/client";
 import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
 import GlobalError from "../../../form/global-error";
@ -9,7 +9,7 @@ import Button from "@material-ui/core/Button";
 export type DialogProps = {
    onClose: () => void;
    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-    children: any;
+    children: unknown;
    error?: ErrorInfo;

    title: string;
@ -19,9 +19,8 @@ export type DialogProps = {
    actionUrl?: string;
 }

-const BaseDialog = (props: DialogProps) => {
-    const intl = useIntl();
-    const { onClose, onSubmit, actionUrl = "" } = props;
+const BaseDialog = (props: DialogProps): React.ReactElement => {
+    const { onClose, onSubmit } = props;

    const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
--- a/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
-import FormControl  from '@material-ui/core/FormControl';
+import FormControl from '@material-ui/core/FormControl';

 import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';
@ -19,7 +19,7 @@ export type CreateProps = {
 }

 const defaultModel: CreateModel = { title: '', description: '' };
-const CreateDialog = ({onClose}: CreateProps) => {
+const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
    const client: Client = useSelector(activeInstance);
    const [model, setModel] = React.useState<CreateModel>(defaultModel);
    const [error, setError] = React.useState<ErrorInfo>();
--- a/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx
@ -10,7 +10,7 @@ import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";


-const DeleteDialog = ({ mapId, onClose } : SimpleDialogProps) => {
+const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
  const intl = useIntl();
  const client: Client = useSelector(activeInstance);
  const queryClient = useQueryClient();
@ -36,13 +36,13 @@ const DeleteDialog = ({ mapId, onClose } : SimpleDialogProps) => {
    <div>
      <BaseDialog
        onClose={handleOnClose} onSubmit={handleOnSubmit}
-        title={intl.formatMessage({id: "action.delete-title", defaultMessage: "Delete"})}
-        submitButton={intl.formatMessage({id: "action.delete-title", defaultMessage: "Delete"})}>
+        title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
+        submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}>

        <Alert severity="warning">
          <AlertTitle>{alertTitle}</AlertTitle>
          <FormattedMessage id="action.delete-description"
-                            defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?."/>
+            defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
        </Alert>

      </BaseDialog>
--- a/packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx
@ -14,11 +14,11 @@ export type DeleteMultiselectDialogProps = {
  onClose: () => void
 }

-const DeleteMultiselectDialog = ({ onClose, mapsId }: DeleteMultiselectDialogProps) => {
+const DeleteMultiselectDialog = ({ onClose, mapsId }: DeleteMultiselectDialogProps): React.ReactElement => {
  const intl = useIntl();
  const client: Client = useSelector(activeInstance);
  const queryClient = useQueryClient();
- 
+
  const mutation = useMutation((ids: number[]) => client.deleteMaps(ids),
    {
      onSuccess: () => handleOnMutationSuccess(onClose, queryClient)
--- a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx
@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useMutation } from "react-query";
-import  FormControl  from "@material-ui/core/FormControl";
+import FormControl from "@material-ui/core/FormControl";
 import { useSelector } from "react-redux";

 import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";
@ -17,7 +17,7 @@ export type DuplicateModel = {
 }

 const defaultModel: DuplicateModel = { title: '', description: '', id: -1 };
-const DuplicateDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const DuplicateDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
    const service: Client = useSelector(activeInstance);
    const [model, setModel] = React.useState<DuplicateModel>(defaultModel);
    const [error, setError] = React.useState<ErrorInfo>();
--- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
@ -21,10 +21,12 @@ type ExportDialogProps = {
    onClose: () => void,
 }

-const ExportDialog = ({ mapId, onClose, enableImgExport, svgXml }: ExportDialogProps) => {
+const ExportDialog = ({ mapId, onClose, enableImgExport, svgXml }: ExportDialogProps): React.ReactElement => {
    const intl = useIntl();
    const [submit, setSubmit] = React.useState<boolean>(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const [formExportRef, setExportFormRef] = React.useState<any>();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const [formTransformtRef, setTransformFormRef] = React.useState<any>();
    const [exportGroup, setExportGroup] = React.useState<ExportGroup>(enableImgExport ? 'image' : 'document');
    const [exportFormat, setExportFormat] = React.useState<ExportFormat>(enableImgExport ? 'svg' : 'xls');
@ -66,10 +68,10 @@ const ExportDialog = ({ mapId, onClose, enableImgExport, svgXml }: ExportDialogP
        if (submit) {
            // Depending on the type of export. It will require differt POST.
            if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "jpg" || exportFormat == "png") {
-                formTransformtRef.submit();
+                formTransformtRef?.submit();
            } else {

-                formExportRef.submit();
+                formExportRef?.submit();
            }
            onClose();
        }
--- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts
@ -1,8 +1,7 @@
-import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import createStyles from "@material-ui/core/styles/createStyles";
 import makeStyles from "@material-ui/core/styles/makeStyles";

-export const useStyles = makeStyles((theme: Theme) =>
+export const useStyles = makeStyles(() =>
    createStyles({
        select: {
            height: '40px',
--- a/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx
@ -19,11 +19,11 @@ import Link from "@material-ui/core/Link";
 import Paper from "@material-ui/core/Paper";


-const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
  const intl = useIntl();

  const client: Client = useSelector(activeInstance);
-  const { isLoading, error, data } = useQuery<unknown, ErrorInfo, ChangeHistory[]>('history', () => {
+  const { data } = useQuery<unknown, ErrorInfo, ChangeHistory[]>('history', () => {
    return client.fetchHistory(mapId);
  });
  const changeHistory: ChangeHistory[] = data ? data : [];
@ -35,7 +35,7 @@ const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps) => {
  const handleOnClick = (event, vid): void => {
    event.preventDefault();
    client.revertHistory(mapId, vid)
-      .then((mapId) => {
+      .then(() => {
        handleOnClose();
      })
  };
--- a/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
@ -22,7 +22,7 @@ export type CreateProps = {
 }

 const defaultModel: ImportModel = { title: '' };
-const ImportDialog = ({onClose}: CreateProps) => {
+const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
    const client: Client = useSelector(activeInstance);
    const [model, setModel] = React.useState<ImportModel>(defaultModel);
    const [error, setError] = React.useState<ErrorInfo>();
@ -66,11 +66,8 @@ const ImportDialog = ({onClose}: CreateProps) => {

        if (files) {
            const file = files[0];
-            let title = file.name;
-            title = title.substring(0, title.lastIndexOf("."));
-
            // Closure to capture the file information.
-            reader.onload =  (event) => {
+            reader.onload = (event) => {
                const fileContent = event?.target?.result;
                model.content = fileContent;

@ -83,7 +80,7 @@ const ImportDialog = ({onClose}: CreateProps) => {
                    }
                }
                model.contentType = file.name.lastIndexOf(".wxml") != -1 ? "application/xml" : "application/freemind";
-                setModel({...model});
+                setModel({ ...model });
            };

            // Read in the image file as a data URL.
--- a/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx
@ -11,6 +11,7 @@ import PublishDialog from './publish-dialog';
 import InfoDialog from './info-dialog';
 import DeleteMultiselectDialog from './delete-multiselect-dialog';
 import ExportDialog from './export-dialog';
+import ShareDialog from './share-dialog';

 export type BasicMapInfo = {
  name: string;
@ -23,12 +24,10 @@ type ActionDialogProps = {
  onClose: () => void
 }

-const ActionDispatcher = (props: ActionDialogProps) => {
-  const mapsId = props.mapsId;
-  const action = props.action;
+const ActionDispatcher = ({ mapsId, action, onClose }: ActionDialogProps): React.ReactElement => {

  const handleOnClose = (): void => {
-    props.onClose();
+    onClose();
  }

  switch (action) {
@ -54,6 +53,7 @@ const ActionDispatcher = (props: ActionDialogProps) => {
      {action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapsId[0]} />}
      {action === 'create' && <CreateDialog onClose={handleOnClose} />}
      {action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]} enableImgExport={false} />}
+      {action === 'share' && <ShareDialog onClose={handleOnClose} mapId={mapsId[0]} />}
    </span >
  );
 }
--- a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx
@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from 'react-intl';

 import { ErrorInfo } from '../../../../classes/client';
 import BaseDialog from '../base-dialog';
-import {  SimpleDialogProps } from '..';
+import { SimpleDialogProps } from '..';
 import { useStyles } from './style';
 import dayjs from 'dayjs';
 import { fetchMapById } from '../../../../redux/clientSlice';
@ -13,7 +13,7 @@ import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';

-const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
    const { map } = fetchMapById(mapId);
    const [error, setError] = React.useState<ErrorInfo>();

@ -31,7 +31,7 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => {
            description={intl.formatMessage({ id: 'info.description-msg', defaultMessage: 'By publishing the map you make it visible to everyone on the Internet.' })}
            submitButton={intl.formatMessage({ id: 'info.button', defaultMessage: 'Accept' })}>

-            <Paper style={{ maxHeight: '200px' }}>
+            <Paper style={{ maxHeight: 200, overflowY: 'scroll' }} variant="outlined" elevation={0}>
                <Card variant="outlined">
                    <List dense={true}>
                        <ListItem>
--- a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts
@ -1,8 +1,7 @@
-import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import createStyles from "@material-ui/core/styles/createStyles";
 import makeStyles from "@material-ui/core/styles/makeStyles";

-export const useStyles = makeStyles((theme: Theme) =>
+export const useStyles = makeStyles(() =>
    createStyles({
        textarea: {
            width: '100%',
--- a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
@ -20,7 +20,7 @@ import Typography from '@material-ui/core/Typography';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';


-const PublishDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
    const { map } = fetchMapById(mapId);

    const client: Client = useSelector(activeInstance);
--- a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts
@ -1,8 +1,7 @@
-import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import createStyles from "@material-ui/core/styles/createStyles";
 import makeStyles from "@material-ui/core/styles/makeStyles";

-export const useStyles = makeStyles((theme: Theme) =>
+export const useStyles = makeStyles(() =>
    createStyles({
        textarea: {
            width: '100%',
--- a/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx
@ -16,7 +16,7 @@ export type RenameModel = {
 }

 const defaultModel: RenameModel = { title: '', description: '', id: -1 };
-const RenameDialog = ({ mapId, onClose }: SimpleDialogProps) => {
+const RenameDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
    const service: Client = useSelector(activeInstance);
    const [model, setModel] = React.useState<RenameModel>(defaultModel);
    const [error, setError] = React.useState<ErrorInfo>();
--- a/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx
@ -0,0 +1,76 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { useMutation, useQueryClient } from "react-query";
+import { useSelector } from "react-redux";
+import Client from "../../../../classes/client";
+import { activeInstance } from '../../../../redux/clientSlice';
+import { SimpleDialogProps, handleOnMutationSuccess } from "..";
+import BaseDialog from "../base-dialog";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import IconButton from "@material-ui/core/IconButton";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import DeleteIcon from '@material-ui/icons/Delete';
+import Paper from "@material-ui/core/Paper";
+
+
+const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
+  const intl = useIntl();
+  const client: Client = useSelector(activeInstance);
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation((id: number) => client.deleteMap(id),
+    {
+      onSuccess: () => handleOnMutationSuccess(onClose, queryClient)
+    }
+  );
+
+  const handleOnClose = (): void => {
+    onClose();
+  };
+
+  const handleOnSubmit = (): void => {
+    mutation.mutate(mapId);
+  }
+
+  // Fetch map model to be rendered ...
+  return (
+    <div>
+      <BaseDialog
+        onClose={handleOnClose} onSubmit={handleOnSubmit}
+        title={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share with collaborators" })}
+        description={intl.formatMessage({ id: "share.delete-description", defaultMessage: "Collaboration " })}
+        submitButton={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share" })} >
+
+
+        <div style={{ margin: "10px 0px", padding:"30px 0px"   ,background:"gray" }}>
+          <input type="text" placeholder="Enter collaboratior emails separated by comas" />
+        </div>
+
+        <Paper elevation={1} style={{ maxHeight: 200, overflowY: 'scroll' }} variant="outlined">
+          <List>
+            {[.4, 5, 7, 7, 8, 9, 100, 1, 2, 3].map((value) => {
+              const labelId = `checkbox-list-label-${value}`;
+
+              return (
+                <ListItem key={value} role={undefined} dense button>
+                  <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
+                  <ListItemSecondaryAction>
+                    <IconButton edge="end">
+                      <DeleteIcon />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              );
+            })}
+          </List>
+        </Paper>
+
+      </BaseDialog>
+    </div>
+  );
+}
+
+
+export default ShareDialog;
--- a/packages/webapp/src/components/maps-page/help-menu/index.tsx
+++ b/packages/webapp/src/components/maps-page/help-menu/index.tsx
@ -12,7 +12,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Link from "@material-ui/core/Link";
 import ListItemIcon from "@material-ui/core/ListItemIcon";

-const HelpMenu = () => {
+const HelpMenu = (): React.ReactElement => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);

--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@ -1,4 +1,4 @@
-import React, { ErrorInfo, useEffect } from 'react';
+import React, { ErrorInfo, ReactElement, useEffect } from 'react';
 import clsx from 'clsx';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@ -56,10 +56,10 @@ export interface LabelFilter {
 interface ToolbarButtonInfo {
    filter: GenericFilter | LabelFilter,
    label: string
-    icon: any;
+    icon: React.ReactElement;
 }

-const MapsPage = () => {
+const MapsPage = (): ReactElement => {
    const classes = useStyles();
    const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
    const client: Client = useSelector(activeInstance);
@ -221,7 +221,7 @@ const MapsPage = () => {
 }

 interface ListItemProps {
-    icon: any,
+    icon: React.ReactElement,
    label: string,
    filter: Filter,
    active?: Filter
@ -241,12 +241,12 @@ const StyleListItem = (props: ListItemProps) => {
        && (activeFilter.type != 'label' || ((activeFilter as LabelFilter).label == (filter as LabelFilter).label));


-    const handleOnClick = (event: any, filter: Filter) => {
+    const handleOnClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, filter: Filter) => {
        event.stopPropagation();
        onClick(filter);
    }

-    const handleOnDelete = (event: any, filter: Filter) => {
+    const handleOnDelete = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, filter: Filter) => {
        event.stopPropagation();
        if (!onDeleteLabel) {
            throw "Illegal state exeption";
--- a/packages/webapp/src/components/maps-page/language-menu/index.tsx
+++ b/packages/webapp/src/components/maps-page/language-menu/index.tsx
@ -18,7 +18,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import Divider from '@material-ui/core/Divider';


-const LanguageMenu = () => {
+const LanguageMenu = (): React.ReactElement => {
    const queryClient = useQueryClient();
    const client: Client = useSelector(activeInstance);
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
--- a/packages/webapp/src/components/maps-page/maps-list/index.tsx
+++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx
@ -51,6 +51,7 @@ function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {

 type Order = 'asc' | 'desc';

+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getComparator<Key extends keyof any>(
  order: Order,
  orderBy: Key,
@ -195,7 +196,7 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
  }
 }

-export const MapsList = (props: MapsListProps) => {
+export const MapsList = (props: MapsListProps):React.ReactElement => {
  const classes = useStyles();
  const [order, setOrder] = React.useState<Order>('asc');
  const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
@ -280,8 +281,8 @@ export const MapsList = (props: MapsListProps) => {
    setPage(0);
  };

-  const handleActionClick = (mapId: number): ((event: any) => void) => {
-    return (event: any): void => {
+  const handleActionClick = (mapId: number): ((event) => void) => {
+    return (event): void => {
      setActiveRowAction(
        {
          mapId: mapId,
@ -435,7 +436,7 @@ export const MapsList = (props: MapsListProps) => {
                      return (
                        <TableRow
                          hover
-                          onClick={(event: any) => handleRowClick(event, row.id)}
+                          onClick={(event) => handleRowClick(event, row.id)}
                          role="checkbox"
                          aria-checked={isItemSelected}
                          tabIndex={-1}
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@ -102,7 +102,7 @@ const RegistrationForm = () => {
  );
 }

-const RegistationPage = () => {
+const RegistationPage = (): React.ReactElement => {

  useEffect(() => {
    document.title = 'Registration | WiseMapping';
--- a/packages/webapp/src/components/registration-success-page/index.tsx
+++ b/packages/webapp/src/components/registration-success-page/index.tsx
@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';


-const RegistrationSuccessPage = () => {
+const RegistrationSuccessPage = (): React.ReactElement => {
  useEffect(() => {
    document.title = 'Reset Password | WiseMapping';
  });
--- a/packages/webapp/src/redux/clientSlice.ts
+++ b/packages/webapp/src/redux/clientSlice.ts
@ -1,4 +1,5 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { createSlice } from '@reduxjs/toolkit';
 import { useQuery } from 'react-query';
 import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client';
 import MockClient from '../classes/client/mock-client';
@ -15,6 +16,7 @@ class RutimeConfig {
  load() {

    // Config can be inserted in the html page to define the global properties ...
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    this.config = (window as any).serverconfig;
    return this;
  }
@ -53,8 +55,8 @@ export const clientSlice = createSlice({
  name: "client",
  initialState: initialState,
  reducers: {
-    sessionExpired(state, action: PayloadAction<void>) {
-      state.status = { state: 'session-expired', msg: 'Sessions has expired. You need to login again.' }
+    sessionExpired(state) {
+      state.status = { state: 'session-expired', msg: 'Sessions has expired. You need to login again'  }
    }
  },
 });
@ -87,10 +89,12 @@ export const fetchAccount = (): AccountInfo | undefined => {
  return data;
 }

+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const activeInstance = (state: any): Client => {
  return state.client.instance;
 }

+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const activeInstanceStatus = (state: any): ClientStatus => {
  return state.client.status;
 }
--- a/packages/webapp/stats.json
+++ b/packages/webapp/stats.json
--- a/packages/webapp/webpack.prod.js
+++ b/packages/webapp/webpack.prod.js
@ -1,6 +1,8 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+

 const CompressionPlugin = require('compression-webpack-plugin');

@ -11,6 +13,13 @@ module.exports = merge(common, {
    minimize: true
  },
  plugins: [
-    new CompressionPlugin()
+    new CompressionPlugin(),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'public/index.html'),
+      templateParameters: {
+        PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com'
+      },
+      base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com'
+    })
  ]
 });
--- a/yarn.lock
+++ b/yarn.lock
@ -3034,6 +3034,10 @@ dayjs@^1.10.4:
  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==

+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -6132,7 +6136,10 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.5:
 modify-values@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
+<<<<<<< Updated upstream
  integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
+=======
+>>>>>>> Stashed changes

 move-concurrently@^1.0.1:
  version "1.0.1"