utils#routes JavaScript Examples

export function* searchRecipient({ value }) {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = api.bills('search')(value);
  const requestParameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  if (!numberValidation(value)) {
    return;
  }

  if (value.length > 1) {
    yield delay(300);
  }

  try {
    const { data } = yield call(request, requestURL, requestParameters);
    yield put(searchRecipientSuccessAction(data));
  } catch (error) {
    yield put(searchRecipientErrorAction(error));

    switch (error.statusCode) {
      case 401:
        yield put(push(routes.login.path));
        break;
      default:
        yield put(push(routes.login.path));
        break;
    }
  }
}

function ForgetPasswordPage() {
  useInjectReducer({ key: 'forgetPasswordPage', reducer });
  useInjectSaga({ key: 'forgetPasswordPage', saga });

  /* eslint-disable no-unused-vars */
  const { forgetPasswordPage } = useSelector(stateSelector);
  const dispatch = useDispatch();
  /* eslint-enable no-unused-vars */

  return (
    <>
     <FormattedMessage {...messages.forgetPassword}>
        {(title) => <Helmet title={title} />}
      </FormattedMessage>

      <Header />
      <Subheader pageTitle={routes.forgetPassword.name} />

      <Information />

      <ForgotPasswordForm />

      <Footer />

      <ConstantCookie />
    </>
  );
}

export default function HeaderName() {
  const {
    location: { pathname },
    isCollapsedSidebar,
  } = useSelector(stateSelector);

  return (
    <StyledHeaderName open={isCollapsedSidebar}>
      {Object.entries(routes).map(
        ({ 1: route }) =>
          route.path === pathname && <div key={route.path}>{route.name}</div>,
      )}
    </StyledHeaderName>
  );
}

export function* getTransactionHistory({ currentPage }) {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = `${api.transactions()}?page=${currentPage}&order=DESC`;
  const requestParameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const transactions = yield call(request, requestURL, requestParameters);
    yield put(getTransactionHistorySuccessAction(transactions));
  } catch (error) {
    yield put(getTransactionHistoryErrorAction(error));
    yield put(push(routes.login.path));
  }
}

export function* getConfirmationFile({ uuid }) {
  const locale = yield select(makeSelectLocale());
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = `${api.transactions('confirmationFile')(uuid, locale)}`;
  const requestParameters = {
    responseType: 'blob',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const response = yield call(request, requestURL, requestParameters, false);
    const pdfBlob = new Blob([response], { type: 'application/pdf' });
    saveAs(pdfBlob, `${uuid}.pdf`);

    yield put(getConfirmationFileSuccessAction());
  } catch (error) {
    yield put(getConfirmationFileErrorAction(error));
    yield put(push(routes.login.path));
  }
}

export default function HomePage() {
  const { isLogged } = useSelector(stateSelector);
  const dispatch = useDispatch();

  useEffect(() => {
    if (isLogged) {
      dispatch(push(routes.dashboard.path));
    } else {
      dispatch(push(routes.login.path));
    }
  }, [isLogged]);

  return null;
}

export default function LoginPage() {
  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

  return (
    <>
      <FormattedMessage {...messages.login}>
        {(title) => <Helmet title={title} />}
      </FormattedMessage>

      <Header />
      <Subheader pageTitle={routes.login.name} />

      <Information />

      <LoginForm />

      <RedirectToggle />

      <Footer />

      <ConstantCookie />
    </>
  );
}

loginPageReducer = produce((draft, action) => {
  if (window.location.pathname === routes.login.path) {
    switch (action.type) {
      case CHANGE_INPUT_NUMBER:
        draft[action.name] = parseInt(action.value, 10) || '';
        break;
      case CHANGE_INPUT:
        draft[action.name] = action.value;
        break;
      case NEXT_STEP:
        draft.currentStep += 1;
        break;
      case PREVIOUS_STEP:
        draft.currentStep -= 1;
        break;
    }
  }

  switch (action.type) {
    case LOCATION_CHANGE:
      return initialState;
  }
}, initialState)

export function* login() {
  const pinCode = yield select(makeSelectPinCode());
  const password = yield select(makeSelectPassword());

  const requestURL = api.auth.login;
  const requestParameters = {
    method: 'POST',
    headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
    body: JSON.stringify({ pinCode, password }),
  };

  try {
    const { user, token } = yield call(request, requestURL, requestParameters);
    yield put(loginSuccessAction(user, token));
    yield put(push(routes.dashboard.path));
  } catch (error) {
    let message;

    switch (error.statusCode) {
      case 404:
        message = (
          <FormattedMessage
            {...messages.accountNotFound}
            values={{ pinCode }}
          />
        );
        break;
      case 403:
        message = <FormattedMessage {...messages.passwordInvalid} />;
        break;
      default:
        message = <FormattedMessage {...messages.serverError} />;
        break;
    }

    yield put(loginErrorAction(message));
  }
}

