Commit acf084b5 authored by Vincent Seyller's avatar Vincent Seyller
Browse files

Show services of colocation

parent 31d6c709
......@@ -60,27 +60,25 @@ let Colocations = () => {
{status === 'error' && (<div>Error fetching data</div>)}
{status === 'success' && (
<>
<Route path='/colocations' exact>
<AddColocationForm />
<br/>
<ListGroup horizontal>
{data.map((colocation, idx) => {
return <ListGroup.Item key={idx}>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{colocation.name}</Card.Title>
<Card.Text>
Owned by {colocation.administrator.email}
</Card.Text>
{ colocation.administrator.email === user.email ?
<Button variant='danger' onClick={() => history.push('/colocation/' + colocation.id)}>Manage/View</Button> :
<Button variant='primary' onClick={() => history.push('/colocation/' + colocation.id)}>View</Button> }
</Card.Body>
</Card>
</ListGroup.Item>
})}
</ListGroup>
</Route>
<AddColocationForm />
<br/>
<ListGroup horizontal>
{data.map((colocation, idx) => {
return <ListGroup.Item key={idx}>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{colocation.name}</Card.Title>
<Card.Text>
Owned by {colocation.administrator.email}
</Card.Text>
{ colocation.administrator.email === user.email ?
<Button variant='danger' onClick={() => history.push('/colocation/' + colocation.id)}>Manage/View</Button> :
<Button variant='primary' onClick={() => history.push('/colocation/' + colocation.id)}>View</Button> }
</Card.Body>
</Card>
</ListGroup.Item>
})}
</ListGroup>
</>
)}
</Container>;
......
import {useQuery, useMutation, useQueryCache} from 'react-query';
import {useParams} from 'react-router-dom';
import {useParams, useHistory} from 'react-router-dom';
import {ListGroup, Button, Container} from 'react-bootstrap';
import {TextField, Typography} from '@material-ui/core/'
import {useState} from 'react';
......@@ -12,6 +12,7 @@ let Details = () => {
let id = parseInt(useParams().id);
let ApiURL = 'http://localhost:8080/ShareLoc/api';
let [error, setError] = useState('');
let history = useHistory();
let fetchMembers = async () =>{
let URL = ApiURL + '/colocation/' + id + '/members'
......@@ -85,6 +86,7 @@ let Details = () => {
</ListGroup.Item>
})}
</ListGroup>
<Button variant='primary' onClick={() => history.push('/colocation/' + id + '/services')}>Services</Button>
</>
)}
</Container>;
......
import {useQuery, useMutation, useQueryCache} from 'react-query';
import {useParams} from 'react-router-dom';
import {ListGroup, Button, Container} from 'react-bootstrap';
import {TextField, Typography} from '@material-ui/core/'
import {useState} from 'react';
let Services = () => {
const queryCache = useQueryCache();
let user = JSON.parse(window.localStorage.getItem('user'));
let id = parseInt(useParams().id);
let ApiURL = 'http://localhost:8080/ShareLoc/api';
let [error, setError] = useState('');
let fetchColocation = async () =>{
let URL = ApiURL + '/colocation' + id;
let res = await fetch(URL, {
headers: {
'Authorization': 'Bearer ' + window.localStorage.getItem('token')
}
});
return res.json();
};
let fetchServices = async () =>{
let URL = ApiURL + '/colocation/' + id + '/services'
let res = await fetch(URL, {
headers: {
'Authorization': 'Bearer ' + window.localStorage.getItem('token')
}
});
return res.json();
};
let createService = user => {
let URL = ApiURL + '/colocation/' + id + '/services/add?email=' + user.email;
return fetch(URL, {
method:'POST',
headers: {
'Authorization': 'Bearer ' + window.localStorage.getItem('token'),
}
});
};
// let AddServiceForm = () => {
// let [email, setEmail] = useState(null);
// const [mutationCreate] = useMutation(createService, {
// onSuccess: (data, variables, context) => {
// if(data.status === 404) {
// setError('User doesn\'t exist');
// }
// if(data.status === 409) {
// setError('User already in colocation');
// }
// queryCache.invalidateQueries('Services')
// }
// });
// const handleSubmit = event => {
// event.preventDefault();
// mutationCreate({ email: email });
// };
// return <form onSubmit={handleSubmit}>
// <TextField id='email' label='New service name' size='small' variant='outlined'
// onChange={(e)=>{setEmail(e.target.value)}}/> <Button as='input' type='submit' value='Add'></Button>
// </form>;
// };
const {data, status} = useQuery('Services', fetchServices);
// const {dataColocation, statusColocation} = fetchColocation;
if(user != null) {
return <Container>
<br/>
<br/>
{status === 'loading' && (<div>Loading data...</div>)}
{status === 'error' && (<div>Error fetching data</div>)}
{status === 'success' && (
<>
<h2>Services</h2>
<br/>
{/* <AddServiceForm /> */}
<Typography color="error"><br/>{error}</Typography>
<br/>
<ListGroup>
{data.map((service, idx) => {
return <ListGroup.Item key={idx}>
<Typography variant="h6" color="primary">{service.title}</Typography>
<Typography variant="overline" color="primary">Asked by {service.askedBy.email}</Typography>
<br/>
<Typography>{service.description}</Typography>
</ListGroup.Item>
})}
</ListGroup>
</>
)}
</Container>;
} else {
return <>
<br/>
<h1>Sign in to access this page</h1>
<br/>
</>;
}
}
export default Services;
......@@ -14,6 +14,7 @@ import Signin from './Signin'
import Signup from './Signup'
import Colocations from './Colocation'
import Details from './Details';
import Services from './Services';
let useStyles = makeStyles((theme) => ({
root: {
......@@ -137,12 +138,15 @@ let ShareLoc = () => {
</Toolbar>
</AppBar>
<Switch>
<Route path='/colocations'>
<Route exact path='/colocations'>
<Colocations />
</Route>
<Route path='/colocation/:id'>
<Route exact path='/colocation/:id'>
<Details />
</Route>
<Route exact path='/colocation/:id/services'>
<Services />
</Route>
<Route path='/signin'>
<Signin signin={signin}/>
</Route>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment