This commit is contained in:
mgabdev
2020-02-24 16:56:07 -05:00
parent d255982ec5
commit 7679012e2f
84 changed files with 1048 additions and 1132 deletions

View File

@@ -8,7 +8,7 @@ import Button from '../../../components/button';
import { autoPlayGif, me, isStaff } from '../../../initial_state';
import Avatar from '../../../components/avatar';
import { shortNumberFormat } from '../../../utils/numbers';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
import Dropdown from '../../../components/dropdown_menu'
import ProfileInfoPanel from './profile_info_panel/profile_info_panel';
const messages = defineMessages({

View File

@@ -1,112 +1,111 @@
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, injectIntl } from 'react-intl'
import {
expandCommunityTimeline,
expandPublicTimeline,
} from '../../actions/timelines';
} from '../../actions/timelines'
import {
connectCommunityStream,
connectPublicStream,
} from '../../actions/streaming';
import StatusListContainer from '../../containers/status_list_container';;
// import ColumnSettingsContainer from '.containers/column_settings_container';
import Column from '../../components/column';
} from '../../actions/streaming'
import StatusListContainer from '../../containers/status_list_container'
const messages = defineMessages({
title: { id: 'column.community', defaultMessage: 'Community timeline' },
});
empty: { id: 'empty_column.community', defaultMessage: 'The community timeline is empty. Write something publicly to get the ball rolling!' },
})
const mapStateToProps = state => {
const allFediverse = state.getIn(['settings', 'community', 'other', 'allFediverse']);
const onlyMedia = state.getIn(['settings', 'community', 'other', 'onlyMedia']);
const allFediverse = state.getIn(['settings', 'community', 'other', 'allFediverse'])
const onlyMedia = state.getIn(['settings', 'community', 'other', 'onlyMedia'])
const timelineId = allFediverse ? 'public' : 'community';
const timelineId = allFediverse ? 'public' : 'community'
return {
timelineId,
allFediverse,
onlyMedia,
hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0,
};
};
// hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0,
}
}
export default @connect(mapStateToProps)
export default
@connect(mapStateToProps)
@injectIntl
class CommunityTimeline extends PureComponent {
static contextTypes = {
router: PropTypes.object,
};
}
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
hasUnread: PropTypes.bool,
// hasUnread: PropTypes.bool,
onlyMedia: PropTypes.bool,
allFediverse: PropTypes.bool,
timelineId: PropTypes.string,
};
}
componentDidMount () {
const { dispatch, onlyMedia, allFediverse } = this.props;
const { dispatch, onlyMedia, allFediverse } = this.props
if (allFediverse) {
dispatch(expandPublicTimeline({ onlyMedia }));
this.disconnect = dispatch(connectPublicStream({ onlyMedia }));
dispatch(expandPublicTimeline({ onlyMedia }))
this.disconnect = dispatch(connectPublicStream({ onlyMedia }))
}
else {
dispatch(expandCommunityTimeline({ onlyMedia }));
this.disconnect = dispatch(connectCommunityStream({ onlyMedia }));
dispatch(expandCommunityTimeline({ onlyMedia }))
this.disconnect = dispatch(connectCommunityStream({ onlyMedia }))
}
}
componentDidUpdate (prevProps) {
if (prevProps.onlyMedia !== this.props.onlyMedia || prevProps.allFediverse !== this.props.allFediverse) {
const { dispatch, onlyMedia, allFediverse } = this.props;
const { dispatch, onlyMedia, allFediverse } = this.props
this.disconnect();
this.disconnect()
if (allFediverse) {
dispatch(expandPublicTimeline({ onlyMedia }));
this.disconnect = dispatch(connectPublicStream({ onlyMedia }));
dispatch(expandPublicTimeline({ onlyMedia }))
this.disconnect = dispatch(connectPublicStream({ onlyMedia }))
}
else {
dispatch(expandCommunityTimeline({ onlyMedia }));
this.disconnect = dispatch(connectCommunityStream({ onlyMedia }));
dispatch(expandCommunityTimeline({ onlyMedia }))
this.disconnect = dispatch(connectCommunityStream({ onlyMedia }))
}
}
}
componentWillUnmount () {
if (this.disconnect) {
this.disconnect();
this.disconnect = null;
this.disconnect()
this.disconnect = null
}
}
handleLoadMore = maxId => {
const { dispatch, onlyMedia, allFediverse } = this.props;
const { dispatch, onlyMedia, allFediverse } = this.props
if (allFediverse) {
dispatch(expandPublicTimeline({ maxId, onlyMedia }));
dispatch(expandPublicTimeline({ maxId, onlyMedia }))
}
else {
dispatch(expandCommunityTimeline({ maxId, onlyMedia }));
dispatch(expandCommunityTimeline({ maxId, onlyMedia }))
}
}
render () {
const { intl, hasUnread, onlyMedia, timelineId, allFediverse } = this.props;
const { intl, onlyMedia, timelineId } = this.props
const emptyMessage = intl.formatMessage(messages.empty)
return (
<Column label={intl.formatMessage(messages.title)}>
<StatusListContainer
scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The community timeline is empty. Write something publicly to get the ball rolling!' />}
/>
</Column>
);
<StatusListContainer
scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
/>
)
}
}

View File

@@ -1,6 +1,6 @@
import { defineMessages, injectIntl } from 'react-intl';
import { openModal } from '../../../../actions/modal';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
import Dropdown from '../../../../components/dropdown_menu'
import { meUsername } from '../../../../initial_state';
const messages = defineMessages({

View File

@@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl';
import ActionBar from '../action_bar';
import Avatar from '../../../../components/avatar';
import Permalink from '../../../../components/permalink';
import Button from '../../../../components/button'
import IconButton from '../../../../components/icon_button';
import { me } from '../../../../initial_state';
@@ -26,15 +26,15 @@ class NavigationBar extends ImmutablePureComponent {
return (
<div className='navigation-bar'>
<Permalink href={account.get('url')} to={`/${account.get('acct')}`}>
<Button href={account.get('url')} to={`/${account.get('acct')}`}>
<span style={{ display: 'none' }}>{account.get('acct')}</span>
<Avatar account={account} size={48} />
</Permalink>
</Button>
<div className='navigation-bar__profile'>
<Permalink href={account.get('url')} to={`/${account.get('acct')}`}>
<Button href={account.get('url')} to={`/${account.get('acct')}`}>
<strong className='navigation-bar__profile-account'>@{account.get('acct')}</strong>
</Permalink>
</Button>
<a href='/settings/profile' className='navigation-bar__profile-edit'>
<FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' />

View File

@@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { authorizeFollowRequest, rejectFollowRequest } from '../../../../actions/accounts';
import { makeGetAccount } from '../../../../selectors';
import Permalink from '../../../../components/permalink';
import Button from '../../../../components/button'
import Avatar from '../../../../components/avatar';
import DisplayName from '../../../../components/display_name';
import IconButton from '../../../../components/icon_button';
@@ -51,12 +51,12 @@ class AccountAuthorize extends ImmutablePureComponent {
return (
<div className='account-authorize__wrapper'>
<div className='account-authorize'>
<Permalink href={`/${account.get('acct')}`} to={`/${account.get('acct')}`} className='account-authorize__display-name'>
<Button href={`/${account.get('acct')}`} to={`/${account.get('acct')}`} className='account-authorize__display-name'>
<div className='account-authorize__avatar'>
<Avatar account={account} size={48} />
</div>
<DisplayName account={account} />
</Permalink>
</Button>
<div className='account__header__content' dangerouslySetInnerHTML={content} />
</div>

View File

@@ -12,7 +12,7 @@ import { FormattedMessage } from 'react-intl';
import AccountContainer from '../../../containers/account_container';
import Column from '../../../components/column';
import ScrollableList from '../../../components/scrollable_list';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
import Dropdown from '../../../components/dropdown_menu'
const mapStateToProps = (state, { params: { id } }) => ({
group: state.getIn(['groups', id]),

View File

@@ -2,7 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { NavLink } from 'react-router-dom';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
import Dropdown from '../../../../components/dropdown_menu'
import Button from '../../../../components/button';
const messages = defineMessages({
@@ -24,7 +24,7 @@ class Header extends ImmutablePureComponent {
router: PropTypes.object,
};
getActionButton() {
getActionButton() {
const { group, relationships, toggleMembership, intl } = this.props;
const toggle = () => toggleMembership(group, relationships);

View File

@@ -11,7 +11,8 @@ const mapStateToProps = state => ({
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
})
export default @connect(mapStateToProps)
export default
@connect(mapStateToProps)
@injectIntl
class HomeTimeline extends PureComponent {

View File

@@ -4,7 +4,7 @@ import { HotKeys } from 'react-hotkeys';
import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusContainer from '../../../../containers/status_container';
import AccountContainer from '../../../../containers/account_container';
import Permalink from '../../../../components/permalink';
import Button from '../../../../components/button'
import Icon from '../../../../components/icon';
const notificationForScreenReader = (intl, message, timestamp) => {
@@ -240,7 +240,7 @@ class Notification extends ImmutablePureComponent {
const { notification } = this.props;
const account = notification.get('account');
const displayNameHtml = { __html: account.get('display_name_html') };
const link = <bdi><Permalink className='notification__display-name' href={`/${account.get('acct')}`} title={account.get('acct')} to={`/${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
const link = <bdi><Button className='notification__display-name' href={`/${account.get('acct')}`} title={account.get('acct')} to={`/${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
switch(notification.get('type')) {
// case 'follow':

View File

@@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { openModal } from '../../../../actions/modal';
import { me, isStaff } from '../../../../initial_state';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
import Dropdown from '../../../../components/dropdown_menu';
import IconButton from '../../../../components/icon_button';
const messages = defineMessages({

View File

@@ -1,28 +1,27 @@
'use strict';
'use strict'
import classNames from 'classnames';
import { HotKeys } from 'react-hotkeys';
import { defineMessages, injectIntl } from 'react-intl';
import { Switch, Redirect, withRouter } from 'react-router-dom';
import { debounce } from 'lodash';
import { uploadCompose, resetCompose } from '../../actions/compose';
import { expandHomeTimeline } from '../../actions/timelines';
import { HotKeys } from 'react-hotkeys'
import { defineMessages, injectIntl } from 'react-intl'
import { Switch, Redirect, withRouter } from 'react-router-dom'
import { debounce } from 'lodash'
import { uploadCompose, resetCompose } from '../../actions/compose'
import { expandHomeTimeline } from '../../actions/timelines'
import {
initializeNotifications,
expandNotifications,
} from '../../actions/notifications';
import { fetchFilters } from '../../actions/filters';
import { clearHeight } from '../../actions/height_cache';
import { openModal } from '../../actions/modal';
import WrappedRoute from './util/wrapped_route';
// import NotificationsContainer from '../../containers/notifications_container';
// import ModalContainer from '../../containers/modal_container';
// import UploadArea from '../../components/upload_area';
// import TrendsPanel from './components/trends_panel';
// import { WhoToFollowPanel } from '../../components/panel';
// import LinkFooter from '../../components/link_footer';
} from '../../actions/notifications'
import { fetchFilters } from '../../actions/filters'
import { clearHeight } from '../../actions/height_cache'
import { openModal } from '../../actions/modal'
import WrappedRoute from './util/wrapped_route'
import NotificationsContainer from '../../containers/notifications_container'
import ModalContainer from '../../containers/modal_container'
import UploadArea from '../../components/upload_area'
// import TrendsPanel from './components/trends_panel'
// import { WhoToFollowPanel } from '../../components/panel'
// import LinkFooter from '../../components/link_footer'
import ProfilePage from '../../pages/profile_page'
// import GroupPage from '../../pages/group_page';
// import GroupPage from '../../pages/group_page'
import GroupsPage from '../../pages/groups_page'
import SearchPage from '../../pages/search_page'
import ErrorPage from '../../pages/error_page'
@@ -30,12 +29,13 @@ import HomePage from '../../pages/home_page'
import NotificationsPage from '../../pages/notifications_page'
import ListPage from '../../pages/list_page'
import ListsPage from '../../pages/lists_page'
// import GroupSidebarPanel from '../groups/sidebar_panel';
import SettingsPage from '../../pages/settings_page'
// import GroupSidebarPanel from '../groups/sidebar_panel'
import {
Status,
// GettingStarted,
// CommunityTimeline,
CommunityTimeline,
AccountTimeline,
// AccountGallery,
HomeTimeline,
@@ -63,25 +63,25 @@ import {
// GroupRemovedAccounts,
// GroupCreate,
// GroupEdit,
} from './util/async-components';
import { me, meUsername } from '../../initial_state';
} from './util/async-components'
import { me, meUsername } from '../../initial_state'
// Dummy import, to make sure that <Status /> ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles.
import '../../components/status';
import { fetchGroups } from '../../actions/groups';
import '../../components/status'
import { fetchGroups } from '../../actions/groups'
const messages = defineMessages({
beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' },
publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
});
})
const mapStateToProps = state => ({
isComposing: state.getIn(['compose', 'is_composing']),
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
});
})
const keyMap = {
help: '?',
@@ -109,7 +109,7 @@ const keyMap = {
goToRequests: 'g r',
toggleHidden: 'x',
toggleSensitive: 'h',
};
}
class SwitchingArea extends PureComponent {
@@ -117,7 +117,7 @@ class SwitchingArea extends PureComponent {
children: PropTypes.node,
location: PropTypes.object,
onLayoutChange: PropTypes.func.isRequired,
};
}
componentWillMount() {
window.addEventListener('resize', this.handleResize, {
@@ -148,7 +148,7 @@ class SwitchingArea extends PureComponent {
<Redirect from='/' to='/home' exact />
<WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
{/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />*/}
<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
<WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />
<WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
@@ -184,10 +184,11 @@ class SwitchingArea extends PureComponent {
<WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/development' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Mutes} content={children} />
*/ }
*/ }
<Redirect from='/@:username' to='/:username' exact />
<WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
{ /*
<Redirect from='/@:username/with_replies' to='/:username/with_replies' />
<WrappedRoute path='/:username/with_replies' component={AccountTimeline} page={ProfilePage} content={children} componentParams={{ withReplies: true }} />
@@ -220,7 +221,7 @@ class SwitchingArea extends PureComponent {
*/}
<WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} />
</Switch>
);
)
}
}
@@ -295,7 +296,7 @@ class UI extends PureComponent {
e.stopPropagation()
try {
e.dataTransfer.dropEffect = 'copy';
e.dataTransfer.dropEffect = 'copy'
} catch (err) {
//
}
@@ -320,10 +321,10 @@ class UI extends PureComponent {
}
handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
e.preventDefault()
e.stopPropagation()
this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el));
this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el))
if (this.dragTargets.length > 0) return
@@ -348,99 +349,99 @@ class UI extends PureComponent {
handleServiceWorkerPostMessage = ({ data }) => {
if (data.type === 'navigate') {
this.context.router.history.push(data.path);
this.context.router.history.push(data.path)
} else {
console.warn('Unknown message type:', data.type);
console.warn('Unknown message type:', data.type)
}
}
componentWillMount() {
window.addEventListener('beforeunload', this.handleBeforeUnload, false);
window.addEventListener('beforeunload', this.handleBeforeUnload, false)
document.addEventListener('dragenter', this.handleDragEnter, false);
document.addEventListener('dragover', this.handleDragOver, false);
document.addEventListener('drop', this.handleDrop, false);
document.addEventListener('dragleave', this.handleDragLeave, false);
document.addEventListener('dragend', this.handleDragEnd, false);
document.addEventListener('dragenter', this.handleDragEnter, false)
document.addEventListener('dragover', this.handleDragOver, false)
document.addEventListener('drop', this.handleDrop, false)
document.addEventListener('dragleave', this.handleDragLeave, false)
document.addEventListener('dragend', this.handleDragEnd, false)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage)
}
if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
window.setTimeout(() => Notification.requestPermission(), 120 * 1000);
window.setTimeout(() => Notification.requestPermission(), 120 * 1000)
}
if (me) {
this.props.dispatch(expandHomeTimeline());
this.props.dispatch(expandNotifications());
this.props.dispatch(initializeNotifications());
this.props.dispatch(fetchGroups('member'));
this.props.dispatch(expandHomeTimeline())
this.props.dispatch(expandNotifications())
this.props.dispatch(initializeNotifications())
this.props.dispatch(fetchGroups('member'))
setTimeout(() => this.props.dispatch(fetchFilters()), 500);
setTimeout(() => this.props.dispatch(fetchFilters()), 500)
}
}
componentDidMount() {
if (!me) return;
if (!me) return
this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName);
};
return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName)
}
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleBeforeUnload);
document.removeEventListener('dragenter', this.handleDragEnter);
document.removeEventListener('dragover', this.handleDragOver);
document.removeEventListener('drop', this.handleDrop);
document.removeEventListener('dragleave', this.handleDragLeave);
document.removeEventListener('dragend', this.handleDragEnd);
window.removeEventListener('beforeunload', this.handleBeforeUnload)
document.removeEventListener('dragenter', this.handleDragEnter)
document.removeEventListener('dragover', this.handleDragOver)
document.removeEventListener('drop', this.handleDrop)
document.removeEventListener('dragleave', this.handleDragLeave)
document.removeEventListener('dragend', this.handleDragEnd)
}
setRef = c => {
this.node = c;
this.node = c
}
handleHotkeyNew = e => {
e.preventDefault();
e.preventDefault()
const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea');
const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea')
if (element) {
element.focus();
element.focus()
}
}
handleHotkeySearch = e => {
e.preventDefault();
e.preventDefault()
const element = this.node.querySelector('.search__input');
const element = this.node.querySelector('.search__input')
if (element) {
element.focus();
element.focus()
}
}
handleHotkeyForceNew = e => {
this.handleHotkeyNew(e);
this.props.dispatch(resetCompose());
this.handleHotkeyNew(e)
this.props.dispatch(resetCompose())
}
handleHotkeyFocusColumn = e => {
const index = (e.key * 1) + 1; // First child is drawer, skip that
const column = this.node.querySelector(`.column:nth-child(${index})`);
if (!column) return;
const container = column.querySelector('.scrollable');
const index = (e.key * 1) + 1 // First child is drawer, skip that
const column = this.node.querySelector(`.column:nth-child(${index})`)
if (!column) return
const container = column.querySelector('.scrollable')
if (container) {
const status = container.querySelector('.focusable');
const status = container.querySelector('.focusable')
if (status) {
if (container.scrollTop > status.offsetTop) {
status.scrollIntoView(true);
status.scrollIntoView(true)
}
status.focus();
status.focus()
}
}
}
@@ -454,7 +455,7 @@ class UI extends PureComponent {
}
setHotkeysRef = c => {
this.hotkeys = c;
this.hotkeys = c
}
handleHotkeyToggleHelp = () => {
@@ -502,8 +503,8 @@ class UI extends PureComponent {
}
render() {
const { draggingOver } = this.state;
const { children, location, dropdownMenuIsOpen } = this.props;
const { draggingOver } = this.state
const { children, location, dropdownMenuIsOpen } = this.props
const handlers = me ? {
help: this.handleHotkeyToggleHelp,
@@ -521,7 +522,7 @@ class UI extends PureComponent {
goToBlocked: this.handleHotkeyGoToBlocked,
goToMuted: this.handleHotkeyGoToMuted,
goToRequests: this.handleHotkeyGoToRequests,
} : {};
} : {}
return (
<HotKeys
@@ -544,14 +545,12 @@ class UI extends PureComponent {
{children}
</SwitchingArea>
{ /*
<NotificationsContainer />
<ModalContainer />
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />
*/ }
</div>
</HotKeys>
);
)
}
}