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

export function FormSubmit({ form, icon, label, state, disabled }: IFormSubmitProps) {
	const { formState: { errors, isSubmitting, isValidating } } = form

	const isValid = size(errors) === 0

	let color
	let iconEl
	if (!isValid) {
		color = "warning"
		iconEl = <Icon icon={faExclamationTriangle}/>
	} else {
		switch (state) {
			case "error":
				color = "error"
				iconEl = <Icon icon={faExclamationTriangle}/>
				break
			case "success":
				color = "success"
				iconEl = <Icon icon={faCheckDouble}/>
				break
			case "normal":
			default:
				color = "primary"
				iconEl = <Icon icon={icon ?? faCheck}/>
		}
	}

	return <LoadingButton
		type="submit"
		loading={isSubmitting || isValidating}
		loadingPosition="start"
		startIcon={iconEl}
		color={color as any}
		variant="contained"
		disabled={disabled}
	>
		{label}
	</LoadingButton>
}

constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }

CodeBlock = (props: { html: string; content: string }) => {
  const { html, content } = props
  const [isCopied, setIscopied] = useState(false)

  const handleButtonsContent = (e: any) => {
    if (isCopied) {
      return
    }
    setIscopied(true)
    setTimeout(() => {
      setIscopied(false)
    }, 2000)
  }

  const handleBtnClick = (e: any) => {
    handleButtonsContent(e)
    copy(content)
  }

  return (
    <>
      <div
        className={styles.codeContent}
        dangerouslySetInnerHTML={{ __html: html }}></div>
      <button
        className={clsx('button', 'is-small', styles.copyBtn)}
        onClick={handleBtnClick}>
        <span className="icon is-small">
          {isCopied ? (
            <FontAwesomeIcon icon={faCheck} />
          ) : (
            <FontAwesomeIcon icon={faCopy} />
          )}
        </span>
      </button>
    </>
  )
}

LanguageSelectionModal: React.FC<LanguageSelectionModalProps> = props => {
  const { onDismiss } = props;
  const activeLocale = useActiveLocale();

  const modalContent = (
    <div className={classes.LanguageSelectionModal}>
      {SUPPORTED_LOCALES.map((locale: SupportedLocale) => {
        return (
          <div
            className={classes.languageButton}
            key={locale}
            onClick={() => {
              setLocale(locale);
              onDismiss();
            }}
          >
            {LOCALE_LABEL[locale]}
            {locale === activeLocale && (
              <FontAwesomeIcon icon={faCheck} height={24} width={24} className={classes.icon} />
            )}
          </div>
        );
      })}
    </div>
  );

  return (
    <Modal title={<Trans>Select Language</Trans>} content={modalContent} onDismiss={onDismiss} />
  );
}

LoadingIcon: React.FC<LoadingStatus> = ({ loading, error }) => (
  <span>
    <FontAwesomeIcon
      spin={loading}
      icon={loading ? faSpinner : error ? faExclamationCircle : faCheck}
      className={classNames({
        [classes.error]: error
      })}
    />
  </span>
)

// Description: add icons to be used in the app as needed
// Some are solid and some are from regular svg (hollow icons)
library.add(
  faSearch,
  faSearchPlus,
  faHome,
  faSpinner,
  faExclamationTriangle,
  faTrash,
  faTrashAlt,
  faEdit,
  faUser,
  faUserEdit,
  faUserPlus,
  faUserTimes,
  faUserMinus,
  faKey,
  faCheck,
  faCheckCircle,
  faCalendarDay,
  faClock,
  faCalendarAlt,
  farUser,
  faFileAlt
);

export function CopyToClipboard({ value }: ICopyToClipboardProps) {
	const [copied, setCopied] = useState<boolean | null>(null)
	const copyHandler = useCallback(async () => {
		try {
			await navigator.clipboard.writeText(value)
			setCopied(true)
		} catch {
			setCopied(false)
		}
	}, [value])

	return <Tooltip title="Copy To Clipboard" placement="top">
		<IconButton
			color={copied === true ? "success" : (copied === false ? "warning" : "default")}
			onClick={copyHandler}
		>
			<Icon icon={copied === true ? faCheck : (copied === false ? faTimes : faCopy)}/>
		</IconButton>
	</Tooltip>
}

CustomToast: React.FC<IProps> = (props) => {

  const { setShowToast, isSuccess, bodyText } = props

  return <div
    aria-live="polite"
    aria-atomic="true"
    style={{
      position: 'fixed',
      top: '90px',
      right: '20px',
    }}
  >
    <Toast
      onClose={() => setShowToast(false)}
      show={true}
      delay={3000}
      autohide
      className={isSuccess ? 'custom-toast-success' : 'custom-toast-failure'}
    >
      <Toast.Body className='d-flex' style={{ padding: '0.35rem' }}>
        <span className='mr-2'>
          {
            isSuccess
              ? <FontAwesomeIcon size='lg' className='custom-toast-icon' icon={faCheck} />
              : <FontAwesomeIcon size='lg' className='custom-toast-icon' icon={faTimesCircle} />
          }
        </span>
        <span className='custom-toast-text'>{bodyText}</span>
      </Toast.Body>
    </Toast>
  </div>
}

export function RequestResult({ result, completeRender }: IRequestResultProps<any>) {
	switch (result.type) {
		case "empty":
			return null
		case "error":
			return <Alert severity="error" icon={<Icon icon={faExclamationCircle}/>}>
				<AlertTitle>Request rejected</AlertTitle>
				{result.error}
			</Alert>
		case "complete":
			return <Box>
				<Alert variant="outlined" severity="success" icon={<Icon icon={faCheck}/>}>
					<AlertTitle>Request completed</AlertTitle>
					{completeRender?.(result.data)}
				</Alert>
			</Box>
	}
}

Player(props: { p: string; ip: number }) {
    let items: JSX.Element[] = [];

    const game = this.props.game;
    const votes = ['undefined', 'false', 'true'];

    for (let i = 0; i < 5; i++) {
      if (game.missionVotes[i].length > 0)
        items = items.concat(
          game.missionVotes[i].map((v, iv) => (
            <td
              className={
                (game.missionLeader[i][iv] === props.ip ? 'leader ' : '') +
                'vh-vote ' +
                votes[v[props.ip] + 1]
              }
              key={'M' + i + iv + 'P' + props.ip}
            >
              {game.missionTeams[i][iv]?.includes(props.ip) ? (
                <FontAwesomeIcon className="checkmark" icon={faCheck} />
              ) : null}
            </td>
          ))
        );
    }

    return (
      <tr className="vh-col">
        <td className="vh-row">{props.p}</td>
        {items}
      </tr>
    );
  }

ProgressIndicator = ({
  completePercentage,
}: {
  completePercentage: number
}) => {
  const donutItems = (completePercentage < 100)
    ? [{
      count: completePercentage,
      color: 'var(--green)',
    }, {
      count: 100 - completePercentage,
      color: 'var(--silver)',
    }]
    : [{ count: 100, color: 'var(--green) ' }];

  return (
    <div className={`${styles['progress-wrapper']} relative`}>
      <ProgressDonut
        size="2em"
        count={100}
        strokeWidth={3}
        items={donutItems}
      />
      {completePercentage === 100 && (
        <FontAwesomeIcon
          width={14}
          icon={faCheck}
          className={`absolute text-green ${styles['check-icon']}`}
        />
      )}
    </div>
  );
}

Components = () => (
  <Form withStyles onSubmit={noop}>
    <section>
      <h4> Checkbox </h4>
      <Checkbox>
        Are you sure?
      </Checkbox>
    </section>
    <section>
      <h4> Input with icon </h4>
      <InputWithIcon type="text">
        <FontAwesomeIcon icon={faCheck} />
      </InputWithIcon>
    </section>
    <section>
      <h4> Password reveal </h4>
      <PasswordReveal />
    </section>
  </Form>
)

render() {
    const { seconds } = this.state;
    const { isPlaying } = this.props;

    return (
      <div className="settings-form" onSubmit={() => null}>
        <AvalonScrollbars>
          <form autoComplete="off">
            <FontAwesomeIcon
              icon={faExclamation}
              className="unnecessarily-huge-exclamation-mark blue"
            />
            <h1>ARE YOU READY?</h1>
            <h2>GAME IS ABOUT TO START</h2>
            {isPlaying ? (
              <p className="center">
                Confirm that you are ready to start the game. You have {seconds} seconds
                left.
              </p>
            ) : (
              <p className="center">
                Waiting for players to confirm. {seconds} seconds remaining.
              </p>
            )}
            <div className="buttons">
              <button
                className="bt-cancel"
                type="button"
                onClick={isPlaying ? this.sendFalse : this.props.onExit}
              >
                <FontAwesomeIcon icon={faTimes} />
              </button>
              {isPlaying ? (
                <button className="bt-accept" type="button" onClick={this.sendTrue}>
                  <FontAwesomeIcon icon={faCheck} />
                </button>
              ) : null}
            </div>
          </form>
        </AvalonScrollbars>
      </div>
    );
  }

