#[derive(Enum, Copy, Clone, Eq, PartialEq)]

#[derive(Enum, Copy, Clone, Eq, PartialEq, Debug)]

#[derive(SimpleObject, Default)]

#[derive(SimpleObject, Default, Debug)]

        let Data {
            client,
            token,
            conpool,
        } = ctx.data()?;

        let (tx, rx) = channel(5);
        let (con, client, token) = {
            let Data {
                client,
                token,
                conpool,
            } = ctx.data()?;

        let (tx, rx) = channel(5);

            (conpool.get()?, client.clone(), token.clone())
        };

        let con = conpool.get()?;
        tokio::spawn(
            background_import(
                client.clone(),
                token.clone(),

        tokio::spawn(async move {
            let res = background_import(
                client,
                token,

                tx,

                tx.clone(),

            .inspect_err(|e| {

            .await;
            if let Err(e) = res {

            }),
        );

                tx.send(StatusUpdate::with_kind(UpdateKind::Cancelled))
                    .await
                    .unwrap_or_else(|e| error!("unable to communicate error to client: {:?}", e));
            }
        });

import { useEffect } from 'react';

import { useState, useEffect } from 'react';

  const { data } = useSubscription(SYNC_SUB, {

  const { error, data } = useSubscription(SYNC_SUB, {

  const [cancelled, setCancelled] = useState(false);
  const [progress, setProgress] = useState(0);

  console.log(data, error);
  useEffect(() => {
    if((data && data.sync.kind === 'CANCELLED') || error) {
      setCancelled(true);
      if(progress === 0) {
        setProgress(100);
      }
    } else if(data && data.sync.remainingLogs && data.sync.totalLogs) {
      const new_prog = (1 - data.sync.remainingLogs / data.sync.totalLogs) * 100;
      setProgress(new_prog);
    }
  }, [data]);

  if (data !== undefined) {
    return (
      <div className="m-auto mt-10 max-w-xl">
        <div className="h-3 relative max-w-xl rounded-full overflow-hidden">
          <div className="w-full h-full bg-gray-200 absolute"></div>
          <div className="h-full bg-blue-500 absolute" style={{ width: `${(1 - data.sync.remainingLogs / data.sync.totalLogs) * 100}%` }}></div>
        </div>

  return (
    <div className="m-auto mt-10 max-w-xl">
      <span>{cancelled ? 'Unable to import logs' : 'Importing Logs...'}</span>
      <div className="h-3 relative max-w-xl rounded-full overflow-hidden">
        <div className="w-full h-full bg-gray-200 absolute"></div>
        <div className={`h-full absolute ${cancelled ? "bg-red-500" : "bg-blue-500"}`} style={{ width: `${progress}%` }}></div>

    );
  } else {
    return <div></div>;
  }

    </div>
  );