How to use use-async-effect - 7 common examples

To help you get started, we’ve selected a few use-async-effect examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github srph / careflix / ui / src / screens / app.watch.home / ChatWidget / index.tsx View on Github external
const { height } = useWindowSize()
  const [hasUnreadMessages, setHasUnreadMessages] = useState(false)
  const chatbarRef = useRef<HTMLDivElement>(null)
  const idleAudioRef = useRef<HTMLAudioElement>(null)
  const sendAudioRef = useRef<HTMLAudioElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)
  // One-off flag used to check if we're supposed to scroll to the bottom
  const shouldScrollToBottomRef = useRef<boolean>(true)
  // The last stored scroll distance from the bottom of our chat list container
  // We want to update when then the user scrolls the container or the container size changes.
  const lastScrollDistanceFromBottom = useRef<number>(0)
  // One-off flag used to check if it's a message sent through pusher
  const isReceivingRef = useRef<boolean>(true)
  const isSubmittable = state.message.text.trimRight().trimLeft().length > 0

  useAsyncEffect(
    async () => {
      dispatch({
        type: 'request:init'
      })

      const [err, res] = await axios.get(`/api/parties/${props.party.id}/logs`)

      if (err != null) {
        return dispatch({
          type: 'request:error'
        })
      }

      dispatch({
        type: 'request:success',
        payload: { logs: res.data }
github srph / careflix / ui / src / index.tsx View on Github external
function Root(props: ReactComponentWrapper) {
  const [isLoading, setIsLoading] = React.useState<boolean>(true)

  const auth: typeof AuthContainer = useUnstated(AuthContainer)

  useAsyncEffect(
    async () => {
      await auth.getUserData()
      setIsLoading(false)
    },
    null,
    []
  )

  // We'll wrap in fragment, otherwise we'll get an error saying:
  // JSX element type '{}' is not a constructor function for JSX elements.
  return isLoading ? <div /> : <React.Fragment>{props.children}</React.Fragment>
}
github srph / careflix / ui / src / screens / app.home / YouWereWatching / index.tsx View on Github external
function YouWereWatching() {
  const [isLoading, setIsLoading] = useState(true)
  const [party, setParty] = useState<AppParty>(null)

  useAsyncEffect(async () => {
    const [err, res] = await axios.get('/api/me/recent-party')

    if (err != null) {
      // Do something
    }

    setIsLoading(false)
    setParty(res.data.party)
  }, null, [])

  if (isLoading) {
    return null
  }

  if (party == null) {
    return null
github srph / careflix / ui / src / screens / app.watch / index.tsx View on Github external
function AppWatch(props: ReactComponentWrapper) {
  const { match } = useReactRouter<RouteParams>()

  const [state, dispatch] = useReducer(reducer, {
    party: null,
    isLoading: true
  })

  useAsyncEffect(
    async () => {
      dispatch({
        type: 'data:init'
      })

      const [err, res] = await axios.get(`/api/parties/${match.params.partyId}`)

      if (err) {
        return dispatch({
          type: 'data:error'
        })
      }

      dispatch({
        type: 'data:success',
        payload: { party: res.data }
github desktopui / silver-bullet / electron / src / api.ts View on Github external
export function useSlackApi<T>(
  prop: any,
  call: () => Promise<T[]>
): [Array<T>, boolean] {
  const [data, setData] = useState([] as Array<T>);
  const [loading, setLoading] = useState(true);

  useAsyncEffect(
    async () => {
      try {
        const response = await call();
        setData(response);
      } catch (e) {
        alert(e.message);
        setData([]);
      }
      setLoading(false);
    },
    () => {},
    [prop]
  );
  return [data, loading];
}
github srph / careflix / ui / src / screens / app.watch.home / SubtitleSlot / index.tsx View on Github external
function SubtitleSlot(props: Props) {
  const [state, setState] = useState<State>(() => ({ tracks: [] }))

  useAsyncEffect(
    async () => {
      if (!props.video.subtitle_url) {
        return
      }

      const [err, res] = await axios.get(`api/videos/${props.video.id}/subtitle`, {
        validation: false
      })

      if (err != null) {
        return //
      }

      setState({
        tracks: srt2obj(res.data.subtitle)
      })
github srph / careflix / ui / src / components / SeasonSelection / index.tsx View on Github external
function ShowModal(props: Props) {
  const [state, dispatch] = useReducer(reducer, {
    groups: [],
    isLoading: false,
    selectedGroupId: props.currentVideo ? props.currentVideo.show_group_id : -1
  })

  const group = useMemo(() => {
    return state.groups.find(group => group.id === state.selectedGroupId)
  }, [state.groups, state.selectedGroupId])

  useAsyncEffect(
    async () => {
      if (props.show == null || props.show.title_type === 'movie') {
        return
      }

      dispatch({
        type: 'request:init'
      })

      const [err, res] = await axios.get(`api/shows/${props.show.id}/groups`)

      if (err != null) {
        return dispatch({
          type: 'request:error'
        })
      }

use-async-effect

Asynchronous side effects, without the nonsense

MIT
Latest version published 3 months ago

Package Health Score

73 / 100
Full package analysis

Popular use-async-effect functions

Popular JavaScript code snippets

Find secure code to use in your application or website