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 ? ( - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + ) :
Loading ...
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 { + console.log("Fetching labels from server") return Promise.resolve(this.labels); } @@ -151,7 +152,7 @@ class MockClient implements Client { } fetchAllMaps(): Promise { - 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) => { + e.preventDefault(); + if (onSubmit) { + onSubmit(e); + } + } const description = props.description ? ({props.description}) : null; @@ -44,11 +52,22 @@ const BaseDialog = (props: DialogProps) => { - - {handleOnSubmit ? ( - ) : 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({ 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('labels', async () => { + const { data } = useQuery('labels', async () => { return await client.fetchLabels(); }); @@ -102,7 +101,7 @@ const MapsPage = (props: any) => { variant='outlined' elevation={0}> - +