Send the 25 last messages for each channel to the client on load
This commit is contained in:
Ken-Håvard Lieng
parent
c840d51e16
commit
eedc687f18
26 changed files with 300 additions and 268 deletions
|
|
@ -1,13 +1,14 @@
|
|||
import * as actions from '../actions';
|
||||
import { findBreakpoints, messageHeight, linkify, timestamp } from '../util';
|
||||
|
||||
function initMessage(message, state) {
|
||||
message.dest = message.to || message.from || message.server;
|
||||
if (message.from && message.from.indexOf('.') !== -1) {
|
||||
message.dest = message.server;
|
||||
function initMessage(message, server, tab, state) {
|
||||
if (message.time) {
|
||||
message.time = timestamp(new Date(message.time * 1000));
|
||||
} else {
|
||||
message.time = timestamp();
|
||||
}
|
||||
|
||||
if (message.dest.charAt(0) === '#') {
|
||||
if (tab.charAt(0) === '#') {
|
||||
message.channel = true;
|
||||
}
|
||||
|
||||
|
|
@ -32,6 +33,13 @@ function initMessage(message, state) {
|
|||
return message;
|
||||
}
|
||||
|
||||
function getMessageTab(server, to) {
|
||||
if (!to || to.indexOf('.') !== -1) {
|
||||
return server;
|
||||
}
|
||||
return to;
|
||||
}
|
||||
|
||||
export function updateMessageHeight() {
|
||||
return (dispatch, getState) => dispatch({
|
||||
type: actions.UPDATE_MESSAGE_HEIGHT,
|
||||
|
|
@ -46,13 +54,12 @@ export function sendMessage(content, to, server) {
|
|||
|
||||
dispatch({
|
||||
type: actions.SEND_MESSAGE,
|
||||
server,
|
||||
tab: to,
|
||||
message: initMessage({
|
||||
from: state.servers.getIn([server, 'nick']),
|
||||
content,
|
||||
to,
|
||||
server,
|
||||
time: timestamp()
|
||||
}, state),
|
||||
content
|
||||
}, server, to, state),
|
||||
socket: {
|
||||
type: 'message',
|
||||
data: { content, to, server }
|
||||
|
|
@ -61,27 +68,29 @@ export function sendMessage(content, to, server) {
|
|||
};
|
||||
}
|
||||
|
||||
export function addMessage(message) {
|
||||
message.time = timestamp();
|
||||
export function addMessage(message, server, to) {
|
||||
const tab = getMessageTab(server, to);
|
||||
|
||||
return (dispatch, getState) => dispatch({
|
||||
type: actions.ADD_MESSAGE,
|
||||
message: initMessage(message, getState())
|
||||
server,
|
||||
tab,
|
||||
message: initMessage(message, server, tab, getState())
|
||||
});
|
||||
}
|
||||
|
||||
export function addMessages(messages) {
|
||||
const now = timestamp();
|
||||
export function addMessages(messages, server, to) {
|
||||
const tab = getMessageTab(server, to);
|
||||
|
||||
return (dispatch, getState) => {
|
||||
const state = getState();
|
||||
|
||||
messages.forEach(message => {
|
||||
initMessage(message, state).time = now;
|
||||
});
|
||||
messages.forEach(message => initMessage(message, server, message.tab || tab, state));
|
||||
|
||||
dispatch({
|
||||
type: actions.ADD_MESSAGES,
|
||||
server,
|
||||
tab,
|
||||
messages
|
||||
});
|
||||
};
|
||||
|
|
@ -89,29 +98,24 @@ export function addMessages(messages) {
|
|||
|
||||
export function broadcast(message, server, channels) {
|
||||
return addMessages(channels.map(channel => ({
|
||||
server,
|
||||
to: channel,
|
||||
tab: channel,
|
||||
content: message,
|
||||
type: 'info'
|
||||
})));
|
||||
})), server);
|
||||
}
|
||||
|
||||
export function inform(message, server, channel) {
|
||||
if (Array.isArray(message)) {
|
||||
return addMessages(message.map(line => ({
|
||||
server,
|
||||
to: channel,
|
||||
content: line,
|
||||
type: 'info'
|
||||
})));
|
||||
})), server, channel);
|
||||
}
|
||||
|
||||
return addMessage({
|
||||
server,
|
||||
to: channel,
|
||||
content: message,
|
||||
type: 'info'
|
||||
});
|
||||
}, server, channel);
|
||||
}
|
||||
|
||||
export function runCommand(command, channel, server) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { push, replace } from 'react-router-redux';
|
||||
import * as actions from '../actions';
|
||||
|
||||
export function select(server, channel, pm) {
|
||||
export function select(server, name) {
|
||||
const pm = name && name.charAt(0) !== '#';
|
||||
if (pm) {
|
||||
return push(`/${server}/pm/${channel}`);
|
||||
} else if (channel) {
|
||||
return push(`/${server}/${encodeURIComponent(channel)}`);
|
||||
return push(`/${server}/pm/${name}`);
|
||||
} else if (name) {
|
||||
return push(`/${server}/${encodeURIComponent(name)}`);
|
||||
}
|
||||
|
||||
return push(`/${server}`);
|
||||
|
|
@ -22,7 +23,7 @@ export function updateSelection() {
|
|||
dispatch(replace('/connect'));
|
||||
} else if (history.size > 0) {
|
||||
const tab = history.last();
|
||||
dispatch(select(tab.server, tab.channel || tab.user, tab.user));
|
||||
dispatch(select(tab.server, tab.name));
|
||||
} else if (servers.has(server)) {
|
||||
dispatch(select(server));
|
||||
} else {
|
||||
|
|
@ -31,18 +32,10 @@ export function updateSelection() {
|
|||
};
|
||||
}
|
||||
|
||||
export function setSelectedChannel(server, channel = null) {
|
||||
export function setSelectedTab(server, name = null) {
|
||||
return {
|
||||
type: actions.SELECT_TAB,
|
||||
server,
|
||||
channel
|
||||
};
|
||||
}
|
||||
|
||||
export function setSelectedUser(server, user = null) {
|
||||
return {
|
||||
type: actions.SELECT_TAB,
|
||||
server,
|
||||
user
|
||||
name
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ export default class ChatTitle extends PureComponent {
|
|||
handleLeaveClick = () => {
|
||||
const { tab, disconnect, part, closePrivateChat } = this.props;
|
||||
|
||||
if (tab.channel) {
|
||||
part([tab.channel], tab.server);
|
||||
} else if (tab.user) {
|
||||
closePrivateChat(tab.server, tab.user);
|
||||
if (tab.isChannel()) {
|
||||
part([tab.name], tab.server);
|
||||
} else if (tab.name) {
|
||||
closePrivateChat(tab.server, tab.name);
|
||||
} else {
|
||||
disconnect(tab.server);
|
||||
}
|
||||
|
|
@ -22,9 +22,9 @@ export default class ChatTitle extends PureComponent {
|
|||
topic = topic ? linkify(topic) : null;
|
||||
|
||||
let leaveTitle;
|
||||
if (tab.channel) {
|
||||
if (tab.isChannel()) {
|
||||
leaveTitle = 'Leave';
|
||||
} else if (tab.user) {
|
||||
} else if (tab.name) {
|
||||
leaveTitle = 'Close';
|
||||
} else {
|
||||
leaveTitle = 'Disconnect';
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
|
||||
export default class Message extends PureComponent {
|
||||
handleSenderClick = () => {
|
||||
const { message, openPrivateChat, select } = this.props;
|
||||
|
||||
openPrivateChat(message.server, message.from);
|
||||
select(message.server, message.from, true);
|
||||
};
|
||||
handleNickClick = () => this.props.onNickClick(this.props.message);
|
||||
|
||||
render() {
|
||||
const { message } = this.props;
|
||||
|
|
@ -21,7 +16,7 @@ export default class Message extends PureComponent {
|
|||
<p className={className} style={style}>
|
||||
<span className="message-time">{message.time}</span>
|
||||
{message.from &&
|
||||
<span className="message-sender" onClick={this.handleSenderClick}>
|
||||
<span className="message-sender" onClick={this.handleNickClick}>
|
||||
{' '}{message.from}
|
||||
</span>
|
||||
}{' '}{message.content}
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@ export default class MessageBox extends PureComponent {
|
|||
listRef = el => { this.list = el; };
|
||||
|
||||
updateWidth = (width) => {
|
||||
const { isChannel, setWrapWidth, updateMessageHeight } = this.props;
|
||||
const { tab, setWrapWidth, updateMessageHeight } = this.props;
|
||||
let wrapWidth = width || this.width;
|
||||
|
||||
if (width) {
|
||||
if (isChannel && window.innerWidth > 600) {
|
||||
if (tab.isChannel() && window.innerWidth > 600) {
|
||||
wrapWidth += 200;
|
||||
}
|
||||
|
||||
|
|
@ -64,15 +64,14 @@ export default class MessageBox extends PureComponent {
|
|||
};
|
||||
|
||||
renderMessage = ({ index, style, key }) => {
|
||||
const { messages, select, openPrivateChat } = this.props;
|
||||
const { messages, onNickClick } = this.props;
|
||||
|
||||
return (
|
||||
<Message
|
||||
key={key}
|
||||
message={messages.get(index)}
|
||||
select={select}
|
||||
openPrivateChat={openPrivateChat}
|
||||
style={style}
|
||||
onNickClick={onNickClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,11 +11,9 @@ export default class MessageInput extends PureComponent {
|
|||
|
||||
if (e.which === 13 && e.target.value) {
|
||||
if (e.target.value[0] === '/') {
|
||||
runCommand(e.target.value, tab.channel || tab.user, tab.server);
|
||||
} else if (tab.channel) {
|
||||
sendMessage(e.target.value, tab.channel, tab.server);
|
||||
} else if (tab.user) {
|
||||
sendMessage(e.target.value, tab.user, tab.server);
|
||||
runCommand(e.target.value, tab.name, tab.server);
|
||||
} else if (tab.name) {
|
||||
sendMessage(e.target.value, tab.name, tab.server);
|
||||
}
|
||||
|
||||
addInputHistory(e.target.value);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import TabListItem from './TabListItem';
|
|||
|
||||
export default class TabList extends PureComponent {
|
||||
handleTabClick = (server, target) => {
|
||||
this.props.select(server, target, target && target.charAt(0) !== '#');
|
||||
this.props.select(server, target);
|
||||
this.props.hideMenu();
|
||||
};
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ export default class TabList extends PureComponent {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { channels, servers, privateChats, showTabList, selected } = this.props;
|
||||
const { tab, channels, servers, privateChats, showTabList } = this.props;
|
||||
const className = showTabList ? 'tablist off-canvas' : 'tablist';
|
||||
const tabs = [];
|
||||
|
||||
|
|
@ -28,11 +28,7 @@ export default class TabList extends PureComponent {
|
|||
key={address}
|
||||
server={address}
|
||||
content={servers.getIn([address, 'name'])}
|
||||
selected={
|
||||
selected.server === address &&
|
||||
selected.channel === null &&
|
||||
selected.user === null
|
||||
}
|
||||
selected={tab.server === address && tab.name === null}
|
||||
connected={servers.getIn([address, 'connected'])}
|
||||
onClick={this.handleTabClick}
|
||||
/>
|
||||
|
|
@ -44,7 +40,7 @@ export default class TabList extends PureComponent {
|
|||
server={address}
|
||||
target={name}
|
||||
content={name}
|
||||
selected={selected.server === address && selected.channel === name}
|
||||
selected={tab.server === address && tab.name === name}
|
||||
onClick={this.handleTabClick}
|
||||
/>
|
||||
));
|
||||
|
|
@ -56,7 +52,7 @@ export default class TabList extends PureComponent {
|
|||
server={address}
|
||||
target={nick}
|
||||
content={nick}
|
||||
selected={selected.server === address && selected.user === nick}
|
||||
selected={tab.server === address && tab.name === nick}
|
||||
onClick={this.handleTabClick}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default class UserList extends PureComponent {
|
|||
const className = showUserList ? 'userlist off-canvas' : 'userlist';
|
||||
const style = {};
|
||||
|
||||
if (!tab.channel) {
|
||||
if (!tab.isChannel()) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ function mapStateToProps(state) {
|
|||
channels: state.channels,
|
||||
privateChats: state.privateChats,
|
||||
showTabList: state.ui.showTabList,
|
||||
selected: state.tab.selected
|
||||
tab: state.tab.selected
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import UserList from '../components/UserList';
|
|||
import { part } from '../actions/channel';
|
||||
import { openPrivateChat, closePrivateChat } from '../actions/privateChat';
|
||||
import { searchMessages, toggleSearch } from '../actions/search';
|
||||
import { select, setSelectedChannel, setSelectedUser } from '../actions/tab';
|
||||
import { select, setSelectedTab } from '../actions/tab';
|
||||
import { runCommand, sendMessage, updateMessageHeight } from '../actions/message';
|
||||
import { disconnect } from '../actions/server';
|
||||
import { setWrapWidth, setCharWidth } from '../actions/environment';
|
||||
|
|
@ -20,12 +20,8 @@ import { toggleUserList } from '../actions/ui';
|
|||
import * as inputHistoryActions from '../actions/inputHistory';
|
||||
|
||||
function updateSelected({ params, dispatch }) {
|
||||
if (params.channel) {
|
||||
dispatch(setSelectedChannel(params.server, params.channel));
|
||||
} else if (params.user) {
|
||||
dispatch(setSelectedUser(params.server, params.user));
|
||||
} else if (params.server) {
|
||||
dispatch(setSelectedChannel(params.server));
|
||||
if (params.server) {
|
||||
dispatch(setSelectedTab(params.server, params.channel || params.user));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,19 +52,26 @@ class Chat extends PureComponent {
|
|||
|
||||
handleSearch = phrase => {
|
||||
const { dispatch, tab } = this.props;
|
||||
if (tab.channel) {
|
||||
dispatch(searchMessages(tab.server, tab.channel, phrase));
|
||||
if (tab.isChannel()) {
|
||||
dispatch(searchMessages(tab.server, tab.name, phrase));
|
||||
}
|
||||
};
|
||||
|
||||
handleMessageNickClick = message => {
|
||||
const { tab } = this.props;
|
||||
|
||||
this.props.openPrivateChat(tab.server, message.from);
|
||||
this.props.select(tab.server, message.from);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title, tab, channel, search, history,
|
||||
messages, users, showUserList, inputActions } = this.props;
|
||||
|
||||
let chatClass;
|
||||
if (tab.channel) {
|
||||
if (tab.isChannel()) {
|
||||
chatClass = 'chat-channel';
|
||||
} else if (tab.user) {
|
||||
} else if (tab.name) {
|
||||
chatClass = 'chat-private';
|
||||
} else {
|
||||
chatClass = 'chat-server';
|
||||
|
|
@ -92,12 +95,10 @@ class Chat extends PureComponent {
|
|||
/>
|
||||
<MessageBox
|
||||
messages={messages}
|
||||
isChannel={tab.channel !== null}
|
||||
tab={tab}
|
||||
setWrapWidth={this.props.setWrapWidth}
|
||||
updateMessageHeight={this.props.updateMessageHeight}
|
||||
select={this.props.select}
|
||||
openPrivateChat={this.props.openPrivateChat}
|
||||
onNickClick={this.handleMessageNickClick}
|
||||
/>
|
||||
<MessageInput
|
||||
tab={tab}
|
||||
|
|
@ -136,13 +137,13 @@ const historySelector = state => {
|
|||
const selectedMessagesSelector = createSelector(
|
||||
tabSelector,
|
||||
messageSelector,
|
||||
(tab, messages) => messages.getIn([tab.server, tab.channel || tab.user || tab.server], List())
|
||||
(tab, messages) => messages.getIn([tab.server, tab.name || tab.server], List())
|
||||
);
|
||||
|
||||
const selectedChannelSelector = createSelector(
|
||||
tabSelector,
|
||||
channelSelector,
|
||||
(tab, channels) => channels.getIn([tab.server, tab.channel], Map())
|
||||
(tab, channels) => channels.getIn([tab.server, tab.name], Map())
|
||||
);
|
||||
|
||||
const usersSelector = createSelector(
|
||||
|
|
@ -153,7 +154,7 @@ const usersSelector = createSelector(
|
|||
const titleSelector = createSelector(
|
||||
tabSelector,
|
||||
serverSelector,
|
||||
(tab, servers) => tab.channel || tab.user || servers.getIn([tab.server, 'name'])
|
||||
(tab, servers) => tab.name || servers.getIn([tab.server, 'name'])
|
||||
);
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import createRoutes from './routes';
|
|||
import Socket from './util/Socket';
|
||||
import handleSocket from './socket';
|
||||
import Root from './containers/Root';
|
||||
import { addMessages } from './actions/message';
|
||||
|
||||
const host = DEV ? `${window.location.hostname}:1337` : window.location.host;
|
||||
const socket = new Socket(host);
|
||||
|
|
@ -46,6 +47,11 @@ if (env.users) {
|
|||
});
|
||||
}
|
||||
|
||||
if (env.messages) {
|
||||
const { messages, server, to } = env.messages;
|
||||
store.dispatch(addMessages(messages, server, to));
|
||||
}
|
||||
|
||||
handleSocket(socket, store);
|
||||
|
||||
const routes = createRoutes();
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@ import * as actions from '../actions';
|
|||
|
||||
const Message = Record({
|
||||
id: null,
|
||||
server: null,
|
||||
from: null,
|
||||
to: null,
|
||||
content: '',
|
||||
time: null,
|
||||
type: null,
|
||||
|
|
@ -17,46 +15,40 @@ const Message = Record({
|
|||
breakpoints: null
|
||||
});
|
||||
|
||||
function addMessage(state, message) {
|
||||
return state.updateIn([message.server, message.dest], List(),
|
||||
list => list.push(new Message(message)));
|
||||
function addMessage(state, { server, tab, message }) {
|
||||
return state.updateIn([server, tab], List(), list => list.push(new Message(message)));
|
||||
}
|
||||
|
||||
export default createReducer(Map(), {
|
||||
[actions.SEND_MESSAGE](state, action) {
|
||||
return addMessage(state, action.message);
|
||||
},
|
||||
[actions.SEND_MESSAGE]: addMessage,
|
||||
[actions.ADD_MESSAGE]: addMessage,
|
||||
|
||||
[actions.ADD_MESSAGE](state, action) {
|
||||
return addMessage(state, action.message);
|
||||
},
|
||||
|
||||
[actions.ADD_MESSAGES](state, action) {
|
||||
[actions.ADD_MESSAGES](state, { server, tab, messages }) {
|
||||
return state.withMutations(s =>
|
||||
action.messages.forEach(message =>
|
||||
addMessage(s, message)
|
||||
messages.forEach(message =>
|
||||
s.updateIn([server, tab], List(), list => list.push(new Message(message)))
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
[actions.DISCONNECT](state, action) {
|
||||
return state.delete(action.server);
|
||||
[actions.DISCONNECT](state, { server }) {
|
||||
return state.delete(server);
|
||||
},
|
||||
|
||||
[actions.PART](state, action) {
|
||||
[actions.PART](state, { server, channels }) {
|
||||
return state.withMutations(s =>
|
||||
action.channels.forEach(channel =>
|
||||
s.deleteIn([action.server, channel])
|
||||
channels.forEach(channel =>
|
||||
s.deleteIn([server, channel])
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
[actions.UPDATE_MESSAGE_HEIGHT](state, action) {
|
||||
[actions.UPDATE_MESSAGE_HEIGHT](state, { wrapWidth, charWidth }) {
|
||||
return state.withMutations(s =>
|
||||
s.forEach((server, serverKey) =>
|
||||
server.forEach((target, targetKey) =>
|
||||
target.forEach((message, index) => s.setIn([serverKey, targetKey, index, 'height'],
|
||||
messageHeight(message, action.wrapWidth, action.charWidth, 6 * action.charWidth))
|
||||
messageHeight(message, wrapWidth, charWidth, 6 * charWidth))
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,10 +5,13 @@ import * as actions from '../actions';
|
|||
|
||||
const Tab = Record({
|
||||
server: null,
|
||||
channel: null,
|
||||
user: null
|
||||
name: null
|
||||
});
|
||||
|
||||
Tab.prototype.isChannel = function isChannel() {
|
||||
return this.name && this.name.charAt(0) === '#';
|
||||
};
|
||||
|
||||
const State = Record({
|
||||
selected: new Tab(),
|
||||
history: List()
|
||||
|
|
@ -24,13 +27,13 @@ export default createReducer(new State(), {
|
|||
|
||||
[actions.PART](state, action) {
|
||||
return state.set('history', state.history.filter(tab =>
|
||||
!(tab.server === action.server && tab.channel === action.channels[0])
|
||||
!(tab.server === action.server && tab.name === action.channels[0])
|
||||
));
|
||||
},
|
||||
|
||||
[actions.CLOSE_PRIVATE_CHAT](state, action) {
|
||||
return state.set('history', state.history.filter(tab =>
|
||||
!(tab.server === action.server && tab.user === action.nick)
|
||||
!(tab.server === action.server && tab.name === action.nick)
|
||||
));
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -22,11 +22,15 @@ function findChannels(state, server, user) {
|
|||
export default function handleSocket(socket, { dispatch, getState }) {
|
||||
const handlers = {
|
||||
message(message) {
|
||||
dispatch(addMessage(message));
|
||||
dispatch(addMessage(message, message.server, message.to));
|
||||
},
|
||||
|
||||
pm(message) {
|
||||
dispatch(addMessage(message));
|
||||
dispatch(addMessage(message, message.server, message.from));
|
||||
},
|
||||
|
||||
messages({ messages, server, to }) {
|
||||
dispatch(addMessages(messages, server, to));
|
||||
},
|
||||
|
||||
join(data) {
|
||||
|
|
@ -67,11 +71,7 @@ export default function handleSocket(socket, { dispatch, getState }) {
|
|||
},
|
||||
|
||||
motd({ content, server }) {
|
||||
dispatch(addMessages(content.map(line => ({
|
||||
server,
|
||||
to: server,
|
||||
content: line
|
||||
}))));
|
||||
dispatch(addMessages(content.map(line => ({ content: line })), server));
|
||||
},
|
||||
|
||||
whois(data) {
|
||||
|
|
@ -84,7 +84,7 @@ export default function handleSocket(socket, { dispatch, getState }) {
|
|||
`Host: ${data.host}`,
|
||||
`Server: ${data.server}`,
|
||||
`Channels: ${data.channels}`
|
||||
], tab.server, tab.channel));
|
||||
], tab.server, tab.name));
|
||||
},
|
||||
|
||||
print({ server, message }) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Backoff from 'backo';
|
|||
export default class Socket {
|
||||
constructor(host) {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
this.url = `${protocol}://${host}/ws`;
|
||||
this.url = `${protocol}://${host}/ws?path=${window.location.pathname}`;
|
||||
|
||||
this.connectTimeout = 20000;
|
||||
this.pingTimeout = 30000;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue