shuffle-cracked/frontend/src/Webhooks.js

import React, { useEffect} from 'react';

import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import ButtonBase from '@material-ui/core/ButtonBase';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';

import WebhookImage from './assets/img/webhook.png';
import KafkaImage from './assets/img/kafka.png';

const Webhooks = (props) => {
  	const { globalUrl, isLoaded } = props;
	const validtypes = ["webhook"]

	//const [hooks, setSchedules] = React.useState(hookdata);
	const [hooks, setHooks] = React.useState([]);
	const [modalOpen, setModalOpen] = React.useState(false);
	const [newHookName, setNewHookName] = React.useState("");
	const [newHookDescription, setNewHookDescription] = React.useState("");
	const [newHookType, setNewHookType] = React.useState("");
	const [firstrequest, setFirstrequest] = React.useState(true);
	const [, setModalError] = React.useState("");

	useEffect(() => {
		if (firstrequest) {
			setFirstrequest(false)
			getAvailableHooks()		
		}
	})

	const newHook = () => {
		if (newHookName.length === 0) {
			setModalError("Missing name in modal")
			return
		}

		if (!validtypes.includes(newHookType)) {
			setModalError(newHookType + " is not a valid type. Try this: "+validtypes)
		}

		fetch(globalUrl+"/api/v1/hooks/new", {
			method: "POST",
			headers: {"content-type": "application/json"},
			body: JSON.stringify({"name": newHookName, "description": newHookDescription, "type": newHookType}),
	  		credentials: "include",
    	})
		.then((response) => response.json())
    	.then((responseJson) => {
			console.log(responseJson)
			setHooks([])
    	})
		.catch(error => {
    		console.log(error)
		});
	}

	const getAvailableHooks = () => {
		fetch(globalUrl+"/api/v1/hooks", {
    	  	method: 'GET',
				headers: {
					'Content-Type': 'application/json',
					'Accept': 'application/json',
				},
	  			credentials: "include",
    		})
		.then((response) => response.json())
    	.then((responseJson) => {
			setHooks(responseJson)
    	})
		.catch(error => {
    		console.log(error)
			// window.location.pathname = "/"
		});
	}

	const deleteHook = (id) => {
		if (id === undefined) {
			return
		}

		fetch(globalUrl+"/api/v1/hooks/"+id+"/delete", {
    	  	method: 'DELETE',
				headers: {
					'Content-Type': 'application/json',
					'Accept': 'application/json',
				},
	  			credentials: "include",
    		})
		.then((response) => response.json())
    	.then((responseJson) => {
			setHooks([])
    	})
		.catch(error => {
    		console.log(error)
		});
	}

	const bodyDivStyle = {
		marginLeft: "20px", 
		marginRight: "20px", 
		width: "1350px",
		minWidth: "1350px",
		maxWidth: "1350px",
	}

	const hookApp = (app) => {

		// Might be more options, but should be webhook or MQ
		const appPicture = app.type === "webhook" ? 
			<img
				src={WebhookImage}
				alt="webhook"
				width="100px"
				height="100px"
			/>
			: 
			<img
				src={KafkaImage}
				alt="MQ"
				width="100px"
				height="100px"
			/>

		return(
			<Grid container spacing={2} style={{margin: "10px 10px 10px 10px"}}>
				<Grid item style={{marginRight: "10px"}}>
					<ButtonBase>
						{appPicture}
					</ButtonBase>
				</Grid>
				{splitter}
				<Grid item xs={12} sm container style={{marginLeft: "10px"}}>
					<Grid item xs container direction="column" spacing={2}>
						<Grid item xs>
							<div>
								<h2>{app.info.name}</h2>
							</div>
							<div>
								Desc: {app.info.description}	
							</div>
							<div>
								Status: {app.status}	
							</div>
						</Grid>
						 <Grid item>
                  			{app.action}
              			</Grid>
					</Grid>
				</Grid>
			</Grid>
		)
	}

	const splitter = <div style={{width: "1px", backgroundColor: "grey", margin:"5px 5px 5px 5px"}} />

	const hrefStyle = {
		color: "#385f71", 
		textDecoration: "none"
	}

	// FIXME - add Schedule modal
	const hookPaper = (hook) => {
		return(
			<div>
				<Paper style={{maxWidth: "500px", display: "flex", padding: "10px 10px 10px 10px", marginTop: "10px"}}>
					<div style={{flex: "5"}}>
						{hookApp(hook)}
					</div>
					{splitter}
					<div style={{flex: "1"}}>
						<List style={{backgroundColor: "#ffffff"}}>
       						<ListItem style={{flex: "1", textAlign: "center"}}>
								<a href={"/webhooks/"+hook.id} style={hrefStyle} >
									<Button
										disabled={false}
										color="primary"
									>
										Edit
									</Button>
								</a>
							</ListItem>
       						<ListItem style={{flex: "1", textAlign: "center"}}>
								<Button
									disabled={false}
									onClick={() => {deleteHook(hook.id)}}
									color="primary"
								>Delete</Button>
       						</ListItem>
						</List>
					</div>
				</Paper>
			</div>
		)
	}

	const modalView = modalOpen ? 
		<Dialog modal 
			open={modalOpen} 
			onClose={() => {setModalOpen(false)}}
		>
			<DialogTitle>Hook configuration</DialogTitle>
			<DialogContent>
				<TextField
					onChange={(event) => {setNewHookName(event.target.value)}}
					color="primary"
					placeholder="Name"
					margin="dense"
					fullWidth
				  />
				<TextField
					onChange={(event) => {setNewHookDescription(event.target.value)}}
					color="primary"
					placeholder="Description"
					margin="dense"
					fullWidth
				  />

				<Select
					value={newHookType}
					onChange={(event) => {setNewHookType(event.target.value)}}
					fullWidth="true"
				>
					{validtypes.map(data => (
						<MenuItem value={data}>
							{data}
						</MenuItem>
					))}
				</Select>
			</DialogContent>
			<DialogActions>
	          	<Button onClick={() => setModalOpen(false)} color="primary">
	            	Cancel
	          	</Button>
	          	<Button disabled={newHookName.length === 0 || !validtypes.includes(newHookType)} onClick={() => {newHook(); setModalOpen(false)}} color="primary">
	            	Submit	
	          	</Button>
			</DialogActions>
		</Dialog>
		: null

	const hookmap = hooks.length > 0 ? 
		<div>
			{hooks.map(data => (
				hookPaper(data)
			))}
		</div>
		: 
		<div style={{marginTop: "10%", marginLeft: "50%"}} >
			<Button
				disabled={false}
				onClick={() => {setModalOpen(true)}}
				variant="outlined" 
				color="primary"
			>CREATE NEW HOOK</Button>
		</div>

	const hookView = 
		<div style={bodyDivStyle}>
			<Button
				disabled={false}
				onClick={() => {setModalOpen(true)}}
				color="primary"
			>New</Button>
			{hookmap}	
		</div>

	const loadedCheck = isLoaded ? 
		<div>
			{modalView}
			{hookView}
		</div>
		:
		<div>
		</div>


	// Maybe use gridview or something, idk
	return (
		<div>	
			{loadedCheck}
		</div>	
	)
}

export default Webhooks