export function* getBills() {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = api.bills();
  const requestParameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const { data } = yield call(request, requestURL, requestParameters);
    yield put(getBillsSuccessAction(data));
  } catch (error) {
    yield put(getBillsErrorAction(error));

    switch (error.statusCode) {
      case 401:
        yield put(push(routes.login.path));
        break;
      default:
        yield put(push(routes.login.path));
        break;
    }
  }
}

forgetPasswordPageReducer = produce((draft, action) => {
  if (window.location.pathname === routes.forgetPassword.path) {
    switch (action.type) {
      case CHANGE_INPUT:
        draft[action.name] = action.value;
        break;
      case FORGOT_PASSWORD_SUCCESS:
        draft.isSuccess = true;
        break;
    }
  }
  switch (action.type) {
    case LOCATION_CHANGE:
      return initialState;
  }
}, initialState)

export default function PrivacyPage() {
  return (
    <>
      <FormattedMessage {...messages.privacy}>
        {(title) => <Helmet title={title} />}
      </FormattedMessage>

      <Header />
      <Subheader pageTitle={routes.privacy.name} />

      <Privacy />

      <ConstantCookie />
    </>
  );
}

export default function RegisterPage() {
  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

  return (
    <>
      <FormattedMessage {...messages.registration}>
        {(title) => <Helmet title={title} />}
      </FormattedMessage>

      <Header />
      <Subheader pageTitle={routes.register.name} />

      <Information />

      <RegisterForm />

      <RedirectToggle />
      <Footer />

      <ConstantCookie />
    </>
  );
}

registerPageReducer = produce((draft, action) => {
  if (window.location.pathname === routes.register.path) {
    switch (action.type) {
      case CHANGE_INPUT:
        draft[action.name] = action.value.trim();
        break;
      case SELECT_CURRENCY:
        draft.currency = action.currency;
        break;
      case NEXT_STEP:
        draft.currentStep += 1;
        break;
      case PREVIOUS_STEP:
        draft.currentStep -= 1;
        break;
    }
  }

  switch (action.type) {
    case REGISTER_SUCCESS:
      draft.pinCode = action.pinCode;
      break;
    case LOCATION_CHANGE:
      return initialState;
  }
}, initialState)

export function* loginExpress() {
  const pinCode = yield select(makeSelectPinCode());
  const password = yield select(makeSelectPassword());

  const requestURL = api.auth.login;
  const requestParameters = {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ pinCode, password }),
  };

  try {
    const { user, token } = yield call(request, requestURL, requestParameters);
    yield put(loginExpressSuccessAction(user, token));
    yield put(push(routes.dashboard.path));
  } catch (error) {
    const message = <FormattedMessage {...messages.serverError} />;
    yield put(loginExpressErrorAction(message));
  }
}

export default function ResetPasswordPage() {
  useInjectReducer({ key: 'resetPasswordPage', reducer });
  useInjectSaga({ key: 'resetPasswordPage', saga });

  const { token } = useParams();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(changeInputAction({ name: 'token', value: token }));
  }, [token]);

  return (
    <>
      <FormattedMessage {...messages.resetPassword}>
        {(title) => <Helmet title={title} />}
      </FormattedMessage>

      <Header />
      <Subheader pageTitle={routes.resetPassword.name} />

      <Information />

      <ResetPasswordForm />

      <Footer />

      <ConstantCookie />
    </>
  );
}

resetPasswordPageReducer = produce((draft, action) => {
  if (window.location.pathname.includes(routes.resetPassword.path)) {
    switch (action.type) {
      case CHANGE_INPUT:
        draft[action.name] = action.value;
        break;
      case RESET_PASSWORD_SUCCESS:
        draft.isSuccess = true;
        break;
    }
  }

  switch (action.type) {
    case LOCATION_CHANGE:
      return initialState;
  }
}, initialState)

settingsPageReducer = produce((draft, action) => {
  if (window.location.pathname === routes.settings.path) {
    switch (action.type) {
      case SELECT_CURRENCY:
        if (draft.user?.userConfig?.currency?.uuid !== action?.currency) {
          draft.newData.currency = action.currency;
          draft.isOpenedModal = true;
        }
        break;
      case CHANGE_INPUT:
        if (draft.user[action.name] === action.value || !action.value.length) {
          delete draft.newData[action.name];
        } else {
          draft.newData[action.name] = action.value;
        }
        break;
      case TOGGLE_MODAL:
        draft.isOpenedModal = !draft.isOpenedModal;
        delete draft.newData.currency;
        break;
    }
  }

  switch (action.type) {
    case GET_USER_DATA_SUCCESS:
    case SET_USER_DATA_SUCCESS:
      draft.user = action.userData;
      draft.newData = initialState.newData;
      draft.isOpenedModal = false;
      break;
    case SET_USER_DATA_INCORRECT:
      draft.isOpenedModal = false;
      break;
    case LOCATION_CHANGE:
    case LOGOUT_SUCCESS:
    case LOGOUT_ERROR:
      return initialState;
  }
}, initialState)

