react-toastify toast TypeScript Examples

Source File: utils.tsx From posthog-foss with MIT License

7 votes

export function editingToast(
    item: string,
    setItemMode:
        | ((mode: DashboardMode | null, source: DashboardEventSource) => void)
        | ((mode: ItemMode | null, source: DashboardEventSource) => void)
): any {
    return toast(
        <>
            <h1>{item} edit mode</h1>
            <p>Tap below when finished.</p>
            <div className="text-right">
                <Button>Finish editing</Button>
            </div>
        </>,
        {
            type: 'info',
            autoClose: false,
            onClick: () => setItemMode(null, DashboardEventSource.Toast),
            closeButton: false,
            className: 'drag-items-toast accent-border',
        }
    )
}

Source File: ErrorToast.tsx From dxvote with GNU Affero General Public License v3.0

6 votes

export default function ErrorToast(toastText, modalText) {
  return toast.error(
    <div>
      {toastText}
      <ErrorToastButton>More</ErrorToastButton>
      <Modal
        header={<h1>Error</h1>}
        isOpen={true}
        onDismiss={() => console.log(1)}
        onConfirm={() => navigator.clipboard.writeText(modalText)}
        onCancel={() => console.log(1)}
        confirmText={'Copy to Clipboard'}
        cancelText={'Contact'}
      >
        <p>{modalText}</p>
      </Modal>
    </div>,
    {
      position: 'bottom-right',
      autoClose: 50000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    }
  );
}

Source File: Base.tsx From mail-my-ballot with Apache License 2.0

6 votes

SignatureBase = <Info extends StateInfo>(
  {enrichValues, children}: Props<NoSignature<Info>>
) => {
  const [signature, setSignature] = React.useState<string | null>()

  const enrichValuesWithSignature = (baseInfo: StatelessInfo): Info | null => {
    const values = enrichValues(baseInfo)
    if (!values) return null

    if (!signature) {
      // Do not dismiss previous errors which may give more details on bad fields
      toast.error('Please fill out the signature field')
      return null
    }

    return {
      ...baseInfo,
      ...values,
      signature,
    } as Info  // hack b/c it cannot understand how to distribute over types
  }

  return <Base<Info>
    enrichValues={enrichValuesWithSignature}
  >
    { children }
    <Signature setSignature={setSignature}/>
  </Base>
}

Source File: AlertContainer.tsx From lightning-terminal with MIT License

6 votes

AlertToast: React.FC<AlertToastProps> = ({ alert, onClose }) => {
  // use useEffect to only run the side-effect one time
  useEffect(() => {
    const { id, type, message, title, ms: autoClose } = alert;
    // create a component to display inside of the toast
    const { Body, Title, Message } = Styled;
    const body = (
      <Body>
        {title && <Title>{title}</Title>}
        <Message>{message}</Message>
      </Body>
    );
    // display the toast popup containing the styled body
    toast(body, { type, autoClose, onClose: () => onClose(id) });
  }, [alert, onClose]);

  // do not render anything to the dom. the toast() func will display the content
  return null;
}

Source File: newsFeedSaga.ts From foodie with MIT License

6 votes

function* newsFeedSaga({ type, payload }: INewsFeedSaga) {
    switch (type) {
        case GET_FEED_START:
            try {
                yield put(isGettingFeed(true));
                yield put(setNewsFeedErrorMessage(null));

                const posts: IPost[] = yield call(getNewsFeed, payload);

                yield put(isGettingFeed(false));
                yield put(getNewsFeedSuccess(posts));
            } catch (e) {
                console.log(e);
                yield put(isGettingFeed(false));
                yield put(setNewsFeedErrorMessage(e))
            }

            break;
        case CREATE_POST_START:
            try {
                yield put(isCreatingPost(true));

                const post: IPost = yield call(createPost, payload);

                yield put(createPostSuccess(post));
                yield put(isCreatingPost(false));
                toast.dismiss();
                toast.dark('Post succesfully created.');
            } catch (e) {
                yield put(isCreatingPost(false));
                console.log(e);
            }
            break;
        default:
            throw new Error('Unexpected action type.')
    }
}

Source File: index.tsx From freedeck-configurator with GNU General Public License v3.0

