antd#notification JavaScript Examples

dealError = (error, FormRef, hide, type) => {
  if (error.data && error.data instanceof Object && 'fields_errors' in error.data) {
    fieldsLevelErrorHandle(error.data, FormRef);
  } else if (error.data && error.data instanceof Object && 'non_field_errors' in error.data) {
    notification.error({
      message: '温馨提示',
      description: `${error.data.non_field_errors}`,
    });
  } else {
    notification.error({
      message: '温馨提示',
      description: `服务器异常，请重试`,
    });
  }
  hide();
  message.error(`${type}失败`);
  return false;
}

apiClient.interceptors.response.use(undefined, error => {
  // Errors handling
  const { response } = error
  if (!response) {
    notification.warning({
      message: 'request failed!'
    })
    return
  }
  let { data, statusText, status } = response
  console.log('res', response)
  if (status === 401) {
    history.push('/auth/login')
  }
  if (data) {
    if (typeof data === 'object') {
      data = statusText
    }
    notification.warning({
      message: data
    })
  }
})

componentDidMount() {
    const {
      query: { id },
    } = this.props.location;
    if (id === undefined) return;
    request(`/empty-item/demo/detail?id=${id}`).then(res => {
      if (res.code === 'SUCCESS') {
        this.setState({
          current: res.data,
        });
      } else {
        notification.error({
          message: res.code,
          description: res.msg,
        });
      }
      this.setState({
        loading: false,
      });
    });
  }

// left width = 300(minSize)+15(line)+
    componentDidMount() {
        window.addEventListener("resize", this.resize.bind(this));
        this.resize();
        HeartbeatService.start();
        CheckUpdateService.start();

        notification.open({
            message: intl.get("notification.support.host.key.tree.title"),
            description: intl.get(
                "notification.support.host.key.tree.description"
            ),
            onClick: () => {},
        });
    }

export function* setUserData({ snippets }) {
  const { accessToken } = yield select(makeSelectToken());
  const newData = yield select(makeSelectNewData());
  const isCollapsedSidebar = yield select(makeSelectIsCollapsedSidebar());

  const requestURL = api.users();
  const requestParameters = {
    method: 'PATCH',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify(newData),
  };
  const style = { width: 400, marginLeft: isCollapsedSidebar ? 80 : 250 };
  const placement = 'bottomLeft';

  try {
    const userData = yield call(request, requestURL, requestParameters);
    yield put(setUserDataSuccessAction(userData));

    notification.success({
      message: snippets.success.title,
      description: snippets.success.description,
      style,
      placement,
    });
  } catch (error) {
    yield put(setUserDataIncorrectAction(error));
  }
}

errorHandler = error => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
    if (response.status === 401) {
      localStorage.clear();
      router.push('/user/login')
    }
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }

  return response;
}

