// // 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 }) => ( history.push(path)} classes={{ root: classes.listItem, selected: classes.selected }} > ))} ); 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 ( { window.location = url; return true; }} > ); })} ); return (
); }; export default Sidebar;