Ran prettier on frontend

This commit is contained in:
Isoporhode
2021-11-14 16:45:18 +01:00
parent 046ebfcf47
commit fb3f45d008
63 changed files with 42478 additions and 31383 deletions
+169 -171
View File
@@ -1,181 +1,182 @@
import React, { useEffect, useState } from 'react';
import { useTheme } from '@material-ui/core/styles';
import React, { useEffect, useState } from "react";
import { useTheme } from "@material-ui/core/styles";
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Grid from "@material-ui/core/Grid";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
const Workflows = (props) => {
const { globalUrl, isLoggedIn, isLoaded, } = props
const theme = useTheme();
const [curView, setCurView] = useState(0);
const [firstrequest, setFirstrequest] = useState(true)
const [selectedItems, setSelectedItems] = useState([])
const { globalUrl, isLoggedIn, isLoaded } = props;
const theme = useTheme();
const [curView, setCurView] = useState(0);
const [firstrequest, setFirstrequest] = useState(true);
const [selectedItems, setSelectedItems] = useState([]);
const viewdata1 = [
{
"title": "General",
"content": "Learn about our ticketing solutions",
"subitems": [
{
"name": "Search",
"subtitle": "Search for anything, anywhere",
},
{
"name": "Message",
"subtitle": "Read and send messages",
},
{
"name": "Parse emails",
"subtitle": "what",
},
],
},
{
"title": "Ticketing",
"subitems": [
{
"name": "Search",
"subtitle": "Search for anything, anywhere",
},
{
"name": "Message",
"subtitle": "Read and send messages",
},
{
"name": "Parse emails",
"subtitle": "what",
},
],
},
{
"title": "Threat intel",
"subitems": [
{
"name": "Search",
"subtitle": "Search for anything, anywhere",
},
{
"name": "Message",
"subtitle": "Read and send messages",
},
{
"name": "Parse emails",
"subtitle": "what",
},
],
},
]
const viewdata1 = [
{
title: "General",
content: "Learn about our ticketing solutions",
subitems: [
{
name: "Search",
subtitle: "Search for anything, anywhere",
},
{
name: "Message",
subtitle: "Read and send messages",
},
{
name: "Parse emails",
subtitle: "what",
},
],
},
{
title: "Ticketing",
subitems: [
{
name: "Search",
subtitle: "Search for anything, anywhere",
},
{
name: "Message",
subtitle: "Read and send messages",
},
{
name: "Parse emails",
subtitle: "what",
},
],
},
{
title: "Threat intel",
subitems: [
{
name: "Search",
subtitle: "Search for anything, anywhere",
},
{
name: "Message",
subtitle: "Read and send messages",
},
{
name: "Parse emails",
subtitle: "what",
},
],
},
];
if (firstrequest) {
setFirstrequest(false)
if (props.match.params.key) {
console.log("PROPS: ", props.match.params.key)
const viewitem = viewdata1.find(item => item.title.toLowerCase() === props.match.params.key.toLowerCase())
if (viewitem !== undefined && viewitem !== null) {
setCurView(1)
//setSelectedItem(viewitem)
}
}
}
if (firstrequest) {
setFirstrequest(false);
if (props.match.params.key) {
console.log("PROPS: ", props.match.params.key);
const viewitem = viewdata1.find(
(item) =>
item.title.toLowerCase() === props.match.params.key.toLowerCase()
);
if (viewitem !== undefined && viewitem !== null) {
setCurView(1);
//setSelectedItem(viewitem)
}
}
}
const cardContentStyle = {
height: "100%",
width: "100%",
padding: 40,
};
const cardContentStyle = {
height: "100%",
width: "100%",
padding: 40,
}
const outerGridView = {
width: "100%",
marginTop: 15,
};
const outerGridView = {
width: "100%",
marginTop: 15,
}
const paperStyle = {
height: 300,
color: "white",
backgroundColor: theme.palette.surfaceColor,
color: "white",
cursor: "pointer",
display: "flex",
textAlign: "center",
};
const paperStyle = {
height: 300,
color: "white",
backgroundColor: theme.palette.surfaceColor,
color: "white",
cursor: "pointer",
display: "flex",
textAlign: "center",
}
const HandleSelection = (data) => {
const [selected, setSelected] = useState(false);
const HandleSelection = (data) => {
const [selected, setSelected] = useState(false);
var baseStyle = JSON.parse(JSON.stringify(paperStyle));
if (selected) {
baseStyle.backgroundColor = "white";
baseStyle.color = "black";
}
var baseStyle = JSON.parse(JSON.stringify(paperStyle))
if (selected) {
baseStyle.backgroundColor = "white"
baseStyle.color = "black"
}
return (
<Grid
item
xs={4}
onClick={() => {
console.log(selectedItems);
if (selected) {
const index = selectedItems.findIndex(
(item) => item.title === data.title
);
if (index >= 0) {
selectedItems.splice(index, 1);
setSelectedItems(selectedItems);
}
} else {
selectedItems.push(data);
setSelectedItems(selectedItems);
}
return (
<Grid item xs={4} onClick={() => {
console.log(selectedItems)
if (selected) {
const index = selectedItems.findIndex(item => item.title === data.title)
if (index >= 0) {
selectedItems.splice(index, 1)
setSelectedItems(selectedItems)
}
} else {
selectedItems.push(data)
setSelectedItems(selectedItems)
}
setSelected(!selected);
setSelected(!selected)
//setCurView(1)
//setSelectedItem(data)
//window.location.pathname += "/"+data.title.toLowerCase()
}}>
<Card style={baseStyle}>
<CardActionArea style={cardContentStyle}>
<CardContent>
<Typography variant="h4">
{data.title}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
)
}
//setCurView(1)
//setSelectedItem(data)
//window.location.pathname += "/"+data.title.toLowerCase()
}}
>
<Card style={baseStyle}>
<CardActionArea style={cardContentStyle}>
<CardContent>
<Typography variant="h4">{data.title}</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
);
};
const view1 = curView === 0 ?
<div>
<Typography variant="h4">
What are you interested in?
</Typography>
<Grid container style={outerGridView} spacing={3}>
{viewdata1.map(data => {
return (
HandleSelection(data)
)
})}
</Grid>
{/*
const view1 =
curView === 0 ? (
<div>
<Typography variant="h4">What are you interested in?</Typography>
<Grid container style={outerGridView} spacing={3}>
{viewdata1.map((data) => {
return HandleSelection(data);
})}
</Grid>
{/*
<Button variant="contained" color="primary" style={{height: 50, width: 300, margin: "auto",}} onClick={() => {
setCurView(1)
}}>
Continue
</Button>
*/}
</div>
: null
</div>
) : null;
const view2 = curView === 1 ?
<div>
<Typography variant="h4">
Step 2.
</Typography>
{/*
const view2 =
curView === 1 ? (
<div>
<Typography variant="h4">Step 2.</Typography>
{/*
<Grid container style={outerGridView} spacing={3}>
{selectedItem.subitems === undefined ? null :
selectedItem.subitems.map(data => {
@@ -198,20 +199,17 @@ const Workflows = (props) => {
})}
</Grid>
*/}
</div>
: null
</div>
) : null;
const baseView =
<div style={{maxWidth: 1024, margin: "auto", paddingTop: 50,}}>
{view1}
{view2}
</div>
const baseView = (
<div style={{ maxWidth: 1024, margin: "auto", paddingTop: 50 }}>
{view1}
{view2}
</div>
);
return (
<div>
{baseView}
</div>
)
}
return <div>{baseView}</div>;
};
export default Workflows
export default Workflows;