ACL = ({
  user: { role },
  redirect = false,
  defaultRedirect = '/auth/404',
  roles = [],
  children,
}) => {
  useEffect(() => {
    const authorized = roles.includes(role)
    // if user not equal needed role and if component is a page - make redirect to needed route
    if (!authorized && redirect) {
      const url = typeof redirect === 'boolean' ? defaultRedirect : redirect
      notification.error({
        message: 'Unauthorized Access',
        description: (
          <div>
            You have no rights to access this page.
            <br />
            Redirected to &#34;{url}&#34;
          </div>
        ),
      })
      history.push(url)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const authorized = roles.includes(role)
  const AuthorizedChildren = () => {
    // if user not authorized return null to component
    if (!authorized) {
      return null
    }
    // if access is successful render children
    return <Fragment>{children}</Fragment>
  }

  return AuthorizedChildren()
}

// respone interceptors
service.interceptors.response.use(
  response => {
    // 200 maybe has error
    const { data = {} } = response;
    if (data.code === 0) {
      return data;
    }
    return data;
  },
  err => {
    const { response = {} } = err;
    if (err.response) {
      if (err.response.status === 401) {
        // 返回 401 清除token信息并跳转到登录页面
        router.push({
          pathname: '/login',
        });
        notification.error({
          message: '请求错误',
          description: '用户没有权限（令牌、用户名、密码错误），请重新登陆',
        });
      }
    }
    return Promise.resolve(response.data);
  },
);

errorHandler = error => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }

  return response;
}

export default function handleError({ error, errorTip }) {
    const { status } = error?.response || {};

    // 如果是未登录问题，不显示错误提示，直接跳转到登录页面
    if (status === 401) return toLogin();

    // 用户设置false，关闭提示，不显示错误信息
    if (errorTip === false) return;

    const description = getErrorTip({ error, errorTip });

    notification.error({
        message: '失败',
        description,
        duration: 2,
    });
}

helperToast = {
    success: content => {
      notification.open({
        message: <div style={{"color": "#c3c5cb"}}>Submitted</div>,
        description: content,
        style: {
          radius: "10px",
          border: "1px solid #2c2f36",
          background: "#29292c",
          color: "#c3c5cb",
        },
        onClose: async () => {},
      });
        // toast.dismiss();
        // toast.success(content);
    },
    error: content => {
      notification.open({
        message: <div style={{"color": "#c3c5cb"}}>Failed</div>,
        description: content,
        style: {
          radius: "10px",
          border: "1px solid #2c2f36",
          background: "#29292c",
          color: "#c3c5cb",
        },
        onClose: async () => {},
      });
        // toast.dismiss();
        // toast.error(content);
    }
}

export function notifyError(message, theme, duration) {
  notification.error({
    message: message,
    closeIcon: closeIcon(theme),
    icon: <FontAwesomeIcon icon={faGhost} />,
    duration: duration || 5,
    top: topPosition,
    style: {
      color: theme.red,
      background: theme.notificationBackground,
    },
  });
}

customNotification(){
    const key = Date.now()
    notification.open({
      message: 'Notification Title',
      description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
      key,
      btn:<Button type="primary" onClick={() => notification.close(key)}>Confirm</Button>
    })
  }

export function notifySuccess(message, theme, duration) {
  notification.success({
    message: message,
    closeIcon: closeIcon(theme),
    icon: <FontAwesomeIcon icon={faCheckCircle} />,
    duration: duration || 3,
    top: topPosition,
    style: {
      color: theme.green,
      background: theme.notificationBackground,
    },
  });
}

componentDidMount () {
    this.props.appStore.initUsers()
    this.particle = new BGParticle('backgroundBox')
    this.particle.init()
    notification.open({
      message: '初始登录',
      duration: 10,
      description: (<ul>
        <li>账号：admin</li>
        <li>密码：admin</li>
      </ul>)
    })
  }

checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `请求错误 ${response.status}: ${response.url}`,
    description: errortext,
  });
  const error = new Error(errortext);
  error.name = response.status;
  error.response = response;
  throw error;
}

request.interceptors.response.use(
  async (data) => {
    return data;
  },
  (error) => {
    if (error.response && error.response.status) {
      const { response } = error;

      const errorText = codeMessage[response.status] || response.statusText;

      notification.error({
        message: `请求错误： ${response.status}`,
        description: errorText,
      });

      if (response.status === 401) {
        console.log(401);
        setTimeout(() => history.push('/login'), 2000);
      }

      return Promise.reject(error.response.data);
    } else {
      notification.error({
        message: `请求错误： ${error.message}`,
      });
      return Promise.reject(error);
    }
  }
);

errorHandler = (error) => {
  const { response } = error;

  if (response && response.status) {
    const message = response.data && response.data.message;

    const errorText = message || codeMessage[response.status];
    const { status } = response;
    notification.config({
      duration: 10,
    });
    notification.error({
      message: `Request error ${status}`,
      description: errorText,
    });
    if (response.data && response.data.jwtExpired) {
      history.push('/logout');
    }
    return response.data;
  } else {
    notification.config({
      duration: 5,
    });
    notification.error({
      message: 'No internet connection',
      description: 'Cannot connect to the server, Check your internet network',
    });
    return {
      success: false,
      result: null,
      message: 'Cannot connect to the server, Check your internet network',
    };
  }
}

