Notes

import logo from "./logo.svg";
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core";

import "./App.css";
import { WorkspaceForm, UserGrid } from "./WorkspaceForm.js";
const usestyles = makeStyles({
container: {},
cardRoot: {
padding: "1rem",
borderRadius: "0.5rem",
},
title: {
padding: "2rem",
},
});
function App() {
const classes = usestyles();

return (
<div className="App">
<Grid
container
direction="column"
alignItems="center"
justifyContent="center"
style={{ minHeight: "100vh" }}
>
<WorkspaceForm></WorkspaceForm>
<UserGrid></UserGrid>
</Grid>
</div>
);
}

export default App;


___----------------____
import React from "react";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Card from "@material-ui/core/Card";
import Input from "@material-ui/core/Input";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { makeStyles } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";

import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
//import axios from "axios";
//import Checkbox from "@material-ui/core/Checkbox";

//define columns
const columns = [
{ id: "id", label: "S.No", minWidth: 50 },
{ id: "workspace_name", label: "Workspaceu00a0Name", minWidth: 100 },
{
id: "users",
label: "Usersu00a0Mapped",
minWidth: 90,
},
];

const rows = [
{ id: 1, workspace_name: "Meevee", users: 10 },
{ id: 2, workspace_name: "Twiyo", users: 83 },
{ id: 3, workspace_name: "Devpulse", users: 87 },
{ id: 4, workspace_name: "Shufflester", users: 98 },
{ id: 5, workspace_name: "Wikido", users: 94 },
{ id: 6, workspace_name: "Feednation", users: 80 },
{ id: 7, workspace_name: "Abatz", users: 77 },
{ id: 8, workspace_name: "Fivechat", users: 99 },
{ id: 9, workspace_name: "Yacero", users: 75 },
{ id: 10, workspace_name: "Devshare", users: 49 },
{ id: 11, workspace_name: "Brainverse", users: 56 },
{ id: 12, workspace_name: "Lazz", users: 58 },
{ id: 13, workspace_name: "Twitternation", users: 70 },
{ id: 14, workspace_name: "Twitterwire", users: 40 },
{ id: 15, workspace_name: "Avamm", users: 2 },
{ id: 16, workspace_name: "Bluezoom", users: 79 },
{ id: 17, workspace_name: "Thoughtstorm", users: 29 },
{ id: 18, workspace_name: "Camimbo", users: 9 },
{ id: 19, workspace_name: "Flipstorm", users: 64 },
{ id: 20, workspace_name: "Tagchat", users: 85 },
{ id: 21, workspace_name: "Zooveo", users: 57 },
{ id: 22, workspace_name: "Ntags", users: 76 },
{ id: 23, workspace_name: "Browsedrive", users: 16 },
{ id: 24, workspace_name: "Camimbo", users: 15 },
{ id: 25, workspace_name: "Photobean", users: 48 },
{ id: 26, workspace_name: "Fliptune", users: 56 },
{ id: 27, workspace_name: "Dynabox", users: 27 },
{ id: 28, workspace_name: "Fiveclub", users: 66 },
{ id: 29, workspace_name: "Plambee", users: 67 },
{ id: 30, workspace_name: "Buzzshare", users: 94 },
{ id: 31, workspace_name: "Kazio", users: 33 },
{ id: 32, workspace_name: "Jabbersphere", users: 9 },
{ id: 33, workspace_name: "Feedspan", users: 80 },
{ id: 34, workspace_name: "InnoZ", users: 11 },
{ id: 35, workspace_name: "Meezzy", users: 46 },
{ id: 36, workspace_name: "Oyoloo", users: 52 },
{ id: 37, workspace_name: "Photolist", users: 67 },
{ id: 38, workspace_name: "Eadel", users: 17 },
{ id: 39, workspace_name: "Skipfire", users: 80 },
{ id: 40, workspace_name: "Vinder", users: 21 },
{ id: 41, workspace_name: "Linklinks", users: 23 },
{ id: 42, workspace_name: "Aivee", users: 8 },
{ id: 43, workspace_name: "Eabox", users: 48 },
{ id: 44, workspace_name: "Kimia", users: 39 },
{ id: 45, workspace_name: "Thoughtstorm", users: 1 },
{ id: 46, workspace_name: "Eabox", users: 60 },
{ id: 47, workspace_name: "Jabberbean", users: 52 },
{ id: 48, workspace_name: "Edgetag", users: 57 },
{ id: 49, workspace_name: "Jaxbean", users: 86 },
{ id: 50, workspace_name: "Blogtag", users: 64 },
];

// const rows = [axios.get('https://mocki.io/v1/7ff078af-7b31-4816-accc-9b57fc07c536')
// .then(function (response) {
// return response.data; // the response.data is string of rows
// })
// .catch(function (response) {
// console.log(response);
// })
// ]
//console.log(rows)

const usestyles = makeStyles({
cardRoot: {
padding: "1rem",
margin: "0.5rem",
},
title: {
color: "orange",
},
root: {
width: "90%",
top: "110px",
},
container: {
maxHeight: 440,
},
});
export const WorkspaceForm = () => {
const handleChange = (event) => {};
const classes = usestyles();
return (
<Card className={classes.cardRoot} variant="outlined">
<Grid container item>
<Typography variant="h6" className={classes.title}>
Add Workspace
</Typography>
</Grid>
<Grid container item direction="column">
<Grid container item xs={12}>
<Grid container item xs={6}>
<Grid item xs={4}>
<Typography variant="body1">Workspace Name</Typography>
</Grid>
<Grid item xs={8}>
<Input />
</Grid>
</Grid>

<Grid container item xs={6}>
<Grid item xs={6}>
<Typography variant="body1">Active</Typography>
</Grid>
<Grid item xs={6}>
<RadioGroup row onChange={handleChange}>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</Grid>
</Grid>
</Grid>

<Grid container item item xs={12}>
<Grid container item xs={6}>
<Grid item xs={4}>
<Typography variant="body1">Workspace Description</Typography>
</Grid>
<Grid item xs={8}>
<Input />
</Grid>
</Grid>
<Grid container item xs={6}>
<Grid item xs={6}>
<Typography variant="body1">
Inherit Positions To Content Within
</Typography>
</Grid>
<Grid item xs={6}>
<RadioGroup row onChange={handleChange}>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</Grid>
</Grid>
</Grid>
<Grid container item justifyContent="flex-end">
<Grid item>
<Button variant="contained" color="primary">
Save
</Button>
</Grid>
</Grid>
</Grid>
</Card>
);
};
export const UserGrid = () => {
const classes = usestyles();

const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);

const handleChangePage = (event, newPage) => {
setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};

return (
<Card className={classes.cardRoot} variant="outlined">
<Grid container item>
<Typography variant="h6" className={classes.title}>
Users Mapped To This Workspace
</Typography>
<div>
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
padding="checkbox"
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => {
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.code}
>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
{column.format && typeof value === "number"
? column.format(value)
: value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[3, 4, 5]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</div>
</Grid>
</Card>
);
};