Skip to content
Snippets Groups Projects
Commit 16f2b70d authored by safarte's avatar safarte
Browse files

remove code

parent 697860e4
No related branches found
No related tags found
No related merge requests found
......@@ -5,153 +5,58 @@ import { Container, Message, TextArea, Button, Grid, Divider } from 'semantic-ui
const API_URL = 'http://138.195.142.10';
// Posts a message on a board
const postMessage = (message, board) => {
const request_options = {
url : `${API_URL}/messages`,
method : 'POST',
data: {
userId: parseInt(localStorage.getItem('userId')) || 1,
content: message,
boardId: parseInt(board)
}
};
return axios.request(request_options);
};
// Gets the list of messages from a board
const getMessagesList = async (board) => {
const request_options = {
method: 'GET',
url: `${API_URL}/messages`,
params: {
board: board
}
};
return axios.request(request_options).then(resp => resp.data);
};
// Gets the list of users
const getUserList = async () => {
const request_options = {
method: 'GET',
url: `${API_URL}/users`
};
return axios.request(request_options).then(resp => resp.data);
};
// Gets the data from a board
const getBoard = async (id) => {
const request_options = {
method: 'GET',
url: `${API_URL}/boards`,
params: {
id: id
}
};
return axios.request(request_options).then(resp => resp.data);
};
const Board = (props) => {
const [id, setId] = useState(-1);
const [board, setBoard] = useState([]);
useEffect(
() => {
const boardId = props.location.pathname.split('/')[props.location.pathname.split('/').length-1] || 1;
setId(boardId);
},
[props.location.pathname]
);
useEffect(
() => {
getBoard(id).then(data => setBoard(data))
},
[id]
);
// Get the board's id and data
return (
<div>
<Container textAlign='left'>
<Container textAlign='center'><h1>{board[id-1] ? board[id-1].name : ''}</h1></Container>
<Divider/>
<Container>
<MessageWriter board={id}/>
<Divider/>
</Container>
<Container>
<MessageList board={id}/>
</Container>
</Container>
</div>
);
};
const MessageList = (props) => {
const [messages, setMessages] = useState([]);
const [users, setUsers] = useState([]);
useEffect(
() => {
getMessagesList(props.board).then(data => setMessages(data));
getUserList().then(data => setUsers(data));
},
[props.board]
);
// Get the list of users and initialize the message list
// Fetch messages every 1 second
useEffect(
() => {
const timer = setTimeout(() => {
getMessagesList(props.board).then(data => setMessages(data));
}, 1000);
return () => clearTimeout(timer);
},
[messages, props.board]
);
return (
<div>
{messages.map(message => (
<MessageDisplay message={message} user={users[message.userId-1]}/>
))}
</div>
);
};
const MessageDisplay = (props) => {
return(
<Container>
<Message
key={props.message.id}
header={(props.user ? props.user.username : '') + '@' + props.message.updatedAt.split('T')[1].split('.')[0]}
content={props.message.content}
/>
<Divider/>
</Container>
<div>
</div>
);
};
const MessageWriter = (props) => {
const [message, setMessage] = useState('');
// Initialize a message in the state
return (
<div>
<Container textAlign='center'>
<Grid>
<Grid.Column width='16'>
<Grid.Row>
<TextArea style={{width: '100%'}}onChange={(e) => {setMessage(e.target.value)}} value={message}/>
</Grid.Row>
<Grid.Row>
<Button
style={{width: '100%'}}
onClick={() => {if (message.length) {
setMessage('');
postMessage(message, props.board);
}}}
>
Send
</Button>
</Grid.Row>
</Grid.Column>
</Grid>
</Container>
</div>
);
};
......
......@@ -6,34 +6,16 @@ import { Form, Header } from 'semantic-ui-react';
const API_URL = 'http://138.195.142.10';
// Gets the list of boards
const getBoardList = async () => {
const request_options = {
method: 'GET',
url: `${API_URL}/boards`
}
return axios.request(request_options).then(resp => resp.data);
};
const BoardsList = () => {
const [boards, setBoards] = useState([]);
useEffect(
() => {
getBoardList().then(data => setBoards(data, []));
},
[]
);
// Initialize the list of boards
return (
<div style={{ margin: 'auto', maxWidth: '50%', textAlign: 'center', marginTop: '2%' }}>
<Header as='h1'>Boards</Header>
<Form style={{ marginTop: '8%' }}>
{boards.map(board => (
<Link style={{ margin: '1%' }} to={`/board/${board.id}`}>
<Form.Button fluid content={board.name} />
</Link>
))}
</Form>
<div>
</div>
);
};
......
......@@ -5,81 +5,21 @@ import { Form, Image } from 'semantic-ui-react';
const API_URL = 'http://138.195.142.10';
// Attempts to login and if successful stores the userId in localStorage and redirects to the boards list
const handleLogin = async (username, password) => {
const request_options = {
method: 'POST',
url: `${API_URL}/login`,
data: {
username,
password
}
}
return axios.request(request_options).then(resp => {
const res = resp.data;
if (res.length > 0) {
localStorage.setItem('userId', res[0].id);
return window.location.replace('/boards');
}
});
};
// Attempts to register and if successful stores the userId in localStorage and redirects to the boards list
const handleRegister = async (username, password) => {
const request_options = {
method: 'POST',
url: `${API_URL}/users`,
data: {
username,
password
}
}
if (username && password) {
return axios.request(request_options).then(resp => {
if (resp.status === 200) {
console.log(resp);
localStorage.setItem('userId', resp.data.id);
return window.location.replace('/boards');
}
});
}
};
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
// Initializes username and password in the state
return (
<div style={{ margin: 'auto', maxWidth: '40%', textAlign: 'left' }}>
<Image
style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '20%', marginBottom: '10%' }}
src='https://gitlab.viarezo.fr/uploads/-/system/project/avatar/1987/react_round_red.png' size='medium'
/>
<Form>
<Form.Input
label='Username'
placeholder='Username'
value={username}
onChange={({ target }) => setUsername(target.value)}
/>
<Form.Input
label='Password'
placeholder='Password'
type='password'
value={password}
onChange={({ target }) => setPassword(target.value)}
/>
<Form.Group widths={2}>
<Form.Button
fluid
content='Login'
onClick={() => handleLogin(username, password)}
/>
<Form.Button
fluid
content='Register'
onClick={() => handleRegister(username, password)}
/>
</Form.Group>
</Form>
<div>
</div>
);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment