diff --git a/src/components/Board.js b/src/components/Board.js
index 9fa80544901693e571527bf53200af43bb96ef6e..1d06ee1309e818e091bc215aa6f7fb3a5a8c07ee 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -1,157 +1,62 @@
import React, { useState, useEffect } from 'react';
-import {withRouter} from 'react-router';
+import { withRouter } from 'react-router';
import axios from 'axios';
import { Container, Message, TextArea, Button, Grid, Divider } from 'semantic-ui-react';
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>
);
};
diff --git a/src/components/BoardsList.js b/src/components/BoardsList.js
index 778a5bcf246bb6f4a5d3b9a1f5acb931434d335c..f87c0cbc5eaa89b759a2a3926cdc9f25b3991d8e 100644
--- a/src/components/BoardsList.js
+++ b/src/components/BoardsList.js
@@ -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>
);
};
diff --git a/src/components/Login.js b/src/components/Login.js
index 88269f880d8d79235f648a9c0628a4dc5b8d8bc0..d6d49418e6a2e80593b55a9c2c1d03e19f2ca2a4 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -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>
);
};