@material-ui/core#Breadcrumbs JavaScript Examples

BreadCrumbs = ({ crumbs, active }) => {
    return (
        <Fragment>
            <Breadcrumbs separator={<NavigateNext fontSize="small" />}>
                {crumbs.map((item, index) => {
                    return (
                        <Link
                            component={RouterLink}
                            color="inherit"
                            to={item.link}
                            key={index}
                        >
                            {item.name}
                        </Link>
                    );
                })}
                <Typography color="textPrimary">{active}</Typography>
            </Breadcrumbs>
        </Fragment>
    );
}

Breadcrumbs = props => {
  const {
    history,
    location: { pathname }
  } = props;
  const pathnames = pathname.split("/").filter(x => x);
  return (
    <Breadcrumbs aria-label="breadcrumb">
      {pathnames.length > 0 ? (
        <Link onClick={() => history.push("/dashboard")}>Dashboard</Link>
      ) : (
        <Typography> Dashboard </Typography>
      )}
      {pathnames.map((name, index) => {
        const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
        const isLast = index === pathnames.length - 1;
        return isLast ? (
          <Typography key={name}>{name}</Typography>
        ) : (
          <Link key={name} onClick={() => history.push(routeTo)}>
            {name}
          </Link>
        );
      })}
    </Breadcrumbs>
  );
}

Localizer = () => {
  const { i18n } = useTranslation();
  const classes = useStyles();
  const [defaultLang, setDefaultLang] = useLocalStorage("i18n");

  // First mount effect
  useEffect(() => {
    i18n.changeLanguage(defaultLang);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return useMemo(
    () => (
      <Box mx={["0%", "10%", "25%"]}>
        <Breadcrumbs
          classes={classes}
          maxItems={list.length}
          component="div"
          aria-label="languages"
        >
          {list.map(([tag, name]) => (
            <Link
              key={tag}
              href="#"
              onClick={() => {
                i18n.changeLanguage(tag);
                setDefaultLang(tag);
              }}
            >
              {name}
            </Link>
          ))}
        </Breadcrumbs>
      </Box>
    ),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );
}

OftadehBreadcrumbs = props => {
  const { path } = props;
  const classes = useStyles();

  const pathName = path.location.pathname.split("/");
  const lastRoute = pathName.splice(-1, 1);

  return (
    <div className={classes.root}>
      <Breadcrumbs aria-label="breadcrumb">
        {pathName.length > 1 &&
          pathName.map((item, index) => (
            <Link
              key={index}
              component={NavLinkAdapter}
              to={pathName.join("/")}
              activeClassName="active"
              exact={true}
              color="inherit"
            >
              {item === "" ? "dashboard" : item}
            </Link>
          ))}
        <Typography color="textPrimary">{lastRoute.toString()}</Typography>
      </Breadcrumbs>
    </div>
  );
}

Legend = props => {
  const { items = legendProps, onChange, selected } = props
  const classes = legendStyles(props)
  const theme = useTheme()
  const selectedStyles = {
    textDecoration: 'underline',
    fontWeight: theme.typography.fontWeightBold,
    color: theme.palette.text.primary,
  }
  return (
    <div className={classes.root}>
      <Breadcrumbs
        itemsBeforeCollapse={Infinity}
        separator='>'
        aria-label='breadcrumb'
      >
        {items.map(item => (
          <BigFontTooltip
            onClick={() => onChange(item)}
            key={item.id}
            title={item.info}
          >
            <div
              className={classes.item}
              style={
                selected && item.id === selected.id ? selectedStyles : null
              }
            >
              <div
                className={classes.square}
                style={{ backgroundColor: item.color }}
              />
              <Typography color='inherit'>{item.label}</Typography>
            </div>
          </BigFontTooltip>
        ))}
      </Breadcrumbs>
    </div>
  )
}

Home = ({
    onGoToDetails,
    loading,
    applications,
    refetchApplications,
}) => {
    const [createNew, setCreateNew] = React.useState(false);

    return (
        <Container maxWidth={false}>
            <Grid component={Box} container paddingY={2}>
                <Grid item>
                    <Breadcrumbs aria-label="breadcrumb">
                        <Link to="/">Edlib admin</Link>
                        <Link to="/settings">Settings</Link>
                        <Typography color="textPrimary">
                            External applications
                        </Typography>
                    </Breadcrumbs>
                </Grid>
            </Grid>
            <Grid container component={Box} paddingBottom={2}>
                <Grid item md={12}>
                    <Typography variant="h2">External applications</Typography>
                </Grid>
            </Grid>
            <Grid container>
                <Grid item md={12}>
                    <Paper>
                        <Box padding={2}>
                            <Button
                                variant="contained"
                                color="primary"
                                onClick={() => setCreateNew(true)}
                            >
                                Create new
                            </Button>
                        </Box>
                        {loading && <CircularProgress />}
                        {!loading && (
                            <Table>
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Id</TableCell>
                                        <TableCell>Name</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {applications.map(({ id, name }) => (
                                        <TableRow
                                            key={id}
                                            hover
                                            onClick={() => onGoToDetails(id)}
                                        >
                                            <TableCell width={260}>
                                                {id}
                                            </TableCell>
                                            <TableCell>{name}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </Paper>
                </Grid>
            </Grid>
            <CreateExternalApplication
                isOpen={createNew}
                onClose={() => setCreateNew(false)}
                onAdded={() => {
                    setCreateNew(false);
                    refetchApplications();
                }}
            />
        </Container>
    );
}

Rule = () => {
  const classes = useStyles();
  const [rows, setData] = useState({});
  const { id } = useParams();
  const fetchData = useCallback(() => {
    GitlabLintHttpClient("GET_ONE", { entity: "rules", id: id })
      .then((data) => {
        setData(data.data);
      })
      .catch((err) => console.error(err));
  }, [id]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  if (Object.keys(rows).length === 0 && rows.constructor === Object) {
    return <Loading />;
  }

  return (
    <React.Fragment>
      <Breadcrumbs aria-label="breadcrumb">
        <Link component={RouterLink} color="inherit" to="/rules">
          Rules
        </Link>
        <Typography color="textPrimary">{rows.rule.ruleId}</Typography>
      </Breadcrumbs>
      <Box pt={2} pb={2}>
        <Divider />
      </Box>
      <RuleTitle rule={rows.rule} />
      {rows.rule.description && (
        <p className={classes.ruleDescription}>{rows.rule.description}</p>
      )}
      <Box pt={2} pb={2}>
        <Divider />
      </Box>
      <RuleProjects projects={rows.projects} />
    </React.Fragment>
  );
}

/**
 * Main page for the app
 * @return {ReactElement} <Main />
 */
export default function Main() {
  const classes = useStyles();

  // Declare state variables
  const [, setIsSignedIn] = useState(false);
  const [authInitialized, setAuthInitialized] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [errorModalOpen, setErrorModalOpen] = useState(false);

  /**
   * @typedef {Object} NavigationState
   * @property {any[]} data
   * @property {React.Dispatch<React.SetStateAction<any[]>>} setData
   * @property {boolean} loading
   * @property {React.Dispatch<React.SetStateAction<boolean>>} setLoading
   * @property {any} selected
   * @property {React.Dispatch<any>} setSelected
   */
  /**
   * Function to generate state getters and setters for
   *    a list of data, loading state, and selected data
   * @return {NavigationState} Object containing navigation state variables
   */
  const generateNavigationState = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [selected, setSelected] = useState(null);
    return {
      data,
      setData,
      loading,
      setLoading,
      selected,
      setSelected,
    };
  };

  // Navigation state
  const projects = generateNavigationState();
  const locations = generateNavigationState();
  const datasets = generateNavigationState();
  const dicomStores = generateNavigationState();
  const studies = generateNavigationState();
  const series = generateNavigationState();

  /* On mount, check if user is signed in already or not
  by checking for an access token in local storage */
  useEffect(() => {
    // Load GooglAuth library on mount
    Auth.initClient().then(() => {
      setAuthInitialized(true);

      // Set up listener to listen to signed in state changes
      Auth.onSignedInChanged((isSignedIn) => {
        setIsSignedIn(isSignedIn);
      });

      // Check if user is already signed in on page load
      const signedIn = Auth.isSignedIn();
      setIsSignedIn(signedIn);

      if (signedIn) {
        loadProjects();
      } else {
        signIn();
      }
    });
  }, []);

  /**
   * Signs the user in with Google
   */
  const signIn = () => {
    Auth.signIn();
  };

  /**
   * Generic flow for populating data into our react component
   * @param {function(): Promise<any>} apiCall Async function to retrieve data
   * @param {function(boolean): any} setLoading Function to set loading state
   * @param {function(any): any} setData Function to set data state
   */
  const loadData = async (apiCall, setLoading, setData) => {
    setLoading(true);
    try {
      const data = await apiCall();
      setData(data);
    } catch (err) {
      console.error(err);
      if (err.result) {
        setErrorMessage(err.result.error.message);
      } else {
        setErrorMessage(err.toString());
      }
      setErrorModalOpen(true);
    } finally {
      setLoading(false);
    }
  };

  // Use loadData to generate functions for loading all state data
  const loadProjects = async () =>
    loadData(api.fetchProjects, projects.setLoading, projects.setData);

  const loadFilteredProjects = async (searchQuery) =>
    loadData(() => api.fetchProjects(searchQuery),
        projects.setLoading, projects.setData);

  const loadLocations = async (projectId) =>
    loadData(() => api.fetchLocations(projectId),
        locations.setLoading, locations.setData);

  const loadDatasets = async (projectId, location) =>
    loadData(() => api.fetchDatasets(projectId, location),
        datasets.setLoading, datasets.setData);

  const loadDicomStores = async (projectId, location, dataset) =>
    loadData(() => api.fetchDicomStores(projectId, location, dataset),
        dicomStores.setLoading, dicomStores.setData);

  const loadStudies = async (projectId, location, dataset, dicomStore) =>
    loadData(() => api.fetchStudies(projectId, location, dataset, dicomStore),
        studies.setLoading, studies.setData);

  const loadSeries =
      async (projectId, location, dataset, dicomStore, studyId) =>
    loadData(() => api.fetchSeries(projectId, location, dataset, dicomStore, studyId),
        series.setLoading, series.setData);

  // Methods for selecting a list item and loading data for the next list
  /** @param {number} index Index of project in project list */
  const selectProject = (index) => {
    const projectId = projects.data[index];
    projects.setSelected(projectId);
    loadLocations(projectId);
  };

  /** @param {number} index Index of location in location list */
  const selectLocation = (index) => {
    const locationId = locations.data[index];
    locations.setSelected(locationId);
    loadDatasets(projects.selected, locationId);
  };

  /** @param {number} index Index of dataset in dataset list */
  const selectDataset = (index) => {
    const dataset = datasets.data[index];
    datasets.setSelected(dataset);
    loadDicomStores(projects.selected, locations.selected, dataset);
  };

  /** @param {number} index Index of dicom dtore in dicom dtore list */
  const selectDicomStore = (index) => {
    const dicomStore = dicomStores.data[index];
    dicomStores.setSelected(dicomStore);
    loadStudies(projects.selected, locations.selected,
        datasets.selected, dicomStore);
  };

  /** @param {number} index Index of study in study list */
  const selectStudy = (index) => {
    const study = studies.data[index];
    studies.setSelected(study);
    loadSeries(projects.selected, locations.selected, datasets.selected,
        dicomStores.selected, study[DICOM_TAGS.STUDY_UID].Value[0]);
  };

  /** @param {number} index Index of series in series list */
  const selectSeries = (index) => {
    series.setSelected(series.data[index]);
  };

  /**
   * Resets all navigation state after and including the given
   *    navigation state value
   * @param {('project'|'location'|'dataset'|
   *    'dicomStore'|'study'|'series')} navigationStr Navigation state to reset
   */
  const resetChainedState = (navigationStr) => {
    switch (navigationStr) {
      case 'project':
        projects.setSelected(null);
        projects.setData([]);
      case 'location':
        locations.setSelected(null);
        locations.setData([]);
      case 'dataset':
        datasets.setSelected(null);
        datasets.setData([]);
      case 'dicomStore':
        dicomStores.setSelected(null);
        dicomStores.setData([]);
      case 'study':
        studies.setSelected(null);
        studies.setData([]);
      case 'series':
        series.setSelected(null);
        series.setData([]);
    }
  };

  /** Clears all state after and including projects and reloads project list */
  const reloadProjects = () => {
    resetChainedState('project');
    loadProjects();
  };

  /** Clears all state after and including locations and reloads project list */
  const reloadLocations = () => {
    resetChainedState('location');
    loadLocations(projects.selected);
  };

  /** Clears all state after and including datasets and reloads dataset list */
  const reloadDatasets = () => {
    resetChainedState('dataset');
    loadDatasets(projects.selected, locations.selected);
  };

  /** Clears all state after and including dicom
   * stores and reloads dicom store list */
  const reloadDicomStores = () => {
    resetChainedState('dicomStore');
    loadDicomStores(projects.selected, locations.selected, datasets.selected);
  };

  /** Clears all state after and including studies and reloads study list */
  const reloadStudies = () => {
    resetChainedState('study');
    loadStudies(projects.selected, locations.selected,
        datasets.selected, dicomStores.selected);
  };

  /** Clears series state and reloads series list */
  const reloadSeries = () => {
    resetChainedState('series');
    loadSeries(projects.selected, locations.selected,
        datasets.selected, dicomStores.selected,
        studies.selected[DICOM_TAGS.STUDY_UID].Value[0]);
  };

  const handleProjectSearch = (searchQuery) => {
    loadFilteredProjects(searchQuery);
  };

  return (
    <div
      className={classes.root}
      style={{display: authInitialized ? 'block' : 'none'}}
    >
      <Box m={2} display="flex" flexDirection="row">
        <Box flexGrow={1}>
          <Breadcrumbs>
            {projects.selected ?
              <Link color="inherit" href="#" onClick={reloadProjects}>
                {projects.selected}
              </Link> :
              <Typography color="textPrimary">
                Select Project
              </Typography>}
            {locations.selected ?
              <Link color="inherit" href="#" onClick={reloadLocations}>
                {locations.selected}
              </Link> :
              projects.selected ?
                <Typography color="textPrimary">
                  Select Location
                </Typography> : null}
            {datasets.selected ?
              <Link color="inherit" href="#" onClick={reloadDatasets}>
                {datasets.selected}
              </Link> :
              locations.selected ?
                <Typography color="textPrimary">
                  Select Dataset
                </Typography> : null}
            {dicomStores.selected ?
              <Link color="inherit" href="#" onClick={reloadDicomStores}>
                {dicomStores.selected}
              </Link> :
              datasets.selected ?
                <Typography color="textPrimary">
                  Select Dicom Store
                </Typography> : null}
            {studies.selected ?
              <Link color="inherit" href="#" onClick={reloadStudies}>
                {studies.selected[DICOM_TAGS.PATIENT_ID].Value[0]}
              </Link> :
              dicomStores.selected ?
                <Typography color="textPrimary">
                  Select Study
                </Typography> : null}
            {series.selected ?
              <Link color="inherit" href="#" onClick={reloadSeries}>
                {series.selected[DICOM_TAGS.MODALITY].Value[0]}
              </Link> :
              studies.selected ?
                <Typography color="textPrimary">
                  Select Series
                </Typography> : null}
          </Breadcrumbs>
        </Box>
      </Box>

      {!projects.selected ?
        <SearchList
          items={projects.data}
          onClickItem={selectProject}
          isLoading={projects.loading}
          onSearch={handleProjectSearch}
          searchDelay={200} /> : null}
      {(projects.selected && !locations.selected) ?
        <SearchList
          items={locations.data}
          onClickItem={selectLocation}
          isLoading={locations.loading} /> : null}
      {(locations.selected && !datasets.selected) ?
        <SearchList
          items={datasets.data}
          onClickItem={selectDataset}
          isLoading={datasets.loading} /> : null}
      {(datasets.selected && !dicomStores.selected) ?
        <SearchList
          items={dicomStores.data}
          onClickItem={selectDicomStore}
          isLoading={dicomStores.loading} /> : null}
      {(dicomStores.selected && !studies.selected) ?
        <SearchList
          items={studies.data.map((study) =>
            study[DICOM_TAGS.PATIENT_ID].Value[0])}
          onClickItem={selectStudy}
          isLoading={studies.loading} /> : null}
      {(studies.selected && !series.selected) ?
        <SearchList
          items={series.data.map((series) =>
            series[DICOM_TAGS.MODALITY].Value[0])}
          onClickItem={selectSeries}
          isLoading={series.loading} /> : null}
      {series.selected ?
        <Viewer
          project={projects.selected}
          location={locations.selected}
          dataset={datasets.selected}
          dicomStore={dicomStores.selected}
          study={studies.selected}
          series={series.selected} /> : null}
      <Dialog
        open={errorModalOpen}
        onClose={() => setErrorModalOpen(false)}
        aria-labelledby="error-dialog-title"
        aria-describedby="error-dialog-description"
      >
        <DialogTitle id="error-dialog-title">Error</DialogTitle>
        <DialogContent>
          <DialogContentText id="error-dialog-description">
            {errorMessage}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => setErrorModalOpen(false)}
            color="primary" autoFocus>
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </div >
  );
}

function VisualizerContainer() {
  const classes = useStyles();
  const steps = getSteps();
  const { state, dispatch } = useState();
  const { model_state, model_dispatch } = useModelState();

  function getProgressBarValue() {
    if (state.stepper_finish) {
      return 200;
    }
    return (100 * (getActiveStep(state) + 1)) / StepperStateOrder.length;
  }

  const getIsSelected = (value) =>
    [
      state.task,
      state.dataset_category,
      state.sample_dataset,
      state.model,
      ...state.nlp_models,
      ...state.preprocessors,
    ].includes(value);

  const handleNext = async () => {
    dispatch({
      type: Actions.STEPPER_HANDLE_NEXT,
      model_state,
      model_dispatch,
    });
  };

  const handleBack = () => {
    dispatch({
      type: Actions.STEPPER_HANDLE_PREVIOUS,
    });
  };

  const handleFinish = () => {
    dispatch({
      type: Actions.HANDLE_STEPPER_FINISH,
    });
  };

  function isNextDisabled() {
    if (
      state.stepper_state === StepperState.DATASET &&
      state.dataset_category === DatasetCategory.SAMPLE &&
      state.sample_dataset == null
    ) {
      return true;
    }
    if (state.stepper_state === StepperState.VISUALIZE) {
      return false;
    }
    return (
      state.stepper_state !== StepperState.PREPROCESSORS &&
      !getOptions(state).some((val) => getIsSelected(val.label))
    );
  }

  const SelectedOptionLabel = (index) => {
    let option = null;
    switch (index) {
      case 0:
        option = taskFormatter(state.task);
        break;
      case 1:
        option = datasetFormatter(state.dataset_category, state.sample_dataset);
        break;
      case 2:
        if (state.task === Tasks.NATURAL_LANGUAGE) {
          option = nlpModelFormatter(state.nlp_models).join(", ");
        } else {
          option = modelFormatter(state.model);
        }
        break;
      case 3:
        option = preprocessorFormatter(state.preprocessors).join(", ");
        break;
      case 4:
        option = "Visualize";
        break;
      default:
        break;
    }
    return option;
  };

  function getVizContent() {
    if (state.stepper_finish) {
      return <StepperFinish />;
    }
    if (state.stepper_state === StepperState.VISUALIZE) {
      return <PlotsContainer />;
    }
    return <VisualizerOptionSelectionGrid />;
  }

  return (
    <Grid
      container
      direction="column"
      justify="flex-start"
      alignItems="center"
      className={classes.fullHeight}
    >
      {/* Nav Bar */}
      <Grid
        container
        direction="row"
        style={{
          height: "82px",
          padding: "16px 28px 16px 28px",
          justifyContent: "center",
        }}
      >
        <Grid item style={{ float: "left", width: "50px" }}>
          {getActiveStep(state) > 0 ? (
            <IconButton
              onClick={handleBack}
              className={classes.button}
              style={{ float: "left" }}
              component="span"
            >
              <ArrowBack />
            </IconButton>
          ) : null}
        </Grid>
        <Grid
          item
          style={{
            margin: "0 auto",
            alignSelf: "center",
            width: `${state.stepper_finish ? "130px" : "540px"}`,
          }}
        >
          <Breadcrumbs
            separator={<NavigateNext fontSize="small" />}
            aria-label="breadcrumb"
          >
            {StepperStateOrder.map((step, index) => {
              if (getActiveStep(state) === index && !state.stepper_finish) {
                return (
                  <Typography color="textPrimary" style={{ fontSize: "16px" }}>
                    {String(index + 1) + ". " + getSteps()[index]}
                  </Typography>
                );
              } else if (
                getActiveStep(state) > index &&
                !state.stepper_finish
              ) {
                return (
                  <Typography
                    color="textSecondary"
                    style={{ fontSize: "16px" }}
                  >
                    {SelectedOptionLabel(index)}
                  </Typography>
                );
              }
              return null;
            })}
            {state.stepper_finish && (
              <Typography color="textPrimary" style={{ fontSize: "18px" }}>
                Code Display
              </Typography>
            )}
            }
          </Breadcrumbs>
        </Grid>
        <Grid item style={{ float: "right" }}>
          {!state.stepper_finish && (
            <IconButton
              disabled={isNextDisabled()}
              variant="contained"
              onClick={
                getActiveStep(state) === steps.length - 1
                  ? handleFinish
                  : handleNext
              }
              className={
                isNextDisabled()
                  ? classes.nextButtonDisabled
                  : classes.nextButton
              }
              style={{ float: "right" }}
            >
              <ArrowForward
                className={
                  isNextDisabled() ? classes.arrowDisabled : classes.arrow
                }
              />
            </IconButton>
          )}
        </Grid>
      </Grid>
      {/* Progress Bar */}
      <Grid item style={{ width: "100%" }}>
        <BorderLinearProgress
          variant="determinate"
          value={getProgressBarValue()}
        />
      </Grid>
      <Grid className={`${classes.fullWidth} ${classes.visualizerHeight}`} item>
        <Card
          className={
            state.stepper_finish
              ? classes.rootActionsFinish
              : classes.rootActions
          }
        >
          <CardContent
            className={`${classes.fullHeight} ${
              state.stepper_state === StepperState.VISUALIZE
                ? classes.rightMargin
                : null
            }`}
          >
            {getVizContent()}
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
}

ExternalApplicationDetails = ({
    applicationTokensFetchData,
    onCreate,
    createStatus,
    token,
    application,
    onDeleteRequest,
}) => {
    return (
        <Container maxWidth={false}>
            <Grid component={Box} container paddingY={2}>
                <Grid item>
                    <Breadcrumbs aria-label="breadcrumb">
                        <Link to="/">Edlib admin</Link>
                        <Link to="/settings">Settings</Link>
                        <Link to="/settings/external-applications">
                            External applications
                        </Link>
                        <Typography color="textPrimary">
                            {application.name}
                        </Typography>
                    </Breadcrumbs>
                </Grid>
            </Grid>
            <Grid container component={Box} paddingBottom={2}>
                <Grid item md={12}>
                    <Typography variant="h2">{application.name}</Typography>
                </Grid>
            </Grid>
            <Grid container>
                <Grid item md={6}>
                    <Paper>
                        <Box padding={2}>
                            <strong>Application ID: </strong> {application.id}
                        </Box>
                        <Box padding={2}>
                            <Button
                                variant="contained"
                                color="primary"
                                onClick={() => onCreate()}
                                disabled={createStatus.loading}
                            >
                                Create new
                            </Button>
                        </Box>
                        {token && (
                            <Alert>Created new access token: {token}</Alert>
                        )}
                        <DefaultHookQuery
                            fetchData={applicationTokensFetchData}
                        >
                            {({ response: accessTokens }) => (
                                <Table>
                                    <TableHead>
                                        <TableRow>
                                            <TableCell>Id</TableCell>
                                            <TableCell>Name</TableCell>
                                            <TableCell>Delete</TableCell>
                                        </TableRow>
                                    </TableHead>
                                    <TableBody>
                                        {accessTokens.map(({ id, name }) => (
                                            <TableRow key={id}>
                                                <TableCell width={260}>
                                                    {id}
                                                </TableCell>
                                                <TableCell>{name}</TableCell>
                                                <TableCell>
                                                    <Button
                                                        startIcon={<Delete />}
                                                        color="error"
                                                        onClick={() =>
                                                            onDeleteRequest(id)
                                                        }
                                                    >
                                                        Delete
                                                    </Button>
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            )}
                        </DefaultHookQuery>
                    </Paper>
                </Grid>
            </Grid>
        </Container>
    );
}

Project = () => {
  const [rows, setData] = useState({});
  const [errorMessage, setErrorMessage] = useState({});
  const { id } = useParams();
  const fetchData = useCallback(() => {
    GitlabLintHttpClient("GET_ONE", { entity: "projects", id: id })
      .then((data) => {
        setData(data.data);
      })
      .catch((err) => {
        setErrorMessage({
          status: err.response.status,
          message: err.response.data.errors["_all"],
        });
        console.error(err);
        console.error(err.response);
      });
  }, [id]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  if (Object.keys(rows).length === 0 && rows.constructor === Object) {
    let messageTitle = "Error";
    if (errorMessage.status === 404) {
      messageTitle = "Project not found";
    }
    return (
      <>
        <Typography variant="h4" paragraph>
          {messageTitle}
        </Typography>
        <pre>{errorMessage.message}</pre>
      </>
    );
  }

  return (
    <React.Fragment>
      <Breadcrumbs aria-label="breadcrumb">
        <Link component={RouterLink} color="inherit" to="/projects">
          Projects
        </Link>
        <Typography color="textPrimary">
          {rows.project.name_with_namespace}
        </Typography>
      </Breadcrumbs>

      <Box pt={2} pb={2}>
        <Divider />
      </Box>

      <ProjectTitle project={rows.project} />
      <p>{rows.project.description}</p>

      <p>
        <strong>URL</strong>:{" "}
        <Link color="secondary" target="_blank" href={rows.project.web_url}>
          {rows.project.web_url}
        </Link>
      </p>
      <p>
        <strong>Clone with SSH</strong>: {rows.project.ssh_url_to_repo}
      </p>
      <p>
        <strong>Clone with HTTPS</strong>: {rows.project.http_url_to_repo}
      </p>

      <Box pt={2} pb={2}>
        <Divider />
      </Box>

      <Typography variant="h6" paragraph>
        This repository in the gitlab trigger {rows.rules.length} rules:
      </Typography>
      <List>
        {rows.rules.map((rule) => {
          return (
            <ListItem
              key={rule.ruleId}
              button
              component={RouterLink}
              to={`/rules/${rule.ruleId}`}
            >
              <RuleTitle rule={rule} size="small" />
            </ListItem>
          );
        })}
      </List>
    </React.Fragment>
  );
}

NewsDetail = ({ match }) => {
  const articleId = match.params.id;
  const id = articleId.split('-')[0];

  const { loading, error, data } = useQuery(getNewsById, { variables: { id } });

  const styles = useStyles();
  const appStyles = useAppStyles();
  const { t, i18n } = useTranslation();
  const dateLanguage = i18n.language === 'ua' ? 'ukr-UA' : 'en-US';

  if (loading || error) return errorOrLoadingHandler(error, loading);

  const article = data.getNewsById;
  const { translationsKey } = article;

  if (!t(`${translationsKey}.text`)) {
    return <h2>{t('newsDetail.change')}</h2>;
  }

  const title = translationsKey ? t(`${translationsKey}.title`) : t('newsDetail.noTitle');

  return (
    <div className={appStyles.rootApp}>
      <Card className={`${appStyles.containerApp} ${styles.container}`}>
        <CardContent className={styles.content}>
          <Breadcrumbs className={styles.breadcrumbs} aria-label='breadcrumb'>
            <Link underline='hover' color='inherit' href={routes.pathToMain}>
              {t('common.home')}
            </Link>
            <Link underline='hover' color='inherit' href={routes.pathToNews}>
              {t('common.news')}
            </Link>
            <Typography>{t(`${translationsKey}.title`)}</Typography>
          </Breadcrumbs>
          <CardHeader
            subheader={
              <Typography className={styles.date}>
                {new Date(parseInt(article.date)).toLocaleString(dateLanguage, TIME_OPTIONS)}
              </Typography>
            }
          />
          <Typography
            id='mainTitle'
            className={styles.articleTitle}
            gutterBottom
            variant='h2'
            component='h2'
          >
            {title}
          </Typography>
          <hr />
          <div className={styles.imagesContainer}>
            <CardMedia
              className={styles.media}
              image={IMG_URL + article.image}
              title={title}
              alt={title}
              component='div'
            />
          </div>
          <Typography variant='body2' component='div' className={styles.newsText} id='fullText'>
            {translationsKey ? parse(t(`${translationsKey}.text`)) : t('newsDetail.noText')}
          </Typography>
          <NavLink to='/catalog/products?page=1&sort=null&countPerPage=9'>
            <Button variant='contained' className={styles.shoppingButton}>
              {t('cart.empty')}
            </Button>
          </NavLink>
          <div className={styles.focusedText}>{title}</div>
        </CardContent>
        <div className={styles.newsAuthorFooter}>
          <CardMedia
            className={styles.authorAvatar}
            image={IMG_URL + article.author.image}
            title={title}
            component='div'
            id='newsAuthorAvatar'
          />
          <div className={styles.madeByAuthor}>{t('newsDetail.madeByAuthor')}</div>
          <Typography id='author' className={styles.authorName}>
            {translationsKey ? t(`${translationsKey}.name`) : t('newsDetail.noAuthor')}
          </Typography>
        </div>
      </Card>
    </div>
  );
}