From 67fec75d9190fbc8e888932b79660d73f5994133 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Tue, 2 Feb 2021 00:20:35 -0800
Subject: [PATCH] Fix several bugs

---
 packages/webapp/package.json                  |  2 +-
 packages/webapp/src/app.tsx                   | 66 ++++++++++---------
 .../webapp/src/client/mock-client/index.ts    |  7 +-
 .../action-dispatcher/action-dialog/index.tsx | 31 +++++++--
 .../webapp/src/components/maps-page/index.tsx | 24 +++----
 .../components/maps-page/maps-list/index.tsx  | 12 ++--
 6 files changed, 85 insertions(+), 57 deletions(-)

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index f2a78a58..2674656e 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -52,7 +52,7 @@
         "react-dom": "^17.0.0",
         "react-google-recaptcha": "^2.1.0",
         "react-intl": "^3.0.0",
-        "react-query": "^3.5.5",
+        "react-query": "^3.6.0",
         "react-redux": "^7.2.2",
         "react-router": "^5.1.8",
         "react-router-dom": "^5.2.0",
diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index cbd5de82..d09fa273 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -9,14 +9,12 @@ import RegistationPage from './components/registration-page';
 import LoginPage from './components/login-page';
 import MapsPage from './components/maps-page';
 import store from "./store";
-
 import { ForgotPasswordPage } from './components/forgot-password-page';
 import { Provider } from 'react-redux';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { CssBaseline, ThemeProvider } from '@material-ui/core';
 import { theme } from './theme'
 
