import { useQuery } from '@apollo/client'; import { faPlayCircle, faVial } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CircularProgress, Collapse, IconButton, LinearProgress, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, makeStyles, useTheme } from '@material-ui/core'; import { Cancel, CheckCircle, CloudDownload, ShoppingCart, Timer } from '@material-ui/icons'; import { format } from 'date-fns'; import React, { FC, Fragment, ReactNode, useState } from 'react'; import { Commit, Pipeline, PipelineTask, TaskStatuses } from '../generated/graphql'; import { COMMITS } from './queries'; interface Props { pipeline: Pipeline; } const useStyles = makeStyles((theme) => ({ root: { flex: "1 1 100%", }, nested: { paddingLeft: theme.spacing(4), }, })); export const CommitList: FC = ({pipeline}) => { const { data, loading } = useQuery<{ commits: Commit[] }>(COMMITS, { variables: { pipelineId: pipeline.id, }, }); const classes = useStyles(); return (
{(() => { if (loading) { return ; } return {data?.commits.map(commit => ( ))} ; })()}
) } const Item: FC<{commit: Commit}> = ({commit}) => { const [isOpen, setOpen] = useState(() => false); const classes = useStyles(); return ( setOpen(!isOpen)}> { commit.tasks.map(task => ()) } ); } const TaskItem: FC<{task: PipelineTask}> = ({task}) => { const classes = useStyles(); const theme = useTheme(); const statusIcon: ReactNode = (() => { switch (task.status) { case TaskStatuses.Pending: return ; case TaskStatuses.Success: return ; case TaskStatuses.Failed: return ; case TaskStatuses.Working: return ; } } )() return ( {statusIcon} ); };