icons = {
  ok: <FontAwesomeIcon icon={faCheck} color="green"/>,
  error: <FontAwesomeIcon icon={faTimes} color="red"/>,
  loading: <FontAwesomeIcon icon={faCircleNotch} color="green" spin/>,
  empty: null
}

faCheck = faCheck;

faCheck = faCheck;

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);

RepoOrgDropdown: React.FC<IRepoOrgDropdownProps> = ({
  setShowDropdown,
  repoOwner,
  selectedRepoOwner,
  setSelectedRepoOwner,
}) => {
  return (
    <>
      <div
        className="dropdown-overlay-repo"
        onClick={(e) => setShowDropdown(false)}
      ></div>
      <div className="dropdown-box-repo">
        {repoOwner.map((owner, index) => (
          <div
            className="dropdown-item"
            key={index}
            onClick={(e) => setSelectedRepoOwner(owner)}
          >
            <LazyLoadedImage height={32} once>
              <img
                src={owner.avatar}
                alt="camera"
                className="dropdown-item-org-avatar"
                height={32}
                width={32}
                loading="lazy"
              />
            </LazyLoadedImage>
            <span className="dropdown-item-org-name">{owner.name}</span>
            {selectedRepoOwner.name === owner.name && (
              <span>
                <FontAwesomeIcon icon={faCheck} />
              </span>
            )}
          </div>
        ))}
        <div
          className="dropdown-item top-border"
          key={repoOwner.length}
          onClick={(e) =>
            window.open(`${config.urls.API_URL}/auth/github/app/new`, "_blank")
          }
        >
          <span className="dropdown-item-org-name">Add another Org</span>
        </div>
      </div>
    </>
  );
}

export default function RuntimeTools(props: {}) {
  const {loading} = useSelector((state: IStoreState) => state.autoSaveLoading);
  console.log('loading', loading);
  const loadingIcon = (
    <FontAwesomeIcon icon={faCircleNotch} spin color={'gray'}/>
  );
  const checkIcon = (
    <FontAwesomeIcon icon={faCheck} color={'red'}/>
  );
  const dispatch = useDispatch();
  const build = () => {
    dispatch(buildCode());
  };

  const run = () => {
    modal(cancel => (
      <div onClick={cancel}>
        Cancel
      </div>
    ));
  };

  const handleExport = () => {
    dispatch(exportCode());
  };

  return (
    <div className={style.run_tools}>
      <div className={style.label}>
        RUN TOOLS:
      </div>
      <div className={style.tools}>
        <button className={style.build_btn} onClick={build}>
          <FontAwesomeIcon icon={faGavel}/>
        </button>
        <button className={style.run_btn} onClick={run}>
          <FontAwesomeIcon icon={faPlay}/>
        </button>
        <button className={style.export_btn} onClick={handleExport}>
          <FontAwesomeIcon icon={faFileExport}/>
        </button>
        <button className={style.check_btn}>
          { loading ? loadingIcon : checkIcon }
        </button>
      </div>
    </div>
  );
}

function UsernameInput({ name }: any) {
  const ref = useRef<HTMLInputElement>(null);
  const checkFn = useRef<DebouncedFunc<(value: string) => void>>(debounce(checkUsername, 250));

  const [username, setUsername] = useState(null);
  const [usernameExists, setUsernameExists] = useState(undefined);

  const onUsernameChange = (e) => {
    let value: string = e.target.value ?? '';
    value = value.trim();

    setUsername(value);
    setUsernameExists(undefined);

    if (!value) {
      return;
    }

    checkFn.current.cancel();
    checkFn.current(value);
  };

  function checkUsername(value: string) {
    return UserService.checkUsername(value)
      .then(() => {
        setUsernameExists(true);
        ref.current.setCustomValidity('Acest username există deja');
      })
      .catch(() => {
        ref.current.setCustomValidity('');
        setUsernameExists(false);
      });
  }

  return (
    <InputWithIcon
      required
      type="text"
      name={name}
      ref={ref}
      onChange={onUsernameChange}
    >
      {usernameExists && <FontAwesomeIcon width="1em" className="text-red" icon={faTimes} />}
      {usernameExists === false && <FontAwesomeIcon width="1em" className="text-green" icon={faCheck} />}
      {usernameExists === undefined && username && <FontAwesomeIcon width="1em" className="rotate" icon={faSpinner} />}
    </InputWithIcon>
  );
}

checkIcon = faCheck as IconProp;

ExerciseVersion = ({
  index,
  href,
  version,
  isActive,
  className = '',
}: ExerciseVersionProps) => {
  const dateTime = format(new Date(version.createdAt).getTime(), 'yyyy-MM-dd');

  return (
    <Link replace href={href} passHref>
      <a className={`
        ${className}
        ${styles.ExerciseVersion} 
        ${isActive ? styles['ExerciseVersion--active'] : ''}
        d-flex no-underline
        `}
      >
        <div className={`${styles.index} d-flex p-3 align-items-center text-2xl`}>
          {index}
        </div>
        <div className="p-3">
          <p className="text-bold m-0 d-flex align-items-center">
            {version.approved ? (
              <>
                <span className="mr-2"> Soluție corectă </span>
                <FontAwesomeIcon width="16" icon={faCheck} />
              </>
            ) : (
              <>
                <span className="mr-2"> Soluție respinsă </span>
                <FontAwesomeIcon width="16" icon={faTimes} />
              </>
            )}
          </p>
          <time title={dateTime} className="d-block mt-4 mb-2" dateTime={dateTime}>
            <FontAwesomeIcon width="16" className="text-silver" icon={faCalendarAlt} />
            {' '}
            {timeAgo(new Date(version.createdAt))}
          </time>
        </div>
      </a>
    </Link>
  );
}

check = <FontAwesomeIcon icon={faCheck}/>