6 votes

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
register({
  onUpdate: (registration) => {
    toast("There is an Update! Click here to update.", {
      autoClose: false,
      position: "bottom-right",
      onClick: () => {
        if (registration && registration.waiting) {
          registration.waiting.postMessage({ type: "SKIP_WAITING" });
        }
        window.location.reload();
      },
    });
  },
});

Source File: store.ts From polkabtc-ui with Apache License 2.0

6 votes

saveState = (store: AppState): void => {
  try {
    const preparedState = {
      ...store,
      issue: {
        ...store.issue,
        issueRequests: mapToArray(store.issue.issueRequests)
      },
      redeem: {
        ...store.redeem,
        redeemRequests: mapToArray(store.redeem.redeemRequests)
      }
    };
    const serializedState = JSON.stringify(preparedState);
    localStorage.setItem(constants.STORE_NAME, serializedState);
  } catch (error) {
    setTimeout(
      () => toast.error('Local storage is disabled. In order to use platform please enable local storage'),
      2000
    );
  }
}

Source File: usePromoToast.ts From index-ui with MIT License

6 votes

usePromoToast = (component: React.ReactElement, toastId: string) => {
  const [hasBeenDismissed, setHasBeenDismissed] = useLocalStorage(
    toastId,
    false
  )

  useEffect(() => {
    !hasBeenDismissed &&
      toast.success(component, {
        position: 'bottom-right',
        autoClose: false,
        closeOnClick: false,
        draggable: false,
        closeButton: true,
        toastId,
        onClose: () => setHasBeenDismissed(true),
      })
  }, [])

  return null
}

Source File: store.ts From polkabtc-ui with Apache License 2.0

6 votes

loadState = (): StoreType => {
  try {
    const serializedState = localStorage.getItem(constants.STORE_NAME);
    if (serializedState === null) {
      const initialState = getInitialState();
      return initialState;
    }
    const rawStore = JSON.parse(serializedState);
    const deserializedState = {
      ...rawStore,
      general: {
        ...rawStore.general,
        polkaBtcLoaded: false,
        relayerLoaded: false
      }
    };
    return {
      ...deserializedState,
      issue: {
        ...deserializedState.issue,
        issueRequests: arrayToMap(deserializedState.issue.issueRequests)
      },
      redeem: {
        ...deserializedState.redeem,
        redeemRequests: arrayToMap(deserializedState.redeem.redeemRequests)
      }
    };
  } catch (error) {
    setTimeout(
      () => toast.error('Local storage is disabled. In order to use platform please enable local storage'),
      2000
    );
    const initialState = getInitialState();
    return initialState;
  }
}

Source File: useCopyClipboardToast.tsx From tsplay.dev with MIT License

6 votes

useCopyClipboardToast = (): ShowToast => {
  const [toastId, setToastId] = React.useState<string | number>('')

  const showToast = React.useCallback<ShowToast>(
    (content, options = {}, isError) => {
      const toastFc = isError ? toast.error : toast

      if (toastId) {
        toast.dismiss(toastId)
        options.delay = 270
      }

      const newToastId = toastFc(content, options)
      setToastId(newToastId)
    },
    [toastId]
  )

  return showToast
}

Source File: fetcher.ts From yasd with MIT License

6 votes

fetcher = <T>(requestConfig: AxiosRequestConfig): Promise<T> => {
  return client
    .request<T>(requestConfig)
    .then((res) => res.data)
    .catch((error) => {
      if (error.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        console.error(error.response.data)
        console.error(error.response.status)
        toast.error('请求错误: ' + error.message + `(${error.response.status})`)
      } else if (error.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        console.error(error.request)
        toast.error('无法连接服务器: ' + error.message, {
          toastId: error.message,
        })
      } else {
        // Something happened in setting up the request that triggered an Error
        console.error('Error', error.message)
        toast.error('发生错误: ' + error.message)
      }

      throw error
    })
}

Source File: index.tsx From Next.js_GraphQL_Express_Apollo_Boilerplate with MIT License

6 votes

handleSubmit = async (updateUser: any, event: any) => {
    try {
      event.preventDefault();
      const { state, props } = this;
      if (validateEmail(state.email)) {
        await updateUser({
          variables: {
            userId: props.userId,
            updateUser: { ...state },
          },
        });
        toast.success('Profile Updated');
        props.history.push('/welcome');
      } else {
        toast.error('Invalid Email');
      }
    } catch (error) {
      toast.error('Check your connection');
    }
  };

Source File: requestJSON.ts From Hybooru with MIT License

6 votes

export default async function requestJSON<Res, Req extends Record<string, any> = Record<string, any>>(options: RequestOptions<Req> = {}): Promise<Res> {
  if(isNode) return new Promise(() => {});
  let { method, href, host, pathname, search, cancelCb, data } = options;
  
  host = host || location.host;
  pathname = pathname || location.pathname;
  if(search && typeof search !== "string") {
    search = qs.stringify(search);
  }
  search = search ? "?" + search : location.search;
  href = href || `//${host}${pathname}${search}`;
  method = method || "GET";
  
  let response;
  try {
    response = await axios({
      method,
      url: href,
      data,
      cancelToken: cancelCb ? new CancelToken(cancelCb) : undefined,
    });
  } catch(err) {
    if(!(err instanceof axios.Cancel)) toast.error(err.response?.data?._error?.message || err.message);
    throw err;
  }
  
  return response.data;
}

Source File: LogoutButton.tsx From frontend with Apache License 2.0

6 votes

LogoutButton: FunctionComponent = () => {
  const { t } = useTranslation()
  // Using state to prevent user repeatedly initating fetches
  const [clicked, setClicked] = useState(false)
  const dispatch = useUserDispatch()

  // Only make a request on first click
  useEffect(() => {
    if (clicked) {
      logout(dispatch)
        .catch(err => {
          toast.error(t(err))
          setClicked(false)
        })
    }
  }, [dispatch, clicked, t])

  return (
    <Button onClick={() => setClicked(true)} type='primary'>
      {t('log-out')}
    </Button>
  )
}

Source File: personalAPIKeysLogic.ts From posthog-foss with MIT License

6 votes

personalAPIKeysLogic = kea<personalAPIKeysLogicType>({
    path: ['lib', 'components', 'PersonalAPIKeys', 'personalAPIKeysLogic'],
    loaders: ({ values }) => ({
        keys: [
            [] as PersonalAPIKeyType[],
            {
                loadKeys: async () => {
                    const response: PersonalAPIKeyType[] = await api.get('api/personal_api_keys/')
                    return response
                },
                createKey: async (label: string) => {
                    const newKey: PersonalAPIKeyType = await api.create('api/personal_api_keys/', {
                        label,
                    })
                    return [newKey, ...values.keys]
                },
                deleteKey: async (key: PersonalAPIKeyType) => {
                    await api.delete(`api/personal_api_keys/${key.id}/`)
                    return (values.keys as PersonalAPIKeyType[]).filter((filteredKey) => filteredKey.id != key.id)
                },
            },
        ],
    }),
    listeners: () => ({
        createKeySuccess: ({ keys }: { keys: PersonalAPIKeyType[] }) => {
            keys[0]?.value && copyToClipboard(keys[0].value, 'personal API key value')
        },
        deleteKeySuccess: ({}: { keys: PersonalAPIKeyType[] }) => {
            toast.success(`Personal API key deleted.`)
        },
    }),

    events: ({ actions }) => ({
        afterMount: [actions.loadKeys],
    }),
})

Source File: index.ts From sdc-ide with MIT License

6 votes

showToast = (type: 'success' | 'error', error?: OperationOutcome, index?: number) => {
    if (type === 'success') {
        return toast.success('New mapper created');
    }
    if (type === 'error') {
        return toast.error(
            formatError(error, {
                mapping: { conflict: 'Please reload page' },
                format: (errorCode, errorDescription) =>
                    `An error occurred: ${error?.issue[index as number]?.diagnostics || errorDescription} ${
                        error?.issue[index as number]?.expression?.[0] || ''
                    } (${errorCode}).`,
            }),
        );
    }
}

Source File: groups.ts From abrechnung with GNU Affero General Public License v3.0

6 votes

groupLog = atomFamily<Array<GroupLog>, number>({
    key: "groupLog",
    effects_UNSTABLE: (groupID) => [
        ({ setSelf }) => {
            setSelf(
                fetchLog({ groupID: groupID }).catch((err) => toast.error(`error when fetching group log: ${err}`))
            );

            ws.subscribe("group_log", groupID, (subscription_type, { log_id, element_id }) => {
                if (element_id === groupID) {
                    fetchLog({ groupID: element_id }).then((result) => setSelf(result));
                }
            });
            // TODO: handle registration errors

            return () => {
                ws.unsubscribe("group_log", groupID);
            };
        },
    ],
})

Source File: experimentsLogic.tsx From posthog-foss with MIT License

6 votes

experimentsLogic = kea<experimentsLogicType>({
    path: ['scenes', 'experiments', 'experimentsLogic'],
    connect: { values: [teamLogic, ['currentTeamId']] },
    actions: {},
    loaders: ({ values }) => ({
        experiments: [
            [] as Experiment[],
            {
                loadExperiments: async () => {
                    const response = await api.get(`api/projects/${values.currentTeamId}/experiments`)
                    return response.results as Experiment[]
                },
                deleteExperiment: async (id: number) => {
                    await api.delete(`api/projects/${values.currentTeamId}/experiments/${id}`)
                    toast(
                        <div>
                            <h1 className="text-success">
                                <CheckCircleOutlined /> Experiment removed
                            </h1>
                        </div>
                    )
                    return values.experiments.filter((experiment) => experiment.id !== id)
                },
            },
        ],
    }),
    events: ({ actions }) => ({
        afterMount: () => {
            actions.loadExperiments()
        },
    }),
})

Source File: GroupDeleteModal.tsx From abrechnung with GNU Affero General Public License v3.0

6 votes

export default function GroupDeleteModal({ show, onClose, groupToDelete }) {
    const confirmDeleteGroup = () => {
        deleteGroup({ groupID: groupToDelete.id })
            .then((res) => {
                onClose();
            })
            .catch((err) => {
                toast.error(err);
            });
    };

    return (
        <Dialog open={show} onClose={onClose}>
            <DialogTitle>Delete Group</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    {groupToDelete ? <span>Are you sure you want to delete group {groupToDelete.name}</span> : null}
                </DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button color="primary" onClick={onClose}>
                    No
                </Button>
                <Button color="error" onClick={confirmDeleteGroup}>
                    Yes pls
                </Button>
            </DialogActions>
        </Dialog>
    );
}

Source File: Toast.tsx From game-store-monorepo-app with MIT License

5 votes

toastWarn = (params: ToastParams) => {
  toast.warn(params.content, {
    ...defaultToastOptions,
    ...params.options,
  });
}

Source File: Blurb.tsx From mail-my-ballot with Apache License 2.0

5 votes

Blurb: React.FC<{}> = () => {
  const { path, pushAddress } = useAppHistory()
  const { address } = AddressContainer.useContainer()
  const zipRef = React.useRef<HTMLInputElement>(null)
  const { fetchingData, setFetchingData } = FetchingDataContainer.useContainer()

  // mobile browsers don't support 100vh, so use this trick instead
  // https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
  // Also, need to use a state variable instead of a simpler ts variable
  // https://stackoverflow.com/a/56156394/8930600
  const [height, setHeight] = React.useState('100vh')
  React.useEffect(() => {
    setHeight(`${window.innerHeight}px`)
  }, [])

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.persist()  // allow async function call
    event.preventDefault()
    const zip = zipRef?.current?.value
    if (!zip) return
    setFetchingData(true)
    const resp = await client.fetchState(zip)
    if (resp.type === 'error') {
      toast.error('Error finding the ZIP code')
    } else {
      pushAddress(resp.data, zip)
    }
    setFetchingData(false)
  }

  const defaultValue = () => {
    if (path?.type === 'address' && path.zip) {
      return path.zip
    } else {
      return address?.postcode ?? undefined
    }
  }

  return <Background style={{height}}>
    <StyleContainer>
      <FlexBox style={{height}}>
        <Title>Vote by Mail</Title>
        <Text>
          Voting by mail is a secure, time-tested, and easy way to vote.  Your ballot arrives safely in the mail weeks before the election and can be filled out and returned at your convenience.
        </Text>
        <Text>Sign up today in <b>2 minutes</b> before your state deadline expires.
        </Text>
        <AppForm onSubmit={handleSubmit}>
          <Text><b>Enter your ZIP code</b> to get started</Text>
          <FlexContainer>
            {/* id is used by WarningMsg to fill out zipcode */}
            <ZipInput
              id='start-zip'
              data-testid='start-zip'
              type='text'
              pattern='[0-9]{5}'
              placeholder='ZIP code'
              defaultValue={defaultValue()}
              ref={zipRef} />
            <SubmitButton
              id='start-submit'
              data-testid='start-submit'
              variant='raised'
              disabled={fetchingData}
            >
              Start
            </SubmitButton>
          </FlexContainer>
        </AppForm>
      </FlexBox>
    </StyleContainer>
  </Background>
}

Source File: skill-details.tsx From liferay-grow with MIT License

5 votes

ProfileSkillDetails = () => {
  const i18n = useLang();

  const [onUpdateGrowMapSkills] = useMutation(UpdateGrowMapSkillDetails);

  const onSave = async (selectedSkills: SelectedSkills[], refetch) => {
    const knowledgeSkillDetails = selectedSkills.map(
      ({ isMentor, knowledgeMatrizId, knowledgeSkillId }) => ({
        isMentor,
        knowledgeMatrizId,
        knowledgeSkillId,
      }),
    );

    try {
      await onUpdateGrowMapSkills({
        variables: {
          data: {
            knowledgeSkillDetails,
          },
        },
      });

      await refetch();
      toast.info(i18n.get('your-request-completed-successfully'));
    } catch (error) {
      toast.error(i18n.get('an-unexpected-error-occurred'));
    }
  };

  return (
    <WrappedSafeComponent<RequestProps> query={getMe}>
      {({ data: { me }, refetch }) => {
        const knowledgeSkillDetails = me.growMap?.knowledgeSkillDetails || [];

        const selectedSkills: SelectedSkills[] = knowledgeSkillDetails.map(
          ({ isMentor = false, knowledgeMatriz, knowledgeSkill }) => ({
            isMentor,
            knowledgeMatrizId: knowledgeMatriz.id,
            knowledgeSkillId: knowledgeSkill.id,
          }),
        );

        return (
          <UserSkillTemplate title={i18n.get('skills-details')} me={me}>
            <SkillContextProvider defaultState={{ selectedSkills }}>
              <SkillDetails onSave={(skills) => onSave(skills, refetch)} />
            </SkillContextProvider>
          </UserSkillTemplate>
        );
      }}
    </WrappedSafeComponent>
  );
}

Source File: useFileHandler.tsx From foodie with MIT License

5 votes

useFileHandler = <T extends unknown>(type = "multiple", initState: T): IFileHandler<T> => {
    const [imageFile, setImageFile] = useState<T>(initState);
    const [isFileLoading, setFileLoading] = useState(false);

    const removeImage = (id: string) => {
        if (!Array.isArray(imageFile)) return;

        const items = imageFile.filter(item => item.id !== id);

        setImageFile(items as T);
    };

    const clearFiles = () => {
        setImageFile(initState as T);
    }

    const onFileChange = (event: React.ChangeEvent<HTMLInputElement>, callback?: (file?: IImage) => void) => {
        if (!event.target.files) return;
        if ((event.target.files.length + (imageFile as IImage[]).length) > 5) {
            return toast.error('Maximum of 5 photos per post allowed.', { hideProgressBar: true });
        }

        // TODO ===  FILTER OUT DUPLICATE IMAGES

        const val = event.target.value;
        const img = event.target.files[0] as File;

        if (!img) return;

        const size = img.size / 1024 / 1024;
        const regex = /(\.jpg|\.jpeg|\.png)$/i;

        setFileLoading(true);
        if (!regex.exec(val)) {
            toast.error('File type must be JPEG or PNG', { hideProgressBar: true });
            setFileLoading(false);
        } else if (size > 2) {
            toast.error('File size exceeded 2mb', { hideProgressBar: true });
            setFileLoading(false);
        } else if (type === 'single') {
            const file = event.target.files[0] as File;
            const url = URL.createObjectURL(file);
            setImageFile({
                file,
                url,
                id: file.name
            } as T);
            if (callback) callback(imageFile as IImage);
        } else {
            Array.from(event.target.files).forEach((file) => {
                const url = URL.createObjectURL(file);
                setImageFile((oldFiles) => ([...oldFiles as any, {
                    file,
                    url,
                    id: file.name
                }] as T));
            });
            if (callback) callback(imageFile as IImage);
            setFileLoading(false);
        }
    };

    return {
        imageFile,
        setImageFile,
        isFileLoading,
        onFileChange,
        removeImage,
        clearFiles
    };
}

Source File: index.tsx From polkabtc-ui with Apache License 2.0

5 votes

Layout = ({ children }: Props): JSX.Element => {
  const address = useSelector((state: StoreType) => state.general.address);
  const location = useLocation();
  const [ref, { height: footerHeight }] = useMeasure<HTMLDivElement>();

  const handleRequestDotFromFaucet = async (): Promise<void> => {
    // TODO: should show a descriptive warning
    if (!address) return;

    try {
      const receiverId = window.polkaBTC.api.createType(ACCOUNT_ID_TYPE_NAME, address);
      await window.faucet.fundAccount(receiverId);
      toast.success('Your account has been funded.');
    } catch (error) {
      toast.error(`Funding failed. ${error.message}`);
    }
  };

  /**
   * TODO: a hack for now.
   * - Should apply the gradient on the landing page
   */
  const isHomePage = location.pathname === PAGES.home;

  return (
    <div
      style={{
        //  TODO: should avoid hard-coding colors (https://tailwindcss.com/docs/gradient-color-stops)
        backgroundImage:
          isHomePage ?
            // eslint-disable-next-line max-len
            'linear-gradient(to right bottom, #e1106d, #e52766, #e83761, #ea445b, #eb5157, #ed5952, #ef624e, #f06a4a, #f37143, #f4783c, #f58035, #f5882d)' :
            'unset'
      }}
      className={clsx(
        'relative',
        'min-h-screen'
      )}>
      <main
        style={{ paddingBottom: footerHeight }}
        className={clsx(
          'flex',
          'flex-col'
        )}>
        {!checkStaticPage() && (
          <Topbar
            address={address}
            requestDOT={handleRequestDotFromFaucet} />
        )}
        {!isHomePage && <TestnetBanner />}
        {!isHomePage && <MaintenanceBanner />}
        {children}
      </main>
      <Footer
        ref={ref}
        className={clsx(
          'absolute',
          'bottom-0',
          'w-full',
          'shadow',
          'border-t'
        )} />
    </div>
  );
}

Source File: message-container.component.tsx From hive-keychain-extension with MIT License

5 votes

