# Conflicts: # app/soapbox/features/account/components/header.jsmerge-requests/155/head
commit
c2273ac8de
@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"configs": [
|
||||||
|
{
|
||||||
|
"group": ":pleroma",
|
||||||
|
"key": ":frontend_configurations",
|
||||||
|
"value": [
|
||||||
|
{
|
||||||
|
"tuple": [
|
||||||
|
":soapbox_fe",
|
||||||
|
{
|
||||||
|
"logo": "blob:http://localhost:3036/0cdfa863-6889-4199-b870-4942cedd364f",
|
||||||
|
"banner": "blob:http://localhost:3036/a835afed-6078-45bd-92b4-7ffd858c3eca",
|
||||||
|
"brandColor": "#254f92",
|
||||||
|
"customCss": [
|
||||||
|
"/instance/static/custom.css"
|
||||||
|
],
|
||||||
|
"promoPanel": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"icon": "globe",
|
||||||
|
"text": "blog",
|
||||||
|
"url": "https://teci.world/blog"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "globe",
|
||||||
|
"text": "book",
|
||||||
|
"url": "https://teci.world/book"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"extensions": {
|
||||||
|
"patron": false
|
||||||
|
},
|
||||||
|
"defaultSettings": {
|
||||||
|
"autoPlayGif": false
|
||||||
|
},
|
||||||
|
"navlinks": {
|
||||||
|
"homeFooter": [
|
||||||
|
{
|
||||||
|
"title": "about",
|
||||||
|
"url": "/instance/about/index.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "tos",
|
||||||
|
"url": "/instance/about/tos.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"logo": "blob:http://localhost:3036/0cdfa863-6889-4199-b870-4942cedd364f",
|
||||||
|
"banner": "blob:http://localhost:3036/a835afed-6078-45bd-92b4-7ffd858c3eca",
|
||||||
|
"brandColor": "#254f92",
|
||||||
|
"customCss": [
|
||||||
|
"/instance/static/custom.css"
|
||||||
|
],
|
||||||
|
"promoPanel": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"icon": "globe",
|
||||||
|
"text": "blog",
|
||||||
|
"url": "https://teci.world/blog"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "globe",
|
||||||
|
"text": "book",
|
||||||
|
"url": "https://teci.world/book"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"extensions": {
|
||||||
|
"patron": false
|
||||||
|
},
|
||||||
|
"defaultSettings": {
|
||||||
|
"autoPlayGif": false
|
||||||
|
},
|
||||||
|
"navlinks": {
|
||||||
|
"homeFooter": [
|
||||||
|
{
|
||||||
|
"title": "about",
|
||||||
|
"url": "/instance/about/index.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "tos",
|
||||||
|
"url": "/instance/about/tos.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,35 @@
|
|||||||
|
import api from '../api';
|
||||||
|
|
||||||
|
export const ADMIN_CONFIG_UPDATE_REQUEST = 'ADMIN_CONFIG_UPDATE_REQUEST';
|
||||||
|
export const ADMIN_CONFIG_UPDATE_SUCCESS = 'ADMIN_CONFIG_UPDATE_SUCCESS';
|
||||||
|
export const ADMIN_CONFIG_UPDATE_FAIL = 'ADMIN_CONFIG_UPDATE_FAIL';
|
||||||
|
|
||||||
|
export const ADMIN_REPORTS_FETCH_REQUEST = 'ADMIN_REPORTS_FETCH_REQUEST';
|
||||||
|
export const ADMIN_REPORTS_FETCH_SUCCESS = 'ADMIN_REPORTS_FETCH_SUCCESS';
|
||||||
|
export const ADMIN_REPORTS_FETCH_FAIL = 'ADMIN_REPORTS_FETCH_FAIL';
|
||||||
|
|
||||||
|
export function updateAdminConfig(params) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
dispatch({ type: ADMIN_CONFIG_UPDATE_REQUEST });
|
||||||
|
return api(getState)
|
||||||
|
.post('/api/pleroma/admin/config', params)
|
||||||
|
.then(response => {
|
||||||
|
dispatch({ type: ADMIN_CONFIG_UPDATE_SUCCESS, config: response.data });
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: ADMIN_CONFIG_UPDATE_FAIL, error });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchReports(params) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
dispatch({ type: ADMIN_REPORTS_FETCH_REQUEST, params });
|
||||||
|
return api(getState)
|
||||||
|
.get('/api/pleroma/admin/reports', { params })
|
||||||
|
.then(({ data }) => {
|
||||||
|
dispatch({ type: ADMIN_REPORTS_FETCH_SUCCESS, data, params });
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: ADMIN_REPORTS_FETCH_FAIL, error, params });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
@ -0,0 +1,152 @@
|
|||||||
|
import api from '../api';
|
||||||
|
import { getSettings, changeSetting } from 'soapbox/actions/settings';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
import { Map as ImmutableMap } from 'immutable';
|
||||||
|
|
||||||
|
export const CHATS_FETCH_REQUEST = 'CHATS_FETCH_REQUEST';
|
||||||
|
export const CHATS_FETCH_SUCCESS = 'CHATS_FETCH_SUCCESS';
|
||||||
|
export const CHATS_FETCH_FAIL = 'CHATS_FETCH_FAIL';
|
||||||
|
|
||||||
|
export const CHAT_MESSAGES_FETCH_REQUEST = 'CHAT_MESSAGES_FETCH_REQUEST';
|
||||||
|
export const CHAT_MESSAGES_FETCH_SUCCESS = 'CHAT_MESSAGES_FETCH_SUCCESS';
|
||||||
|
export const CHAT_MESSAGES_FETCH_FAIL = 'CHAT_MESSAGES_FETCH_FAIL';
|
||||||
|
|
||||||
|
export const CHAT_MESSAGE_SEND_REQUEST = 'CHAT_MESSAGE_SEND_REQUEST';
|
||||||
|
export const CHAT_MESSAGE_SEND_SUCCESS = 'CHAT_MESSAGE_SEND_SUCCESS';
|
||||||
|
export const CHAT_MESSAGE_SEND_FAIL = 'CHAT_MESSAGE_SEND_FAIL';
|
||||||
|
|
||||||
|
export const CHAT_FETCH_REQUEST = 'CHAT_FETCH_REQUEST';
|
||||||
|
export const CHAT_FETCH_SUCCESS = 'CHAT_FETCH_SUCCESS';
|
||||||
|
export const CHAT_FETCH_FAIL = 'CHAT_FETCH_FAIL';
|
||||||
|
|
||||||
|
export const CHAT_READ_REQUEST = 'CHAT_READ_REQUEST';
|
||||||
|
export const CHAT_READ_SUCCESS = 'CHAT_READ_SUCCESS';
|
||||||
|
export const CHAT_READ_FAIL = 'CHAT_READ_FAIL';
|
||||||
|
|
||||||
|
export function fetchChats() {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
dispatch({ type: CHATS_FETCH_REQUEST });
|
||||||
|
return api(getState).get('/api/v1/pleroma/chats').then(({ data }) => {
|
||||||
|
dispatch({ type: CHATS_FETCH_SUCCESS, chats: data });
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: CHATS_FETCH_FAIL, error });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchChatMessages(chatId) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
dispatch({ type: CHAT_MESSAGES_FETCH_REQUEST, chatId });
|
||||||
|
return api(getState).get(`/api/v1/pleroma/chats/${chatId}/messages`).then(({ data }) => {
|
||||||
|
dispatch({ type: CHAT_MESSAGES_FETCH_SUCCESS, chatId, chatMessages: data });
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: CHAT_MESSAGES_FETCH_FAIL, chatId, error });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function sendChatMessage(chatId, params) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const uuid = uuidv4();
|
||||||
|
const me = getState().get('me');
|
||||||
|
dispatch({ type: CHAT_MESSAGE_SEND_REQUEST, chatId, params, uuid, me });
|
||||||
|
return api(getState).post(`/api/v1/pleroma/chats/${chatId}/messages`, params).then(({ data }) => {
|
||||||
|
dispatch({ type: CHAT_MESSAGE_SEND_SUCCESS, chatId, chatMessage: data, uuid });
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: CHAT_MESSAGE_SEND_FAIL, chatId, error, uuid });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function openChat(chatId) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const state = getState();
|
||||||
|
const panes = getSettings(state).getIn(['chats', 'panes']);
|
||||||
|
const idx = panes.findIndex(pane => pane.get('chat_id') === chatId);
|
||||||
|
|
||||||
|
dispatch(markChatRead(chatId));
|
||||||
|
|
||||||
|
if (idx > -1) {
|
||||||
|
return dispatch(changeSetting(['chats', 'panes', idx, 'state'], 'open'));
|
||||||
|
} else {
|
||||||
|
const newPane = ImmutableMap({ chat_id: chatId, state: 'open' });
|
||||||
|
return dispatch(changeSetting(['chats', 'panes'], panes.push(newPane)));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function closeChat(chatId) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const panes = getSettings(getState()).getIn(['chats', 'panes']);
|
||||||
|
const idx = panes.findIndex(pane => pane.get('chat_id') === chatId);
|
||||||
|
|
||||||
|
if (idx > -1) {
|
||||||
|
return dispatch(changeSetting(['chats', 'panes'], panes.delete(idx)));
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toggleChat(chatId) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const panes = getSettings(getState()).getIn(['chats', 'panes']);
|
||||||
|
const [idx, pane] = panes.findEntry(pane => pane.get('chat_id') === chatId);
|
||||||
|
|
||||||
|
if (idx > -1) {
|
||||||
|
const state = pane.get('state') === 'minimized' ? 'open' : 'minimized';
|
||||||
|
if (state === 'open') dispatch(markChatRead(chatId));
|
||||||
|
return dispatch(changeSetting(['chats', 'panes', idx, 'state'], state));
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toggleMainWindow() {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const main = getSettings(getState()).getIn(['chats', 'mainWindow']);
|
||||||
|
const state = main === 'minimized' ? 'open' : 'minimized';
|
||||||
|
return dispatch(changeSetting(['chats', 'mainWindow'], state));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchChat(chatId) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
dispatch({ type: CHAT_FETCH_REQUEST, chatId });
|
||||||
|
return api(getState).get(`/api/v1/pleroma/chats/${chatId}`).then(({ data }) => {
|
||||||
|
dispatch({ type: CHAT_FETCH_SUCCESS, chat: data });
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: CHAT_FETCH_FAIL, chatId, error });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function startChat(accountId) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
dispatch({ type: CHAT_FETCH_REQUEST, accountId });
|
||||||
|
return api(getState).post(`/api/v1/pleroma/chats/by-account-id/${accountId}`).then(({ data }) => {
|
||||||
|
dispatch({ type: CHAT_FETCH_SUCCESS, chat: data });
|
||||||
|
return data;
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: CHAT_FETCH_FAIL, accountId, error });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function markChatRead(chatId, lastReadId) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const chat = getState().getIn(['chats', chatId]);
|
||||||
|
if (!lastReadId) lastReadId = chat.get('last_message');
|
||||||
|
|
||||||
|
if (chat.get('unread') < 1) return;
|
||||||
|
if (!lastReadId) return;
|
||||||
|
|
||||||
|
dispatch({ type: CHAT_READ_REQUEST, chatId, lastReadId });
|
||||||
|
api(getState).post(`/api/v1/pleroma/chats/${chatId}/read`, { last_read_id: lastReadId }).then(({ data }) => {
|
||||||
|
dispatch({ type: CHAT_READ_SUCCESS, chat: data, lastReadId });
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch({ type: CHAT_READ_FAIL, chatId, error, lastReadId });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
@ -0,0 +1,11 @@
|
|||||||
|
import api from '../api';
|
||||||
|
|
||||||
|
const noOp = () => {};
|
||||||
|
|
||||||
|
export function uploadMedia(data, onUploadProgress = noOp) {
|
||||||
|
return function(dispatch, getState) {
|
||||||
|
return api(getState).post('/api/v1/media', data, {
|
||||||
|
onUploadProgress: onUploadProgress,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
@ -0,0 +1,25 @@
|
|||||||
|
import { mapValues } from 'lodash';
|
||||||
|
|
||||||
|
export const PRELOAD_IMPORT = 'PRELOAD_IMPORT';
|
||||||
|
|
||||||
|
// https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1176/diffs
|
||||||
|
const decodeUTF8Base64 = (data) => {
|
||||||
|
const rawData = atob(data);
|
||||||
|
const array = Uint8Array.from(rawData.split('').map((char) => char.charCodeAt(0)));
|
||||||
|
const text = new TextDecoder().decode(array);
|
||||||
|
return text;
|
||||||
|
};
|
||||||
|
|
||||||
|
const decodeData = data =>
|
||||||
|
mapValues(data, base64string =>
|
||||||
|
JSON.parse(decodeUTF8Base64(base64string)));
|
||||||
|
|
||||||
|
export function preload() {
|
||||||
|
const element = document.getElementById('initial-results');
|
||||||
|
const data = element ? JSON.parse(element.textContent) : {};
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: PRELOAD_IMPORT,
|
||||||
|
data: decodeData(data),
|
||||||
|
};
|
||||||
|
}
|
@ -0,0 +1,74 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import { injectIntl } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import Avatar from 'soapbox/components/avatar';
|
||||||
|
import { acctFull } from 'soapbox/utils/accounts';
|
||||||
|
import { fetchChat } from 'soapbox/actions/chats';
|
||||||
|
import ChatBox from './components/chat_box';
|
||||||
|
import Column from 'soapbox/components/column';
|
||||||
|
import ColumnBackButton from 'soapbox/components/column_back_button';
|
||||||
|
import { makeGetChat } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { params }) => {
|
||||||
|
const getChat = makeGetChat();
|
||||||
|
|
||||||
|
return {
|
||||||
|
me: state.get('me'),
|
||||||
|
chat: getChat(state, { id: params.chatId }),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class ChatRoom extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
chat: ImmutablePropTypes.map,
|
||||||
|
me: PropTypes.node,
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInputRef = (el) => {
|
||||||
|
this.inputElem = el;
|
||||||
|
this.focusInput();
|
||||||
|
};
|
||||||
|
|
||||||
|
focusInput = () => {
|
||||||
|
if (!this.inputElem) return;
|
||||||
|
this.inputElem.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { dispatch, params } = this.props;
|
||||||
|
dispatch(fetchChat(params.chatId));
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { chat } = this.props;
|
||||||
|
if (!chat) return null;
|
||||||
|
const account = chat.get('account');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column>
|
||||||
|
<div className='chatroom__back'>
|
||||||
|
<ColumnBackButton />
|
||||||
|
<div className='chatroom__header'>
|
||||||
|
<Avatar account={account} size={18} />
|
||||||
|
<div className='chatroom__title'>
|
||||||
|
@{acctFull(account)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ChatBox
|
||||||
|
chatId={chat.get('id')}
|
||||||
|
onSetInputRef={this.handleInputRef}
|
||||||
|
/>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import Avatar from '../../../components/avatar';
|
||||||
|
import DisplayName from '../../../components/display_name';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
||||||
|
import emojify from 'soapbox/features/emoji/emoji';
|
||||||
|
|
||||||
|
export default class Chat extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
chat: ImmutablePropTypes.map.isRequired,
|
||||||
|
onClick: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClick = () => {
|
||||||
|
this.props.onClick(this.props.chat);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { chat } = this.props;
|
||||||
|
if (!chat) return null;
|
||||||
|
const account = chat.get('account');
|
||||||
|
const unreadCount = chat.get('unread');
|
||||||
|
const content = chat.getIn(['last_message', 'content']);
|
||||||
|
const parsedContent = content ? emojify(content) : '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='account'>
|
||||||
|
<button className='floating-link' onClick={this.handleClick} />
|
||||||
|
<div className='account__wrapper'>
|
||||||
|
<div key={account.get('id')} className='account__display-name'>
|
||||||
|
<div className='account__avatar-wrapper'>
|
||||||
|
<Avatar account={account} size={36} />
|
||||||
|
</div>
|
||||||
|
<DisplayName account={account} />
|
||||||
|
<span
|
||||||
|
className='chat__last-message'
|
||||||
|
dangerouslySetInnerHTML={{ __html: parsedContent }}
|
||||||
|
/>
|
||||||
|
{unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,108 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import { injectIntl, defineMessages } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import {
|
||||||
|
fetchChatMessages,
|
||||||
|
sendChatMessage,
|
||||||
|
markChatRead,
|
||||||
|
} from 'soapbox/actions/chats';
|
||||||
|
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||||
|
import ChatMessageList from './chat_message_list';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { chatId }) => ({
|
||||||
|
me: state.get('me'),
|
||||||
|
chat: state.getIn(['chats', chatId]),
|
||||||
|
chatMessageIds: state.getIn(['chat_message_lists', chatId], ImmutableOrderedSet()),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class ChatBox extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
chatId: PropTypes.string.isRequired,
|
||||||
|
chatMessageIds: ImmutablePropTypes.orderedSet,
|
||||||
|
chat: ImmutablePropTypes.map,
|
||||||
|
onSetInputRef: PropTypes.func,
|
||||||
|
me: PropTypes.node,
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
content: '',
|
||||||
|
}
|
||||||
|
|
||||||
|
handleKeyDown = (e) => {
|
||||||
|
const { chatId } = this.props;
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
this.props.dispatch(sendChatMessage(chatId, this.state));
|
||||||
|
this.setState({ content: '' });
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleContentChange = (e) => {
|
||||||
|
this.setState({ content: e.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
markRead = () => {
|
||||||
|
const { dispatch, chatId } = this.props;
|
||||||
|
dispatch(markChatRead(chatId));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleHover = () => {
|
||||||
|
this.markRead();
|
||||||
|
}
|
||||||
|
|
||||||
|
setInputRef = (el) => {
|
||||||
|
const { onSetInputRef } = this.props;
|
||||||
|
this.inputElem = el;
|
||||||
|
onSetInputRef(el);
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { dispatch, chatId } = this.props;
|
||||||
|
dispatch(fetchChatMessages(chatId));
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const markReadConditions = [
|
||||||
|
() => this.props.chat !== undefined,
|
||||||
|
() => document.activeElement === this.inputElem,
|
||||||
|
() => this.props.chat.get('unread') > 0,
|
||||||
|
];
|
||||||
|
|
||||||
|
if (markReadConditions.every(c => c() === true))
|
||||||
|
this.markRead();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { chatMessageIds, intl } = this.props;
|
||||||
|
if (!chatMessageIds) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='chat-box' onMouseOver={this.handleHover}>
|
||||||
|
<ChatMessageList chatMessageIds={chatMessageIds} />
|
||||||
|
<div className='chat-box__actions simple_form'>
|
||||||
|
<textarea
|
||||||
|
rows={1}
|
||||||
|
placeholder={intl.formatMessage(messages.placeholder)}
|
||||||
|
onKeyDown={this.handleKeyDown}
|
||||||
|
onChange={this.handleContentChange}
|
||||||
|
value={this.state.content}
|
||||||
|
ref={this.setInputRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,71 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { injectIntl } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import { fetchChats } from 'soapbox/actions/chats';
|
||||||
|
import Chat from './chat';
|
||||||
|
import { makeGetChat } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
const chatDateComparator = (chatA, chatB) => {
|
||||||
|
// Sort most recently updated chats at the top
|
||||||
|
const a = new Date(chatA.get('updated_at'));
|
||||||
|
const b = new Date(chatB.get('updated_at'));
|
||||||
|
|
||||||
|
if (a === b) return 0;
|
||||||
|
if (a > b) return -1;
|
||||||
|
if (a < b) return 1;
|
||||||
|
return 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapStateToProps = state => {
|
||||||
|
const getChat = makeGetChat();
|
||||||
|
|
||||||
|
const chats = state.get('chats')
|
||||||
|
.map(chat => getChat(state, chat.toJS()))
|
||||||
|
.toList()
|
||||||
|
.sort(chatDateComparator);
|
||||||
|
|
||||||
|
return {
|
||||||
|
chats,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class ChatList extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
onClickChat: PropTypes.func,
|
||||||
|
emptyMessage: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.dispatch(fetchChats());
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { chats, emptyMessage } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='chat-list'>
|
||||||
|
<div className='chat-list__content'>
|
||||||
|
{chats.count() === 0 &&
|
||||||
|
<div className='empty-column-indicator'>{emptyMessage}</div>
|
||||||
|
}
|
||||||
|
{chats.map(chat => (
|
||||||
|
<div key={chat.get('id')} className='chat-list-item'>
|
||||||
|
<Chat
|
||||||
|
chat={chat}
|
||||||
|
onClick={this.props.onClickChat}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,89 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import { injectIntl } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import { List as ImmutableList } from 'immutable';
|
||||||
|
import emojify from 'soapbox/features/emoji/emoji';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { chatMessageIds }) => ({
|
||||||
|
me: state.get('me'),
|
||||||
|
chatMessages: chatMessageIds.reduce((acc, curr) => {
|
||||||
|
const chatMessage = state.getIn(['chat_messages', curr]);
|
||||||
|
return chatMessage ? acc.push(chatMessage) : acc;
|
||||||
|
}, ImmutableList()).sort(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class ChatMessageList extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
chatMessages: ImmutablePropTypes.list,
|
||||||
|
chatMessageIds: ImmutablePropTypes.orderedSet,
|
||||||
|
me: PropTypes.node,
|
||||||
|
}
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
chatMessages: ImmutableList(),
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollToBottom = () => {
|
||||||
|
if (!this.messagesEnd) return;
|
||||||
|
this.messagesEnd.scrollIntoView();
|
||||||
|
}
|
||||||
|
|
||||||
|
setMessageEndRef = (el) => {
|
||||||
|
this.messagesEnd = el;
|
||||||
|
this.scrollToBottom();
|
||||||
|
};
|
||||||
|
|
||||||
|
getFormattedTimestamp = (chatMessage) => {
|
||||||
|
const { intl } = this.props;
|
||||||
|
return intl.formatDate(
|
||||||
|
new Date(chatMessage.get('created_at')), {
|
||||||
|
hour12: false,
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
if (prevProps.chatMessages !== this.props.chatMessages)
|
||||||
|
this.scrollToBottom();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { chatMessages, me } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='chat-messages'>
|
||||||
|
{chatMessages.map(chatMessage => (
|
||||||
|
<div
|
||||||
|
className={classNames('chat-message', {
|
||||||
|
'chat-message--me': chatMessage.get('account_id') === me,
|
||||||
|
'chat-message--pending': chatMessage.get('pending', false) === true,
|
||||||
|
})}
|
||||||
|
key={chatMessage.get('id')}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
title={this.getFormattedTimestamp(chatMessage)}
|
||||||
|
className='chat-message__bubble'
|
||||||
|
dangerouslySetInnerHTML={{ __html: emojify(chatMessage.get('content') || '') }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div style={{ float: 'left', clear: 'both' }} ref={this.setMessageEndRef} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,85 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import { injectIntl } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import { getSettings } from 'soapbox/actions/settings';
|
||||||
|
import ChatList from './chat_list';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { makeGetChat } from 'soapbox/selectors';
|
||||||
|
import { openChat, toggleMainWindow } from 'soapbox/actions/chats';
|
||||||
|
import ChatWindow from './chat_window';
|
||||||
|
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
||||||
|
|
||||||
|
const addChatsToPanes = (state, panesData) => {
|
||||||
|
const getChat = makeGetChat();
|
||||||
|
|
||||||
|
const newPanes = panesData.get('panes').map(pane => {
|
||||||
|
const chat = getChat(state, { id: pane.get('chat_id') });
|
||||||
|
return pane.set('chat', chat);
|
||||||
|
});
|
||||||
|
|
||||||
|
return panesData.set('panes', newPanes);
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapStateToProps = state => {
|
||||||
|
const panesData = getSettings(state).get('chats');
|
||||||
|
|
||||||
|
return {
|
||||||
|
panesData: addChatsToPanes(state, panesData),
|
||||||
|
unreadCount: state.get('chats').reduce((acc, curr) => acc + curr.get('unread'), 0),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class ChatPanes extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
panesData: ImmutablePropTypes.map,
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClickChat = (chat) => {
|
||||||
|
this.props.dispatch(openChat(chat.get('id')));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMainWindowToggle = () => {
|
||||||
|
this.props.dispatch(toggleMainWindow());
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { panesData, unreadCount } = this.props;
|
||||||
|
const panes = panesData.get('panes');
|
||||||
|
const mainWindow = panesData.get('mainWindow');
|
||||||
|
|
||||||
|
const mainWindowPane = (
|
||||||
|
<div className={`pane pane--main pane--${mainWindow}`}>
|
||||||
|
<div className='pane__header'>
|
||||||
|
{unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
|
||||||
|
<button className='pane__title' onClick={this.handleMainWindowToggle}>
|
||||||
|
<FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='pane__content'>
|
||||||
|
<ChatList
|
||||||
|
onClickChat={this.handleClickChat}
|
||||||
|
emptyMessage={<FormattedMessage id='chat_panels.main_window.empty' defaultMessage="No chats found. To start a chat, visit a user's profile." />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='chat-panes'>
|
||||||
|
{mainWindowPane}
|
||||||
|
{panes.map((pane, i) =>
|
||||||
|
<ChatWindow idx={i} pane={pane} key={pane.get('chat_id')} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,106 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import { injectIntl } from 'react-intl';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import Avatar from 'soapbox/components/avatar';
|
||||||
|
import { acctFull } from 'soapbox/utils/accounts';
|
||||||
|
import IconButton from 'soapbox/components/icon_button';
|
||||||
|
import {
|
||||||
|
closeChat,
|
||||||
|
toggleChat,
|
||||||
|
} from 'soapbox/actions/chats';
|
||||||
|
import ChatBox from './chat_box';
|
||||||
|
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { pane }) => ({
|
||||||
|
me: state.get('me'),
|
||||||
|
chat: state.getIn(['chats', pane.get('chat_id')]),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class ChatWindow extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
pane: ImmutablePropTypes.map.isRequired,
|
||||||
|
idx: PropTypes.number,
|
||||||
|
chat: ImmutablePropTypes.map,
|
||||||
|
me: PropTypes.node,
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
content: '',
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChatClose = (chatId) => {
|
||||||
|
return (e) => {
|
||||||
|
this.props.dispatch(closeChat(chatId));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChatToggle = (chatId) => {
|
||||||
|
return (e) => {
|
||||||
|
this.props.dispatch(toggleChat(chatId));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleContentChange = (e) => {
|
||||||
|
this.setState({ content: e.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInputRef = (el) => {
|
||||||
|
this.inputElem = el;
|
||||||
|
this.focusInput();
|
||||||
|
};
|
||||||
|
|
||||||
|
focusInput = () => {
|
||||||
|
if (!this.inputElem) return;
|
||||||
|
this.inputElem.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const oldState = prevProps.pane.get('state');
|
||||||
|
const newState = this.props.pane.get('state');
|
||||||
|
|
||||||
|
if (oldState !== newState && newState === 'open')
|
||||||
|
this.focusInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { pane, idx, chat } = this.props;
|
||||||
|
const account = pane.getIn(['chat', 'account']);
|
||||||
|
if (!chat || !account) return null;
|
||||||
|
|
||||||
|
const right = (285 * (idx + 1)) + 20;
|
||||||
|
const unreadCount = chat.get('unread');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
|
||||||
|
<div className='pane__header'>
|
||||||
|
{unreadCount > 0
|
||||||
|
? <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>
|
||||||
|
: <Link to={`/@${account.get('acct')}`}><Avatar account={account} size={18} /></Link>
|
||||||
|
}
|
||||||
|
<button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
|
||||||
|
@{acctFull(account)}
|
||||||
|
</button>
|
||||||
|
<div className='pane__close'>
|
||||||
|
<IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='pane__content'>
|
||||||
|
<ChatBox
|
||||||
|
chatId={chat.get('id')}
|
||||||
|
onSetInputRef={this.handleInputRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,45 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import Column from '../../components/column';
|
||||||
|
import ColumnHeader from '../../components/column_header';
|
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
|
import ChatList from './components/chat_list';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
title: { id: 'column.chats', defaultMessage: 'Chats' },
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @injectIntl
|
||||||
|
class ChatIndex extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
router: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClickChat = (chat) => {
|
||||||
|
this.context.router.history.push(`/chats/${chat.get('id')}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { intl } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column label={intl.formatMessage(messages.title)}>
|
||||||
|
<ColumnHeader
|
||||||
|
icon='comment'
|
||||||
|
title={intl.formatMessage(messages.title)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ChatList
|
||||||
|
onClickChat={this.handleClickChat}
|
||||||
|
emptyMessage={<FormattedMessage id='chat_panels.main_window.empty' defaultMessage="No chats found. To start a chat, visit a user's profile." />}
|
||||||
|
/>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,365 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import Column from '../ui/components/column';
|
||||||
|
import {
|
||||||
|
SimpleForm,
|
||||||
|
FieldsGroup,
|
||||||
|
TextInput,
|
||||||
|
Checkbox,
|
||||||
|
FileChooser,
|
||||||
|
SimpleTextarea,
|
||||||
|
ColorWithPicker,
|
||||||
|
FileChooserLogo,
|
||||||
|
} from 'soapbox/features/forms';
|
||||||
|
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||||
|
import { updateAdminConfig } from 'soapbox/actions/admin';
|
||||||
|
import Icon from 'soapbox/components/icon';
|
||||||
|
import { defaultConfig } from 'soapbox/actions/soapbox';
|
||||||
|
import { uploadMedia } from 'soapbox/actions/media';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
|
||||||
|
copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
|
||||||
|
promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
|
||||||
|
promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
|
||||||
|
promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||||
|
homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
|
||||||
|
homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||||
|
customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||||
|
rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Raw JSON data' },
|
||||||
|
rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly.' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const templates = {
|
||||||
|
promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
|
||||||
|
footerItem: ImmutableMap({ title: '', url: '' }),
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
soapbox: state.get('soapbox'),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class SoapboxConfig extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
soapbox: ImmutablePropTypes.map.isRequired,
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
isLoading: false,
|
||||||
|
soapbox: this.props.soapbox,
|
||||||
|
rawJSON: JSON.stringify(this.props.soapbox, null, 2),
|
||||||
|
jsonValid: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
setConfig = (path, value) => {
|
||||||
|
const { soapbox } = this.state;
|
||||||
|
const config = soapbox.setIn(path, value);
|
||||||
|
this.setState({ soapbox: config, jsonValid: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
putConfig = config => {
|
||||||
|
this.setState({ soapbox: config, jsonValid: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
getParams = () => {
|
||||||
|
const { soapbox } = this.state;
|
||||||
|
return {
|
||||||
|
configs: [{
|
||||||
|
group: ':pleroma',
|
||||||
|
key: ':frontend_configurations',
|
||||||
|
value: [{
|
||||||
|
tuple: [':soapbox_fe', soapbox.toJS()],
|
||||||
|
}],
|
||||||
|
}],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit = (event) => {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch(updateAdminConfig(this.getParams())).then(() => {
|
||||||
|
this.setState({ isLoading: false });
|
||||||
|
}).catch((error) => {
|
||||||
|
this.setState({ isLoading: false });
|
||||||
|
});
|
||||||
|
this.setState({ isLoading: true });
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange = (path, getValue) => {
|
||||||
|
return e => {
|
||||||
|
this.setConfig(path, getValue(e));
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
handleFileChange = path => {
|
||||||
|
return e => {
|
||||||
|
const data = new FormData();
|
||||||
|
data.append('file', e.target.files[0]);
|
||||||
|
this.props.dispatch(uploadMedia(data)).then(({ data }) => {
|
||||||
|
this.handleChange(path, e => data.url)(e);
|
||||||
|
}).catch(() => {});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
handleAddItem = (path, template) => {
|
||||||
|
return e => {
|
||||||
|
this.setConfig(
|
||||||
|
path,
|
||||||
|
this.getSoapboxConfig().getIn(path, ImmutableList()).push(template),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDeleteItem = path => {
|
||||||
|
return e => {
|
||||||
|
const soapbox = this.state.soapbox.deleteIn(path);
|
||||||
|
this.setState({ soapbox });
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
handleItemChange = (path, key, field, template) => {
|
||||||
|
return this.handleChange(
|
||||||
|
path, (e) =>
|
||||||
|
template
|
||||||
|
.merge(field)
|
||||||
|
.set(key, e.target.value)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
handlePromoItemChange = (index, key, field) => {
|
||||||
|
return this.handleItemChange(
|
||||||
|
['promoPanel', 'items', index], key, field, templates.promoPanelItem
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleHomeFooterItemChange = (index, key, field) => {
|
||||||
|
return this.handleItemChange(
|
||||||
|
['navlinks', 'homeFooter', index], key, field, templates.footerItem
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleEditJSON = e => {
|
||||||
|
this.setState({ rawJSON: e.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
getSoapboxConfig = () => {
|
||||||
|
return defaultConfig.mergeDeep(this.state.soapbox);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps, prevState) {
|
||||||
|
if (prevProps.soapbox !== this.props.soapbox) {
|
||||||
|
this.putConfig(this.props.soapbox);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevState.soapbox !== this.state.soapbox) {
|
||||||
|
this.setState({ rawJSON: JSON.stringify(this.state.soapbox, null, 2) });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevState.rawJSON !== this.state.rawJSON) {
|
||||||
|
try {
|
||||||
|
const data = fromJS(JSON.parse(this.state.rawJSON));
|
||||||
|
this.putConfig(data);
|
||||||
|
} catch {
|
||||||
|
this.setState({ jsonValid: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { intl } = this.props;
|
||||||
|
const soapbox = this.getSoapboxConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||||||
|
<SimpleForm onSubmit={this.handleSubmit}>
|
||||||
|
<fieldset disabled={this.state.isLoading}>
|
||||||
|
<FieldsGroup>
|
||||||
|
<div className='fields-row file-picker'>
|
||||||
|
<div className='fields-row__column fields-row__column-6'>
|
||||||
|
<img src={soapbox.get('logo')} />
|
||||||
|
</div>
|
||||||
|
<div className='fields-row__column fields-group fields-row__column-6'>
|
||||||
|
<FileChooserLogo
|
||||||
|
label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
|
||||||
|
name='logo'
|
||||||
|
hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
|
||||||
|
onChange={this.handleFileChange(['logo'])}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='fields-row file-picker'>
|
||||||
|
<div className='fields-row__column fields-row__column-6'>
|
||||||
|
<img src={soapbox.get('banner')} />
|
||||||
|
</div>
|
||||||
|
<div className='fields-row__column fields-group fields-row__column-6'>
|
||||||
|
<FileChooser
|
||||||
|
label={<FormattedMessage id='soapbox_config.fields.banner_label' defaultMessage='Banner' />}
|
||||||
|
name='banner'
|
||||||
|
hint={<FormattedMessage id='soapbox_config.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be displayed to 400x400px' />}
|
||||||
|
onChange={this.handleFileChange(['banner'])}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FieldsGroup>
|
||||||
|
<FieldsGroup>
|
||||||
|
<div className='fields-row__column fields-group'>
|
||||||
|
<ColorWithPicker
|
||||||
|
buttonId='brand_color'
|
||||||
|
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
|
||||||
|
value={soapbox.get('brandColor')}
|
||||||
|
onChange={this.handleChange(['brandColor'], (e) => e.hex)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FieldsGroup>
|
||||||
|
<FieldsGroup>
|
||||||
|
<Checkbox
|
||||||
|
label={<FormattedMessage id='soapbox_config.fields.patron_enabled_label' defaultMessage='Patron module' />}
|
||||||
|
hint={<FormattedMessage id='soapbox_config.hints.patron_enabled' defaultMessage='Enables display of Patron module. Requires installation of Patron module.' />}
|
||||||
|
name='patron'
|
||||||
|
checked={soapbox.getIn(['extensions', 'patron', 'enabled'])}
|
||||||
|
onChange={this.handleChange(
|
||||||
|
['extensions', 'patron', 'enabled'], (e) => e.checked,
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</FieldsGroup>
|
||||||
|
<FieldsGroup>
|
||||||
|
<TextInput
|
||||||
|
name='copyright'
|
||||||
|
label={intl.formatMessage(messages.copyrightFooterLabel)}
|
||||||
|
placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
|
||||||
|
value={soapbox.get('copyright')}
|
||||||
|
onChange={this.handleChange(['copyright'], (e) => e.target.value)}
|
||||||
|
/>
|
||||||
|
</FieldsGroup>
|
||||||
|
<FieldsGroup>
|
||||||
|
<div className='fields-row__column fields-group'>
|
||||||
|
<div className='input with_block_label'>
|
||||||
|
<label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
|
||||||
|
<span className='hint'>
|
||||||
|
<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
|
||||||
|
</span>
|
||||||
|
<span className='hint'>
|
||||||
|
<FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
|
||||||
|
</span>
|
||||||
|
{
|
||||||
|
soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
|
||||||
|
<div className='row' key={i}>
|
||||||
|
<TextInput
|
||||||
|
label={intl.formatMessage(messages.promoItemIcon)}
|
||||||
|
placeholder={intl.formatMessage(messages.promoItemIcon)}
|
||||||
|
value={field.get('icon')}
|
||||||
|
onChange={this.handlePromoItemChange(i, 'icon', field)}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
label={intl.formatMessage(messages.promoItemLabel)}
|
||||||
|
placeholder={intl.formatMessage(messages.promoItemLabel)}
|
||||||
|
value={field.get('text')}
|
||||||
|
onChange={this.handlePromoItemChange(i, 'text', field)}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
label={intl.formatMessage(messages.promoItemURL)}
|
||||||
|
placeholder={intl.formatMessage(messages.promoItemURL)}
|
||||||
|
value={field.get('url')}
|
||||||
|
onChange={this.handlePromoItemChange(i, 'url', field)}
|
||||||
|
/>
|
||||||
|
<Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
<div className='actions'>
|
||||||
|
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
|
||||||
|
<Icon id='plus-circle' />
|
||||||
|
<FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='input with_block_label'>
|
||||||
|
<label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
|
||||||
|
<span className='hint'>
|
||||||
|
<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
|
||||||
|
</span>
|
||||||
|
{
|
||||||
|
soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
|
||||||
|
<div className='row' key={i}>
|
||||||
|
<TextInput
|
||||||
|
label={intl.formatMessage(messages.homeFooterItemLabel)}
|
||||||
|
placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
|
||||||
|
value={field.get('title')}
|
||||||
|
onChange={this.handleHomeFooterItemChange(i, 'title', field)}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
label={intl.formatMessage(messages.homeFooterItemURL)}
|
||||||
|
placeholder={intl.formatMessage(messages.homeFooterItemURL)}
|
||||||
|
value={field.get('url')}
|
||||||
|
onChange={this.handleHomeFooterItemChange(i, 'url', field)}
|
||||||
|
/>
|
||||||
|
<Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
<div className='actions'>
|
||||||
|
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
|
||||||
|
<Icon id='plus-circle' />
|
||||||
|
<FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='input with_block_label'>
|
||||||
|
<label><FormattedMessage id='soapbox_config.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
|
||||||
|
<span className='hint'>
|
||||||
|
<FormattedMessage id='soapbox_config.hints.custom_css_fields' defaultMessage='Insert a URL to a CSS file like `https://mysite.com/instance/custom.css`, or simply `/instance/custom.css`' />
|
||||||
|
</span>
|
||||||
|
{
|
||||||
|
soapbox.get('customCss').map((field, i) => (
|
||||||
|
<div className='row' key={i}>
|
||||||
|
<TextInput
|
||||||
|
label={intl.formatMessage(messages.customCssLabel)}
|
||||||
|
placeholder={intl.formatMessage(messages.customCssLabel)}
|
||||||
|
value={field}
|
||||||
|
onChange={this.handleChange(['customCss', i], (e) => e.target.value)}
|
||||||
|
/>
|
||||||
|
<Icon id='times-circle' onClick={this.handleDeleteItem(['customCss', i])} />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
<div className='actions'>
|
||||||
|
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['customCss'], '')}>
|
||||||
|
<Icon id='plus-circle' />
|
||||||
|
<FormattedMessage id='soapbox_config.fields.custom_css.add' defaultMessage='Add another custom CSS URL' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FieldsGroup>
|
||||||
|
<FieldsGroup>
|
||||||
|
<div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
|
||||||
|
<SimpleTextarea
|
||||||
|
label={intl.formatMessage(messages.rawJSONLabel)}
|
||||||
|
hint={intl.formatMessage(messages.rawJSONHint)}
|
||||||
|
value={this.state.rawJSON}
|
||||||
|
onChange={this.handleEditJSON}
|
||||||
|
rows={12}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FieldsGroup>
|
||||||
|
</fieldset>
|
||||||
|
<div className='actions'>
|
||||||
|
<button name='button' type='submit' className='btn button button-primary'>
|
||||||
|
<FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</SimpleForm>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,9 @@
|
|||||||
|
import { connect } from 'react-redux';
|
||||||
|
import IconWithBadge from 'soapbox/components/icon_with_badge';
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
count: state.get('chats').reduce((acc, curr) => acc + curr.get('unread'), 0),
|
||||||
|
id: 'comment',
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(IconWithBadge);
|
@ -0,0 +1,9 @@
|
|||||||
|
import { connect } from 'react-redux';
|
||||||
|
import IconWithBadge from 'soapbox/components/icon_with_badge';
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
count: state.getIn(['admin', 'open_report_count']),
|
||||||
|
id: 'gavel',
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(IconWithBadge);
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue