@fortawesome/free-solid-svg-icons#faSync TypeScript Examples

library.add(faBell, faChevronDown, faTimes, faArrowRight, faCheck, faPlusCircle,
    faExclamationCircle, faHeart, faCodeBranch, faMap, faList, faCircle,
    faDotCircle,
    faCheckCircle, faNetworkWired, faUsers, faCube, faSortUp, faSortDown,
    faEllipsisV, faSync, faMicrochip, faCheckDouble, faLaptopCode);

fontAwesomeSolidIcons = {
    faAngleDown,
    faAngleRight,
    faArrowLeft,
    faBars,
    faBookOpen,
    faChartArea,
    faChartBar,
    faChartPie,
    faChevronDown,
    faChevronUp,
    faColumns,
    faSearch,
    faTable,
    faTachometerAlt,
    faUser,
    faExclamationTriangle,
    faSignOutAlt,
    faCalendarAlt,
    faCogs,
    faClipboardList,
    faHammer,
    faTools,
    faSync,
    faLock,
    faLockOpen,
    faTrash,
    faPlusCircle,
    faSpinner,
    faMap,
    faAnchor,
    faCity,
    faChessRook,
    faMountain,
    faCampground,
    faHome,
    faUniversity,
    faCrosshairs,
    faPlane,
    faWrench,
}

function GitGithubChallenge({ user }: ConnectedProps<typeof connector>) {
  const router = useRouter();
  const [lastDoneTask, setLastDoneTask] = useState(null);
  const [errorForTask, setErrorForTask] = useState<{id: string, message: string}>(null);
  const [githubUsername, setGithubUsername] = useState(null);
  const [taskIdBeingVerified, setTaskIdBeingVerified] = useState(null);

  const indexOfLastDoneTask = tasks.findIndex((task) => task.id === lastDoneTask);

  const metaRef = useRef({});

  const verifyTask = async (task: Task) => {
    setTaskIdBeingVerified(task.id);
    setErrorForTask(null);

    try {
      const { isDone, errMessage, meta } = await task.verify({
        repo: REPO,
        owner: OWNER,
        username: githubUsername,
        // meta from previous task
        meta: metaRef.current[lastDoneTask],
      });

      if (isDone) {
        metaRef.current[task.id] = meta;
        setLastDoneTask(task.id);

        // TODO: what if this fails!!!???
        await ChallengesService.putLastDoneTask(CHALLENGE_ID, task.id, metaRef.current);
      } else {
        delete metaRef.current[task.id];
        setLastDoneTask(tasks[tasks.indexOf(task) - 1]?.id);
        setErrorForTask({
          id: task.id,
          message: errMessage,
        });
      }
    } catch (err) {
      // TODO: add error directly in the task
      console.error(err);
    }

    setTaskIdBeingVerified(null);
  };

  const handleGitHubRedirect = () => {
    if (router.query.error_description) {
      const errorDescription = Array.isArray(router.query.error_description)
        ? router.query.error_description[0]
        : router.query.error_description;

      SweetAlertService.toast({
        text: errorDescription,
        type: 'error',
        timer: 4000,
      });
    }

    router.replace(router.pathname);
  };

  useEffect(handleGitHubRedirect, []);

  useEffect(() => {
    if (user.info) {
      // If user is logged in then let's get his github credentials!
      setTaskIdBeingVerified(tasks[0].id);

      UserService
        .getGithubAccount()
        .then(async (githubUser) => {
          setGithubUsername(githubUser.login);
          GitHubService.init(githubUser.access_token);

          const { lastDoneTask, meta } = await ChallengesService.getLastDoneTask(CHALLENGE_ID);
          if (lastDoneTask) {
            metaRef.current = meta || {};
            setLastDoneTask(lastDoneTask);
          } else {
            await ChallengesService.startTask(CHALLENGE_ID);
            setLastDoneTask(tasks[0].id);
          }
        })
        .catch((err) => {
          console.log('ERROR', err);
          setLastDoneTask(null);
        })
        .finally(() => setTaskIdBeingVerified(null));
    }
  }, [user.info]);

  return (
    <PageContainer>
      <h1> Git & GitHub challenge ?</h1>
      <p>
        Dacă ai ajuns la acestă pagină înseamnă că faci parte
        din grupul de Alpha Testeri care ne ajută cu feedback,
        sau ne-ai stalkuit pe repo-ul din GitHub să vezi cum
        se numesc rutele ?
      </p>
      <p>
        Mai jos găsești primul challenge interactiv al platformei noastre.
        Acesta conține challenge-uri ce se auto-validează ;)
      </p>

      {!user.info && (
      <Button variant="success" onClick={withAuthModal(!!user.info, noop)}>
        Autentifica-te ca sa incepi provocarea
      </Button>
      )}

      <List className={styles['task-list']}>
        {tasks.map((task, index) => {
          let state: TaskState = 'available';
          const isDisabled = !user.info
          || indexOfLastDoneTask < index - 1
          || indexOfLastDoneTask >= index;

          if (isDisabled) {
            state = 'disabled';
          }

          if (indexOfLastDoneTask >= index) {
            state = 'done';
          } else if (taskIdBeingVerified === task.id) {
            state = 'loading';
          } else if (errorForTask?.id === task.id) {
            state = 'error';
          }

          let icon = <FontAwesomeIcon icon={faSync} />;

          if (state === 'done') {
            icon = <FontAwesomeIcon icon={faCheck} />;
          } else if (state === 'disabled') {
            icon = <FontAwesomeIcon icon={faBan} />;
          } else if (state === 'loading') {
            icon = <FontAwesomeIcon className="rotate" icon={faSpinner} />;
          } else if (state === 'error') {
            icon = <FontAwesomeIcon icon={faTimes} />;
          }

          return (
            <li className={`${styles.task} ${styles[`task--${state}`]}`} key={task.id}>
              <Button disabled={isDisabled} onClick={() => verifyTask(task)}>
                {icon}
              </Button>
              <div>
                {task.title}
                {/* <Button
                  style={{ marginLeft: '1em' }}
                  variant={indexOfLastDoneTask >= index ? 'success' : 'blue'}
                  loading={taskIdBeingVerified === task.id}
                  disabled={isDisabled}
                  onClick={() => verifyTask(task)}
                >
                  {indexOfLastDoneTask >= index ? 'DONE' : 'DO IT'}

                </Button> */}
                {errorForTask?.id === task.id && (
                <p className={styles.task__error}>
                  {errorForTask.message}
                </p>
                )}
              </div>
            </li>
          );
        })}
      </List>

      {lastDoneTask === tasks[tasks.length - 1].id && (
        <>
          <hr />
          <h2> Hooooray! You're ALL DONE! ??? </h2>
        </>
      )}
    </PageContainer>
  );
}

Menu = (): JSX.Element => {
  const dispatch = useDispatch();

  const state: RootStateType = useSelector((state) => state) as RootStateType;

  const [handle, setHandle] = useState(
    state.userList.handles.length ? state.userList.handles.toString() : ""
  );
  console.log(state.userList.handles.toString());
  useEffect(() => {
    fetchProblemList(dispatch);
    fetchContestList(dispatch);
    fetchSharedProblemList(dispatch);
  }, []);

  // useEffect(() => {
  //   if (!state.contestList.loading && !state.problemList.loading) sync(true);
  // }, [state.userList]);

  useEffect(() => {
    if (!state.contestList.loading && !state.problemList.loading)
      sync(state.userList.handles.length > 2 ? true : false);
    // console.log(state.contestList.loading);
    // console.log(state.problemList.loading);
  }, [state.userList, state.contestList.loading, state.problemList.loading]);

  const sync = (wait = false) => {
    fetchUserSubmissions(dispatch, state.userList.handles, wait);
  };

  const submitUser = () => {
    // Notification.info({
    //   title: "User submitted!",
    //   duration: 200,
    //   description: "hh",
    // });
    // toast.error("? Wow so easy!", {
    //   position: "bottom-right",
    //   autoClose: 2001,
    //   hideProgressBar: false,
    //   closeOnClick: true,
    //   pauseOnHover: true,
    //   draggable: true,
    //   progress: undefined,
    // }); 
    fetchUsers(dispatch, handle);
  };

  return (
    <Navbar
      className={
        "navbar navbar-expand-lg p-2 ps-4 pe-4 " + state.appState.theme.navbar
      }
      expand="md"
    >
      <div className="container p-0">
        <Link to="/" className="navbar-brand" href="#">
          CFTracker
        </Link>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />

        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ms-auto mt-2 mt-lg-0">
            <li className="nav-item active">
              <Link to={Path.Issues} className="nav-link" href="#">
                {/* <span className="p-1">{<FontAwesomeIcon icon={faBars} />}</span> */}
                <span>Issues</span>
              </Link>
            </li>
            <li className="nav-item active">
              <Link to={Path.PROBLEMS} className="nav-link" href="#">
                {/* <span className="p-1">{<FontAwesomeIcon icon={faBars} />}</span> */}
                <span>Problems</span>
              </Link>
            </li>
            <li className="nav-item">
              <Link to={Path.CONTESTS} className="nav-link" href="#">
                {/*  <span className="p-1">  {<FontAwesomeIcon icon={faListAlt} />}  </span>*/}
                <span>Contests</span>
              </Link>
            </li>

            <li className="nav-item">
              <OverlayTrigger
                trigger="click"
                placement="bottom"
                key="bottom"
                overlay={
                  <Popover
                    id="popover-basic"
                    className={state.appState.theme.bgText}
                  >
                    <Popover.Header
                      as="h3"
                      className={state.appState.theme.bgText}
                    >
                      <div className="d-flex align-items-center">
                        <span className={state.appState.theme.bgText}>
                          CFTracker (Created by{" "}
                          <a
                            href="https://codeforces.com/profile/bashem"
                            className={" " + state.appState.theme.text}
                            target="__blank"
                          >
                            bashem
                          </a>
                          )
                        </span>
                      </div>
                    </Popover.Header>
                    <Popover.Body className={state.appState.theme.bgText}>
                      <ul className="list-group list-group-flush">
                        <li
                          className={
                            "list-group-item " + state.appState.theme.bgText
                          }
                        >
                          <span className="pe-2">Source Code</span>
                          <a
                            href="https://github.com/mbashem/cftracker"
                            className="text-secondary pt-1 fs-5"
                            target="__blank"
                          >
                            {<FontAwesomeIcon icon={faGithub} />}
                          </a>
                        </li>
                      </ul>
                    </Popover.Body>
                  </Popover>
                }
              >
                <a
                  href="#"
                  onClick={(e) => e.preventDefault()}
                  className="nav-link"
                  title="Created by Bashem"
                >
                  <FontAwesomeIcon icon={faInfo} />
                </a>
              </OverlayTrigger>
            </li>

            <li className="nav-item">
              <a
                className={"nav-link"}
                href="#"
                title="Change Theme"
                onClick={(e) => {
                  e.preventDefault();
                  if (state.appState.themeMod === ThemesType.DARK)
                    changeAppState(
                      dispatch,
                      AppReducerType.CHANGE_THEME,
                      ThemesType.LIGHT
                    );
                  else
                    changeAppState(
                      dispatch,
                      AppReducerType.CHANGE_THEME,
                      ThemesType.DARK
                    );
                }}
              >
                <FontAwesomeIcon
                  icon={
                    state.appState.themeMod === ThemesType.DARK ? faMoon : faSun
                  }
                />
              </a>
            </li>

            <li className="nav-item">
              <a
                className="nav-link"
                onClick={(e) => {
                  e.preventDefault();
                  sync();
                }}
                title="Refresh Submissions"
                href="#"
              >
                <FontAwesomeIcon icon={faSync} />
              </a>
            </li>

            <li className="nav-item">
              <form
                className="form-inline d-flex my-2 my-lg-0 nav-item"
                onSubmit={(e) => {
                  e.preventDefault();
                  submitUser();
                }}
              >
                <input
                  name="handle"
                  className={"form-control " + state.appState.theme.bgText}
                  type="text"
                  placeholder="handle1,handle2,.."
                  aria-label="handles"
                  value={handle}
                  onChange={(e) => setHandle(e.target.value)}
                />
              </form>
            </li>
          </Nav>
        </Navbar.Collapse>
      </div>
    </Navbar>
  );
}

WalletView: React.FC = observer(function WalletView() {
    const { identity, payment } = useStores()
    const [topupLoading, setTopupLoading] = useState(false)
    const balance = Number(identity.identity?.balanceTokens.human) ?? 0
    const handleTopupClick = async () => {
        setTopupLoading(true)
        try {
            await payment.startTopupFlow(locations.walletTopup)
        } catch (err) {
            setTopupLoading(false)
            const msg = parseError(err)
            logErrorMessage("Could not contact payment gateways", msg)
            toast.error(dismissibleToast(<span>{msg.humanReadable}</span>))
        }
    }
    const [estimates, setEstimates] = useState<EntertainmentEstimateResponse | undefined>(undefined)
    useEffect(() => {
        payment.estimateEntertainment({ MYST: balance }).then((res) => setEstimates(res))
    }, [balance])
    const handleRefreshBalanceClick = () => {
        if (!identity.identity?.id) {
            return
        }
        toast.promise(identity.refreshBalance(), {
            loading: "Refreshing balance from blockchain",
            success: "Balance updated",
            error: "Failed to refresh balance",
        })
    }
    return (
        <ViewContainer>
            <ViewNavBar />

            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <IconWallet color={brandLight} />
                        <Balance>
                            {balance}{" "}
                            <BalanceRefreshButton
                                icon={faSync}
                                onClick={handleRefreshBalanceClick}
                                data-tip=""
                                data-for="balance-refresh-tooltip"
                            />
                        </Balance>
                        <Tooltip id="balance-refresh-tooltip">
                            <span>Force refresh wallet&apos;s balance from the blockchain.</span>
                        </Tooltip>
                        <BalanceCurrency>{payment.appCurrency}</BalanceCurrency>
                        <BalanceFiatEquivalent>
                            {payment.appFiatCurrency} equivalent ≈ {displayUSD(payment.fiatEquivalent(balance))}
                        </BalanceFiatEquivalent>
                    </SideTop>
                    <SideBot>
                        {!!estimates && (
                            <>
                                <Paragraph style={{ textAlign: "center", marginBottom: 10 }}>
                                    Will be enough for:
                                </Paragraph>
                                <EntertainmentBlocks>
                                    <EntertainmentBlock>
                                        <BlockIcon>
                                            <IconPlay color={brandLight} />
                                        </BlockIcon>
                                        <Heading2>{estimates.videoMinutes}h</Heading2>
                                        <EntertainmentExplanation>
                                            Online <br />
                                            video
                                        </EntertainmentExplanation>
                                    </EntertainmentBlock>
                                    <EntertainmentBlock>
                                        <BlockIcon>
                                            <IconMusic color={brandLight} />
                                        </BlockIcon>
                                        <Heading2>{estimates.musicMinutes}h</Heading2>
                                        <EntertainmentExplanation>
                                            Online <br />
                                            music
                                        </EntertainmentExplanation>
                                    </EntertainmentBlock>
                                    <EntertainmentBlock>
                                        <BlockIcon>
                                            <IconCloudDownload color={brandLight} />
                                        </BlockIcon>
                                        <Heading2>{estimates.trafficMb}GiB</Heading2>
                                        <EntertainmentExplanation>of data download</EntertainmentExplanation>
                                    </EntertainmentBlock>
                                    <EntertainmentBlock>
                                        <BlockIcon>
                                            <IconDocument color={brandLight} />
                                        </BlockIcon>
                                        <Heading2>{estimates.browsingMinutes}h</Heading2>
                                        <EntertainmentExplanation>
                                            Web <br />
                                            browsing
                                        </EntertainmentExplanation>
                                    </EntertainmentBlock>
                                </EntertainmentBlocks>
                            </>
                        )}
                        <BrandButton style={{ marginTop: "auto" }} onClick={handleTopupClick} loading={topupLoading}>
                            Top up
                        </BrandButton>
                    </SideBot>
                </ViewSidebar>
                <Content />
            </ViewSplit>
        </ViewContainer>
    )
})

