From 60fd57b0944ffc4cf0ab4d6faa8b060c8527122e Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Thu, 24 Dec 2020 17:39:06 -0800
Subject: [PATCH] Redux initial refactor

---
 packages/webapp/lang/en.json                  |  55 ++++++++-
 packages/webapp/package.json                  |   6 +-
 packages/webapp/src/app.tsx                   |  60 ++++-----
 packages/webapp/src/compiled-lang/en.json     | 106 +++++++++++++++-
 .../components/forgot-password-page/index.tsx |  26 ++--
 .../src/components/maps-page/ActionDialog.tsx | 115 +++++++++++-------
 .../webapp/src/components/maps-page/index.tsx |  38 ++----
 .../components/registration-page/index.tsx    |  27 ++--
 packages/webapp/src/index.tsx                 |  34 +-----
 packages/webapp/src/reducers/mapsListSlice.ts | 113 +++++++++++++++++
 packages/webapp/src/services/Service.ts       |  14 ++-
 packages/webapp/src/store.ts                  |  12 ++
 12 files changed, 436 insertions(+), 170 deletions(-)
 create mode 100644 packages/webapp/src/reducers/mapsListSlice.ts
 create mode 100644 packages/webapp/src/store.ts

diff --git a/packages/webapp/lang/en.json b/packages/webapp/lang/en.json
index e37a1dd7..1e276f4b 100644
--- a/packages/webapp/lang/en.json
+++ b/packages/webapp/lang/en.json
@@ -1,4 +1,55 @@
 {
+  "action.cancel-button": {
+    "defaultMessage": "Cancel"
+  },
+  "action.delete": {
+    "defaultMessage": "Delete"
+  },
+  "action.delete-button": {
+    "defaultMessage": "Delete"
+  },
+  "action.delete-description": {
+    "defaultMessage": "Deleted mindmap can not be recovered. Do you want to continue ?."
+  },
+  "action.delete-title": {
+    "defaultMessage": "Delete"
+  },
+  "action.duplicate": {
+    "defaultMessage": "Duplicate"
+  },
+  "action.export": {
+    "defaultMessage": "Export"
+  },
+  "action.open": {
+    "defaultMessage": "Open"
+  },
+  "action.print": {
+    "defaultMessage": "Print"
+  },
+  "action.publish": {
+    "defaultMessage": "Publish"
+  },
+  "action.rename": {
+    "defaultMessage": "Rename"
+  },
+  "action.rename-button": {
+    "defaultMessage": "Rename"
+  },
+  "action.rename-description": {
+    "defaultMessage": "Please, update the name and description for your mindmap."
+  },
+  "action.rename-description-placeholder": {
+    "defaultMessage": "Description"
+  },
+  "action.rename-name-placeholder": {
+    "defaultMessage": "Name"
+  },
+  "action.rename-title": {
+    "defaultMessage": "Rename"
+  },
+  "action.share": {
+    "defaultMessage": "Info"
+  },
   "common.wait": {
     "defaultMessage": "Please wait ..."
   },
@@ -57,7 +108,7 @@
     "defaultMessage": "Email"
   },
   "login.error": {
-    "defaultMessage": "The login.email address or login.password you entered is not valid."
+    "defaultMessage": "The email address or password you entered is not valid."
   },
   "login.forgotpwd": {
     "defaultMessage": "Forgot Password ?"
@@ -82,7 +133,7 @@
     "defaultMessage": "Welcome"
   },
   "login.userinactive": {
-    "defaultMessage": "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!."
+    "defaultMessage": "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!."
   },
   "registration.desc": {
     "defaultMessage": "Signing up is free and just take a moment"
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index 7166263a..7833a9c1 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -48,13 +48,15 @@
         "@material-ui/core": "^4.11.2",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",
+        "@reduxjs/toolkit": "^1.5.0",
+        "@types/axios": "^0.14.0",
         "@types/react-google-recaptcha": "^2.1.0",
-        "axios": "^0.21.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-google-recaptcha": "^2.1.0",
         "react-intl": "^5.10.6",
+        "react-redux": "^7.2.2",
         "react-router-dom": "^5.2.0",
         "styled-components": "^5.2.1"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index e057869f..5f0706ad 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Service, RestService } from './services/Service';
 import { IntlProvider } from 'react-intl'
 
 import { GlobalStyle } from './theme/global-style';
