react-toastify#toast JavaScript Examples

helperToast = {
  success: content => {
    toast.dismiss();
    toast.success(content);
  },
  error: content => {
    toast.dismiss();
    toast.error(content);
  }
}

uploadProjectThumbnailAction = (formData) => async (dispatch) => {
  const config = {
    onUploadProgress: (progressEvent) => {
      dispatch({
        type: actionTypes.PROJECT_THUMBNAIL_PROGRESS,
        payload: {
          progress: `Uploaded progress: ${Math.round((progressEvent.loaded / progressEvent.total) * 100)}%`,
        },
      });
    },
  };
  const centralizedState = store.getState();
  toast.info('Uploading image...', {
    position: 'top-center',
    hideProgressBar: false,
    icon: '',
    closeOnClick: true,
    pauseOnHover: false,
    draggable: true,
    progress: undefined,
    autoClose: 30000,
  });
  const {
    organization: { activeOrganization },
  } = centralizedState;
  const { thumbUrl } = await projectService.upload(formData, config, activeOrganization.id);
  toast.dismiss();
  dispatch({
    type: actionTypes.UPLOAD_PROJECT_THUMBNAIL,
    payload: { thumbUrl },
  });
  return thumbUrl;
}

MainPage = () => {
  cache.default.loadFriends();
  groupcache.default.getGroups(() => {});

  const [showDropzone, setShowDropzone] = useState(false);

  const getZone = () => {
    return <DropzonePage showUpload={() => showZone()} />;
  };

  const showZone = () => {
    routecache.default.getSelected().then((selected) => {
      if (selected !== "") {
        setShowDropzone(!showDropzone);
      } else {
        toast.error("No Route Selected", {
          draggable: true,
          position: toast.POSITION.TOP_CENTER,
        });
      }
    });
  };

  return (
    <div className="App" id="outer-container">
      <BurgerMenu pageWrapId="page-wrap" container="outer-container" />
      <main className="main" id="page-wrap">
        <FloatingButton showUpload={() => showZone()} />
        <div>{showDropzone ? getZone() : null}</div>

        <MapContainer />
      </main>
      <UserDropdown />
    </div>
  );
}

App = () => (
  <Suspense fallback={<Loader />}>
    <Fragment>
      <Routes />
      <Toaster
        {...{
          autoClose: 5000,
          position: toast.POSITION.TOP_CENTER,
          newestOnTop: true,
          closeOnClick: true,
          pauseOnVisibilityChange: true,
          draggable: true,
          className: 'solid-toaster-container',
          toastClassName: 'solid-toaster',
          bodyClassName: 'solid-toaster-body',
          transition: Slide
        }}
      />
    </Fragment>
  </Suspense>
)

ReactNotificationComponent = ({ title, body }) => {
  let hideNotif = title === "";

  if (!hideNotif) {
    toast.info(<Display />);
  }

  function Display() {
    return (
      <div>
        <h4>{title}</h4>
        <p>{body}</p>
      </div>
    );
  }

  return (
    <ToastContainer
      autoClose={3000}
      hideProgressBar
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss={false}
      draggable
      pauseOnHover={false}
    />
  );
}

async login() {
    await fetch("/login", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(this.state),
    }).then((result) => {
       if(result.status !== 200){
         toast("Incorrect Username or Password");
       }else{
          result.json().then((res) => {
          localStorage.setItem("jwt", res.jwt);
          this.props.history.push("/uploadmusic");
          window.location.reload();
          });
       }
     
    });
      
    // if (
    //   localStorage.getItem("jwt") !== null &&
    //   localStorage.getItem("jwt") !== "undefined"
    // ) {
    //   this.props.history.push("/uploadmusic");
    //   window.location.reload();
    // } else {
    //   this.props.history.push("/login");
    //   toast("Incorrect Username or Password");
    // }
  }

submit() {
    this.setState(
      {
        showReleaseUpdateModal: false,
      },
      () => {
        axios.defaults.headers.common['X-CSRF-Token'] = this.props.authenticity_token;
        axios
          .post(window.BASE_PATH + '/admin/email', {
            comment: this.state.comment,
          })
          .then(() => {
            toast.success('Sent email to all users.', {
              position: toast.POSITION.TOP_CENTER,
            });
          })
          .catch(() => {
            toast.error('Failed to send email to all users.', {
              autoClose: 2000,
              position: toast.POSITION.TOP_CENTER,
            });
          });
      }
    );
  }