MessageContainer = ({ errorMessage, resetMessage }: PropsFromRedux) => {
  const [timeoutId, setTimeoutId] = useState<any>();
  useEffect(() => {
    if (errorMessage.key) {
      switch (errorMessage.type) {
        case MessageType.ERROR:
          toast.error(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
        case MessageType.SUCCESS:
          toast.success(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
        case MessageType.WARNING:
          toast.warning(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
        case MessageType.INFO:
          toast.info(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
      }

      const id = setTimeout(() => {
        close();
      }, DURATION);
      setTimeoutId(id);
    }
  }, [errorMessage]);

  const close = () => {
    resetMessage();
    clearTimeout(timeoutId);
  };

  return (
    <ToastContainer
      position="bottom-center"
      autoClose={DURATION}
      pauseOnHover
      theme="dark"
      onClick={() => close()}
      closeOnClick={true}
      draggable={false}
      bodyStyle={{ fontSize: '16px', fontFamily: 'Futura', fontWeight: '400' }}
    />
  );
}

Source File: LinkCreator.tsx From tsplay.dev with MIT License

5 votes

useLinkInput = ({ setShortened, setShortenedCreated, showToast, setLinks }: Props) => {
  const [inputValue, setInputValue] = React.useState('')
  const [loading, setLoading] = React.useState(false)
  const [customLink, setCustomLink] = React.useState('')

  const createLink = async () => {
    if (!inputValue) return
    if (!isTSLink(inputValue)) {
      toast(
        <div>
          <span role="img" aria-label="warning" className="prevent-hue-rotate">
            ⚠️{' '}
          </span>
          Not a TypeScript Playground URL
        </div>
      )
      return
    }
    if (customLink) {
      const [isValid, msg] = validateCustomLink(customLink)
      if (!isValid) {
        toast(msg)
        return
      }
    }
    try {
      setLoading(true)
      const body: CreatePayload = {
        url: inputValue,
        createdOn: 'client',
        expires: false,
        ...(customLink && { short: customLink }),
      }
      const { shortened } = await api<CreateResponse>('short', { body })
      setShortenedCreated(shortened)
      handleLinksList(shortened, setLinks)
      setCustomLink('')
      toast(
        <div>
          <span role="img" aria-label="warning" className="prevent-hue-rotate">
            ?{' '}
          </span>
          Short link created successfully!
        </div>
      )
      copyToClipboard(shortened.replace(/^https?:\/\//, ''), shortened, showToast)
      setInputValue('')
      setShortened(prev => (prev ? prev + 1 : 1))
    } catch (e) {
      // eslint-disable-next-line no-console
      console.log('Error trying to shorten URL', e)
      toast(
        <div>
          <span role="img" aria-label="warning" className="prevent-hue-rotate">
            ?️{' '}
          </span>
          Opps, something went wrong.
        </div>
      )
    } finally {
      setLoading(false)
    }
  }

  return { inputValue, loading, setInputValue, createLink, customLink, setCustomLink }
}

Source File: index.tsx From yasd with MIT License

5 votes

Page: React.FC = () => {
  const { t } = useTranslation()
  const { data: modules, error: modulesError } = useSWR<Modules>(
    '/modules',
    fetcher,
  )
  const [isLoading, setIsLoading] = useState(false)

  const isChecked = (name: string): boolean => {
    return modules?.enabled.includes(name) === true
  }

  const toggle = useCallback(
    (name: string, newVal: boolean) => {
      setIsLoading(true)

      fetcher({
        url: '/modules',
        method: 'POST',
        data: {
          [name]: newVal,
        },
      })
        .then(() => {
          toast.success(t('common.success_interaction'))
          return mutate('/modules')
        })
        .catch((err) => {
          toast.success(t('common.failed_interaction'))
          console.error(err)
        })
        .finally(() => {
          setIsLoading(false)
        })
    },
    [setIsLoading, t],
  )

  return (
    <PageContainer>
      <PageTitle title={t('home.modules')} />

      <div tw="divide-y divide-gray-200">
        {modules &&
          modules.available.map((mod) => {
            return (
              <div key={mod} tw="flex items-center justify-between p-3">
                <div tw="truncate leading-normal text-gray-700">{mod}</div>
                <div tw="flex items-center">
                  <Toggle
                    noMargin
                    label=""
                    labelChecked="on"
                    labelUnchecked="off"
                    disabled={isLoading}
                    checked={isChecked(mod)}
                    onChange={() => toggle(mod, !isChecked(mod))}
                  />
                </div>
              </div>
            )
          })}
      </div>
    </PageContainer>
  )
}

Source File: DeleteButton.tsx From frontend with Apache License 2.0

5 votes

DeleteButton: FunctionComponent = () => {
  const { t } = useTranslation()
  // Using state to prevent user repeatedly initating fetches
  const [clicked, setClicked] = useState(false)
  const [waiting, setWaiting] = useState(false)
  const [token, setToken] = useState('')
  const dispatch = useUserDispatch()

  // Only make a request on first click
  useEffect(() => {
    if (clicked) {
      requestDeletion(
        setWaiting,
        msg_id => {
          toast.error(t(msg_id));
          setClicked(false);
        },
        setToken
      )
    }
  }, [dispatch, clicked, t])

  if (waiting) {
    return <Spinner size={30} />
  }

  if (token) {
    // Callbacks must clear the token to hide the dialog
    return <ConfirmDialog
      prompt='Delete your account?'
      entry='I wish to delete my account'
      action={t('delete-account')}
      onConfirmed={() => {
        setWaiting(true)

        deleteAccount(dispatch, token)
          .catch(err => {
            toast.error(t(err))
            setClicked(false)
          })
          .finally(() => {
            setWaiting(false)
          })

        setToken('')
      }}
      onCancelled={() => {
        // Hide dialog and allow reuse of button
        setToken('')
        setClicked(false)
      }}
    />
  }

  return (
    <Button onClick={() => setClicked(true)} type='secondary'>
      {t('delete-account')}
    </Button>
  )
}

Source File: index.tsx From houston with MIT License

5 votes

static info(content: React.ReactNode, options?: IToastOptions): void {
    const theme = getCurrentTheme();
    toast.info(content, {
      ...options,
      style: { ...(theme ? { background: theme.feedbackColor.informative.pure } : {}) }
    });
  }

react-toastify#toast TypeScript Examples