//
// Copyright 2020 DXOS.org
//
import clsx from "clsx";
import React from "react";
import { useHistory, useParams } from "react-router";
// import { useQuery } from '@apollo/react-hooks';
import { makeStyles } from "@material-ui/core";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import LinkIcon from "@material-ui/icons/ExitToApp";
import ListItemText from "@material-ui/core/ListItemText";
// import EXTENSIONS from '../gql/extensions.graphql';
// import { useQueryStatusReducer } from '../hooks';
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
},
list: {
padding: 0,
},
listItem: {
display: "flex",
alignItems: "center",
backgroundColor: theme.palette.background.default,
},
selected: {
backgroundColor: theme.palette.background.secondary,
},
itemText: {
fontFamily: '"DM Mono", monospace',
fontWeight: 400,
},
icon: {
minWidth: 40,
color: theme.palette.grey[500],
},
selected: {
color: theme.palette.text.primary,
},
expand: {
flex: 1,
},
}));
const Sidebar = ({ modules: { services, settings } }) => {
const classes = useStyles();
const history = useHistory();
const { module } = useParams();
// const { data: extensionsData } = useQueryStatusReducer(useQuery(EXTENSIONS));
// const extensions = extensionsData ? JSON.parse(extensionsData.extensions.json) : [];
const extensions = [];
const isSelected = (path) => path === `/${module}`;
const Modules = ({ modules }) => (
{modules.map(({ path, title, icon: Icon }) => (
);
const Extensions = ({ extensions }) => (
{extensions.map(({ url, title }) => {
url = url
.replace("%HOST%", window.location.host)
.replace("%PORT%", window.location.port)
.replace("%PROTOCOL%", window.location.protocol);
return (
);
return (