Merge pull request #314 from chriswmartin/merge-vanilla-updates-2

Merge vanilla updates into glitch - round 2
This commit is contained in:
David Yip 2018-01-09 17:01:23 -06:00 committed by GitHub
commit 7852fc7706
22 changed files with 84 additions and 49 deletions

View file

@ -10,6 +10,10 @@ export const FAVOURITED_STATUSES_EXPAND_FAIL = 'FAVOURITED_STATUSES_EXPAND_FA
export function fetchFavouritedStatuses() { export function fetchFavouritedStatuses() {
return (dispatch, getState) => { return (dispatch, getState) => {
if (getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
return;
}
dispatch(fetchFavouritedStatusesRequest()); dispatch(fetchFavouritedStatusesRequest());
api(getState).get('/api/v1/favourites').then(response => { api(getState).get('/api/v1/favourites').then(response => {
@ -46,7 +50,7 @@ export function expandFavouritedStatuses() {
return (dispatch, getState) => { return (dispatch, getState) => {
const url = getState().getIn(['status_lists', 'favourites', 'next'], null); const url = getState().getIn(['status_lists', 'favourites', 'next'], null);
if (url === null) { if (url === null || getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
return; return;
} }

View file

@ -42,7 +42,7 @@ const fetchRelatedRelationships = (dispatch, notifications) => {
const unescapeHTML = (html) => { const unescapeHTML = (html) => {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
html = html.replace(/<br \/>|<br>|\n/, ' '); html = html.replace(/<br \/>|<br>|\n/g, ' ');
wrapper.innerHTML = html; wrapper.innerHTML = html;
return wrapper.textContent; return wrapper.textContent;
}; };

View file

@ -15,9 +15,9 @@ export {
register, register,
}; };
export function changeAlerts(key, value) { export function changeAlerts(path, value) {
return dispatch => { return dispatch => {
dispatch(setAlerts(key, value)); dispatch(setAlerts(path, value));
dispatch(saveSettings()); dispatch(saveSettings());
}; };
} }

View file

@ -1,4 +1,4 @@
import axios from 'axios'; import api from 'flavours/glitch/util/api';
import { pushNotificationsSetting } from 'flavours/glitch/util/settings'; import { pushNotificationsSetting } from 'flavours/glitch/util/settings';
import { setBrowserSupport, setSubscription, clearSubscription } from './setter'; import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
@ -35,7 +35,7 @@ const subscribe = (registration) =>
const unsubscribe = ({ registration, subscription }) => const unsubscribe = ({ registration, subscription }) =>
subscription ? subscription.unsubscribe().then(() => registration) : registration; subscription ? subscription.unsubscribe().then(() => registration) : registration;
const sendSubscriptionToBackend = (subscription, me) => { const sendSubscriptionToBackend = (getState, subscription, me) => {
const params = { subscription }; const params = { subscription };
if (me) { if (me) {
@ -45,7 +45,7 @@ const sendSubscriptionToBackend = (subscription, me) => {
} }
} }
return axios.post('/api/web/push_subscriptions', params).then(response => response.data); return api(getState).post('/api/web/push_subscriptions', params).then(response => response.data);
}; };
// Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
@ -85,13 +85,13 @@ export function register () {
} else { } else {
// Something went wrong, try to subscribe again // Something went wrong, try to subscribe again
return unsubscribe({ registration, subscription }).then(subscribe).then( return unsubscribe({ registration, subscription }).then(subscribe).then(
subscription => sendSubscriptionToBackend(subscription, me)); subscription => sendSubscriptionToBackend(getState, subscription, me));
} }
} }
// No subscription, try to subscribe // No subscription, try to subscribe
return subscribe(registration).then( return subscribe(registration).then(
subscription => sendSubscriptionToBackend(subscription, me)); subscription => sendSubscriptionToBackend(getState, subscription, me));
}) })
.then(subscription => { .then(subscription => {
// If we got a PushSubscription (and not a subscription object from the backend) // If we got a PushSubscription (and not a subscription object from the backend)
@ -137,7 +137,7 @@ export function saveSettings() {
const alerts = state.get('alerts'); const alerts = state.get('alerts');
const data = { alerts }; const data = { alerts };
axios.put(`/api/web/push_subscriptions/${subscription.get('id')}`, { api(getState).put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
data, data,
}).then(() => { }).then(() => {
const me = getState().getIn(['meta', 'me']); const me = getState().getIn(['meta', 'me']);

View file

@ -23,11 +23,11 @@ export function clearSubscription () {
}; };
} }
export function setAlerts (key, value) { export function setAlerts (path, value) {
return dispatch => { return dispatch => {
dispatch({ dispatch({
type: SET_ALERTS, type: SET_ALERTS,
key, path,
value, value,
}); });
}; };

View file

@ -1,14 +1,14 @@
import axios from 'axios'; import api from 'flavours/glitch/util/api';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
export const SETTING_CHANGE = 'SETTING_CHANGE'; export const SETTING_CHANGE = 'SETTING_CHANGE';
export const SETTING_SAVE = 'SETTING_SAVE'; export const SETTING_SAVE = 'SETTING_SAVE';
export function changeSetting(key, value) { export function changeSetting(path, value) {
return dispatch => { return dispatch => {
dispatch({ dispatch({
type: SETTING_CHANGE, type: SETTING_CHANGE,
key, path,
value, value,
}); });
@ -21,9 +21,9 @@ const debouncedSave = debounce((dispatch, getState) => {
return; return;
} }
const data = getState().get('settings').filter((_, key) => key !== 'saved').toJS(); const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS();
axios.put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE })); api(getState).put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE }));
}, 5000, { trailing: true }); }, 5000, { trailing: true });
export function saveSettings() { export function saveSettings() {

View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Avatar from './avatar'; import Avatar from './avatar';
@ -94,12 +94,12 @@ export default class Account extends ImmutablePureComponent {
hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />; hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />;
} }
buttons = ( buttons = (
<div> <Fragment>
<IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} /> <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
{hidingNotificationsButton} {hidingNotificationsButton}
</div> </Fragment>
); );
} else { } else if (!account.get('moved')) {
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />; buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
} }
} }