-
 function loadLocaleData(language: string) {
   switch (language) {
     case 'es':
@@ -26,7 +24,15 @@ function loadLocaleData(language: string) {
   }
 }
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchIntervalInBackground: false,
+      staleTime: 5*1000*60 // 10 minutes
+    }
+  }
+});
+
 const App = () => {
   const [messages, setMessages] = useState(undefined);
   // Boostrap i18n ...
@@ -46,33 +52,33 @@ const App = () => {
 
   return messages ? (
     <Provider store={store}>
-      <GlobalStyle />
-      <QueryClientProvider client={queryClient}>
-        <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <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>
-          </ThemeProvider>
-        </IntlProvider>
-      </QueryClientProvider>
+        <GlobalStyle />
+        <QueryClientProvider client={queryClient}>
+          <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
+            <ThemeProvider theme={theme}>
+              <CssBaseline />
+              <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>
+            </ThemeProvider>
+          </IntlProvider>
+        </QueryClientProvider>
     </Provider>
 
   ) : <div>Loading ... </div>
diff --git a/packages/webapp/src/client/mock-client/index.ts b/packages/webapp/src/client/mock-client/index.ts
index 1637416b..01624f94 100644
--- a/packages/webapp/src/client/mock-client/index.ts
+++ b/packages/webapp/src/client/mock-client/index.ts
@@ -35,8 +35,8 @@ class MockClient implements Client {
             createMapInfo(8, false, "El Mapa3", [""], "Paulo3", 67, "", false),
             createMapInfo(9, false, "El Mapa3", [""], "Paulo3", 67, "", false),
             createMapInfo(10, false, "El Mapa3", [""], "Paulo3", 67, "", false),
-            createMapInfo(11, false, "El Mapa3", [""], "Paulo3", 67, "", false),
-            createMapInfo(12, false, "El Mapa3", [""], "Paulo3", 67, "", false)
+            createMapInfo(11, false, "El Mapa3", ["label 3", "label3"], "Paulo3", 67, "", false),
+            createMapInfo(12, false, "El Mapa3", ["label 2"], "Paulo3", 67, "", false)
         ];
 
         this.labels = ["label 1,", "label 2", "label 3"];
@@ -45,6 +45,7 @@ class MockClient implements Client {
 
 
     fetchLabels(): Promise<string[]> {
+        console.log("Fetching  labels from server")
         return Promise.resolve(this.labels);
     }
 
@@ -151,7 +152,7 @@ class MockClient implements Client {
     }
 
     fetchAllMaps(): Promise<MapInfo[]> {
-        console.log("Fetch maps from server")
+        console.log("Fetching  maps from server")
         return Promise.resolve(this.maps);
     }
 
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
index 792f1c0f..00eb3fa6 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
@@ -14,14 +14,22 @@ export type DialogProps = {
 
     title: string;
     description?: string;
-    submitButton?: string; 
+    submitButton?: string;
 }
 
 const BaseDialog = (props: DialogProps) => {
     const intl = useIntl();
     const handleOnClose = props.onClose;
+    const onSubmit = props.onSubmit;
     const isOpen = props.open;
-    const handleOnSubmit = props.onSubmit;
+
+
+    const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(e);
+        }
+    }
 
     const description = props.description ? (<DialogContentText>{props.description}</DialogContentText>) : null;
 
@@ -44,11 +52,22 @@ const BaseDialog = (props: DialogProps) => {
                     </StyledDialogContent>
 
                     <StyledDialogActions>
-                        <Button color="primary" size="medium" onClick={handleOnClose} >
-                            {handleOnSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) : (<FormattedMessage id="action.close-button" defaultMessage="Close" />)}
+                        <Button
+                            type="button"
+                            color="primary"
+                            size="medium"
+                            onClick={handleOnClose} >
+                            {onSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) :
+                                (<FormattedMessage id="action.close-button" defaultMessage="Close" />)
+                            }
                         </Button>
-                        {handleOnSubmit ? (
-                            <Button color="primary" size="medium" variant="contained" type="submit" disableElevation={true}>
+                        {onSubmit ? (
+                            <Button
+                                color="primary"
+                                size="medium"
+                                variant="contained"
+                                type="submit"
+                                disableElevation={true}>
                                 {props.title}
                             </Button>) : null
                         }
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index 3c2097e1..14b0c034 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@@ -8,8 +8,7 @@ import IconButton from '@material-ui/core/IconButton';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import { useStyles } from './style';
-import { AccountCircle, AddCircleTwoTone, BlurCircular, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons';
-import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
+import { AccountCircle, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined } from '@material-ui/icons';
 import { Button, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core';
 import { MapsList } from './maps-list';
 import { FormattedMessage } from 'react-intl';
@@ -24,23 +23,21 @@ const poweredByIcon = require('../../images/pwrdby-white.svg');
 
 export type Filter = GenericFilter | LabelFilter;
 
-interface GenericFilter {
+export interface GenericFilter {
     type: 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned';
 }
 
-interface LabelFilter {
+export interface LabelFilter {
     type: 'label',
     label: string
 }
 
-
 interface ToolbarButtonInfo {
     filter: GenericFilter | LabelFilter,
     label: string
 }
 
-
-const MapsPage = (props: any) => {
+const MapsPage = () => {
     const classes = useStyles();
     const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
     const client: Client = useSelector(activeInstance);
@@ -60,6 +57,8 @@ const MapsPage = (props: any) => {
     );
 
     const handleMenuClick = (filter: Filter) => {
+        // Force reload ...
+        queryClient.invalidateQueries('maps');
         setFilter(filter);
     };
 
@@ -67,7 +66,7 @@ const MapsPage = (props: any) => {
         mutation.mutate(label);
     };
 
-    const { isLoading, error, data } = useQuery<unknown, ErrorInfo, string[]>('labels', async () => {
+    const { data } = useQuery<unknown, ErrorInfo, string[]>('labels', async () => {
         return await client.fetchLabels();
     });
 
@@ -102,7 +101,7 @@ const MapsPage = (props: any) => {
                 variant='outlined'
                 elevation={0}>
 
-                <Toolbar style={{ minWidth: '600px' }}>
+                <Toolbar>
                     <Tooltip title="Create a New Map">
                         <Button color="primary" size="medium" variant="contained" type="button"
                             disableElevation={true} startIcon={<AddCircleTwoTone />} className={classes.newMapButton}>
@@ -178,9 +177,12 @@ const StyleListItem = (props: ListItemProps) => {
     const icon = props.icon;
     const label = props.label;
     const filter = props.filter;
-    const activeType = props.active?.type;
+    const activeFilter = props.active;
     const onClick = props.onClick;
     const onDeleteLabel = props.onDelete;
+    const isSelected = activeFilter
+        && (activeFilter.type == filter.type)
+        && (activeFilter.type != 'label' || ((activeFilter as LabelFilter).label == (filter as LabelFilter).label));
 
 
     const handleOnClick = (event: any, filter: Filter) => {
@@ -198,7 +200,7 @@ const StyleListItem = (props: ListItemProps) => {
 
     return (
         <ListItem button
-            selected={activeType == filter.type}
+            selected={isSelected}
             onClick={e => handleOnClick(e, filter)}>
             <ListItemIcon>
                 {icon}
diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx
index c6983366..2587b2b7 100644
--- a/packages/webapp/src/components/maps-page/maps-list/index.tsx
+++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx
@@ -27,7 +27,7 @@ import ActionDispatcher from '../action-dispatcher';
 import { Button, InputBase, Link } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import moment from 'moment'
-import { Filter } from '..';
+import { Filter, LabelFilter } from '..';
 import { FormattedMessage } from 'react-intl';
 import { DeleteOutlined, LabelTwoTone } from '@material-ui/icons';
 
@@ -168,7 +168,10 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
         //@todo: complete ...
         result = mapInfo.starred;
         break;
-
+      case 'label':
+        //@todo: complete ...
+        result = !mapInfo.labels || mapInfo.labels.includes((filter as LabelFilter).label)
+        break;
       default:
         result = false;
     }
@@ -195,14 +198,11 @@ export const MapsList = (props: MapsListProps) => {
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const client: Client = useSelector(activeInstance);
 
-  console.log("MapsList refresh");
-
   useEffect(() => {
-    console.log("Update maps state.")
     setSelected([]);
     setPage(0);
     setFilter(props.filter)
-  }, [props.filter.type]);
+  }, [props.filter.type, (props.filter as LabelFilter).label]);
 
 
   const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', async () => {