export default function MediaPlayerOverlay(props: Props): JSX.Element {
    const actionMessage = useSelector(
        (state: RootAppState) => state.globalState.actionMessage
    );
    const uiVisible = useSelector(
        (state: RootAppState) => state.globalState.uiVisible
    );
    const webRtcGlobalState = useSelector(
        (state: RootAppState) => state.globalState.webRtc
    );

    const { t } = useTranslation();

    // Display updated actionMessage when updated in global state
    useEffect(() => {
        if (actionMessage && actionMessage.text) {
            if (props.playerTimeoutState.actionMessageTimeoutId) {
                clearTimeout(props.playerTimeoutState.actionMessageTimeoutId);
            }

            props.setPlayerTimeoutState({
                actionMessageTimeoutDone: false,
                actionMessageTimeoutId: setTimeout(() => {
                    props.setPlayerTimeoutState({
                        actionMessageTimeoutDone: true
                    });
                }, props.actionMessageDelay)
            });
        }

        return (): void => {
            if (props.playerTimeoutState.actionMessageTimeoutId) {
                clearTimeout(props.playerTimeoutState.actionMessageTimeoutId);
            }
        };
        // eslint-disable-next-line
    }, [actionMessage]); // FIXME

    const displayItemTitle = props.playerState.playingItem
        ? testMediaType(props.playerState.playingItem.url) === 'audio'
            ? true
            : false
        : true;

    return (
        <>
            {displayItemTitle && !webRtcGlobalState.isFullscreen && (
                <div className="flex w-full h-full absolute">
                    <div className="m-auto p-auto">
                        {props.playerState.playingItem ? (
                            props.playerState.playingItem.name
                        ) : (
                            <div className="flex-col text-center">
                                <p className="mb-2">{t('player.greeting')}</p>
                                <p>{t('player.greetingText')}</p>
                            </div>
                        )}
                    </div>
                </div>
            )}
            {actionMessage &&
                actionMessage.text &&
                !props.playerTimeoutState.actionMessageTimeoutDone && (
                    <div className="flex w-full h-full absolute">
                        <div className="mt-12 mx-auto mb-auto py-2 px-3 rounded backgroundShade z-50">
                            {actionMessage.text}
                        </div>
                    </div>
                )}
            {(props.playerState.isSyncing || props.playerState.isBuffering) && (
                <div className="flex w-full h-full absolute">
                    <div
                        className={
                            'ml-2 mr-auto mb-auto mt-8 py-2 px-3 rounded backgroundShade z-50' +
                            (uiVisible ? ' mb-12' : ' mb-2')
                        }
                    >
                        <FontAwesomeIcon
                            icon={faSync}
                            size="lg"
                            spin
                        ></FontAwesomeIcon>
                    </div>
                </div>
            )}
        </>
    );
}