@@ -7,7 +6,8 @@ import RegistrationSuccessPage from './components/registration-success-page';
 import ForgotPasswordSuccessPage from './components/forgot-password-success-page';
 import RegistationPage from './components/registration-page';
 import LoginPage from './components/login-page';
-import MapsPage from './components/maps-page'; 
+import MapsPage from './components/maps-page';
+import store from "./store"
 
 import {
   Route,
@@ -17,6 +17,7 @@ import {
 } from 'react-router-dom';
 
 import { ForgotPasswordPage } from './components/forgot-password-page';
+import { Provider } from 'react-redux';
 
 function loadLocaleData(language: string) {
   switch (language) {
@@ -25,13 +26,13 @@ function loadLocaleData(language: string) {
     default:
       return require('./compiled-lang/en.json')
   }
-} 
+}
 
 type AppProps = {
   baseRestUrl: string;
 }
 
-const App = (props: AppProps) => {
+const App = () => {
   const [messages, setMessages] = useState(undefined);
 
   // Boostrap i18n ...
@@ -50,33 +51,32 @@ const App = (props: AppProps) => {
     fetchData();
   }, []);
 
-  // Create Service object...
-
-  const service: Service = new RestService(props.baseRestUrl, () => { console.log("401 error") });
-
   return messages ? (
-    <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
-      <GlobalStyle />
-      <Router>
-        <Switch>
-          <Route exact path="/">
-            <Redirect to="/c/login" />
-          </Route>
-          <Route path="/c/login" component={LoginPage} />
-          <Route path="/c/registration">
-            <RegistationPage service={service} />
-          </Route>
-          <Route path="/c/registration-success" component={RegistrationSuccessPage} />
-          <Route path="/c/forgot-password">
-            <ForgotPasswordPage service={service} />
-          </Route>
-          <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
-          <Route path="/c/maps/">
-            <MapsPage service={service} />
-          </Route>
-        </Switch>
-      </Router>
-    </IntlProvider>
+    <Provider store={store}>
+      <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
+        <GlobalStyle />
+        <Router>
+          <Switch>
+            <Route exact path="/">
+              <Redirect to="/c/login" />
+            </Route>
+            <Route path="/c/login" component={LoginPage} />
+            <Route path="/c/registration">
+              <RegistationPage />
+            </Route>
+            <Route path="/c/registration-success" component={RegistrationSuccessPage} />
+            <Route path="/c/forgot-password">
+              <ForgotPasswordPage />
+            </Route>
+            <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
+            <Route path="/c/maps/">
+              <MapsPage />
+            </Route>
+          </Switch>
+        </Router>
+      </IntlProvider>
+    </Provider>
+
   ) : <div>Loading ... </div>
 }
 
diff --git a/packages/webapp/src/compiled-lang/en.json b/packages/webapp/src/compiled-lang/en.json
index d51b6384..0cec10e1 100644
--- a/packages/webapp/src/compiled-lang/en.json
+++ b/packages/webapp/src/compiled-lang/en.json
@@ -1,4 +1,106 @@
 {
+  "action.cancel-button": [
+    {
+      "type": 0,
+      "value": "Cancel"
+    }
+  ],
+  "action.delete": [
+    {
+      "type": 0,
+      "value": "Delete"
+    }
+  ],
+  "action.delete-button": [
+    {
+      "type": 0,
+      "value": "Delete"
+    }
+  ],
+  "action.delete-description": [
+    {
+      "type": 0,
+      "value": "Deleted mindmap can not be recovered. Do you want to continue ?."
+    }
+  ],
+  "action.delete-title": [
+    {
+      "type": 0,
+      "value": "Delete"
+    }
+  ],
+  "action.duplicate": [
+    {
+      "type": 0,
+      "value": "Duplicate"
+    }
+  ],
+  "action.export": [
+    {
+      "type": 0,
+      "value": "Export"
+    }
+  ],
+  "action.open": [
+    {
+      "type": 0,
+      "value": "Open"
+    }
+  ],
+  "action.print": [
+    {
+      "type": 0,
+      "value": "Print"
+    }
+  ],
+  "action.publish": [
+    {
+      "type": 0,
+      "value": "Publish"
+    }
+  ],
+  "action.rename": [
+    {
+      "type": 0,
+      "value": "Rename"
+    }
+  ],
+  "action.rename-button": [
+    {
+      "type": 0,
+      "value": "Rename"
+    }
+  ],
+  "action.rename-description": [
+    {
+      "type": 0,
+      "value": "Please, update the name and description for your mindmap."
+    }
+  ],
+  "action.rename-description-placeholder": [
+    {
+      "type": 0,
+      "value": "Description"
+    }
+  ],
+  "action.rename-name-placeholder": [
+    {
+      "type": 0,
+      "value": "Name"
+    }
+  ],
+  "action.rename-title": [
+    {
+      "type": 0,
+      "value": "Rename"
+    }
+  ],
+  "action.share": [
+    {
+      "type": 0,
+      "value": "Info"
+    }
+  ],
   "common.wait": [
     {
       "type": 0,
@@ -116,7 +218,7 @@
   "login.error": [
     {
       "type": 0,
-      "value": "The login.email address or login.password you entered is not valid."
+      "value": "The email address or password you entered is not valid."
     }
   ],
   "login.forgotpwd": [
@@ -164,7 +266,7 @@
   "login.userinactive": [
     {
       "type": 0,
-      "value": "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!."
+      "value": "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!."
     }
   ],
   "registration.desc": [
diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx
index ddb6372c..112dc081 100644
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@@ -13,7 +13,7 @@ type ForgotPasswordProps = {
   email: string;
 }
 
-const ForgotPassword = (props: ServiceProps) => {
+const ForgotPassword = () => {
   const [email, setEmail] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
   const [disableButton, setDisableButton] = useState(false);
@@ -26,20 +26,20 @@ const ForgotPassword = (props: ServiceProps) => {
     setDisableButton(true);
 
     // Call Service ...
-    const service = props.service;
-    service.resetPassword(email)
-      .then(() => {
-        history.push("/c/forgot-password-success");
-      }).catch((error: ErrorInfo) => {
-        setErrorMsg(error.msg ? error.msg : '');
-        setDisableButton(false);
-      });
+    // const service = props.service;
+    // service.resetPassword(email)
+    //   .then(() => {
+    //     history.push("/c/forgot-password-success");
+    //   }).catch((error: ErrorInfo) => {
+    //     setErrorMsg(error.msg ? error.msg : '');
+    //     setDisableButton(false);
+    //   });
   }
 
   return (
     <PageContent>
-      <h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password"/></h1>
-      <p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password"/></p>
+      <h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password" /></h1>
+      <p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password" /></p>
 
       <form onSubmit={handleOnSubmit}>
         <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
@@ -55,7 +55,7 @@ const ForgotPassword = (props: ServiceProps) => {
 type ServiceProps = {
   service: Service
 }
-const ForgotPasswordPage = (props: ServiceProps) => {
+const ForgotPasswordPage = () => {
 
   useEffect(() => {
     document.title = 'Reset Password | WiseMapping';
@@ -64,7 +64,7 @@ const ForgotPasswordPage = (props: ServiceProps) => {
   return (
     <div>
       <Header type='only-signin' />
-      <ForgotPassword service={props.service} />
+      <ForgotPassword />
       <Footer />
     </div>
   );
diff --git a/packages/webapp/src/components/maps-page/ActionDialog.tsx b/packages/webapp/src/components/maps-page/ActionDialog.tsx
index b3b72f4c..986a7cfd 100644
--- a/packages/webapp/src/components/maps-page/ActionDialog.tsx
+++ b/packages/webapp/src/components/maps-page/ActionDialog.tsx
@@ -6,26 +6,41 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { BasicMapInfo, ErrorInfo, Service } from '../../services/Service';
+import { ErrorInfo, MapInfo, Service } from '../../services/Service';
 import { FormControl, TextField } from '@material-ui/core';
 import { Alert, AlertTitle } from '@material-ui/lab';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  allMaps,
+  remove,
+  rename
+} from '../../reducers/mapsListSlice'
+import { Description } from '@material-ui/icons';
+
 
 type DialogProps = {
   open: boolean,
   mapId: number,
-  onClose: (reload: boolean) => void,
-  service: Service
+  onClose: () => void
 }
 
-function DeleteConfirmDialog(props: DialogProps) {
+export type BasicMapInfo = {
+  name: string;
+  description: string | undefined;
+}
+
+function DeleteDialog(props: DialogProps) {
+  const dispatch = useDispatch()
+  const mapId = props.mapId;
+
+  const mapInfo: MapInfo | undefined = useSelector(allMaps).
+    find(m => m.id == mapId);
 
   const handleOnClose = (action: 'accept' | undefined): void => {
-    let result = false;
-    if (action == 'accept') {
-      props.service.deleteMap(props.mapId);
-      result = true;
+    if (action == 'accept' && mapInfo) {
+      dispatch(remove({ id: mapId }))
     }
-    props.onClose(result);
+    props.onClose();
   };
 
   return (
@@ -35,12 +50,10 @@ function DeleteConfirmDialog(props: DialogProps) {
         onClose={() => handleOnClose(undefined)} >
         <DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
         <DialogContent>
-          <DialogContentText>
-            <Alert severity="warning">
-              <AlertTitle>Map to be deleted</AlertTitle>
-              <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
-            </Alert>
-          </DialogContentText>
+          <Alert severity="warning">
+            <AlertTitle>Delete '{mapInfo?.name}'</AlertTitle>
+            <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
+          </Alert>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
@@ -54,19 +67,32 @@ function DeleteConfirmDialog(props: DialogProps) {
     </div>
   );
 }
+export type RenameModel = {
+  id: number;
+  name: string;
+  description?: string;
+}
 
 function RenameDialog(props: DialogProps) {
-  const defaultModel: BasicMapInfo = { name: '', description: '' };
-  const [model, setModel] = React.useState<BasicMapInfo>(defaultModel);
-  const [errorInfo, setErroInfo] = React.useState<ErrorInfo>();
 
+  const defaultModel: RenameModel = { name: '', description: '', id: -1 };
+  const [model, setModel] = React.useState<RenameModel>(defaultModel);
+  const [errorInfo, setErroInfo] = React.useState<ErrorInfo>();
+  const dispatch = useDispatch()
   const intl = useIntl();
 
   useEffect(() => {
-    props.service.loadMapInfo(props.mapId)
-      .then((info: BasicMapInfo) => {
-        setModel(info);
-      })
+    const mapId: number = props.mapId;
+    if (mapId != -1) {
+      const mapInfo: MapInfo | undefined = useSelector(allMaps)
+        .find(m => m.id == props.mapId);
+
+      if (!mapInfo) {
+        throw "Please, reflesh the page.";
+      }
+
+      setModel({ ...mapInfo });
+    }
   }, []);
 
   const handleOnClose = (): void => {
@@ -74,21 +100,22 @@ function RenameDialog(props: DialogProps) {
     setModel(defaultModel);
     setErroInfo(undefined);
 
-    props.onClose(false);
+    props.onClose();
   };
 
   const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
     // Stop form submit ...
     event.preventDefault();
 
-    // Fire rest call ...
-    const mapId = props.mapId;
-    props.service.renameMap(mapId, model).
-      then(() => {
-        props.onClose(true);
-      }).catch((errorInfo: ErrorInfo) => {
-        setErroInfo(errorInfo)
-      });
+    // Fire rename ...
+    const mapId: number = props.mapId;
+    try {
+      dispatch(rename({ id: mapId, name: model.name, description: model.description }))
+      handleOnClose();
+      
+    } catch (errorInfo) {
+      setErroInfo(errorInfo)
+    }
   };
 
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -118,9 +145,9 @@ function RenameDialog(props: DialogProps) {
             {Boolean(errorInfo?.msg) ? <Alert severity="error" variant="filled" hidden={!Boolean(errorInfo?.msg)}>{errorInfo?.msg}</Alert> : null}
             <FormControl margin="normal" required fullWidth>
               <TextField name="name" label={intl.formatMessage({ id: "action.rename-name-placeholder", defaultMessage: "Name" })}
-                value={model.name} onChange={handleOnChange}  
-                error={Boolean(errorInfo?.fields?.get('name'))} helperText={errorInfo?.fields?.get('name')} 
-                variant="filled" required={true}/>
+                value={model.name} onChange={handleOnChange}
+                error={Boolean(errorInfo?.fields?.get('name'))} helperText={errorInfo?.fields?.get('name')}
+                variant="filled" required={true} />
             </FormControl>
             <FormControl margin="normal" required fullWidth>
               <TextField name="description" label={intl.formatMessage({ id: "action.rename-description-placeholder", defaultMessage: "Description" })} value={model.description} onChange={handleOnChange} variant="filled" />
@@ -129,7 +156,7 @@ function RenameDialog(props: DialogProps) {
 
           <DialogActions>
             <Button color="primary" variant="outlined" type="submit">
-              <FormattedMessage id="action.rename-button" defaultMessage="Rename"/>
+              <FormattedMessage id="action.rename-button" defaultMessage="Rename" />
             </Button>
 
             <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
@@ -145,23 +172,23 @@ function RenameDialog(props: DialogProps) {
 export type DialogType = 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'publish';
 
 type ActionDialogProps = {
-  action: DialogType | undefined,
+  action?: DialogType,
   mapId: number,
-  service: Service,
-  onClose: (reload: boolean) => void
+  onClose: () => void
 }
 
 const ActionDialog = (props: ActionDialogProps) => {
-
-  const handleOnClose = (reload: boolean): void => {
-    props.onClose(reload);
+  const handleOnClose = (): void => {
+    props.onClose();
   }
 
+  const mapId = props.mapId;
+  const action = props.action;
+
   return (
     <span>
-      <DeleteConfirmDialog open={props.action === 'delete'} service={props.service} onClose={handleOnClose} mapId={props.mapId} />
-      <RenameDialog open={props.action === 'rename'} service={props.service} onClose={handleOnClose} mapId={props.mapId} />
-
+      <DeleteDialog open={action === 'delete'} onClose={handleOnClose} mapId={mapId} />
+      <RenameDialog open={action === 'rename'} onClose={handleOnClose} mapId={mapId} />
     </span >
   );
 }
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index 85a66810..02997df9 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react'
-import { MapInfo, Service } from '../../services/Service'
 import { PageContainer, MapsListArea, NavArea, HeaderArea, StyledTableCell } from './styled';
 
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
@@ -24,6 +23,8 @@ import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { CSSProperties } from 'react';
 import MapActionMenu, { ActionType } from './MapActionMenu';
 import ActionDialog, { DialogType } from './ActionDialog';
+import { useSelector } from 'react-redux';
+import { allMaps, MapInfo } from '../../reducers/mapsListSlice';
 
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
   if (b[orderBy] < a[orderBy]) {
@@ -84,6 +85,7 @@ interface EnhancedTableProps {
 
 function EnhancedTableHead(props: EnhancedTableProps) {
   const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
+
   const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
     onRequestSort(event, property);
   };
@@ -209,19 +211,16 @@ type ActionPanelState = {
   mapId: number
 }
 
-function EnhancedTable(props: ServiceProps) {
+function EnhancedTable() {
   const classes = useStyles();
-
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<keyof MapInfo>('modified');
   const [selected, setSelected] = React.useState<number[]>([]);
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const [rows, setRows] = React.useState<MapInfo[]>([]);
-
+  const mapsInfo: MapInfo[] = useSelector(allMaps);
 
   const [activeRowAction, setActiveRowAction] = React.useState<ActionPanelState | undefined>(undefined);
-
   type ActiveDialog = {
     actionType: DialogType;
     mapId: number
@@ -229,13 +228,6 @@ function EnhancedTable(props: ServiceProps) {
   };
   const [activeDialog, setActiveDialog] = React.useState<ActiveDialog | undefined>(undefined);
 
-  useEffect(() => {
-    (async () => {
-      const mapsInfo = await props.service.fetchAllMaps();
-      setRows(mapsInfo);
-    })();
-  }, []);
-
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof MapInfo) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
@@ -244,7 +236,7 @@ function EnhancedTable(props: ServiceProps) {
 
   const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>): void => {
     if (event.target.checked) {
-      const newSelecteds = rows.map((n) => n.id);
+      const newSelecteds = mapsInfo.map((n) => n.id);
       setSelected(newSelecteds);
       return;
     }
@@ -306,7 +298,7 @@ function EnhancedTable(props: ServiceProps) {
 
   const isSelected = (id: number) => selected.indexOf(id) !== -1;
 
-  const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
+  const emptyRows = rowsPerPage - Math.min(rowsPerPage, mapsInfo.length - page * rowsPerPage);
 
   return (
     <div className={classes.root}>
@@ -327,10 +319,10 @@ function EnhancedTable(props: ServiceProps) {
               orderBy={orderBy}
               onSelectAllClick={handleSelectAllClick}
               onRequestSort={handleRequestSort}
-              rowCount={rows.length}
+              rowCount={mapsInfo.length}
             />
             <TableBody>
-              {stableSort(rows, getComparator(order, orderBy))
+              {stableSort(mapsInfo, getComparator(order, orderBy))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map((row: MapInfo) => {
                   const isItemSelected = isSelected(row.id);
@@ -390,7 +382,7 @@ function EnhancedTable(props: ServiceProps) {
         <TablePagination
           rowsPerPageOptions={[5, 10, 25]}
           component="div"
-          count={rows.length}
+          count={mapsInfo.length}
           rowsPerPage={rowsPerPage}
           page={page}
           onChangePage={handleChangePage}
@@ -399,16 +391,12 @@ function EnhancedTable(props: ServiceProps) {
       </Paper>
 
       {/* Action Dialog */}
-      <ActionDialog action={activeDialog?.actionType} onClose={(refresh: boolean) => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} service={props.service}/>
+      <ActionDialog action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1}/>
     </div>
   );
 }
 
-type ServiceProps = {
-  service: Service
-}
-
-const MapsPage = (props: ServiceProps) => {
+const MapsPage = () => {
 
   useEffect(() => {
     document.title = 'Maps | WiseMapping';
@@ -423,7 +411,7 @@ const MapsPage = (props: ServiceProps) => {
         <h1> Nav </h1>
       </NavArea>
       <MapsListArea>
-        <EnhancedTable service={props.service} />
+        <EnhancedTable/>
       </MapsListArea>
     </PageContainer>
   );
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index df01de98..7788bb06 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@@ -12,7 +12,7 @@ import SubmitButton from '../submit-button'
 import { StyledReCAPTCHA } from './styled';
 import { PageContent } from '../../theme/global-style';
 
-const RegistrationForm = (props: ServiceProps) => {
+const RegistrationForm = () => {
   const [email, setEmail] = useState('');
   const [lastname, setLastname] = useState('')
   const [firstname, setFirstname] = useState('');
@@ -40,15 +40,15 @@ const RegistrationForm = (props: ServiceProps) => {
     };
 
     // Call Service ...
-    const service = props.service;
-    service.registerNewUser(user)
-      .then(() => {
-        history.push("/c/registration-success")
-      }).catch((error: ErrorInfo) => {
-        const errorMsg = error.msg ? error.msg : undefined;
-        setErrorMsg(errorMsg);
-        setDisableButton(false);
-      });
+    // const service = props.service;
+    // service.registerNewUser(user)
+    //   .then(() => {
+    //     history.push("/c/registration-success")
+    //   }).catch((error: ErrorInfo) => {
+    //     const errorMsg = error.msg ? error.msg : undefined;
+    //     setErrorMsg(errorMsg);
+    //     setDisableButton(false);
+    //   });
   }
 
 
@@ -82,10 +82,7 @@ const RegistrationForm = (props: ServiceProps) => {
   );
 }
 
-type ServiceProps = {
-  service: Service
-}
-const RegistationPage = (props: ServiceProps) => {
+const RegistationPage = () => {
 
   useEffect(() => {
     document.title = 'Registration | WiseMapping';
@@ -94,7 +91,7 @@ const RegistationPage = (props: ServiceProps) => {
   return (
     <div>
       <Header type='only-signin' />
-      <RegistrationForm service={props.service} />
+      <RegistrationForm/>
       <Footer />
     </div>
   );
diff --git a/packages/webapp/src/index.tsx b/packages/webapp/src/index.tsx
index 2130748c..54f15a9c 100644
--- a/packages/webapp/src/index.tsx
+++ b/packages/webapp/src/index.tsx
@@ -2,43 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './app';
 import { BrowserRouter as Router } from 'react-router-dom';
-import axios from 'axios'
+import axios from 'axios';
 
-type RutimeConfig = {
-  apiBaseUrl: string;
-}
-
-async function loadRuntimeConfig() {
-  let result: RutimeConfig | undefined;
-
-  await axios.get("runtime-config.json"
-  ).then(response => {
-    // All was ok, let's sent to success page ...
-    result = response.data as RutimeConfig;
-    console.log("Dynamic configuration->" + response.data);
-  }).catch(e => {
-    console.log(e)
-  });
-
-  if (!result) {
-    // Ok, try to create a default configuration relative to the current path ...
-    console.log("Configuration could not be loaded, falback to default config.")
-    const location = window.location;
-    const basePath = location.protocol + "//" + location.host + "/" + location.pathname.split('/')[1]
-  
-    result = {
-      apiBaseUrl: basePath 
-    }
-  }
-  return result;
-}
 
 async function bootstrapApplication() {
-
-  const config: RutimeConfig = await loadRuntimeConfig();
   ReactDOM.render(
     <Router>
-      <App baseRestUrl={config.apiBaseUrl} />
+      <App/>
     </Router>,
     document.getElementById('root') as HTMLElement
   )
diff --git a/packages/webapp/src/reducers/mapsListSlice.ts b/packages/webapp/src/reducers/mapsListSlice.ts
new file mode 100644
index 00000000..0d8d877c
--- /dev/null
+++ b/packages/webapp/src/reducers/mapsListSlice.ts
@@ -0,0 +1,113 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios';
+import { RestService, Service } from '../services/Service';
+
+function createMapInfo(
+  id: number,
+  starred: boolean,
+  name: string,
+  labels: [string],
+  creator: string,
+  modified: number,
+  description: string
+): MapInfo {
+  return { id, name, labels, creator, modified, starred, description };
+}
+
+const maps = [
+  createMapInfo(1, true, "El Mapa", [""], "Paulo", 67, ""),
+  createMapInfo(2, false, "El Mapa2", [""], "Paulo2", 67, ""),
+  createMapInfo(3, false, "El Mapa3", [""], "Paulo3", 67, "")
+];
+
+export type MapInfo = {
+  id: number;
+  starred: boolean;
+  name: string;
+  labels: [string];
+  creator: string;
+  modified: number;
+  description: string
+}
+
+interface MapsListState {
+  maps: MapInfo[]
+}
+
+type RutimeConfig = {
+  apiBaseUrl: string;
+}
+
+async function loadRuntimeConfig() {
+  let result: RutimeConfig | undefined;
+
+  await axios.get("runtime-config.json"
+  ).then(response => {
+    // All was ok, let's sent to success page ...
+    result = response.data as RutimeConfig;
+    console.log("Dynamic configuration->" + response.data);
+  }).catch(e => {
+    console.log(e)
+  });
+
+  if (!result) {
+    // Ok, try to create a default configuration relative to the current path ...
+    console.log("Configuration could not be loaded, falback to default config.")
+    const location = window.location;
+    const basePath = location.protocol + "//" + location.host + "/" + location.pathname.split('/')[1]
+
+    result = {
+      apiBaseUrl: basePath
+    }
+  }
+  return result;
+}
+
+const initialState: MapsListState = { maps: maps };
+
+const service: Service = new RestService("", () => { console.log("401 error") });
+
+type RemovePayload = {
+  id: number;
+}
+
+type RenamePayload = {
+  id: number;
+  name: string;
+  description: string | undefined;
+
+}
+
+export const mapsListSlice = createSlice({
+  name: 'maps',
+  initialState: initialState,
+  reducers: {
+    remove(state, action: PayloadAction<RemovePayload>) {
+      const maps: MapInfo[] = state.maps as MapInfo[];
+      const payload = action.payload;
+      state.maps = maps.filter(map => map.id != payload.id);
+    },
+    rename(state, action: PayloadAction<RenamePayload>) {
+      let maps: MapInfo[] = state.maps as MapInfo[];
+      const payload = action.payload;
+
+      const mapInfo = maps.find(m => m.id == payload.id);
+      if (mapInfo) {
+        mapInfo.name = payload.name;
+        mapInfo.description = payload.description ? payload.description: "";
+
+        // Remove and add the new map.
+        maps = maps.filter(map => map.id != payload.id);
+        maps.push(mapInfo);
+
+        state.maps = maps;
+
+      }
+    }
+  },
+});
+
+export const allMaps = (state: any): MapInfo[] => state.mapsList.maps;
+
+export const { remove, rename } = mapsListSlice.actions
+export default mapsListSlice.reducer
\ No newline at end of file
diff --git a/packages/webapp/src/services/Service.ts b/packages/webapp/src/services/Service.ts
index fa9d9d20..7a11f1a1 100644
--- a/packages/webapp/src/services/Service.ts
+++ b/packages/webapp/src/services/Service.ts
@@ -1,3 +1,4 @@
+import { Description } from '@material-ui/icons'
 import axios from 'axios'
 
 export type NewUser = {
@@ -15,11 +16,12 @@ export type MapInfo = {
     labels: [string];
     creator: string;
     modified: number;
+    description: string;
 }
 
 export type BasicMapInfo = {
     name: string;
-    description: string;
+    description?: string;
 }
 
 export type FieldError = {
@@ -86,6 +88,7 @@ class RestService implements Service {
     }
 
     async fetchAllMaps(): Promise<MapInfo[]> {
+
         function createMapInfo(
             id: number,
             starred: boolean,
@@ -93,14 +96,15 @@ class RestService implements Service {
             labels: [string],
             creator: string,
             modified: number,
+            description: string
         ): MapInfo {
-            return { id, name, labels, creator, modified, starred };
+            return { id, name, labels, creator, modified, starred, description};
         }
 
         const maps = [
-            createMapInfo(1, true, "El Mapa", [""], "Paulo", 67,),
-            createMapInfo(2, false, "El Mapa2", [""], "Paulo2", 67),
-            createMapInfo(3, false, "El Mapa3", [""], "Paulo3", 67)
+            createMapInfo(1, true, "El Mapa", [""], "Paulo", 67,""),
+            createMapInfo(2, false, "El Mapa2", [""], "Paulo2", 67,""),
+            createMapInfo(3, false, "El Mapa3", [""], "Paulo3", 67,"")
         ];
 
         return Promise.resolve(maps);
diff --git a/packages/webapp/src/store.ts b/packages/webapp/src/store.ts
new file mode 100644
index 00000000..65ce9614
--- /dev/null
+++ b/packages/webapp/src/store.ts
@@ -0,0 +1,12 @@
+
+import { configureStore } from '@reduxjs/toolkit';
+import mapsListReducer from './reducers/mapsListSlice';
+
+  // Create Service object...
+  const store = configureStore({
+    reducer: {
+      mapsList: mapsListReducer
+    }
+  });
+
+  export default store;
\ No newline at end of file