mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Fix several bugs
This commit is contained in:
parent
973290d6dd
commit
67fec75d91
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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}
|
||||
|
@ -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 () => {
|
||||
|
Loading…
Reference in New Issue
Block a user