import React from 'react';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import { View, Panel, PanelHeader, PanelHeaderBack, Group, Placeholder, Button } from '@vkontakte/vkui';
import { Icon56GhostOutline } from '@vkontakte/icons';
// комментирую строку ниже и компонент работает корректно
// но apiAuth используется и на других страницах, до этого момента все работало
import { apiAuth } from 'api/auth';
export const EmailConfirmation = () => {
const history = useHistory();
const { search } = useLocation();
const { userId, hash } = useParams();
const onConfirmation = async () => {
// await apiAuth.emailConfirmation({ userId, hash, search });
};
console.log('useParams', { userId, hash, search });
return (
<View id="confirmation-email" activePanel="main">
<Panel id="main">
<PanelHeader before={<PanelHeaderBack onClick={history.goBack} />}>Подтверждение почты</PanelHeader>
<Group>
<Placeholder
icon={<Icon56GhostOutline />}
action={
<Button size="m" onClick={onConfirmation}>
Подтвердить
</Button>
}
>
Подтвердите адрес электронной почты
</Placeholder>
</Group>
</Panel>
</View>
);
};
import { register } from './register';
import { login } from './login';
import { logout } from './logout';
import { restore } from './restore';
import { restoreAccount } from './restoreAccount';
// import { emailConfirmation } from './emailConfirmation';
// прикол в том, что если я убираю register и restoreAccount - начинает работать
// но в них точно не ошибок, т. к. до этого я их не менял и регистрация работала
export const apiAuth = {
register,
login,
logout,
restore,
restoreAccount,
// emailConfirmation,
};
import get from 'lodash/get';
// Если комментирую эту строку, тоже начинает работать
// restoreAccount есть подключение history
import { history } from 'utils/routes';
import { apiShell, httpAuth } from 'utils/http';
import { APP_ROUTES } from 'constants/routes';
import { ENDPOINTS } from 'constants/endpoints';
const callRegister = (data) => httpAuth.post(ENDPOINTS.AUTH.REGISTER, data);
export const register = async (data) => {
const [execute] = apiShell(callRegister);
const response = await execute(mapperRegister(data));
const success = get(response, 'success');
if (success) {
history.push(APP_ROUTES.LOGIN);
}
};
export const mapperRegister = (params) => ({
...params,
first_name: params.firstName,
last_name: params.lastName,
password_confirmation: params.passwordConfirm,
});
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();
import React, { useMemo } from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Router } from 'react-router';
import get from 'lodash/get';
import { ConfigProvider, AdaptivityProvider, AppRoot, WebviewType, Platform } from '@vkontakte/vkui';
import { NotFoundPage } from 'pages/services';
import { history, getRoutes, getDiffRoutes, getDefaultRedirect } from 'utils/routes';
import { messageSlice } from 'store/messageSlice';
import { Layout, Notifications } from 'components';
export const App = () => {
const dispatch = useDispatch();
const scheme = useSelector((state) => get(state, 'app.scheme'));
const role = useSelector((state) => get(state, 'user.role'));
const messages = useSelector((state) => get(state, 'message.items'));
const routes = useMemo(() => getRoutes(role), [role]);
const routesPaths = useMemo(() => getDiffRoutes(role), [role]);
const redirectURL = useMemo(() => getDefaultRedirect(role), [role]);
return (
<ConfigProvider isWebView webviewType={WebviewType.INTERNAL} platform={Platform.IOS} scheme={scheme}>
<AdaptivityProvider>
<AppRoot>
<BrowserRouter>
<Router history={history}>
<Layout>
<Switch>
{mapperRoutes(routes)}
<Route exact path={routesPaths} component={() => <Redirect to={redirectURL} />} />
<Route component={NotFoundPage} />
</Switch>
</Layout>
</Router>
</BrowserRouter>
<Notifications
messages={messages}
onClose={(key) => () => dispatch(messageSlice.actions.deleteMessage(key))}
/>
</AppRoot>
</AdaptivityProvider>
</ConfigProvider>
);
};
const mapperRoutes = (routes) =>
routes.map(({ component: Component, path, exact }) => (
<Route key={path} path={path} exact={exact}>
<Component />
</Route>
));