react-icons/md#MdArrowForward TypeScript Examples

export function ChooseEditor({
  currentStep,
  totalSteps,
  onGoNext,
}: IProps): JSX.Element {
  const [preferredEditor = ``, setPreferredEditor] = useConfig(
    `preferredEditor`
  )
  const onSubmit: React.FocusEventHandler<HTMLFormElement> = useCallback(
    (e) => {
      e.preventDefault()
      trackEvent(`SET_EDITOR`, { name: preferredEditor })
      onGoNext()
    },
    [onGoNext, preferredEditor]
  )

  console.log({ preferredEditor })

  const chooseEditor = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>): void => {
      console.log(`choosing editor `, event.target.value)
      setPreferredEditor(event.target.value as CodeEditor)
    },
    [setPreferredEditor]
  )

  return (
    <OnboardingWizardStep
      currentStep={currentStep}
      totalSteps={totalSteps}
      title="Please select your preferred code editor"
      subtitle="Select your installed code editor; you can always change this preference later."
    >
      <form onSubmit={onSubmit}>
        <EditorsRadioButton
          name="preferredEditor"
          editors={ALL_EDITORS}
          onChange={chooseEditor}
          selected={preferredEditor}
        />
        <OnboardingWizardStepActions>
          <Button
            type="submit"
            rightIcon={<MdArrowForward />}
            disabled={!preferredEditor}
          >
            Continue
          </Button>
        </OnboardingWizardStepActions>
      </form>
    </OnboardingWizardStep>
  )
}

export function OnboardingIntro({ onGoNext }: IProps): JSX.Element {
  const onSubmit: React.FocusEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault()
    onGoNext()
  }

  const [optedIn = false, setOptedIn] = useConfig(`telemetryOptIn`)

  console.log({ optedIn })

  const onToggle = useCallback(
    (e: FormEvent<HTMLInputElement>): void => {
      setOptedIn(e.currentTarget.checked)
    },
    [setOptedIn]
  )

  return (
    <div
      sx={{
        maxWidth: `62rem`,
      }}
    >
      <Heading
        sx={{
          fontFamily: `sans`,
          fontSize: 9,
          fontWeight: `extraBold`,
          lineHeight: `dense`,
          letterSpacing: `-0.02em`,
          color: `grey.90`,
          marginBottom: 10,
        }}
      >
        <span
          sx={{
            display: `block`,
            color: `grey.60`,
            fontWeight: `normal`,
            fontSize: 1,
            lineHeight: `dense`,
          }}
        >
          Welcome to
        </span>
        Gatsby Desktop
      </Heading>
      <form onSubmit={onSubmit}>
        <Text sx={{ maxWidth: `20rem`, mt: 0, mb: 7 }}>
          Would you like to help us improve Gatsby Desktop by periodically
          submitting anonymous usage information?
        </Text>
        <CheckboxFieldBlock
          id="anonUsage"
          name="anonUsage"
          label="Yes, help improve Gatsby Desktop"
          onChange={onToggle}
          checked={optedIn}
        />
        <Button
          type="submit"
          rightIcon={<MdArrowForward />}
          size="L"
          sx={{ mt: 8 }}
        >
          Get started
        </Button>
      </form>
    </div>
  )
}

export function SiteCheckboxGroup({
  name,
  sites,
  required,
  error,
  hiddenSites = [],
  setHiddenSites,
  browseSites,
}: IProps): JSX.Element {
  const {
    getLegendProps,
    getOptionLabelProps,
    getOptionControlProps,
    errorProps,
  } = useAriaFormGroupField(`site-checkbox-group`, {
    required: required,
    error,
  })

  const toggleSites = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      const hash = event.currentTarget.value
      if (event.currentTarget.checked) {
        setHiddenSites(hiddenSites.filter((site) => site !== hash))
      } else {
        setHiddenSites(Array.from(new Set([...hiddenSites, hash])))
      }
    },
    [setHiddenSites, hiddenSites]
  )

  return (
    <FormFieldset>
      <FormLegend
        css={visuallyHiddenCss}
        {...getLegendProps(`Select the sites you want to import.`)}
      />
      <Grid columns={[null, 1, 1, `repeat(auto-fit, 300px)`]} gap={7}>
        {sites.map((site) => {
          const optionValue = site.hash
          const hidden = hiddenSites.includes(optionValue)
          return (
            <GroupInputCard
              // We need this because we do an initial render before the config comes through
              // and if the key is the same it won't re-render the checkbox with the new default
              key={`${optionValue}${hidden}`}
              {...getOptionLabelProps(optionValue)}
              input={
                <StyledCheckbox
                  {...getOptionControlProps(optionValue)}
                  value={optionValue}
                  checked={!hiddenSites.includes(optionValue)}
                  name={name}
                  onChange={toggleSites}
                />
              }
              sx={{ pl: 7 }}
            >
              {site.name}
              <FolderName sitePath={site.root} />
            </GroupInputCard>
          )
        })}
        <GroupButtonCard icon={<MdArrowForward />} onClick={browseSites}>
          Add another site
        </GroupButtonCard>
      </Grid>
      <FormError {...errorProps} />
    </FormFieldset>
  )
}

export default function MainPage(): JSX.Element {
  const { filteredSites } = useSiteRunners()

  const [onboardingDone, setHasRunOnboarding, store] = useConfig(
    `hasRunOnboarding`
  )

  return (
    <Layout>
      <main
        sx={{
          px: 9,
          py: 7,
          overflowY: `auto`,
        }}
      >
        <Heading
          sx={{
            fontWeight: 600,
            fontFamily: `sans`,
            fontSize: 2,
          }}
        >
          All sites{` `}
          <Text as="span" size="S">
            ({filteredSites.length})
          </Text>
          <LinkButton
            to="/onboarding/intro"
            onClick={(): void => trackEvent(`CLICK_TO_RERUN_ONBOARDING`)}
            // Easter egg: right click to clear config
            onContextMenu={(): void => store?.clear()}
            size="S"
            variant="SECONDARY"
            rightIcon={<MdArrowForward />}
            sx={{ float: `right` }}
          >
            Onboarding
          </LinkButton>
        </Heading>
        <Grid
          gap={8}
          marginTop={7}
          columns="repeat(auto-fit, minmax(456px, 1fr))"
        >
          {filteredSites.map((site) => (
            <SiteCard key={site.hash} site={site} />
          ))}
        </Grid>
      </main>
    </Layout>
  )
}

export function ChooseSites({
  currentStep,
  totalSteps,
  onGoNext,
}: IProps): JSX.Element {
  const { sites, addSite } = useSiteRunners()
  const [hasAddedFirstSite, setHasAddedFirstSite] = React.useState<boolean>(
    false
  )
  const { hiddenSites, setHiddenSites, unhideSite } = useHiddenSites()

  const onAddSite = (siteInfo: ISiteInfo): void => {
    const site = addSite?.(siteInfo)
    if (!site) {
      return
    }
    // If we've previously hidden it, then unhide it
    unhideSite(site.hash)
    setHasAddedFirstSite(true)
  }

  const onSubmit: React.FocusEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault()

    sites.forEach((site) => trackEvent(`SITE_ADDED`, { siteHash: site.hash }))
    hiddenSites.forEach((hash) =>
      trackEvent(`SITE_DESELECTED`, { siteHash: hash })
    )

    onGoNext()
  }

  const [browseSites, errorModal] = useSiteBrowser(onAddSite)

  const noSites = sites.length === 0

  return (
    <OnboardingWizardStep
      currentStep={currentStep}
      totalSteps={totalSteps}
      title={
        noSites
          ? `We couldn’t find any Gatsby sites on your computer!`
          : hasAddedFirstSite
          ? `Nicely done!`
          : `We found some Gatsby sites on your computer!`
      }
      subtitle={noSites ? `` : `Select the sites you want to import.`}
    >
      <form onSubmit={onSubmit}>
        {noSites ? (
          <div sx={{ maxWidth: `52rem` }}>
            <EmptyState
              variant="BORDERED"
              heading="Are you missing some of your Gatsby sites?"
              text={
                <React.Fragment>
                  Gatsby Desktop is only able to auto-discover Gatsby sites
                  using Gatsby vX.XX.XX or newer. Don’t worry— you can add sites
                  using older versions manually and still manage them in Gatsby
                  Desktop.
                </React.Fragment>
              }
              primaryAction={
                <EmptyStatePrimaryAction type="button" onClick={browseSites}>
                  Add a site
                </EmptyStatePrimaryAction>
              }
            />
          </div>
        ) : (
          <SiteCheckboxGroup
            name="sitesToImport"
            sites={sites}
            hiddenSites={hiddenSites}
            browseSites={browseSites}
            setHiddenSites={setHiddenSites}
          />
        )}
        {!noSites && (
          <OnboardingWizardStepActions>
            <Button type="submit" rightIcon={<MdArrowForward />}>
              Start using Gatsby Desktop
            </Button>
          </OnboardingWizardStepActions>
        )}
      </form>
      {errorModal}
    </OnboardingWizardStep>
  )
}