function DeploySiteConfig() {
  const history = useHistory();

  const {
    user,
    selectedOrg,
    selectedRepoForTriggerDeployment,
    orgLoading,
    userLoading,
  } = useContext<IStateModel>(StateContext);
  const { setLatestDeploymentConfig, setSelectedOrganization } =
    useContext<IActionModel>(ActionContext);

  const [createDeployProgress, setCreateDeployProgress] = useState(1);
  const [showRepoOrgDropdown, setShowRepoOrgDropdown] = useState<boolean>(false);
  const [reposOwnerDetails, setReposOwnerDetails] = useState<any[]>([]);
  const [reposSelectedOwnerRepoDetails, setReposSelectedOwnerRepoDetails] = useState<
    any[]
  >([]);
  const [selectedRepoOwner, setSelectedRepoOwner] = useState<any>();
  const [currentRepoOwner, setCurrentRepoOwner] = useState<string>("");
  const [ownerLoading, setOwnerLoading] = useState<boolean>(true);
  const [repoLoading, setRepoLoading] = useState<boolean>(true);
  const [repoBranches, setRepoBranches] = useState<any[]>([]);
  const [buildEnv, setBuildEnv] = useState<any[]>([]);
  const [repoBranchesLoading, setRepoBranchesLoading] = useState<boolean>(true);

  const [autoPublish, setAutoPublish] = useState<boolean>(true);
  const [selectedRepo, setSelectedRepo] = useState<any>();
  const [owner, setOwner] = useState<any>();
  const [branch, setBranch] = useState<string>("master");
  const [workspace, setWorkspace] = useState<string>();
  const [framework, setFramework] = useState<string>("react");
  const [packageManager, setPackageManager] = useState<string>("npm");
  const [buildCommand, setBuildCommand] = useState<string>("");
  const [publishDirectory, setPublishDirectory] = useState<string>("");
  const [protocol, setProtocol] = useState<string>("");
  const [startDeploymentLoading, setStartDeploymentLoading] =
    useState<boolean>(false);
  const [deployDisabled, setDeployDisabled] = useState<boolean>(false);
  const [showGithubRepos, setShowGithubRepos] = useState<boolean>(false);
  const [errorWarning, setErrorWarning] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string>("");

  const componentIsMounted = useRef(true);

  useEffect(() => {
    return () => {
      componentIsMounted.current = false;
    };
  }, []);

  useEffect(() => {
    if (
      selectedRepo &&
      owner &&
      branch &&
      framework !== "static" &&
      packageManager &&
      buildCommand &&
      publishDirectory &&
      protocol &&
      selectedOrg?.wallet &&
      !orgLoading
    ) {
      setDeployDisabled(false);
    } else {
      if (
        selectedRepo &&
        owner &&
        branch &&
        framework === "static" &&
        protocol &&
        selectedOrg?.wallet &&
        !orgLoading
      ) {
        setDeployDisabled(false);
      } else {
        setDeployDisabled(true);
      }
    }
  }, [
    selectedRepo,
    owner,
    branch,
    framework,
    packageManager,
    buildCommand,
    publishDirectory,
    user,
    selectedOrg,
    orgLoading,
    protocol,
  ]);

  useEffect(() => {
    if (framework === "static") {
      setPackageManager("");
      setBuildCommand("");
      setPublishDirectory("");
    } else if (framework === "react") {
      setPackageManager("npm");
      setBuildCommand("build");
      setPublishDirectory("build");
    } else if (framework === "vue") {
      setPackageManager("npm");
      setBuildCommand("build");
      setPublishDirectory("dist");
    } else if (framework === "angular") {
      setPackageManager("npm");
      setBuildCommand("build");
      setPublishDirectory("dist/your-app-name");
    } else if (framework === "next") {
      setPackageManager("yarn");
      setBuildCommand("next build && next export");
      setPublishDirectory("out");
    }
  }, [framework]);

  useEffect(() => {
    if (selectedOrg) {
      setOwner(selectedOrg);
    } else if (user?.organizations && user.organizations[0]) {
      setOwner(user.organizations[0]);
    }
  }, [user, selectedOrg]);

  useEffect(() => {
    if (selectedRepoForTriggerDeployment) {
      const repoName = selectedRepoForTriggerDeployment.github_url
        .substring(19, selectedRepoForTriggerDeployment.github_url.length - 4)
        .split("/")[1];
      const ownerName = selectedRepoForTriggerDeployment.github_url
        .substring(19, selectedRepoForTriggerDeployment.github_url.length - 4)
        .split("/")[0];

      setSelectedRepo({
        name: repoName,
        clone_url: selectedRepoForTriggerDeployment.github_url,
      });
      setCurrentRepoOwner(ownerName);
      setFramework(selectedRepoForTriggerDeployment.framework);
      setWorkspace(selectedRepoForTriggerDeployment.workspace);
      setPackageManager(selectedRepoForTriggerDeployment.package_manager);
      setBuildCommand(selectedRepoForTriggerDeployment.build_command);
      setPublishDirectory(selectedRepoForTriggerDeployment.publish_dir);
      setProtocol(selectedRepoForTriggerDeployment.protocol);
      setCreateDeployProgress(3);

      const branchUrl = `https://api.github.com/repos/${ownerName}/${repoName}/branches`;
      ApiService.getGithubRepoBranches(branchUrl).subscribe((res) => {
        if (componentIsMounted.current) {
          setRepoBranches(res.branches);
          setBranch(selectedRepoForTriggerDeployment.branch);
          setRepoBranchesLoading(false);
        }
      });
    }
  }, [selectedRepoForTriggerDeployment]);

  useEffect(() => {
    if (currentRepoOwner && selectedRepoForTriggerDeployment) {
      ApiService.getAllGithubAppInstallation().subscribe((res) => {
        if (componentIsMounted.current) {
          const repoOwners: any[] = res.installations.map((installation: any) => ({
            name: installation.account.login,
            avatar: installation.account.avatar_url,
            installationId: installation.id,
          }));
          if (repoOwners.length) {
            const newRepoOwner = repoOwners.filter(
              (repoOwner) => repoOwner.name === currentRepoOwner,
            )[0];
            setSelectedRepoOwner(newRepoOwner);
          }
        }
      });
    }
  }, [currentRepoOwner, selectedRepoForTriggerDeployment]);

  useEffect(() => {
    const bc = new BroadcastChannel("github_app_auth");
    bc.onmessage = (msg: string) => {
      if (msg === "authorized") {
        setShowGithubRepos(true);
        getAllGithubInstallations();
      }
    };
    return () => {
      bc.close();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const getAllGithubInstallations = () => {
    setOwnerLoading(true);
    setRepoLoading(true);
    ApiService.getAllGithubAppInstallation().subscribe((res) => {
      if (componentIsMounted.current) {
        const repoOwners: any[] = res.installations.map((installation: any) => ({
          name: installation.account.login,
          avatar: installation.account.avatar_url,
          installationId: installation.id,
        }));
        setReposOwnerDetails(repoOwners);
        if (repoOwners.length) {
          let newRepoOwner = null;
          if (selectedRepoOwner) {
            newRepoOwner = repoOwners.filter(
              (repoOwner) => repoOwner.name === selectedRepoOwner.name,
            )[0];
          } else {
            newRepoOwner = repoOwners[0];
          }
          setSelectedRepoOwner(newRepoOwner);
          setOwnerLoading(false);
          getOwnerRepos(newRepoOwner.installationId);
        } else {
          setOwnerLoading(false);
        }
      }
    });
  };

  const getOwnerRepos = (installationId: string) => {
    setRepoLoading(true);
    ApiService.getAllOwnerRepos(installationId).subscribe((res) => {
      if (componentIsMounted.current) {
        const repositories: any[] = res.repositories.map((repo: any) => ({
          clone_url: repo.clone_url,
          branches_url: repo.branches_url.split("{")[0],
          name: repo.name,
          fullName: repo.full_name,
          private: repo.private,
          repositoryId: repo.id,
        }));
        setReposSelectedOwnerRepoDetails(repositories);
        setRepoLoading(false);
      }
    });
  };

  const selectRepoOwner = (repoOwner: any) => {
    getOwnerRepos(repoOwner.installationId);
    setSelectedRepoOwner(repoOwner);
    setShowRepoOrgDropdown(false);
  };

  const selectRepositories = (repo: any) => {
    setSelectedRepo(repo);
    setCreateDeployProgress(2);
    setRepoBranchesLoading(true);
    ApiService.getGithubRepoBranches(repo.branches_url).subscribe((res) => {
      if (componentIsMounted.current) {
        setRepoBranches(res.branches);
        setBranch(res.branches[0].name);
        setRepoBranchesLoading(false);
      }
    });
  };

  const startDeployment = async () => {
    setErrorWarning(false);
    setErrorMessage("");
    setStartDeploymentLoading(true);
    const configuration = {
      framework,
      workspace,
      packageManager,
      buildCommand,
      publishDir: publishDirectory,
      branch,
      protocol,
    };
    ApiService.createConfiguration(configuration).subscribe(
      (result) => {
        if (componentIsMounted.current) {
          const uniqueTopicId = uuidv4();

          const deployment = {
            orgId: selectedOrg?._id,
            githubUrl: selectedRepo.clone_url,
            folderName: selectedRepo.name,
            owner: selectedRepoOwner.name,
            installationId: selectedRepoOwner.installationId,
            repositoryId: selectedRepo.repositoryId,
            organizationId: owner._id,
            uniqueTopicId,
            configurationId: result._id,
            env: mapBuildEnv(buildEnv),
            createDefaultWebhook: autoPublish,
          };

          ApiService.startDeployment(deployment).subscribe(
            (result) => {
              if (result.success) {
                if (componentIsMounted.current) {
                  setLatestDeploymentConfig(deployment);
                  setStartDeploymentLoading(false);
                  history.push(
                    `/org/${selectedOrg?._id}/sites/${result.projectId}/deployments/${result.deploymentId}`,
                  );
                }
              } else {
                setErrorMessage(result.message);
                setErrorWarning(true);
                setTimeout(() => {
                  setErrorWarning(false);
                  setErrorMessage("");
                }, 5000);
                setStartDeploymentLoading(false);
              }
            },
            (error) => {
              setErrorMessage(error.message);
              setErrorWarning(true);
              setTimeout(() => {
                setErrorWarning(false);
                setErrorMessage("");
              }, 5000);
              setStartDeploymentLoading(false);
            },
          );
        }
      },
      (error) => {
        setErrorMessage(error.message);
        setErrorWarning(true);
        setTimeout(() => {
          setErrorWarning(false);
          setErrorMessage("");
        }, 5000);
        setStartDeploymentLoading(false);
      },
    );
  };

  const mapBuildEnv = (buildEnv: any[]): any => {
    const buildEnvObj = {};
    buildEnv.forEach((env) => {
      Object.assign(buildEnvObj, { [env.key]: env.value });
    });
    return buildEnvObj;
  };

  const openGithubAppAuth = async () => {
    const githubSignInUrl = `${window.location.origin}/#/github/app/${user?._id}`;
    window.open(githubSignInUrl, "_blank");
  };

  const goBackAction = () => {
    if (createDeployProgress === 1) {
      history.goBack();
    } else if (createDeployProgress === 2) {
      setCreateDeployProgress(1);
    } else {
      setCreateDeployProgress(2);
    }
  };

  let buildCommandPrefix: string = "";
  if (packageManager === "npm") {
    buildCommandPrefix = "npm run";
  } else {
    buildCommandPrefix = "yarn";
  }

  const selectProtocol = (selectedProtocol: string) => {
    setProtocol(selectedProtocol);
    setCreateDeployProgress(3);
  };

  const addBuildEnv = () => {
    setBuildEnv([...buildEnv, { key: "", value: "" }]);
  };

  const removeBuildEnvItem = (id: number) => {
    setBuildEnv(buildEnv.filter((item, i) => i !== id));
  };

  const fillEnvKey = (value: string, id: number) => {
    setBuildEnv(
      buildEnv.map((item, i) =>
        i === id ? { key: value, value: item.value } : item,
      ),
    );
  };

  const fillEnvValue = (value: string, id: number) => {
    setBuildEnv(
      buildEnv.map((item, i) => (i === id ? { key: item.key, value } : item)),
    );
  };

  return (
    <div className="DeploySiteConfig">
      <RootHeader parent={"DeploySiteConfig"} />
      <main className="app-main">
        <div className="deploy-site-container">
          <div className="deploy-site-card">
            <div className="deploy-site-card-inner">
              <div className="go-back" onClick={goBackAction}>
                <span>
                  <FontAwesomeIcon icon={faArrowLeft} />
                </span>
                <span>Back</span>
              </div>
              <h1 className="deploy-site-title">Create a new site</h1>
              <div className="deploy-site-subtitle">
                Just follow these 2 step to deploy your website to ArGo
              </div>
              <div className="deploy-site-progress-bar">
                <div className="deploy-site-progress-number-container">
                  {createDeployProgress <= 1 ? (
                    <div
                      className={`deploy-site-progress-number ${
                        createDeployProgress === 1 ? "active" : ""
                      }`}
                    >
                      1
                    </div>
                  ) : (
                    <div className="deploy-site-progress-done">
                      <FontAwesomeIcon icon={faCheck} />
                    </div>
                  )}
                  <div
                    className={`deploy-site-progress-text ${
                      createDeployProgress === 1
                        ? "deploy-site-progress-text-active"
                        : ""
                    }`}
                  >
                    Pick a repository
                  </div>
                </div>
                <div className="deploy-site-progress-number-container">
                  {createDeployProgress <= 2 ? (
                    <div
                      className={`deploy-site-progress-number ${
                        createDeployProgress === 2 ? "active" : ""
                      }`}
                    >
                      2
                    </div>
                  ) : (
                    <div className="deploy-site-progress-done">
                      <FontAwesomeIcon icon={faCheck} />
                    </div>
                  )}
                  <div
                    className={`deploy-site-progress-text ${
                      createDeployProgress === 2
                        ? "deploy-site-progress-text-active"
                        : ""
                    }`}
                  >
                    Pick a Protocol
                  </div>
                </div>
                <div className="deploy-site-progress-number-container">
                  {createDeployProgress <= 3 ? (
                    <div
                      className={`deploy-site-progress-number ${
                        createDeployProgress === 3 ? "active" : ""
                      }`}
                    >
                      3
                    </div>
                  ) : (
                    <div className="deploy-site-progress-done">
                      <FontAwesomeIcon icon={faCheck} />
                    </div>
                  )}
                  <div
                    className={`deploy-site-progress-text ${
                      createDeployProgress === 3
                        ? "deploy-site-progress-text-active"
                        : ""
                    }`}
                  >
                    Build options, and deploy!
                  </div>
                </div>
              </div>
              <div className="deploy-site-form-container">
                {createDeployProgress === 1 && (
                  <div className="deploy-site-form-item">
                    <label className="deploy-site-item-title">
                      {/* Continuous Deployment: GitHub Webhook */}
                      Choose repository
                    </label>
                    <label className="deploy-site-item-subtitle">
                      Choose the repository you want to link to your site on ArGo.
                    </label>
                    {!showGithubRepos ? (
                      <div className="deployment-provider-container">
                        <div className="deployment-provider-title">
                          Connect with your favorite provider
                        </div>
                        <div className="deployment-provider-buttons">
                          <button
                            className="github-button"
                            disabled={userLoading}
                            onClick={openGithubAppAuth}
                          >
                            <span className="github-icon">
                              <GithubIcon />
                            </span>
                            <span>Github</span>
                          </button>
                        </div>
                      </div>
                    ) : reposOwnerDetails.length || ownerLoading ? (
                      <div className="deploy-site-item-repo-list-container">
                        <div className="deploy-site-item-repo-header">
                          <div
                            className="deploy-site-item-repo-header-left"
                            onClick={(e) =>
                              !ownerLoading ? setShowRepoOrgDropdown(true) : null
                            }
                          >
                            {!ownerLoading ? (
                              <LazyLoadedImage height={32} once>
                                <img
                                  src={selectedRepoOwner.avatar}
                                  alt="camera"
                                  className="deploy-site-item-repo-org-avatar"
                                  height={32}
                                  width={32}
                                  loading="lazy"
                                />
                              </LazyLoadedImage>
                            ) : (
                              <Skeleton
                                circle={true}
                                height={32}
                                width={32}
                                duration={2}
                              />
                            )}
                            <span className="deploy-site-item-repo-org-name">
                              {!ownerLoading ? (
                                selectedRepoOwner.name
                              ) : (
                                <Skeleton width={140} height={24} duration={2} />
                              )}
                            </span>
                            <span className="deploy-site-item-repo-down">
                              <FontAwesomeIcon
                                icon={
                                  showRepoOrgDropdown ? faChevronUp : faChevronDown
                                }
                              />
                            </span>
                          </div>
                          <div className="deploy-site-item-repo-header-right">
                            {/* <div className="deploy-site-item-repo-search-container">
                              <span className="deploy-site-item-repo-search-icon">
                                <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
                              </span>
                              <input
                                type="text"
                                className="deploy-site-item-repo-search-input"
                                placeholder="Search repos"
                              />
                            </div> */}
                            <div
                              className="refresh-control"
                              onClick={getAllGithubInstallations}
                            >
                              <FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
                            </div>
                          </div>
                          {showRepoOrgDropdown && (
                            <MemoRepoOrgDropdown
                              setShowDropdown={setShowRepoOrgDropdown}
                              repoOwner={reposOwnerDetails}
                              selectedRepoOwner={selectedRepoOwner}
                              setSelectedRepoOwner={selectRepoOwner}
                            />
                          )}
                        </div>
                        <div className="deploy-site-item-repo-body">
                          {!repoLoading ? (
                            reposSelectedOwnerRepoDetails.map(
                              (repo: any, index: number) => (
                                <MemoRepoItem
                                  skeleton={false}
                                  name={repo.fullName}
                                  privateRepo={repo.private}
                                  key={index}
                                  onClick={() => selectRepositories(repo)}
                                />
                              ),
                            )
                          ) : (
                            <>
                              <MemoRepoItem
                                skeleton={true}
                                name={""}
                                privateRepo={false}
                                onClick={() => null}
                              />
                              <MemoRepoItem
                                skeleton={true}
                                name={""}
                                privateRepo={false}
                                onClick={() => null}
                              />
                            </>
                          )}
                        </div>
                        <div className="deploy-site-item-repo-body">
                          Can’t see your repo here?
                          <a
                            href={`${config.urls.API_URL}/auth/github/app/new`}
                            // eslint-disable-next-line react/jsx-no-target-blank
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            Configure the ArGo app on GitHub.
                          </a>
                        </div>
                      </div>
                    ) : (
                      <div className="deployment-provider-container">
                        <div className="deployment-provider-title">
                          You don't have any configured owner, Configure it now to
                          view your repositories
                        </div>
                        <div className="deployment-provider-buttons">
                          <button
                            className="github-button"
                            onClick={openGithubAppAuth}
                          >
                            <span className="github-icon">
                              <GithubIcon />
                            </span>
                            <span>Github</span>
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                )}
                {createDeployProgress === 2 && (
                  <>
                    <div className="deploy-site-form-item">
                      <label className="deploy-site-item-title">
                        Select the protocol to deploy {selectedRepo.name}
                      </label>
                      <label className="deploy-site-item-subtitle">
                        Click on the protocol in which you want ArGo to deploy your
                        site.
                      </label>
                      <div className="deploy-protocol-list-container">
                        <ul className="deploy-protocol-list">
                          <div
                            className="deploy-protocol-image"
                            onClick={(e) => selectProtocol("arweave")}
                          >
                            <LazyLoadedImage height={50} once>
                              <img
                                src={require("../../assets/png/arweave_logo.png")}
                                alt="Arweave"
                                className="deploy-protocol-item-avatar"
                                height={50}
                                width={200}
                                loading="lazy"
                              />
                            </LazyLoadedImage>
                          </div>
                          <div
                            className="deploy-protocol-image"
                            onClick={(e) => selectProtocol("skynet")}
                          >
                            <LazyLoadedImage height={50} once>
                              <img
                                src={require("../../assets/png/skynet_logo.png")}
                                alt="Skynet"
                                className="deploy-protocol-item-avatar"
                                height={50}
                                width={200}
                                loading="lazy"
                              />
                            </LazyLoadedImage>
                            <div className="new-protocol-tag">New</div>
                          </div>
                          <div
                            className="deploy-protocol-image"
                            onClick={(e) => selectProtocol("ipfs-filecoin")}
                          >
                            <LazyLoadedImage height={50} once>
                              <img
                                src={require("../../assets/png/filecoin-full.png")}
                                alt="filecoin"
                                className="deploy-protocol-item-avatar"
                                height={50}
                                width={200}
                                loading="lazy"
                              />
                            </LazyLoadedImage>
                            <div className="new-protocol-tag">New</div>
                          </div>
                          <div
                            className="deploy-protocol-image"
                            onClick={(e) => selectProtocol("ipfs-pinata")}
                          >
                            <LazyLoadedImage height={50} once>
                              <img
                                src={require("../../assets/svg/pinata-full.svg")}
                                alt="filecoin"
                                className="deploy-protocol-item-avatar"
                                height={62}
                                width={220}
                                loading="lazy"
                              />
                            </LazyLoadedImage>
                            <div className="new-protocol-tag">New</div>
                          </div>
                          {/* <div
                            className="deploy-protocol-image"
                            onClick={(e) => selectProtocol("neofs")}
                          >
                            <LazyLoadedImage height={50} once>
                              <img
                                src={require("../../assets/svg/neofs_logo.svg")}
                                alt="neoFS"
                                className="deploy-protocol-item-avatar"
                                height={50}
                                width={200}
                                loading="lazy"
                              />
                            </LazyLoadedImage>
                            <div className="new-protocol-tag">New</div>
                          </div> */}
                        </ul>
                      </div>
                    </div>
                    <div className="button-container">
                      <button
                        type="button"
                        className="cancel-button"
                        onClick={(e) => setCreateDeployProgress(1)}
                      >
                        Back
                      </button>
                    </div>
                  </>
                )}
                {createDeployProgress === 3 && (
                  <>
                    <ReactTooltip />
                    <div className="deploy-site-form-item">
                      <label className="deploy-site-item-title">
                        Deploy settings for {selectedRepo.name}
                      </label>
                      <label className="deploy-site-item-subtitle">
                        Get more control over how ArGo builds and deploys your site
                        with these settings.
                      </label>
                      <div className="deploy-site-item-form">
                        <div className="deploy-site-item-form-item">
                          <label>Owner</label>
                          <div className="deploy-site-item-select-container">
                            <select
                              className="deploy-site-item-select"
                              value={owner._id}
                              onChange={(e) => {
                                const selOrg = user
                                  ? user.organizations
                                    ? user.organizations.filter(
                                        (org) => org._id === e.target.value,
                                      )[0]
                                    : null
                                  : null;
                                setSelectedOrganization(selOrg as any);
                                setOwner(e.target.value);
                              }}
                            >
                              {user?.organizations &&
                                user?.organizations.map((organization, index) => (
                                  <option value={organization._id} key={index}>
                                    {organization.profile.name}
                                  </option>
                                ))}
                            </select>
                            <span className="select-down-icon">
                              <FontAwesomeIcon icon={faChevronDown} />
                            </span>
                          </div>
                        </div>
                        <div className="deploy-site-item-form-item">
                          <label>Branch to deploy</label>
                          <div className="deploy-site-item-select-container">
                            <select
                              className="deploy-site-item-select"
                              value={branch}
                              onChange={(e) => setBranch(e.target.value)}
                            >
                              {repoBranches.map((branch, index) => (
                                <option value={branch.name} key={index}>
                                  {branch.name}
                                </option>
                              ))}
                            </select>
                            <span className="select-down-icon">
                              {!repoBranchesLoading ? (
                                <FontAwesomeIcon icon={faChevronDown} />
                              ) : (
                                <BounceLoader
                                  size={20}
                                  color={"#0a3669"}
                                  loading={true}
                                />
                              )}
                            </span>
                          </div>
                        </div>
                        <div className="deploy-site-item-form-item">
                          <label>
                            Workspace to deploy
                            <span
                              className="tooltip"
                              data-tip="If your app is a monorepo, then you can specify your app directory you want to deploy using the workspace."
                            >
                              <FontAwesomeIcon size="sm" icon={faInfoCircle} />
                            </span>
                          </label>
                          <input
                            type="text"
                            className="deploy-site-item-input"
                            value={workspace}
                            onChange={(e) => setWorkspace(e.target.value)}
                          />
                        </div>
                      </div>
                    </div>
                    <div className="deploy-site-form-item">
                      <label className="deploy-site-item-title">
                        Basic build settings
                      </label>
                      <label className="deploy-site-item-subtitle">
                        If you’re using a static site generator or build tool, we’ll
                        need these settings to build your site.
                      </label>
                      <div className="deploy-site-item-form">
                        <div className="deploy-site-item-form-item">
                          <label>
                            Framework
                            <span
                              className="tooltip"
                              data-tip="The framework that your app is built upon."
                            >
                              <FontAwesomeIcon size="sm" icon={faInfoCircle} />
                            </span>
                          </label>
                          <div className="deploy-site-item-select-container">
                            <select
                              className="deploy-site-item-select"
                              value={framework}
                              onChange={(e) => setFramework(e.target.value)}
                            >
                              <option value="static">
                                No Framework - Simple JavaScript App
                              </option>
                              <option value="react">Create React App</option>
                              <option value="vue">Vue App</option>
                              <option value="angular">Angular App</option>
                              {protocol !== "skynet" && (
                                <option value="next">Next.js App</option>
                              )}
                            </select>
                            <span className="select-down-icon">
                              <FontAwesomeIcon icon={faChevronDown} />
                            </span>
                          </div>
                        </div>
                        {framework !== "static" && (
                          <>
                            <div className="deploy-site-item-form-item">
                              <label>
                                Package Manager
                                <span
                                  className="tooltip"
                                  data-tip="The package manager that you want your app to be built with."
                                >
                                  <FontAwesomeIcon size="sm" icon={faInfoCircle} />
                                </span>
                              </label>
                              <div className="deploy-site-item-select-container">
                                <select
                                  className="deploy-site-item-select"
                                  value={packageManager}
                                  onChange={(e) => setPackageManager(e.target.value)}
                                >
                                  <option value="npm">NPM</option>
                                  <option value="yarn">YARN</option>
                                </select>
                                <span className="select-down-icon">
                                  <FontAwesomeIcon icon={faChevronDown} />
                                </span>
                              </div>
                            </div>
                            <div className="deploy-site-item-form-item">
                              <label>
                                Build command
                                <span
                                  className="tooltip"
                                  data-tip="The command your frontend framework provides for compiling your code."
                                >
                                  <FontAwesomeIcon size="sm" icon={faInfoCircle} />
                                </span>
                              </label>
                              {framework !== "next" ? (
                                <div className="deploy-site-item-input-container">
                                  <input
                                    type="text"
                                    className="deploy-site-item-input-disabled"
                                    value={buildCommandPrefix}
                                    disabled
                                  />
                                  <input
                                    type="text"
                                    className="deploy-site-item-input-build"
                                    value={buildCommand}
                                    onChange={(e) => setBuildCommand(e.target.value)}
                                  />
                                </div>
                              ) : (
                                <input
                                  type="text"
                                  className="deploy-site-item-input"
                                  value={buildCommand}
                                  onChange={(e) => setBuildCommand(e.target.value)}
                                />
                              )}
                            </div>
                            <div className="deploy-site-item-form-item">
                              <label>
                                Publish directory
                                <span
                                  className="tooltip"
                                  data-tip="The directory in which your compiled frontend will be located."
                                >
                                  <FontAwesomeIcon size="sm" icon={faInfoCircle} />
                                </span>
                              </label>
                              <input
                                type="text"
                                className="deploy-site-item-input"
                                value={publishDirectory}
                                onChange={(e) => setPublishDirectory(e.target.value)}
                              />
                            </div>
                          </>
                        )}
                      </div>
                    </div>
                    <div className="deploy-site-form-item">
                      <label className="deploy-site-item-title">
                        Advanced build settings
                      </label>
                      <label className="deploy-site-item-subtitle">
                        Define environment variables for more control and flexibility
                        over your build.
                      </label>

                      <div className="deploy-site-item-form">
                        <div className="deploy-site-item-form-item">
                          <label>
                            Continuous Deployment{" "}
                            <span className="new-item-tag">NEW</span>
                          </label>
                          <label className="deploy-site-item-subtitle">
                            Enabling this will automatically create a production CD
                            pipeline for your selected branch. When you push any new
                            code to GitHub, we will run our build tool and deploy the
                            result.
                          </label>
                        </div>
                        <div className="webhook-confirm-container">
                          <span className="confirm-checkbox">
                            <input
                              type="checkbox"
                              checked={autoPublish}
                              onChange={(e) => setAutoPublish(e.target.checked)}
                            />
                          </span>
                          <span>
                            <div className="webhook-title">
                              Do you want to enable Continuous Deployment?
                            </div>
                            <div className="webhook-note">
                              Note: If the project already has CD enabled, this won't
                              overwrite the existing configuration. To change this,
                              you have to go to Project Settings.
                            </div>
                          </span>
                        </div>
                      </div>
                      <div className="deploy-site-item-form">
                        <div className="deploy-site-item-form-item">
                          <label>Environment Variables</label>
                          <label className="deploy-site-item-subtitle">
                            Note that adding environment variables here won't work if
                            project already exists, you have to add environment
                            variables by going to your Project Settings {"->"}{" "}
                            Environment Variables
                          </label>
                        </div>
                        {buildEnv.length !== 0 && (
                          <div className="deploy-site-item-form-item">
                            <div className="deploy-site-env-title">
                              <label className="deploy-site-env-title-item">
                                Key
                              </label>
                              <label className="deploy-site-env-title-item">
                                Value
                              </label>
                            </div>
                            {buildEnv.map((env, i) => (
                              <div
                                className="deploy-site-item-env-container"
                                key={i}
                              >
                                <input
                                  type="text"
                                  className="deploy-site-env-input"
                                  placeholder="VARIABLE_NAME"
                                  value={env.key}
                                  onChange={(e) => fillEnvKey(e.target.value, i)}
                                />
                                <input
                                  type="text"
                                  className="deploy-site-env-input"
                                  placeholder="somevalue"
                                  value={env.value}
                                  onChange={(e) => fillEnvValue(e.target.value, i)}
                                />
                                <span
                                  className="remove-env-item"
                                  onClick={(e) => removeBuildEnvItem(i)}
                                >
                                  <FontAwesomeIcon
                                    icon={faTimesCircle}
                                  ></FontAwesomeIcon>
                                </span>
                              </div>
                            ))}
                          </div>
                        )}
                        <button
                          type="button"
                          className="add-new-var-button"
                          onClick={(e) => addBuildEnv()}
                        >
                          New Variable
                        </button>
                      </div>
                      {!selectedOrg?.wallet && !orgLoading ? (
                        <div className="wallet-details-container">
                          <div className="wallet-details-items">
                            <span className="exclamation-icon">
                              <FontAwesomeIcon
                                icon={faExclamationCircle}
                              ></FontAwesomeIcon>
                            </span>
                            <span>
                              You have to enable your organization wallet before you
                              can deploy your project.
                              <Link to="/dashboard/wallet">Enable now</Link>
                            </span>
                          </div>
                        </div>
                      ) : null}
                    </div>
                    <div className="button-container">
                      <button
                        type="button"
                        className="primary-button"
                        onClick={startDeployment}
                        disabled={deployDisabled}
                      >
                        {startDeploymentLoading && (
                          <BounceLoader size={20} color={"#fff"} loading={true} />
                        )}
                        Deploy
                      </button>
                      <button
                        type="button"
                        className="cancel-button"
                        onClick={(e) => setCreateDeployProgress(2)}
                      >
                        Back
                      </button>
                    </div>
                    {errorWarning ? (
                      <div className="warning-container">
                        <div className="warning-header">
                          <FontAwesomeIcon icon={faExclamationCircle} />{" "}
                          {errorMessage}
                        </div>
                      </div>
                    ) : null}
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function WebGLPageList(props: any) {
  const [hideContent, setHideContent] = useState(true);
  const [pages, setPages] = useState([] as PageType[]);
  const [loading, setLoading] = useState(false);
  const [name, setName] = useState('');
  const [disabled, setDisabled] = useState(true);

  const webGLPage = useSelector((state: IStoreState) => state.webGLPage);
  const user = useSelector((state: IStoreState) => state.user);
  const dispatch = useDispatch();

  useEffect(() => setName(webGLPage.name), [webGLPage.name]);

  const handleClick = () => {
    if (hideContent) {
      if (!user.email) return;
      setPages([]);
      setLoading(true);
      fetchAllPages(user.email).then(v => {
        if (!v.err) {
          const pages = v.pages as PageType[];
          setPages(pages);
          setLoading(false);
        }
      }).catch(e => {

      });
    }
    setHideContent(hideContent => !hideContent);
  };
  const canEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    setDisabled(false);
  }
  const handleModifyPageName = (e: React.MouseEvent) => {
    e.stopPropagation();
    modifyPageName(user.email, webGLPage.id, name).then(v => {
      console.log(v);
      if (!v.err) {
        setDisabled(true);
        return;
      }
      setDisabled(true);
    })
  }

  const elem = pages.length > 0 ? pages.map((v, i) => {
    const click = () => {
      fetchOnePage(user.email, v.pageId).then(res => {
        if (!res.err) {
          dispatch(selectWebGLPage(
            v.pageId,
            v.name,
            res.page.page,
            v.id
          ));
        }
      });
      handleClick();
    };
    return (<ResultItem name={v.name} key={i} onClick={click}/>);
  }).slice(0, 5) : (
    <div className={style.no_data}>
      <FontAwesomeIcon icon={faThermometerEmpty}/> No Data!
    </div>
  );
  const loadingElem = (
    <div className={style.loading}>
      <FontAwesomeIcon icon={faCircleNotch} spin/> loading...
    </div>
  );

  return (
    <div className={style.ui_page_store}>
      <div className={style.current_ui_page} onClick={handleClick}>
        <input type="text"
               className={cls(!disabled && style.active)}
               onClick={disabled ? () => {} : e => e.stopPropagation()}
               value={name}
               onChange={e => setName(e.target.value)}
               disabled={disabled}/>
        <span onClick={disabled ? canEdit : handleModifyPageName}>
          <FontAwesomeIcon icon={disabled ? faEdit : faCheck} color={disabled ? '#999999' : 'red'}/>
        </span>
      </div>
      <div className={cls(style.ui_page_search_panel, !hideContent && style.show)}>
        <div className={style.search}>
          <input type="text" placeholder="search page..."/>
          <button>
            <FontAwesomeIcon icon={faSearch}/>
          </button>
        </div>
        <ul className={style.ui_page_result}>
          {loading ? loadingElem : elem}
        </ul>
      </div>
    </div>
  );
}

NavLocaleSwitcher: React.FC<NavLocalSwitcherProps> = props => {
  const { buttonStyle } = props;

  const [buttonUp, setButtonUp] = useState(false);
  const history = useHistory();
  const [showLanguagePickerModal, setShowLanguagePickerModal] = useState(false);
  const activeLocale = useActiveLocale();

  const statePrimaryButtonClass = usePickByState(
    navDropdownClasses.whiteInfo,
    navDropdownClasses.coolInfo,
    navDropdownClasses.warmInfo,
    history,
  );

  const stateSelectedDropdownClass = usePickByState(
    navDropdownClasses.whiteInfoSelected,
    navDropdownClasses.dropdownActive,
    navDropdownClasses.dropdownActive,
    history,
  );

  const buttonStyleTop = usePickByState(
    navDropdownClasses.whiteInfoSelectedTop,
    navDropdownClasses.coolInfoSelected,
    navDropdownClasses.warmInfoSelected,
    history,
  );

  const buttonStyleBottom = usePickByState(
    navDropdownClasses.whiteInfoSelectedBottom,
    navDropdownClasses.coolInfoSelected,
    navDropdownClasses.warmInfoSelected,
    history,
  );

  const customDropdownToggle = React.forwardRef<RefType, Props>(({ onClick, value }, ref) => (
    <>
      <div
        className={clsx(
          navDropdownClasses.wrapper,
          buttonUp ? stateSelectedDropdownClass : statePrimaryButtonClass,
        )}
        onClick={e => {
          e.preventDefault();
          onClick(e);
        }}
      >
        <div className={navDropdownClasses.button}>
          <div className={navDropdownClasses.dropdownBtnContent}>
            {<FontAwesomeIcon icon={faGlobe} />}
          </div>
          <div className={buttonUp ? navDropdownClasses.arrowUp : navDropdownClasses.arrowDown}>
            <FontAwesomeIcon icon={buttonUp ? faSortUp : faSortDown} />{' '}
          </div>
        </div>
      </div>
    </>
  ));

  const CustomMenu = React.forwardRef((props: CustomMenuProps, ref: React.Ref<HTMLDivElement>) => {
    return (
      <div
        ref={ref}
        style={props.style}
        className={props.className}
        aria-labelledby={props.labeledBy}
      >
        {SUPPORTED_LOCALES.map((locale: SupportedLocale, index: number) => {
          let dropDownStyle;
          let buttonStyle;

          switch (index) {
            case 0:
              dropDownStyle = classes.dropDownTop;
              buttonStyle = buttonStyleTop;
              break;
            case SUPPORTED_LOCALES.length - 1:
              dropDownStyle = classes.dropDownBottom;
              buttonStyle = buttonStyleBottom;
              break;
            default:
              dropDownStyle = classes.dropDownInterior;
              buttonStyle = buttonStyleBottom;
          }

          return (
            <div
              className={clsx(
                navDropdownClasses.button,
                navDropdownClasses.dropdownPrimaryText,
                buttonStyle,
                dropDownStyle,
                classes.desktopLanguageButton,
              )}
              onClick={() => setLocale(locale)}
            >
              {LOCALE_LABEL[locale]}
              {activeLocale === locale && <FontAwesomeIcon icon={faCheck} height={24} width={24} />}
            </div>
          );
        })}
      </div>
    );
  });

  return (
    <>
      {showLanguagePickerModal && (
        <LanguageSelectionModal onDismiss={() => setShowLanguagePickerModal(false)} />
      )}

      <div
        className={clsx(navDropdownClasses.nounsNavLink, responsiveUiUtilsClasses.mobileOnly)}
        onClick={() => setShowLanguagePickerModal(true)}
      >
        <NavBarButton
          buttonText={<Trans>Language</Trans>}
          buttonIcon={<FontAwesomeIcon icon={faGlobe} />}
          buttonStyle={buttonStyle}
        />
      </div>

      <Dropdown
        className={clsx(navDropdownClasses.nounsNavLink, responsiveUiUtilsClasses.desktopOnly)}
        onToggle={() => setButtonUp(!buttonUp)}
        autoClose={true}
      >
        <Dropdown.Toggle as={customDropdownToggle} id="dropdown-custom-components" />
        <Dropdown.Menu className={`${navDropdownClasses.desktopDropdown} `} as={CustomMenu} />
      </Dropdown>
    </>
  );
}

Overview = () => {
  const history = useHistory();
  const params = useParams<any>();
  const componentIsMounted = useRef(true);

  useEffect(() => {
    return () => {
      componentIsMounted.current = false;
    };
  }, []);

  const [pinDetailLoading, setPinDetailLoading] = useState<boolean>(true);
  const [pinDetail, setPinDetail] = useState<any>({ cid: "N.A", isPinned: false });

  const { projectLoading, selectedProject, selectedOrg, orgLoading } =
    useContext<IStateModel>(StateContext);

  const latestDeployment: any = selectedProject?.latestDeployment;

  const lastPublishedDate = moment(latestDeployment?.createdAt).format(
    "MMM DD, YYYY hh:mm A",
  );

  const lastCreatedDate = moment(selectedProject?.createdAt).format(
    "MMM DD, YYYY hh:mm A",
  );

  let displayGithubRepo = "";
  let githubBranchLink = "";
  if (selectedProject) {
    displayGithubRepo = selectedProject.githubUrl.substring(
      19,
      selectedProject.githubUrl.length - 4,
    );

    githubBranchLink = `${selectedProject.githubUrl.substring(
      0,
      selectedProject.githubUrl.length - 4,
    )}/tree/${"master"}`;
  }

  useEffect(() => {
    if (latestDeployment?.configuration?.protocol === "ipfs-filecoin") {
      getFilecoinPinDetais();
    } else if (latestDeployment?.configuration?.protocol === "ipfs-pinata") {
      getPinataPinDetais();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [latestDeployment?.configuration?.protocol]);

  const getFilecoinPinDetais = async () => {
    setPinDetailLoading(true);
    if (latestDeployment.sitePreview) {
      const cid = latestDeployment.sitePreview.split(
        "https://ipfs.infura.io/ipfs/",
      )[1];
      ApiService.getFilecoinPinDetails(cid).subscribe((data) => {
        if (componentIsMounted.current) {
          setPinDetail(data);
          setPinDetailLoading(false);
        }
      });
    } else {
      setPinDetailLoading(false);
    }
  };
  const getPinataPinDetais = async () => {
    setPinDetailLoading(true);
    if (latestDeployment.sitePreview) {
      const cid = latestDeployment.sitePreview.split(
        "https://ipfs.infura.io/ipfs/",
      )[1];
      ApiService.getPinataPinDetails(cid).subscribe((data) => {
        if (componentIsMounted.current) {
          setPinDetail(data);
          setPinDetailLoading(false);
        }
      });
    } else {
      setPinDetailLoading(false);
    }
  };

  return (
    <div className="SiteOverview">
      <ProjectTopCard />
      <div
        className="site-overview-card-container domain-container"
        onClick={(e) =>
          history.push(`/org/${params.orgid}/sites/${params.siteid}/domain`)
        }
      >
        <div className="domain-container-left">
          <h2>Set up a custom domain with ArGo</h2>
          <p>
            Setup a domain you already own. All domains come with a free SSL cert.
          </p>
        </div>
        {!projectLoading && (
          <div className="domain-container-right">
            {!selectedProject?.domains.length ? (
              <span className="blue-color">
                <FontAwesomeIcon icon={faArrowRight} />
              </span>
            ) : (
              <span className="green-color">
                <FontAwesomeIcon icon={faCheck} />
              </span>
            )}
          </div>
        )}
      </div>
      {latestDeployment?.configuration?.protocol === "ipfs-filecoin" && (
        <div className="site-overview-card-container deploy-container">
          <div className="site-overview-header-title">
            Latest Filecoin Deployment Pinning Details
          </div>
          <div className="deploy-summary-item">
            <div className="deploy-summary-body-item">
              <label>Filecoin CID:</label>
              <span>
                {!pinDetailLoading ? (
                  pinDetail.cid
                ) : (
                  <Skeleton width={200} duration={2} />
                )}
              </span>
            </div>
            <div className="deploy-summary-body-item">
              <label>Filecoin Pinning Status:</label>
              <span>
                {!pinDetailLoading ? (
                  pinDetail.isPinned ? (
                    "Pinned"
                  ) : (
                    "Not Pinned"
                  )
                ) : (
                  <Skeleton width={200} duration={2} />
                )}
              </span>
            </div>
            {!pinDetailLoading && pinDetail.isPinned && (
              <div className="deploy-summary-body-item">
                <label>Filecoin Pinned Date:</label>
                <span>
                  {!pinDetailLoading ? (
                    moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
                  ) : (
                    <Skeleton width={200} duration={2} />
                  )}
                </span>
              </div>
            )}
          </div>
        </div>
      )}
      {latestDeployment?.configuration?.protocol === "ipfs-pinata" && (
        <div className="site-overview-card-container deploy-container">
          <div className="site-overview-header-title">
            Latest IPFS Deployment Pinning Details
          </div>
          <div className="deploy-summary-item">
            <div className="deploy-summary-body-item">
              <label>IPFS CID:</label>
              <span>
                {!pinDetailLoading ? (
                  pinDetail.cid
                ) : (
                  <Skeleton width={200} duration={2} />
                )}
              </span>
            </div>
            <div className="deploy-summary-body-item">
              <label>IPFS Pinning Status:</label>
              <span>
                {!pinDetailLoading ? (
                  pinDetail.isPinned ? (
                    "Pinned"
                  ) : (
                    "Not Pinned"
                  )
                ) : (
                  <Skeleton width={200} duration={2} />
                )}
              </span>
            </div>
            {!pinDetailLoading && pinDetail.isPinned && (
              <div className="deploy-summary-body-item">
                <label>IPFS Pinned Date:</label>
                <span>
                  {!pinDetailLoading ? (
                    moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
                  ) : (
                    <Skeleton width={200} duration={2} />
                  )}
                </span>
              </div>
            )}
          </div>
        </div>
      )}
      <div className="site-overview-card-container deploy-container">
        <div className="site-overview-header-title">Project Overview</div>
        <div className="deploy-summary-item">
          <div className="deploy-summary-body-item">
            <label>Name:</label>
            <span>
              {!projectLoading ? (
                selectedProject?.name
              ) : (
                <Skeleton width={200} duration={2} />
              )}
            </span>
          </div>
          <div className="deploy-summary-body-item">
            <label>Owner:</label>
            <span>
              {!orgLoading ? (
                selectedOrg?.profile.name
              ) : (
                <Skeleton width={200} duration={2} />
              )}
            </span>
          </div>
          <div className="deploy-summary-body-item">
            <label>GitHub Repo/Branch:</label>
            <a href={githubBranchLink} target="_blank" rel="noopener noreferrer">
              {!projectLoading ? (
                `${displayGithubRepo} (branch: ${selectedProject?.latestDeployment?.configuration.branch})`
              ) : (
                <Skeleton width={200} duration={2} />
              )}
            </a>
          </div>
          <div className="deploy-summary-body-item">
            <label>Latest deploy site:</label>
            {!projectLoading ? (
              latestDeployment?.sitePreview ? (
                <a
                  href={latestDeployment?.sitePreview}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {latestDeployment?.sitePreview}
                </a>
              ) : (
                <span>Site preview not available</span>
              )
            ) : (
              <Skeleton width={200} duration={2} />
            )}
          </div>
          <div className="deploy-summary-body-item">
            <label>Created:</label>
            <span>
              {!projectLoading ? (
                lastCreatedDate
              ) : (
                <Skeleton width={200} duration={2} />
              )}
            </span>
          </div>
          <div className="deploy-summary-body-item">
            <label>Last Published:</label>
            <span>
              {!projectLoading ? (
                lastPublishedDate
              ) : (
                <Skeleton width={200} duration={2} />
              )}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

render() {
    return (
      <div className="settings-form">
        <AvalonScrollbars>
          <form autoComplete="off" onSubmit={this.handleSubmit}>
            <p className="title">theme settings</p>
            <p className="subtitle">Aesthetic</p>
            <div className="input-container">
              <Slider value={this.state.themeLight} onClick={this.switchTheme} />
              <p className="handle">
                {this.state.themeLight ? 'Light Theme' : 'Dark Theme'}
              </p>
            </div>
            <div className="input-container">
              <Slider value={this.state.avatarStyle} onClick={this.switchAvatarStyle} />
              <p className="handle">
                {this.state.avatarStyle ? 'New Avatars' : 'Classic Avatars'}
              </p>
            </div>
            <div className="input-container">
              <Slider value={this.state.coloredNames} onClick={this.switchColoredNames} />
              <p className="handle">
                {this.state.coloredNames ? 'Colored Names' : 'Uncolored Names'}
              </p>
            </div>
            <p className="subtitle">Accessibility</p>
            <div className="input-container">
              <p className="handle">Tabs</p>
              <RangeSlider
                currentDisplay={this.state.playTabs}
                maxDisplay={3}
                min={1}
                max={3}
                value={this.state.playTabs}
                onChange={this.handleTabs}
              />
            </div>
            <div className="input-container">
              <p className="handle">Avatar Size</p>
              <RangeSlider
                currentDisplay={this.state.avatarSize}
                maxDisplay={286}
                min={45}
                max={286}
                value={this.state.avatarSize}
                onChange={this.handleAvatarSize}
              />
            </div>
            <div className="input-container">
              <p className="handle">Font Size</p>
              <RangeSlider
                currentDisplay={this.state.playFontSize}
                maxDisplay={30}
                min={8}
                max={30}
                value={this.state.playFontSize}
                onChange={this.handleFontSize}
              />
            </div>
            <div className="input-container">
              <p className="handle">Game Area</p>
              <RangeSlider
                currentDisplay={
                  this.playAreaSizes[Math.floor(this.state.playArea / 0.25)]
                }
                maxDisplay={'Max'}
                min={0}
                max={100}
                value={this.state.playArea * 100}
                onChange={this.handlePlayArea}
              />
            </div>
            <div className="input-container">
              <p className="handle">Chat Messages</p>
              <RangeSlider
                currentDisplay={this.state.numberOfMessages}
                maxDisplay={'Max'}
                min={5}
                max={100}
                value={this.state.numberOfMessages}
                onChange={this.handleNumberOfMessages}
              />
            </div>

            <div className="buttons">
              <button className="bt-cancel" type="button" onClick={this.props.onExit}>
                <FontAwesomeIcon icon={faTimes} />
              </button>
              <button className="bt-accept" type="submit">
                <FontAwesomeIcon icon={faCheck} />
              </button>
            </div>
          </form>
        </AvalonScrollbars>
      </div>
    );
  }

render() {
    return (
      <div className="settings-form">
        {this.state.redirect ? <Redirect to={`/game/${this.state.roomId}`} /> : null}
        <AvalonScrollbars>
          <form autoComplete="off" onSubmit={this.handleSubmit}>
            <p className="title">{this.props.title}</p>
            <div className="input-container">
              <p className="handle">Player Max</p>{' '}
              <List
                onClick={this.togglePlayerMax}
                show={this.state.showPlayerMax}
                title={this.state.playerMax.toString()}
                objects={this.playerMaxList}
              />
            </div>
            {this.props.createsGame ? (
              <div className="input-container">
                <Slider value={this.state.listed} onClick={this.handleListed} />
                <p className="handle">{this.state.listed ? 'Public' : 'Private'}</p>
              </div>
            ) : null}
            <p className="subtitle">Roles</p>
            <div className="input-container">
              <Slider
                value={this.state.roleSettings.merlin}
                onClick={this.roleSwitchList[0]}
              />
              <p className="handle">Merlin</p>
            </div>
            <div className="input-container">
              <Slider
                value={this.state.roleSettings.percival}
                onClick={this.roleSwitchList[1]}
              />
              <p className="handle">Percival</p>
            </div>
            <div className="input-container">
              <Slider
                value={this.state.roleSettings.morgana}
                onClick={this.roleSwitchList[2]}
              />
              <p className="handle">Morgana</p>
            </div>
            <div className="input-container">
              <Slider
                value={this.state.roleSettings.assassin}
                onClick={this.roleSwitchList[3]}
              />
              <p className="handle">Assassin</p>
            </div>
            <div className="input-container">
              <Slider
                value={this.state.roleSettings.oberon}
                onClick={this.roleSwitchList[4]}
              />
              <p className="handle">Oberon</p>
            </div>
            <div className="input-container">
              <Slider
                value={this.state.roleSettings.mordred}
                onClick={this.roleSwitchList[5]}
              />
              <p className="handle">Mordred</p>
            </div>
            <p className="subtitle">Cards</p>
            <div className="input-container">
              <Slider
                value={this.state.roleSettings.lady}
                onClick={this.roleSwitchList[6]}
              />
              <p className="handle">Lady of the Lake</p>
            </div>
            {this.state.processing ? null : (
              <div className="buttons">
                <button className="bt-cancel" type="button" onClick={this.props.onExit}>
                  <FontAwesomeIcon icon={faTimes} />
                </button>
                <button className="bt-accept" type="submit">
                  <FontAwesomeIcon icon={faCheck} />
                </button>
              </div>
            )}
          </form>
        </AvalonScrollbars>
      </div>
    );
  }