export function* getUserData() {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = api.users();
  const requestParameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const userData = yield call(request, requestURL, requestParameters);
    yield put(getUserDataSuccessAction(userData));
  } catch (error) {
    yield put(getUserDataErrorAction(error));
    yield put(push(routes.login.path));
  }
}

export function* getRecentTransactions() {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = `${api.transactions()}?take=4&order=DESC`;
  const requestParameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const { data } = yield call(request, requestURL, requestParameters);
    yield put(getRecentTransactionsSuccessAction(data));
  } catch (error) {
    yield put(getRecentTransactionsErrorAction(error));
    yield put(push(routes.login.path));
  }
}

export default function Footer() {
  const dispatch = useDispatch();

  return (
    <StyledFooter>
      <StyledWarning>
        <StyledInfoCircleOutlined />
        <FormattedMessage {...messages.header} />
      </StyledWarning>

      <div>
        <FormattedMessage {...messages.subheader} />
        <ul>
          <li>
            <FormattedMessage {...messages.ul_li1} />
          </li>
          <li>
            <FormattedMessage {...messages.ul_li2} />
          </li>
        </ul>
      </div>

      <StyledTip>
        <FormattedMessage {...messages.warning} />
      </StyledTip>

      <div>
        <FormattedMessage {...messages.footer} />{' '}
        <StyledButton
          type="link"
          onClick={() => dispatch(push(routes.privacy.path))}
        >
          <FormattedMessage {...messages.buttonContent} />
        </StyledButton>
      </div>
    </StyledFooter>
  );
}

function ForgotPasswordRedirect() {
  const dispatch = useDispatch();

  const onRedirect = () => dispatch(push(routes.forgetPassword.path));

  return (
    <StyledButton type="link" onClick={onRedirect}>
      <FormattedMessage {...messages.forgetPasswordAsk} />
    </StyledButton>
  );
}

function RedirectToggle({ intl }) {
  const {
    location: { pathname },
  } = useSelector(stateSelector);

  return (
    <StyledRedirectToggle>
      {pathname === routes.login.path ? (
        <>
          <FormattedMessage {...messages.registerContent} />{' '}
          <TogglePath
            name={intl.formatMessage(messages.register)}
            path={routes.register.path}
          />
        </>
      ) : (
        <>
          <FormattedMessage {...messages.loginContent} />{' '}
          <TogglePath
            name={intl.formatMessage(messages.login)}
            path={routes.login.path}
          />
        </>
      )}
    </StyledRedirectToggle>
  );
}

export default function PrivateRoute({ component: Component, ...rest }) {
  const { isLogged } = useSelector(stateSelector);

  return (
    <Route
      {...rest}
      render={(props) =>
        isLogged ? <Component {...props} /> : <Redirect to={routes.home.path} />
      }
    />
  );
}

export default function PublicRoute({
  component: Component,
  restricted,
  ...rest
}) {
  const { isLogged } = useSelector(stateSelector);

  return (
    <Route
      {...rest}
      render={(props) =>
        isLogged && restricted ? (
          <Redirect to={routes.home.path} />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
}

export function* logout() {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = api.auth.logout;
  const requestParameters = {
    method: 'PATCH',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${accessToken}`,
    },
  };

  try {
    yield call(request, requestURL, requestParameters);
    yield put(logoutSuccessAction());
    yield put(push(routes.home.path));
  } catch (error) {
    yield put(logoutErrorAction(error));

    switch (error.statusCode) {
      case 401:
        yield put(push(routes.home.path));
        break;
      default:
        yield put(push(routes.login.path));
        break;
    }
  }
}

export function* getMessages() {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = api.messages;
  const requestParameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const response = yield call(request, requestURL, requestParameters);
    yield put(getMessagesSuccessAction(response));
  } catch (error) {
    yield put(getMessagesErrorAction(error));
    yield put(push(routes.login.path));
  }
}

export function* readAllMessages() {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = api.messages;
  const requestParameters = {
    method: 'PATCH',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${accessToken}`,
    },
  };

  try {
    yield call(request, requestURL, requestParameters);
    yield put(readAllMessagesSuccessAction());
  } catch (error) {
    yield put(readAllMessagesErrorAction(error));
    yield put(push(routes.login.path));
  }
}

export function* readMessage() {
  const { accessToken } = yield select(makeSelectToken());
  const openedMessage = yield select(makeSelectOpenedMessage());
  const requestURL = api.messages;
  const requestParameters = {
    method: 'PATCH',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify({ uuid: openedMessage }),
  };

  try {
    yield put(readMessageAction());
    yield call(request, requestURL, requestParameters);
    yield put(readMessageSuccessAction());
  } catch (error) {
    yield put(readMessageErrorAction(error));
    yield put(push(routes.login.path));
  }
}