successHandler = (response, typeNotification = {}) => {
  if (!response.data.result) {
    response = {
      ...response,
      status: 404,
      url: null,
      data: {
        success: false,
        result: null,
      },
    };
  }
  const { data } = response;
  if (data.success === false) {
    const message = data && data.message;
    const errorText = message || codeMessage[response.status];
    const { status } = response;
    notification.config({
      duration: 20,
    });
    notification.error({
      message: `Request error ${status}`,
      description: errorText,
    });
  } else {
    const message = data && data.message;
    const successText = message || codeMessage[response.status];
    const { status } = response;
    // notification.config({
    //   duration: 20,
    // });
    // notification.success({
    //   message: `Request success`,
    //   description: successText,
    // });
  }

  return data;
}

function loginExpire() {
  notification.error({
    message: '未登录或登录已过期，请重新登录。',
  });
  // @HACK
  /* eslint-disable no-underscore-dangle */
  window.g_app._store.dispatch({
    type: 'login/loginExpire',
  });
  return;
}

checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `请求错误 ${response.status}: ${response.url}`,
    description: errortext,
  });
  const error = new Error(errortext);
  error.name = response.status;
  error.response = response;
  throw error;
}

errorHandler = error => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }

  return response;
}

function UploadProgress({ isUploading, uploadProgress }) {
	function openUploadStartNotification() {
		notification.open({
			message: "Upload Started!",
			description:
				"You can continue using the app like normal while the upload happens in the background. However, do not refresh or close the app until it completes!",
			icon: <Icon type="loading" style={{ fontSize: 24 }} spin />,
			duration: 8,
			key: "upload-start",
		});
	}

	function openUploadFinishNotification() {
		notification["success"]({
			message: "Upload Complete!",
			description: "Video upload has finished successfully.",
		});
	}

	function closeUploadStartNotification() {
		notification.close("upload-start");
	}

	useEffect(() => {
		if (isUploading && uploadProgress === 0) {
			openUploadStartNotification();
		}
		if (uploadProgress === 100) {
			openUploadFinishNotification();
			closeUploadStartNotification();
		}
	}, [uploadProgress, isUploading]);

	return <></>;
}

getExperiments(query = "") {
    axios.get(`http://localhost:8000/experiments/`, {
      params: {
        query: query
      }
    }).then((response) => {
      this.setState({
        ...this.state, experiments: response.data
      })
    }).catch((err) => {
      notification.open({ message: 'Error', description: err.message, style: { backgroundColor: 'red' } });
    });
  }

export function notifySuccess(message, theme, duration) {
  trackEvent(message);
  notification.success({
    message: message,
    closeIcon: closeIcon(theme),
    icon: <FontAwesomeIcon icon={faCheckCircle} />,
    duration: duration || 3,
    top: topPosition,
    style: {
      color: theme.green,
      background: theme.notificationBackground,
    },
  });
}

openNotification = () => {
  const key = `open${Date.now()}`;
  const btn = (
    <Button type="primary" size="small" onClick={() => notification.close(key)}>
      Confirm
    </Button>
  );
  notification.open({
    message: 'Notification Title',
    description:
      'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
    btn,
    key,
    onClose: close,
  });
}

componentDidMount() {
    const {
      query: { id },
    } = this.props.location;
    if (id === undefined) return;
    request(`/empty-item/demo/detail?id=${id}`).then(res => {
      if (res.code === 'SUCCESS') {
        this.setState({
          current: res.data,
          imageUrl: res.data.url,
        });
      } else {
        notification.error({
          message: res.code,
          description: res.msg,
        });
      }
      this.loading();
    });
  }

openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    className: 'custom-class',
    style: {
      width: 600,
    },
  });
}

errorHandler = error => {
  const { response = {} } = error;
  const errortext = codeMessage[response.status] || response.statusText;
  const { status, url, body } = response;

  if (status === 401) {
    // 防抖
    if(expireTimeout){
      clearTimeout(expireTimeout);
    }
    expireTimeout = setTimeout(()=>{
      loginExpire();
    },500);
    
    return;
  }
  notification.error({
    message: `请求错误 ${status}: `,
    description: errortext,
  });
  // environment should not be used
  if (status === 403) {
    router.push('/exception/403');
    return;
  }
  if (status <= 504 && status >= 500) {
    router.push('/exception/500');
    return;
  }
  if (status >= 404 && status < 422) {
    router.push('/exception/404');
  }

}