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

remove code

parent 697860e4
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/components/Board.js
+ 16
− 111
View file @ 16f2b70d
...@@ -5,153 +5,58 @@ import { Container, Message, TextArea, Button, Grid, Divider } from 'semantic-ui ...@@ -5,153 +5,58 @@ import { Container, Message, TextArea, Button, Grid, Divider } from 'semantic-ui
const API_URL = 'http://138.195.142.10'; const API_URL = 'http://138.195.142.10';
// Posts a message on a board
const postMessage = (message, 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 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 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 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 Board = (props) => {
const [id, setId] = useState(-1); // Get the board's id and data
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]
);
return ( return (
<div> <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> </div>
); );
}; };
const MessageList = (props) => { const MessageList = (props) => {
const [messages, setMessages] = useState([]); // Get the list of users and initialize the message list
const [users, setUsers] = useState([]);
// Fetch messages every 1 second
useEffect(
() => {
getMessagesList(props.board).then(data => setMessages(data));
getUserList().then(data => setUsers(data));
},
[props.board]
);
useEffect(
() => {
const timer = setTimeout(() => {
getMessagesList(props.board).then(data => setMessages(data));
}, 1000);
return () => clearTimeout(timer);
},
[messages, props.board]
);
return ( return (
<div> <div>
{messages.map(message => (
<MessageDisplay message={message} user={users[message.userId-1]}/>
))}
</div> </div>
); );
}; };
const MessageDisplay = (props) => { const MessageDisplay = (props) => {
return( return(
<Container> <div>
<Message </div>
key={props.message.id}
header={(props.user ? props.user.username : '') + '@' + props.message.updatedAt.split('T')[1].split('.')[0]}
content={props.message.content}
/>
<Divider/>
</Container>
); );
}; };
const MessageWriter = (props) => { const MessageWriter = (props) => {
const [message, setMessage] = useState(''); // Initialize a message in the state
return ( return (
<div> <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> </div>
); );
}; };
......
src/components/BoardsList.js
+ 4
− 22
View file @ 16f2b70d
...@@ -6,34 +6,16 @@ import { Form, Header } from 'semantic-ui-react'; ...@@ -6,34 +6,16 @@ import { Form, Header } from 'semantic-ui-react';
const API_URL = 'http://138.195.142.10'; const API_URL = 'http://138.195.142.10';
// Gets the list of boards
const getBoardList = async () => { const getBoardList = async () => {
const request_options = {
method: 'GET',
url: `${API_URL}/boards`
}
return axios.request(request_options).then(resp => resp.data);
}; };
const BoardsList = () => { const BoardsList = () => {
const [boards, setBoards] = useState([]); // Initialize the list of boards
useEffect(
() => {
getBoardList().then(data => setBoards(data, []));
},
[]
);
return ( return (
<div style={{ margin: 'auto', maxWidth: '50%', textAlign: 'center', marginTop: '2%' }}> <div>
<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>
); );
}; };
......
src/components/Login.js
+ 6
− 66
View file @ 16f2b70d
...@@ -5,81 +5,21 @@ import { Form, Image } from 'semantic-ui-react'; ...@@ -5,81 +5,21 @@ import { Form, Image } from 'semantic-ui-react';
const API_URL = 'http://138.195.142.10'; 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 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 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 Login = () => {
const [username, setUsername] = useState(''); // Initializes username and password in the state
const [password, setPassword] = useState('');
return ( return (
<div style={{ margin: 'auto', maxWidth: '40%', textAlign: 'left' }}> <div>
<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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment