components#IntegrationCard JavaScript Examples

The following examples show how to use components#IntegrationCard. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CodeRepository.js    From git-insights with MIT License 4 votes vote down vote up 
CodeRepository = () => {
  const [repoData, setRepoData] = useState(null);
  const { user, fns } = useUser();
  const classes = useStyles();

  const fetchRepoData = (page) => {
    fns.fetchUserRepoPage(page)
      .then(data => {
        setRepoData(data);
      })
      .catch(err => console.log(err));
  }

  if (user.trackingRepo) {
    // Redirect to repo stats
    return (<Redirect to={`/repo/${user.primaryRepo}/dashboard`} />);
  }

  if (!repoData) {
    fetchRepoData(1);
  }

  return (
    user ?
      <Container>
        <Grid
          container
          justify="center"
          alignItems="center"
          className={classes.gridSection}
        >
          <Grid item xs={12} md={6}>
            <Typography variant="h2" gutterBottom={true}>
              Welcome to Git Insights!
            </Typography>
            <Typography variant="subtitle1" gutterBottom={true}>
              Please pick a source code repository host to begin
            </Typography>
            {/* <p>Please select the repo you want to track:</p> */}
          </Grid>
          <Grid item md={6}>
            <img
              alt="Under development"
              className={classes.image}
              src="/images/undraw_select_option_y75i.svg"
            />
          </Grid>
        </Grid>
        <Grid
          container
          justify="center"
          alignItems="center"
          spacing={3}
          className={classes.gridSection}
        >
          <Grid item xs={12} sm={4}>
            <IntegrationCard
              icon="/images/external-logos/github.png"
              serviceName="Github"
              serviceDesc="Github is a web-based version control repository hosting service owned by Microsoft."
              actionLabel="Connect"
              actionDisabled={false}
              url={`${process.env.REACT_APP_API_SERVER}/api/auth/github-app/connect`}
            ></IntegrationCard>
          </Grid>
          <Grid item xs={12} sm={4}>
            <IntegrationCard
              icon="/images/external-logos/bitbucket.png"
              serviceName="Bitbucket"
              serviceDesc="Bitbucket is a web-based version control repository hosting service owned by Atlassian."
              actionLabel="Coming Soon"
              actionDisabled={true}
            ></IntegrationCard>
          </Grid>
          <Grid item xs={12} sm={4}>
            <IntegrationCard
              icon="/images/external-logos/gitlab.png"
              serviceName="GitLab"
              serviceDesc="GitLab is a web-based version control repository hosting service owned by GitLab."
              actionLabel="Coming Soon"
              actionDisabled={true}
            ></IntegrationCard>
          </Grid>
          <Grid item xs={12} sm={4}>
            <IntegrationCard
              icon="/images/external-logos/git.png"
              serviceName="Custom Git"
              serviceDesc="Use the Custom Git option if you are self-hosting or using another service."
              actionLabel="Coming Soon"
              actionDisabled={true}
            ></IntegrationCard>
          </Grid>
        </Grid>
      </Container>
    :
      <Container>
        <Grid
          container
          direction="row"
          justify="center"
          alignItems="center"
          className={classes.loadingGrid}
        >
          <Grid item>
            <CircularProgress />
          </Grid>
        </Grid>
      </Container>
  )
}