/**
 * The item in the list of sites
 */
export function SiteCard({ site }: PropsWithChildren<IProps>): JSX.Element {
  const { status, port, rawLogs, logs, running } = useSiteRunnerStatus(site)

  const { addTab } = useSiteTabs()

  console.log(site.name, status)
  const displayStatus = getSiteDisplayStatus(status)

  const [editor] = useConfig(`preferredEditor`)

  const showManageInDesktop = running && !site.startedInDesktop
  // TODO add a proper condition to display Gatsby Admin setup instructions
  const showAdminInstructions = false

  return (
    <Flex
      as={`section`}
      sx={{
        border: `grey`,
        borderRadius: 2,
        boxShadow: `raised`,
        whiteSpace: `pre`,
      }}
    >
      <StatusIndicator displayStatus={displayStatus} />
      <Flex sx={{ p: 4, flexDirection: `column`, flex: 1 }}>
        <Flex
          css={{ justifyContent: `space-between`, minHeight: `24px` }}
          mb={5}
        >
          <span
            sx={{
              fontFamily: `sans`,
              fontWeight: 600,
              fontSize: 1,
              pr: 3,
            }}
          >
            {site.name ?? `Unnamed site`}
            <FolderName sitePath={site.root} />
          </span>
          <Flex sx={{ alignItems: `center` }}>
            {showManageInDesktop ? (
              <div sx={{ mr: 3 }}>
                <ManageInDesktop />
              </div>
            ) : showAdminInstructions ? (
              <div sx={{ mr: 3 }}>
                <SetupAdmin />
              </div>
            ) : (
              <Fragment>
                <span css={visuallyHiddenCss}>
                  Site status: {siteDisplayStatusLabels[displayStatus]}
                </span>
                <div sx={{ mr: 3 }}>
                  {displayStatus === SiteDisplayStatus.Running && !!port ? (
                    <SiteLauncher port={port} siteHash={site.hash} />
                  ) : displayStatus === SiteDisplayStatus.Starting ? (
                    <Text as="span" sx={{ fontSize: 0, color: `grey.60` }}>
                      Starting site...
                    </Text>
                  ) : null}
                </div>
                {!!rawLogs?.length && (
                  <LogsLauncher
                    structuredLogs={logs}
                    logs={rawLogs}
                    status={status}
                    siteName={site.name}
                    siteHash={site.hash}
                  />
                )}
              </Fragment>
            )}
            <SiteActions site={site} disabled={showManageInDesktop} />
          </Flex>
        </Flex>
        <Flex mt="auto">
          <EditorLauncher
            path={site.root}
            editor={editor}
            siteHash={site.hash}
          />
        </Flex>
      </Flex>
      <button
        sx={{
          display: `flex`,
          flexBasis: `32px`,
          alignItems: `center`,
          justifyContent: `center`,
          backgroundColor: `grey.10`,
          border: `none`,
          boxShadow: `-1px 0px 0px #D9D7E0`,
          cursor: `pointer`,
          color: `grey.50`,
          fontSize: 2,
        }}
        aria-label="Open site admin"
        onClick={(event): void => {
          event.stopPropagation()
          trackEvent(`CLICK_TO_OPEN_ADMIN_TAB`, { siteHash: site.hash })
          addTab(site.hash)
          navigate(`/sites/${site.hash}`)
        }}
      >
        <MdArrowForward />
      </button>
    </Flex>
  )
}