connected-react-router#push JavaScript Examples

getUser = () => (dispatch) => {
    //Defining call information
    const options = {
        url: process.env.REACT_APP_AUTH0_DOMAIN + "/api/v2/userinfo",
        method: "GET",

        //Building token from localStorage token.
        headers: {
            Authorization: `Bearer ${localStorage.getItem("token")}`,
            "content-type": "application/json",
        },
        json: true,
        jar: "JAR",
    };

    dispatch({ type: userConstants.GET_USER_REQUEST });

    // Making a call to the backend for user information
    axios(options)
        .then((res) => {
            console.log(res, "Get User REsponse Redux");

            const userObj = JSON.parse(res.data.data.getUser.userInfo);
            dispatch({
                type: userConstants.GET_USER_SUCCESS,
                payload: userObj,
            });
            dispatch(push("/"));
        })
        .catch((err) => {
            dispatch({ type: userConstants.GET_USER_FAILURE, payload: err });
        });
}

render() {
    const { type, push, match } = this.props;
    return (
      <React.Fragment>
        <Type type={type} push={push} match={match} />
        <Route path="/product-type/view/:id/remove" component={Remove} />
      </React.Fragment>
    );
  }

mergeProps = (stateProps, dispatchProps, ownProps) => {
    const {handleAddNewChat, push, removeChat} = dispatchProps;
    const {path} = ownProps;
    const props = {...ownProps};
    delete props['path'];
    return {
        ...ownProps,
        ...stateProps,
        handleAddNewChat,
        chats: stateProps.chats.map((chat) => ({
            ...chat,
            handleClick: () => push(`${path}/${chat.id}`),
            handleRemove: () => removeChat(chat.id),
        }))
    }
}

mergeProps = (stateProps, dispatchProps, ownProps) => {
  const lastChatId = stateProps.chats.length
    ? parseInt(stateProps.chats[stateProps.chats.length - 1].chatId)
    : 0;
  const newChatId = lastChatId + 1;
  return {
    ...stateProps,
    addChat: ({ title }) => dispatchProps.addChat(title, newChatId),
    deleteChat: chatId => dispatchProps.deleteChat(chatId),
    push: location => dispatchProps.push(location)
  };
}

ErrorPage = () => {
  const dispatch = useDispatch();

  const { errorMessage } = useSelector(({ Error }) => ({
    errorMessage: Error.error
  }));
  useEffect(() => {
    if (!errorMessage) {
      dispatch(push('/'));
    }
  }, [dispatch, errorMessage]);

  const classes = useStyles();

  return (
    <div className={classes.container}>
      <h2>
        {errorMessage && ERROR_BOUNDARY_STATUS
          ? ERROR_BOUNDARY_STATUS
          : ERROR_PAGE_STATUS}
      </h2>
      <Link to='/' onClick={() => window.location.reload()}>
        <Button variant='contained'>На головну</Button>
      </Link>
    </div>
  );
}

Confirmation = ({ token }) => {
  const { t, i18n } = useTranslation();

  const { loading, error } = useSelector(({ User }) => ({
    loading: User.userLoading,
    error: User.error
  }));

  const language = i18n.language === 'ua' ? 0 : 1;
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(confirmUser({ token }));
  }, [dispatch, token]);

  const goTo = (path) => {
    dispatch(push(path));
  };

  const styles = useStyles();

  return (
    <div className={styles.confirmation}>
      <div className={styles.welcome}>
        {loading ? <Loader /> : handleMessage(error, language)}
        <div className={styles.buttonGroup}>
          <Button variant='contained' onClick={() => goTo(pathToMain)}>
            {t('confirmation.goToShop')}
          </Button>
          <Button variant='contained' onClick={() => goTo(pathToLogin)}>
            {t('confirmation.logIn')}
          </Button>
        </div>
      </div>
    </div>
  );
}

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>
  );
}

export function* signOutSaga() {
  const query = `
    mutation{
      signOut {
        __typename
        ... on Success {
          message
        }
        ... on Error {
          message
        }
      }
    }
  `;
  try {
    const graphql = JSON.stringify({ query });
    const {
      data: {
        signOut: { __typename, message },
      },
    } = yield call(post, '/graphql', graphql);
    if (__typename === 'Error') throw message;
    yield call(removeUserData);
    yield put(signOutResponse());
  } catch (error) {
    yield call(removeUserData);
    yield put(signOutResponse());
  }
  yield put(push('/signin'));
}

mapDispatchToProps = {
  getAll,
  push,
  fetchByFilters
}