vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-10 17:33:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix several bugs

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-02 00:20:35 -08:00
parent 973290d6dd
commit 67fec75d91
6 changed files with 85 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webapp/package.json
View File

@ -52,7 +52,7 @@
"react-dom": "^17.0.0", "react-dom": "^17.0.0",
"react-google-recaptcha": "^2.1.0", "react-google-recaptcha": "^2.1.0",
"react-intl": "^3.0.0", "react-intl": "^3.0.0",
"react-query": "^3.5.5", "react-query": "^3.6.0",
"react-redux": "^7.2.2", "react-redux": "^7.2.2",
"react-router": "^5.1.8", "react-router": "^5.1.8",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",

66
packages/webapp/src/app.tsx
View File

@ -9,14 +9,12 @@ import RegistationPage from './components/registration-page';
import LoginPage from './components/login-page'; import LoginPage from './components/login-page';
import MapsPage from './components/maps-page'; import MapsPage from './components/maps-page';
import store from "./store"; import store from "./store";
import { ForgotPasswordPage } from './components/forgot-password-page'; import { ForgotPasswordPage } from './components/forgot-password-page';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from 'react-query'; import { QueryClient, QueryClientProvider } from 'react-query';
import { CssBaseline, ThemeProvider } from '@material-ui/core'; import { CssBaseline, ThemeProvider } from '@material-ui/core';
import { theme } from './theme' import { theme } from './theme'
function loadLocaleData(language: string) { function loadLocaleData(language: string) {
switch (language) { switch (language) {
case 'es': 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 App = () => {
const [messages, setMessages] = useState(undefined); const [messages, setMessages] = useState(undefined);
// Boostrap i18n ... // Boostrap i18n ...
@ -46,33 +52,33 @@ const App = () => {
return messages ? ( return messages ? (
<Provider store={store}> <Provider store={store}>
<GlobalStyle /> <GlobalStyle />
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<IntlProvider locale={locale} defaultLocale='en' messages={messages}> <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<Router> <Router>
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
<Redirect to="/c/login" /> <Redirect to="/c/login" />
</Route> </Route>
<Route path="/c/login" component={LoginPage} /> <Route path="/c/login" component={LoginPage} />
<Route path="/c/registration"> <Route path="/c/registration">
<RegistationPage /> <RegistationPage />
</Route> </Route>
<Route path="/c/registration-success" component={RegistrationSuccessPage} /> <Route path="/c/registration-success" component={RegistrationSuccessPage} />
<Route path="/c/forgot-password"> <Route path="/c/forgot-password">
<ForgotPasswordPage /> <ForgotPasswordPage />
</Route> </Route>
<Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} /> <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
<Route path="/c/maps/"> <Route path="/c/maps/">
<MapsPage /> <MapsPage />
</Route> </Route>
</Switch> </Switch>
</Router> </Router>
</ThemeProvider> </ThemeProvider>
</IntlProvider> </IntlProvider>
</QueryClientProvider> </QueryClientProvider>
</Provider> </Provider>
) : <div>Loading ... </div> ) : <div>Loading ... </div>

7
packages/webapp/src/client/mock-client/index.ts
View File

@ -35,8 +35,8 @@ class MockClient implements Client {
createMapInfo(8, false, "El Mapa3", [""], "Paulo3", 67, "", false), createMapInfo(8, false, "El Mapa3", [""], "Paulo3", 67, "", false),
createMapInfo(9, false, "El Mapa3", [""], "Paulo3", 67, "", false), createMapInfo(9, false, "El Mapa3", [""], "Paulo3", 67, "", false),
createMapInfo(10, false, "El Mapa3", [""], "Paulo3", 67, "", false), createMapInfo(10, false, "El Mapa3", [""], "Paulo3", 67, "", false),
createMapInfo(11, false, "El Mapa3", [""], "Paulo3", 67, "", false), createMapInfo(11, false, "El Mapa3", ["label 3", "label3"], "Paulo3", 67, "", false),
createMapInfo(12, false, "El Mapa3", [""], "Paulo3", 67, "", false) createMapInfo(12, false, "El Mapa3", ["label 2"], "Paulo3", 67, "", false)
]; ];
this.labels = ["label 1,", "label 2", "label 3"]; this.labels = ["label 1,", "label 2", "label 3"];
@ -45,6 +45,7 @@ class MockClient implements Client {
fetchLabels(): Promise<string[]> { fetchLabels(): Promise<string[]> {
console.log("Fetching labels from server")
return Promise.resolve(this.labels); return Promise.resolve(this.labels);
} }
@ -151,7 +152,7 @@ class MockClient implements Client {
} }
fetchAllMaps(): Promise<MapInfo[]> { fetchAllMaps(): Promise<MapInfo[]> {
console.log("Fetch maps from server") console.log("Fetching maps from server")
return Promise.resolve(this.maps); return Promise.resolve(this.maps);
} }

31
packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
View File

@ -14,14 +14,22 @@ export type DialogProps = {
title: string; title: string;
description?: string; description?: string;
submitButton?: string; submitButton?: string;
} }
const BaseDialog = (props: DialogProps) => { const BaseDialog = (props: DialogProps) => {
const intl = useIntl(); const intl = useIntl();
const handleOnClose = props.onClose; const handleOnClose = props.onClose;
const onSubmit = props.onSubmit;
const isOpen = props.open; 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; const description = props.description ? (<DialogContentText>{props.description}</DialogContentText>) : null;
@ -44,11 +52,22 @@ const BaseDialog = (props: DialogProps) => {
</StyledDialogContent> </StyledDialogContent>
<StyledDialogActions> <StyledDialogActions>
<Button color="primary" size="medium" onClick={handleOnClose} > <Button
{handleOnSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) : (<FormattedMessage id="action.close-button" defaultMessage="Close" />)} type="button"
color="primary"
size="medium"
onClick={handleOnClose} >
{onSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) :
(<FormattedMessage id="action.close-button" defaultMessage="Close" />)
}
</Button> </Button>
{handleOnSubmit ? ( {onSubmit ? (
<Button color="primary" size="medium" variant="contained" type="submit" disableElevation={true}> <Button
color="primary"
size="medium"
variant="contained"
type="submit"
disableElevation={true}>
{props.title} {props.title}
</Button>) : null </Button>) : null
} }

24
packages/webapp/src/components/maps-page/index.tsx
View File

@ -8,8 +8,7 @@ import IconButton from '@material-ui/core/IconButton';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import { useStyles } from './style'; 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 { AccountCircle, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined } from '@material-ui/icons';
import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
import { Button, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core'; import { Button, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core';
import { MapsList } from './maps-list'; import { MapsList } from './maps-list';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -24,23 +23,21 @@ const poweredByIcon = require('../../images/pwrdby-white.svg');
export type Filter = GenericFilter | LabelFilter; export type Filter = GenericFilter | LabelFilter;
interface GenericFilter { export interface GenericFilter {
type: 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned'; type: 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned';
} }
interface LabelFilter { export interface LabelFilter {
type: 'label', type: 'label',
label: string label: string
} }
interface ToolbarButtonInfo { interface ToolbarButtonInfo {
filter: GenericFilter | LabelFilter, filter: GenericFilter | LabelFilter,
label: string label: string
} }
const MapsPage = () => {
const MapsPage = (props: any) => {
const classes = useStyles(); const classes = useStyles();
const [filter, setFilter] = React.useState<Filter>({ type: 'all' }); const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
const client: Client = useSelector(activeInstance); const client: Client = useSelector(activeInstance);
@ -60,6 +57,8 @@ const MapsPage = (props: any) => {
); );
const handleMenuClick = (filter: Filter) => { const handleMenuClick = (filter: Filter) => {
// Force reload ...
queryClient.invalidateQueries('maps');
setFilter(filter); setFilter(filter);
}; };
@ -67,7 +66,7 @@ const MapsPage = (props: any) => {
mutation.mutate(label); 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(); return await client.fetchLabels();
}); });
@ -102,7 +101,7 @@ const MapsPage = (props: any) => {
variant='outlined' variant='outlined'
elevation={0}> elevation={0}>
<Toolbar style={{ minWidth: '600px' }}> <Toolbar>
<Tooltip title="Create a New Map"> <Tooltip title="Create a New Map">
<Button color="primary" size="medium" variant="contained" type="button" <Button color="primary" size="medium" variant="contained" type="button"
disableElevation={true} startIcon={<AddCircleTwoTone />} className={classes.newMapButton}> disableElevation={true} startIcon={<AddCircleTwoTone />} className={classes.newMapButton}>
@ -178,9 +177,12 @@ const StyleListItem = (props: ListItemProps) => {
const icon = props.icon; const icon = props.icon;
const label = props.label; const label = props.label;
const filter = props.filter; const filter = props.filter;
const activeType = props.active?.type; const activeFilter = props.active;
const onClick = props.onClick; const onClick = props.onClick;
const onDeleteLabel = props.onDelete; 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) => { const handleOnClick = (event: any, filter: Filter) => {
@ -198,7 +200,7 @@ const StyleListItem = (props: ListItemProps) => {
return ( return (
<ListItem button <ListItem button
selected={activeType == filter.type} selected={isSelected}
onClick={e => handleOnClick(e, filter)}> onClick={e => handleOnClick(e, filter)}>
<ListItemIcon> <ListItemIcon>
{icon} {icon}

12
packages/webapp/src/components/maps-page/maps-list/index.tsx
View File

@ -27,7 +27,7 @@ import ActionDispatcher from '../action-dispatcher';
import { Button, InputBase, Link } from '@material-ui/core'; import { Button, InputBase, Link } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import moment from 'moment' import moment from 'moment'
import { Filter } from '..'; import { Filter, LabelFilter } from '..';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { DeleteOutlined, LabelTwoTone } from '@material-ui/icons'; import { DeleteOutlined, LabelTwoTone } from '@material-ui/icons';
@ -168,7 +168,10 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
//@todo: complete ... //@todo: complete ...
result = mapInfo.starred; result = mapInfo.starred;
break; break;
case 'label':
//@todo: complete ...
result = !mapInfo.labels || mapInfo.labels.includes((filter as LabelFilter).label)
break;
default: default:
result = false; result = false;
} }
@ -195,14 +198,11 @@ export const MapsList = (props: MapsListProps) => {
const [rowsPerPage, setRowsPerPage] = React.useState(10); const [rowsPerPage, setRowsPerPage] = React.useState(10);
const client: Client = useSelector(activeInstance); const client: Client = useSelector(activeInstance);
console.log("MapsList refresh");
useEffect(() => { useEffect(() => {
console.log("Update maps state.")
setSelected([]); setSelected([]);
setPage(0); setPage(0);
setFilter(props.filter) setFilter(props.filter)
}, [props.filter.type]); }, [props.filter.type, (props.filter as LabelFilter).label]);
const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', async () => { const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', async () => {