View file

@ -8,8 +8,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
onChange (key, checked) { onChange (path, checked) {
dispatch(changeSetting(['community', ...key], checked)); dispatch(changeSetting(['community', ...path], checked));
}, },
}); });

View file

@ -8,8 +8,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
onChange (key, checked) { onChange (path, checked) {
dispatch(changeSetting(['direct', ...key], checked)); dispatch(changeSetting(['direct', ...path], checked));
}, },
}); });

View file

@ -9,6 +9,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
import StatusList from 'flavours/glitch/components/status_list'; import StatusList from 'flavours/glitch/components/status_list';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { debounce } from 'lodash';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.favourites', defaultMessage: 'Favourites' }, heading: { id: 'column.favourites', defaultMessage: 'Favourites' },
@ -16,6 +17,7 @@ const messages = defineMessages({
const mapStateToProps = state => ({ const mapStateToProps = state => ({
statusIds: state.getIn(['status_lists', 'favourites', 'items']), statusIds: state.getIn(['status_lists', 'favourites', 'items']),
isLoading: state.getIn(['status_lists', 'favourites', 'isLoading'], true),
hasMore: !!state.getIn(['status_lists', 'favourites', 'next']), hasMore: !!state.getIn(['status_lists', 'favourites', 'next']),
}); });
@ -30,6 +32,7 @@ export default class Favourites extends ImmutablePureComponent {
columnId: PropTypes.string, columnId: PropTypes.string,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
hasMore: PropTypes.bool, hasMore: PropTypes.bool,
isLoading: PropTypes.bool,
}; };
componentWillMount () { componentWillMount () {
@ -59,12 +62,12 @@ export default class Favourites extends ImmutablePureComponent {
this.column = c; this.column = c;
} }
handleScrollToBottom = () => { handleScrollToBottom = debounce(() => {
this.props.dispatch(expandFavouritedStatuses()); this.props.dispatch(expandFavouritedStatuses());
} }, 300, { leading: true })
render () { render () {
const { intl, statusIds, columnId, multiColumn, hasMore } = this.props; const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
const pinned = !!columnId; const pinned = !!columnId;
return ( return (
@ -85,6 +88,7 @@ export default class Favourites extends ImmutablePureComponent {
statusIds={statusIds} statusIds={statusIds}
scrollKey={`favourited_statuses-${columnId}`} scrollKey={`favourited_statuses-${columnId}`}
hasMore={hasMore} hasMore={hasMore}
isLoading={isLoading}
onScrollToBottom={this.handleScrollToBottom} onScrollToBottom={this.handleScrollToBottom}
/> />
</Column> </Column>

View file

@ -79,7 +79,7 @@ export default class GettingStarted extends ImmutablePureComponent {
render () { render () {
const { intl, myAccount, columns, multiColumn, lists } = this.props; const { intl, myAccount, columns, multiColumn, lists } = this.props;
let navItems = []; const navItems = [];
let listItems = []; let listItems = [];
if (multiColumn) { if (multiColumn) {

View file

@ -8,8 +8,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
onChange (key, checked) { onChange (path, checked) {
dispatch(changeSetting(['home', ...key], checked)); dispatch(changeSetting(['home', ...path], checked));
}, },
onSave () { onSave () {

View file

@ -14,8 +14,8 @@ export default class ColumnSettings extends React.PureComponent {
onClear: PropTypes.func.isRequired, onClear: PropTypes.func.isRequired,
}; };
onPushChange = (key, checked) => { onPushChange = (path, checked) => {
this.props.onChange(['push', ...key], checked); this.props.onChange(['push', ...path], checked);
} }
render () { render () {

View file

@ -18,11 +18,11 @@ const mapStateToProps = state => ({
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onChange (key, checked) { onChange (path, checked) {
if (key[0] === 'push') { if (path[0] === 'push') {
dispatch(changePushNotifications(key.slice(1), checked)); dispatch(changePushNotifications(path.slice(1), checked));
} else { } else {
dispatch(changeSetting(['notifications', ...key], checked)); dispatch(changeSetting(['notifications', ...path], checked));
} }
}, },

View file

@ -8,8 +8,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
onChange (key, checked) { onChange (path, checked) {
dispatch(changeSetting(['public', ...key], checked)); dispatch(changeSetting(['public', ...path], checked));
}, },
}); });

View file

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage, injectIntl } from 'react-intl';
import axios from 'axios'; import api from 'flavours/glitch/util/api';
@injectIntl @injectIntl
export default class EmbedModal extends ImmutablePureComponent { export default class EmbedModal extends ImmutablePureComponent {
@ -23,7 +23,7 @@ export default class EmbedModal extends ImmutablePureComponent {
this.setState({ loading: true }); this.setState({ loading: true });
axios.post('/api/web/embed', { url }).then(res => { api().post('/api/web/embed', { url }).then(res => {
this.setState({ loading: false, oembed: res.data }); this.setState({ loading: false, oembed: res.data });
const iframeDocument = this.iframe.contentWindow.document; const iframeDocument = this.iframe.contentWindow.document;

View file

@ -44,7 +44,7 @@ export default function push_subscriptions(state = initialState, action) {
case CLEAR_SUBSCRIPTION: case CLEAR_SUBSCRIPTION:
return initialState; return initialState;
case SET_ALERTS: case SET_ALERTS:
return state.setIn(action.key, action.value); return state.setIn(action.path, action.value);
default: default:
return state; return state;
} }

View file

@ -101,7 +101,7 @@ export default function settings(state = initialState, action) {
return hydrate(state, action.state.get('settings')); return hydrate(state, action.state.get('settings'));
case SETTING_CHANGE: case SETTING_CHANGE:
return state return state
.setIn(action.key, action.value) .setIn(action.path, action.value)
.set('saved', false); .set('saved', false);
case COLUMN_ADD: case COLUMN_ADD:
return state return state

View file

@ -1,6 +1,10 @@
import { import {
FAVOURITED_STATUSES_FETCH_REQUEST,
FAVOURITED_STATUSES_FETCH_SUCCESS, FAVOURITED_STATUSES_FETCH_SUCCESS,
FAVOURITED_STATUSES_FETCH_FAIL,
FAVOURITED_STATUSES_EXPAND_REQUEST,
FAVOURITED_STATUSES_EXPAND_SUCCESS, FAVOURITED_STATUSES_EXPAND_SUCCESS,
FAVOURITED_STATUSES_EXPAND_FAIL,
} from 'flavours/glitch/actions/favourites'; } from 'flavours/glitch/actions/favourites';
import { import {
PINNED_STATUSES_FETCH_SUCCESS, PINNED_STATUSES_FETCH_SUCCESS,
@ -30,6 +34,7 @@ const normalizeList = (state, listType, statuses, next) => {
return state.update(listType, listMap => listMap.withMutations(map => { return state.update(listType, listMap => listMap.withMutations(map => {
map.set('next', next); map.set('next', next);
map.set('loaded', true); map.set('loaded', true);
map.set('isLoading', false);
map.set('items', ImmutableList(statuses.map(item => item.id))); map.set('items', ImmutableList(statuses.map(item => item.id)));
})); }));
}; };
@ -37,6 +42,7 @@ const normalizeList = (state, listType, statuses, next) => {
const appendToList = (state, listType, statuses, next) => { const appendToList = (state, listType, statuses, next) => {
return state.update(listType, listMap => listMap.withMutations(map => { return state.update(listType, listMap => listMap.withMutations(map => {
map.set('next', next); map.set('next', next);
map.set('isLoading', false);
map.set('items', map.get('items').concat(statuses.map(item => item.id))); map.set('items', map.get('items').concat(statuses.map(item => item.id)));
})); }));
}; };
@ -55,6 +61,12 @@ const removeOneFromList = (state, listType, status) => {
export default function statusLists(state = initialState, action) { export default function statusLists(state = initialState, action) {
switch(action.type) { switch(action.type) {
case FAVOURITED_STATUSES_FETCH_REQUEST:
case FAVOURITED_STATUSES_EXPAND_REQUEST:
return state.setIn(['favourites', 'isLoading'], true);
case FAVOURITED_STATUSES_FETCH_FAIL:
case FAVOURITED_STATUSES_EXPAND_FAIL:
return state.setIn(['favourites', 'isLoading'], false);
case FAVOURITED_STATUSES_FETCH_SUCCESS: case FAVOURITED_STATUSES_FETCH_SUCCESS:
return normalizeList(state, 'favourites', action.statuses, action.next); return normalizeList(state, 'favourites', action.statuses, action.next);
case FAVOURITED_STATUSES_EXPAND_SUCCESS: case FAVOURITED_STATUSES_EXPAND_SUCCESS:

View file

@ -396,10 +396,12 @@
} }
} }
&__content {
max-width: calc(100% - 90px);
}
&__title { &__title {
overflow: hidden; word-wrap: break-word;
text-overflow: ellipsis;
white-space: nowrap;
} }
&__timestamp { &__timestamp {
@ -413,7 +415,7 @@
color: $ui-primary-color; color: $ui-primary-color;
font-family: 'mastodon-font-monospace', monospace; font-family: 'mastodon-font-monospace', monospace;
font-size: 12px; font-size: 12px;
white-space: nowrap; word-wrap: break-word;
min-height: 20px; min-height: 20px;
} }

View file

@ -1881,6 +1881,11 @@
cursor: default; cursor: default;
} }
.getting-started__wrapper,
.getting_started {
background: $ui-base-color;
}
.getting-started__wrapper { .getting-started__wrapper {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;

View file

@ -1,4 +1,5 @@
import axios from 'axios'; import axios from 'axios';
import ready from './ready';
import LinkHeader from './link_header'; import LinkHeader from './link_header';
export const getLinks = response => { export const getLinks = response => {
@ -11,10 +12,17 @@ export const getLinks = response => {
return LinkHeader.parse(value); return LinkHeader.parse(value);
}; };
let csrfHeader = {};
function setCSRFHeader() {
const csrfToken = document.querySelector('meta[name=csrf-token]').content;
csrfHeader['X-CSRF-Token'] = csrfToken;
}
ready(setCSRFHeader);
export default getState => axios.create({ export default getState => axios.create({
headers: { headers: Object.assign(csrfHeader, getState ? {
'Authorization': `Bearer ${getState().getIn(['meta', 'access_token'], '')}`, 'Authorization': `Bearer ${getState().getIn(['meta', 'access_token'], '')}`,
}, } : {}),
transformResponse: [function (data) { transformResponse: [function (data) {
try { try {