export function create(provider) {
  return function(dispatch) {
    dispatch(setLoading(true));
    return api
      .post(`/provider/`, provider)
      .then(response => {
        toast.success("El proveedor se creó con éxito");
        dispatch(success(response.data.data));
        dispatch(setLoading(false));
        return dispatch(goBack());
      })
      .catch(error => {
        apiErrorToast(error);
        return dispatch(setLoading(false));
      });
  };
}

function App() {
  useDocumentHeader({ title: 'SaaSgear' });
  const { error } = useSelector((state) => state.user);

  useEffect(() => {
    if (error) {
      toast.error(error);
    }
  }, [error]);

  return (
    <ApolloProvider client={client}>
      <BrowserRouter>
        <GlobalStyle />
        <GlobalLoading />
        <ToastContainer />
        <Switch>
          <Route path="/verify-email" component={VerifyEmail} />
          <Route path="/social/:provider/callback" component={Social} />
          <Route
            path="/teams/invitation/:invitationToken"
            component={AcceptInvitation}
          />
          <PublicRoute path="/auth" component={Auth} />
          <PrivateRoute render={(props) => <AdminLayout {...props} />} />
          <Redirect from="*" to="/" />
        </Switch>
      </BrowserRouter>
    </ApolloProvider>
  );
}

export function create(productType) {
  return function(dispatch) {
    dispatch(setLoading(true));
    return api
      .post(`/producttype/`, productType)
      .then(response => {
        if (!response.data.success) {
          var error = {response: {data: {Message: response.data.message}}};

          return handleError(dispatch, error);
        }

        dispatch(success(response.data.data));
        dispatch(setLoading(false));
        toast.success("El nuevo tipo se creó con exito");
        
        return dispatch(replace("/product-type"));
      })
      .catch(error => {
        return handleError(dispatch, error);
      });
  };
}

// Types of requests
// CRUD application -> Create,Read, Update and Delete
// POST Request -> Create resource
// GET Request -> Fetching/Reading the resource
// PUT([
//   {'a' :'a'},
//   {'b':'b'}
// ]) / PATCH([{'a':'A'}]) -> Updating the resource
// DELETE Request -> Deleteing a resource

//AJAX Example
// function loadDoc() {
//   var xhttp = new XMLHttpRequest();
//   xhttp.onreadystatechange = function() {
//     if (this.readyState == 4 && this.status == 200) {
//       console.log(this.responseText);
//     }
//   };
//   xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
//   xhttp.send();
// }

axios.interceptors.response.use(null, error => {
    // console.log("Error log",err);
    // console.log(error);
    
    const expectedError = error.response && error.response.status >= 400 && error.response.status<500;
    if(expectedError){
      toast.error('Expected error occured');
    }else{
        toast("Unexpected Error");
    }
    return  Promise.reject(error);
});

async googleDataSend(){ // this funtion handels the user data on the state and sends it to the backend through axios defined in ../api/index.js

        const { history } = this.props;
        if(history) {
            try {
                // console.log("inside google data send"); Use for Debugging
                history.push("/signin/Gsignin");
                const idToken = this.state.idToken;
                const userData = {
                    idToken
                };
                // console.log("user Data", userData.idToken) Use for Debugging
                const { data } =  await api.Gsignin(userData);
                console.log(data);
                toast.success(data.message);
                console.log(data);
                localStorage.setItem('token', data.token);
                localStorage.setItem('user', JSON.stringify(data.user));
                // console.log("it worked!!!"); Use for Debugging
                history.push('/');
            }catch(error) {
                if(error.response) {
                    toast.error(error.response.data.message);
                } else if(error.request) {
                    toast.error("Server is not Responding!");
                    // console.log(error.request);
                } else {
                    toast.error(error.message);
                    // console.log(error.message);
                }
            } 
        }
    }

export function showMsg(message, isError = false, isWarning = false) {
    let status = 'default'
    if (isError) status = 'error'
    if (isWarning) status = 'warning'
    toast(message, {
        transition: Slide,
        closeButton: true,
        autoClose: 5000,
        position: 'top-right',
        type: status,
    });
}

componentDidMount() {
    this.langService
      .getLanguages()
      .then(languages => {
        this.languages = languages;
      })
      .catch(err => {
        console.error(err);
        toast.error(
          `Could not load server language data. ${err.message}`
        );
      })
      .finally(() => {
        const {
          language,
          sharedEditorDidMount,
          loadTemplate,
        } = this.props;
        if (this.state.language === 'none') {
          this.setState({
            language,
            loadTemplate,
          });
        }
        sharedEditorDidMount(this);
      });
  }

loginRedirect = async (router) => {
  toast.warn('Please log in before visiting this page.', {
    position: 'top-center',
  });

  await router.push({
    pathname: '/login',
    query: { returnToPage: router.asPath },
  });
}

async handleSubmit(ev) {
        ev.preventDefault();

        const res = await fetch(`${getApiUrl()}/api/patient_info`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                firstName: this.state.firstName,
                lastName: this.state.lastName,
                admittanceDate: this.state.admittanceDate + 'T' + this.state.admittanceTime,
                info: this.state.info,
            }),
        });

        const resJson = await res.json();

        if (!resJson.result) {
            toast.error('Failed to update information!');
        } else {
            toast.success('Successfully updated!');
        }
    }

useGetAuditorias = () => {

    const dispatch = useDispatch()


    const getAuditorias = async () => { // Traer auditorias y la actual
        const auditoriasFix = [];
        const auditoriasTemp = await firestoreDB.collection("auditorias").get();
        console.log({auditoriasTemp})
        let auditTemp = {};


        auditoriasTemp.forEach(async (snapshot) => {

            auditTemp = {
                ...snapshot.data(),
                id: snapshot.id
            };
            auditoriasFix.push(auditTemp);

            if (auditTemp.actual === true) {
                dispatch({type: "set", auditoriaActual: auditTemp});
                // Traer libros de la auditorias actual
                console.log({auditTemp});

            }
        });

        dispatch(({type: "set", auditoriasIglesia: auditoriasFix}));
        toast.info("Datos traídos.");
    };


    return getAuditorias
}

toastError = err => {
	const errorMsg = err.response?.data?.message || err.response.data.error;
	if (errorMsg) {
		if (i18n.exists(`backendErrors.${errorMsg}`)) {
			toast.error(i18n.t(`backendErrors.${errorMsg}`), {
				toastId: errorMsg,
			});
		} else {
			toast.error(errorMsg, {
				toastId: errorMsg,
			});
		}
	} else {
		toast.error("An error occurred!");
	}
}

/**
     * Is the accessToken ok to use?
     * @returns boolean accessTokenIsGood
     */
    checkToken() {
        if (
            !this.state.accessToken ||
            this.state.expires === undefined ||
            new Date() > this.state.expires
        ) {
            // Need new login. Only clear auth, don't clear the state (leave form contents);
            this.clearAuth();
            this.setState({ page: 'welcome', working: false });
            toast.error('Your login session has ended.\nPlease login again', {
            autoClose: 8000,
            });
            return false;
        }
        return true;
    }

export function registerUser(payload) {
    return (dispatch) => {
        if (payload.creds.email.length > 0 && payload.creds.password.length > 0) {
            toast.success("You've been registered successfully");
            payload.history.push('/login');
        } else {
            dispatch(registerError('Something was wrong. Try again'));
        }
    }
}

export function registerUser(payload) {
  return (dispatch) => {
    if (payload.creds.email.length > 0 && payload.creds.password.length > 0) {
      toast.success("You've been registered successfully");
      payload.history.push('/login');
    } else {
      dispatch(registerError("Something was wrong. Try again"));
    }
  }
}

Masks = ({ className, me }) => {
  const query = useSafeQuery(GetMyMasksQuery, {
    variables: {
      paging: {
        page: 1,
        resultsPerPage: 1000000
      }
    }
  })

  const [ updateMaskStatus ] = useSafeMutation(UpdateMaskStatusMutation)

  const setMaskStatus = useCallback(async (name, enabled) => {
    const { error } = await updateMaskStatus({
      variables: {
        name,
        enabled,
      }
    })

    if (error) {
      toast.error(`Update error: ${error.message}`)
    }
  }, [ updateMaskStatus ])

  return (
    <Container className={className}>
      {isSelfHosted() ? null : <StyledBandwidthStatsThisMonth me={me} />}
      <QueryResult {...query}>
        {({ result }) => <MaskTable {...result} setMaskStatus={setMaskStatus} me={me} />}
      </QueryResult>
    </Container>
  )
}

createProjectAction = (data) => async (dispatch) => {
  const centralizedState = store.getState();
  const {
    organization: { activeOrganization },
  } = centralizedState;
  try {
    dispatch({ type: actionTypes.CREATE_PROJECT_REQUEST });
    toast.info('creating project ...', {
      position: 'top-center',
      hideProgressBar: false,
      icon: '',
      closeOnClick: true,
      pauseOnHover: false,
      draggable: true,
      progress: undefined,
    });
    const { project } = await projectService.create(data, activeOrganization.id);
    dispatch({
      type: actionTypes.CREATE_PROJECT_SUCCESS,
      payload: { project },
    });
    toast.dismiss();
    if (project) {
      toast.success('New Project Created', {
        position: 'top-center',
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });
      return project;
    }
    // dispatch(allSidebarProjects());
  } catch (e) {
    dispatch({ type: actionTypes.CREATE_PROJECT_FAIL });
    Swal.fire({
      icon: 'error',
      title: 'Error',
      text: e.message || 'Something went wrong !',
    });
  }
}

FloatingButton = (props) => {

let history = useHistory();
const [recording,setRecording] = useState(false); 
const startRecording = ()=>{
    toast.info("Route recording started", {
        draggable: true,
        position: toast.POSITION.TOP_CENTER
      });
    
    setRecording(true);
    RealTimeRoute.default.main()
}
 const  finishRecording = ()=>{
      toast.info("Route recording stopped", { 
        draggable: true,
        position: toast.POSITION.TOP_CENTER
      });
    
    setRecording(false);
    RealTimeRoute.default.stop();
    //props.showSaveRoute();
    history.push('/saveroute')
}

   
    return (
        <Fab  className="mainButton"
        event={'click'}
        icon={<i className ="fa fa-plus fafab"></i>}
        >
    <Action className="actionButton" text="Add route"><i className="fa fa-map-pin fafab"></i></Action>

    <Action className="actionButton"  text="Take Photo"  onClick={props.showUpload}><i className="fa fa-camera fafab"></i></Action>
    {
        recording ? <Action className="actionButton" text="Stop" onClick={() => finishRecording()}><i className="fa fas fa-stop"></i></Action>
        :<Action className="actionButton" text="Record" onClick={() => startRecording()}><i className="fa fa-circle"></i></Action>
    }
    
    
    

</Fab>
    );

}

errorToaster = (content: String, title: String = null, link: Object) =>
  toast(<Toaster {...{ content, title, type: 'error', link }} />, {
    autoClose: false,
    className: 'solid-toaster toaster-error',
    type: 'error'
  })

submit(_event, groupMember, reenableSubmit) {
    window.onbeforeunload = null;
    axios.defaults.headers.common['X-CSRF-Token'] = this.props.authenticity_token;
    let data = new Object({
      patient: this.state.enrollmentState.patient,
      propagated_fields: this.state.enrollmentState.propagatedFields,
    });
    data.patient.primary_telephone = data.patient.primary_telephone
      ? phoneUtil.format(phoneUtil.parse(data.patient.primary_telephone, 'US'), PNF.E164)
      : data.patient.primary_telephone;
    data.patient.secondary_telephone = data.patient.secondary_telephone
      ? phoneUtil.format(phoneUtil.parse(data.patient.secondary_telephone, 'US'), PNF.E164)
      : data.patient.secondary_telephone;
    const message = this.props.editMode ? 'Monitoree Successfully Updated.' : 'Monitoree Successfully Saved.';
    if (this.props.parent_id) {
      data['responder_id'] = this.props.parent_id;
    }
    data['bypass_duplicate'] = false;
    axios({
      method: this.props.editMode ? 'patch' : 'post',
      url: window.BASE_PATH + (this.props.editMode ? '/patients/' + this.props.patient.id : '/patients'),
      data: data,
    })
      .then(response => {
        if (response['data']['duplicate']) {
          // Duplicate, ask if want to continue with create
          this.handleConfirmDuplicate(
            data,
            groupMember,
            message,
            reenableSubmit,
            'This monitoree appears to be a duplicate of an existing record in the system. Are you sure you want to enroll this monitoree?'
          );
        } else {
          // Success, inform user and redirect to home
          toast.success(message, {
            onClose: () =>
              (location.href = window.BASE_PATH + (groupMember ? '/patients/' + response['data']['id'] + '/group' : '/patients/' + response['data']['id'])),
          });
        }
      })
      .catch(err => {
        reportError(err);
      });
  }

export function apiErrorToast(error) {
  if (error.response) {
    toast.error(error.response.data.Message);
  } else if (error.request) {
    toast.error("Server not responding");
  }
}

function ResetPassword() {
  useDocumentHeader({ title: 'Reset password' });
  const query = getQueryParam();
  const history = useHistory();
  const token = query.get('token');
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(ResetPasswordSchema),
  });
  const [loginMutation, { error, loading }] = useMutation(resetPasswordQuery);

  useEffect(() => {
    if (!token) {
      history.push('/auth/signin');
    }
  }, [token]);

  async function onSubmit({ password, passwordConfirmation }) {
    const { data } = await loginMutation({
      variables: {
        token,
        password,
        confirmPassword: passwordConfirmation,
      },
    });
    if (data?.resetPassword) {
      toast.success('Change password successfully!');
      history.push('/auth/signin');
    }
  }
  return (
    <ForgotPasswordWrapper>
      <Overlay />
      <ForgotPasswordContainer>
        <ResetPasswordForm
          onSubmit={handleSubmit(onSubmit)}
          register={register}
          errors={errors}
          apiError={error?.message}
          isSubmiting={loading}
        />
        <SquareIconTop>
          <img src={squareRadiusTop} alt="" />
        </SquareIconTop>
        <SmallSquareBottom>
          <img src={squareRadiusTopPrimary} alt="" />
        </SmallSquareBottom>
        <SmallSquareTop>
          <img src={squareRadiusTopPrimarySmall} alt="" />
        </SmallSquareTop>
        <SmallSquareGrid>
          <img src={squareGrid} alt="" />
        </SmallSquareGrid>
        <SquareIconBottom>
          <img src={squareRadiusTopBig} alt="" />
        </SquareIconBottom>
        <CircleIcon>
          <img src={circleSmall} alt="" />
        </CircleIcon>
      </ForgotPasswordContainer>
    </ForgotPasswordWrapper>
  );
}

Home = () => {
    const context = useContext(UserContext)
    const [query, setQuery] = useState("")
    const [user, setUser] = useState(null)

    const fetchDetails = async () => {
        try {
            const { data } = await Axios.get(`https://api.github.com/users/${query}`)
            setUser(data)
            console.log(data)
        } catch (err) {
            toast("Unable to locate the user", {
                type: "error"
            })
        }
    }

    if (!context.user?.uid) {
        return <Navigate to="/signin" />
    }

    return (
        <Container>
            <Row className=" mt-3">
                <Col md="5">
                    <InputGroup>
                        <Input
                            type="text"
                            value={query}
                            placeholder="Please provide the username"
                            onChange={e => setQuery(e.target.value)}
                        />
                        <InputGroupAddon addonType="append">
                            <Button onClick={fetchDetails} color="primary">Fetch User</Button>
                        </InputGroupAddon>
                    </InputGroup>
                    {user ?
                        <UserCard user={user} /> :
                        null
                    }
                </Col>
                <Col md="7">
                    {user ? <Details apiUrl={user.repos_url} /> : null}
                </Col>
            </Row>
        </Container>
    );
}