gab-social/app/javascript/gabsocial/features/ui/ui.js

518 lines
17 KiB
JavaScript
Raw Normal View History

2020-02-24 21:56:07 +00:00
'use strict'
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'
2020-01-28 16:29:37 +00:00
import {
initializeNotifications,
expandNotifications,
2020-02-24 21:56:07 +00:00
} 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'
2020-02-28 15:20:47 +00:00
import ModalRoot from '../../components/modal/modal_root'
import PopoverRoot from '../../components/popover/popover_root'
2020-02-24 21:56:07 +00:00
import UploadArea from '../../components/upload_area'
// import TrendsPanel from './components/trends_panel'
// import { WhoToFollowPanel } from '../../components/panel'
// import LinkFooter from '../../components/link_footer'
2020-02-17 17:50:29 +00:00
import ProfilePage from '../../pages/profile_page'
2020-02-29 15:42:47 +00:00
import GroupPage from '../../pages/group_page'
2020-02-22 23:26:23 +00:00
import GroupsPage from '../../pages/groups_page'
import SearchPage from '../../pages/search_page'
import ErrorPage from '../../pages/error_page'
2020-02-17 17:50:29 +00:00
import HomePage from '../../pages/home_page'
import NotificationsPage from '../../pages/notifications_page'
2020-02-19 23:57:07 +00:00
import ListPage from '../../pages/list_page'
import ListsPage from '../../pages/lists_page'
2020-03-04 03:45:16 +00:00
import BasicPage from '../../pages/basic_page'
2020-02-24 21:56:07 +00:00
import SettingsPage from '../../pages/settings_page'
// import GroupSidebarPanel from '../groups/sidebar_panel'
import {
2020-03-04 03:45:16 +00:00
AccountGallery,
2020-02-17 17:50:29 +00:00
AccountTimeline,
2020-03-04 03:45:16 +00:00
Blocks,
CommunityTimeline,
DomainBlocks,
Explore,
Favorites,
FavoritedStatuses,
2020-02-29 15:42:47 +00:00
Followers,
Following,
2020-03-04 03:45:16 +00:00
FollowRequests,
2020-02-22 23:26:23 +00:00
GenericNotFound,
2020-03-04 03:45:16 +00:00
GettingStarted,
2020-02-22 23:26:23 +00:00
GroupsCollection,
2020-02-29 15:42:47 +00:00
GroupCreate,
GroupEdit,
2020-03-04 03:45:16 +00:00
GroupMembers,
GroupRemovedAccounts,
GroupTimeline,
HashtagTimeline,
HomeTimeline,
ListsDirectory,
ListTimeline,
Mutes,
Notifications,
Reblogs,
Search,
Status,
2020-02-24 21:56:07 +00:00
} 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.
2020-02-24 21:56:07 +00:00
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' },
2020-02-24 21:56:07 +00:00
})
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,
2020-02-24 21:56:07 +00:00
})
const keyMap = {
help: '?',
new: 'n',
search: 's',
forceNew: 'option+n',
reply: 'r',
2020-02-29 15:42:47 +00:00
Favorite: 'f',
boost: 'b',
mention: 'm',
open: ['enter', 'o'],
openProfile: 'p',
moveDown: ['down', 'j'],
moveUp: ['up', 'k'],
back: 'backspace',
goToHome: 'g h',
goToNotifications: 'g n',
goToStart: 'g s',
2020-02-29 15:42:47 +00:00
goToFavorites: 'g f',
goToProfile: 'g u',
goToBlocked: 'g b',
goToMuted: 'g m',
goToRequests: 'g r',
2020-02-24 21:56:07 +00:00
}
2020-02-22 23:26:23 +00:00
class SwitchingArea extends PureComponent {
static propTypes = {
children: PropTypes.node,
location: PropTypes.object,
onLayoutChange: PropTypes.func.isRequired,
2020-02-24 21:56:07 +00:00
}
componentWillMount() {
2020-02-22 23:26:23 +00:00
window.addEventListener('resize', this.handleResize, {
passive: true
})
}
componentWillUnmount() {
2020-02-22 23:26:23 +00:00
window.removeEventListener('resize', this.handleResize)
}
handleResize = debounce(() => {
// The cached heights are no longer accurate, invalidate
2020-02-22 23:26:23 +00:00
this.props.onLayoutChange()
}, 500, {
trailing: true,
2020-02-22 23:26:23 +00:00
})
setRef = c => {
2020-02-22 23:26:23 +00:00
this.node = c.getWrappedInstance()
}
render() {
2020-02-22 23:26:23 +00:00
const { children } = this.props
return (
<Switch>
<Redirect from='/' to='/home' exact />
<WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
2020-03-04 03:45:16 +00:00
<WrappedRoute path='/timeline/all' exact page={BasicPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Hashtag Timeline' }} />
2020-02-22 23:26:23 +00:00
<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' }} />
<WrappedRoute path='/groups/browse/admin' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'admin' }} />
2020-02-29 15:42:47 +00:00
<WrappedRoute path='/groups/create' page={GroupsPage} component={GroupCreate} content={children} componentParams={{ showCreateForm: true, activeTab: 'featured' }} />
<WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
<WrappedRoute path='/groups/:id/removed_accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />
<WrappedRoute path='/groups/:id/edit' page={GroupPage} component={GroupEdit} content={children} />
<WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
2020-03-04 03:45:16 +00:00
<WrappedRoute path='/tags/:id' publicRoute page={BasicPage} component={HashtagTimeline} content={children} componentParams={{ title: 'Hashtag' }} />
2020-02-22 23:26:23 +00:00
<WrappedRoute path='/lists' exact page={ListsPage} component={ListsDirectory} content={children} />
2020-02-19 23:57:07 +00:00
<WrappedRoute path='/list/:id' page={ListPage} component={ListTimeline} content={children} />
2020-02-22 23:26:23 +00:00
<WrappedRoute path='/notifications' exact page={NotificationsPage} component={Notifications} content={children} />
2020-01-28 16:29:37 +00:00
<WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
<WrappedRoute path='/search/people' exact page={SearchPage} component={Search} content={children} />
<WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
<WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
2020-02-22 23:26:23 +00:00
{/*
2020-03-04 03:45:16 +00:00
<WrappedRoute path='/settings/account' exact page={SettingsPage} component={AccountSettings} content={children} />
<WrappedRoute path='/settings/profile' exact page={SettingsPage} component={ProfileSettings} content={children} />
2020-02-22 23:26:23 +00:00
<WrappedRoute path='/settings/domain_blocks' exact page={SettingsPage} component={DomainBlocks} content={children} />
2020-03-04 03:45:16 +00:00
<WrappedRoute path='/settings/relationships' exact page={SettingsPage} component={RelationshipSettings} content={children} />
<WrappedRoute path='/settings/filters' exact page={SettingsPage} component={Filters} content={children} />
2020-02-22 23:26:23 +00:00
<WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={Blocks} content={children} />
<WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} />
2020-03-04 03:45:16 +00:00
<WrappedRoute path='/settings/development' exact page={SettingsPage} component={Development} content={children} />
<WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Billing} content={children} />
2020-02-24 21:56:07 +00:00
*/ }
2020-02-22 23:26:23 +00:00
<Redirect from='/@:username' to='/:username' exact />
2020-02-22 23:26:23 +00:00
<WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
2020-02-24 21:56:07 +00:00
2020-02-29 15:42:47 +00:00
<Redirect from='/@:username/comments' to='/:username/comments' />
<WrappedRoute path='/:username/comments' page={ProfilePage} component={AccountTimeline} content={children} componentParams={{ commentsOnly: true }} />
<Redirect from='/@:username/followers' to='/:username/followers' />
2020-02-29 15:42:47 +00:00
<WrappedRoute path='/:username/followers' page={ProfilePage} component={Followers} content={children} />
<Redirect from='/@:username/following' to='/:username/following' />
2020-02-29 15:42:47 +00:00
<WrappedRoute path='/:username/following' page={ProfilePage} component={Following} content={children} />
2020-03-04 03:45:16 +00:00
<Redirect from='/@:username/photos' to='/:username/photos' />
<WrappedRoute path='/:username/photos' page={ProfilePage} component={AccountGallery} content={children} componentParams={{ mediaType: 'photo' }} />
<Redirect from='/@:username/videos' to='/:username/videos' />
<WrappedRoute path='/:username/videos' page={ProfilePage} component={AccountGallery} content={children} componentParams={{ mediaType: 'video' }} />
<Redirect from='/@:username/favorites' to='/:username/favorites' />
2020-02-29 15:42:47 +00:00
<WrappedRoute path='/:username/favorites' page={ProfilePage} component={FavoritedStatuses} content={children} />
2020-02-22 23:26:23 +00:00
<Redirect from='/@:username/posts/:statusId' to='/:username/posts/:statusId' exact />
2020-03-04 03:45:16 +00:00
<WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={Status} content={children} componentParams={{ title: 'Status' }} />
2020-02-22 23:26:23 +00:00
<Redirect from='/@:username/posts/:statusId/reblogs' to='/:username/posts/:statusId/reblogs' />
2020-03-04 03:45:16 +00:00
<WrappedRoute path='/:username/posts/:statusId/reblogs' page={BasicPage} component={Reblogs} content={children} componentParams={{ title: 'Reblogs' }} />
<Redirect from='/@:username/posts/:statusId/favorites' to='/:username/posts/:statusId/favorites' />
<WrappedRoute path='/:username/posts/:statusId/favorites' page={BasicPage} component={Favorites} content={children} componentParams={{ title: 'Favorites' }} />
2020-02-22 23:26:23 +00:00
<WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} />
</Switch>
2020-02-24 21:56:07 +00:00
)
}
}
2020-02-22 23:26:23 +00:00
export default
@connect(mapStateToProps)
@injectIntl
@withRouter
2020-01-29 21:54:39 +00:00
class UI extends PureComponent {
static contextTypes = {
router: PropTypes.object.isRequired,
2020-02-22 23:26:23 +00:00
}
static propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node,
isComposing: PropTypes.bool,
hasComposingText: PropTypes.bool,
hasMediaAttachments: PropTypes.bool,
location: PropTypes.object,
intl: PropTypes.object.isRequired,
2020-02-22 23:26:23 +00:00
}
state = {
draggingOver: false,
2020-02-22 23:26:23 +00:00
}
handleBeforeUnload = (e) => {
2020-02-22 23:26:23 +00:00
const {
intl,
isComposing,
hasComposingText,
hasMediaAttachments
} = this.props
if (isComposing && (hasComposingText || hasMediaAttachments)) {
// Setting returnValue to any string causes confirmation dialog.
// Many browsers no longer display this text to users,
// but we set user-friendly message for other browsers, e.g. Edge.
2020-02-22 23:26:23 +00:00
e.returnValue = intl.formatMessage(messages.beforeUnload)
}
}
handleLayoutChange = () => {
// The cached heights are no longer accurate, invalidate
2020-02-22 23:26:23 +00:00
this.props.dispatch(clearHeight())
}
handleDragEnter = (e) => {
2020-02-22 23:26:23 +00:00
e.preventDefault()
if (!this.dragTargets) {
2020-02-22 23:26:23 +00:00
this.dragTargets = []
}
if (this.dragTargets.indexOf(e.target) === -1) {
2020-02-22 23:26:23 +00:00
this.dragTargets.push(e.target)
}
if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files')) {
2020-02-22 23:26:23 +00:00
this.setState({
2020-03-04 03:45:16 +00:00
draggingOver: true,
2020-02-22 23:26:23 +00:00
})
}
}
handleDragOver = (e) => {
2020-02-22 23:26:23 +00:00
if (this.dataTransferIsText(e.dataTransfer)) return false
e.preventDefault()
e.stopPropagation()
try {
2020-02-24 21:56:07 +00:00
e.dataTransfer.dropEffect = 'copy'
} catch (err) {
2020-02-22 23:26:23 +00:00
//
}
2020-02-22 23:26:23 +00:00
return false
}
handleDrop = (e) => {
2020-02-22 23:26:23 +00:00
if (!me) return
2020-02-22 23:26:23 +00:00
if (this.dataTransferIsText(e.dataTransfer)) return
e.preventDefault()
2020-02-22 23:26:23 +00:00
this.setState({
draggingOver: false
})
this.dragTargets = []
if (e.dataTransfer && e.dataTransfer.files.length >= 1) {
2020-02-22 23:26:23 +00:00
this.props.dispatch(uploadCompose(e.dataTransfer.files))
}
}
handleDragLeave = (e) => {
2020-02-24 21:56:07 +00:00
e.preventDefault()
e.stopPropagation()
2020-02-24 21:56:07 +00:00
this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el))
2020-02-22 23:26:23 +00:00
if (this.dragTargets.length > 0) return
2020-02-22 23:26:23 +00:00
this.setState({
draggingOver: false
})
}
dataTransferIsText = (dataTransfer) => {
2020-02-22 23:26:23 +00:00
return (
dataTransfer
&& Array.from(dataTransfer.types).includes('text/plain')
&& dataTransfer.items.length === 1
)
}
closeUploadModal = () => {
2020-02-22 23:26:23 +00:00
this.setState({
draggingOver: false
})
}
handleServiceWorkerPostMessage = ({ data }) => {
if (data.type === 'navigate') {
2020-02-24 21:56:07 +00:00
this.context.router.history.push(data.path)
} else {
2020-02-24 21:56:07 +00:00
console.warn('Unknown message type:', data.type)
}
}
componentWillMount() {
2020-02-24 21:56:07 +00:00
window.addEventListener('beforeunload', this.handleBeforeUnload, false)
2020-02-24 21:56:07 +00:00
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) {
2020-02-24 21:56:07 +00:00
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage)
}
if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
2020-02-24 21:56:07 +00:00
window.setTimeout(() => Notification.requestPermission(), 120 * 1000)
}
if (me) {
2020-02-24 21:56:07 +00:00
this.props.dispatch(expandHomeTimeline())
this.props.dispatch(expandNotifications())
this.props.dispatch(initializeNotifications())
this.props.dispatch(fetchGroups('member'))
2020-02-24 21:56:07 +00:00
setTimeout(() => this.props.dispatch(fetchFilters()), 500)
}
}
componentDidMount() {
2020-02-24 21:56:07 +00:00
if (!me) return
2020-02-22 23:26:23 +00:00
this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
2020-02-24 21:56:07 +00:00
return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName)
}
}
componentWillUnmount() {
2020-02-24 21:56:07 +00:00
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 => {
2020-02-24 21:56:07 +00:00
this.node = c
}
handleHotkeyNew = e => {
2020-02-24 21:56:07 +00:00
e.preventDefault()
2020-02-24 21:56:07 +00:00
const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea')
if (element) {
2020-02-24 21:56:07 +00:00
element.focus()
}
}
handleHotkeySearch = e => {
2020-02-24 21:56:07 +00:00
e.preventDefault()
2020-02-24 21:56:07 +00:00
const element = this.node.querySelector('.search__input')
if (element) {
2020-02-24 21:56:07 +00:00
element.focus()
}
}
handleHotkeyForceNew = e => {
2020-02-24 21:56:07 +00:00
this.handleHotkeyNew(e)
this.props.dispatch(resetCompose())
}
handleHotkeyBack = () => {
if (window.history && window.history.length === 1) {
2020-02-22 23:26:23 +00:00
this.context.router.history.push('/home') // homehack
} else {
2020-02-22 23:26:23 +00:00
this.context.router.history.goBack()
}
}
setHotkeysRef = c => {
2020-02-24 21:56:07 +00:00
this.hotkeys = c
}
handleHotkeyToggleHelp = () => {
2020-02-22 23:26:23 +00:00
this.props.dispatch(openModal("HOTKEYS"))
}
handleHotkeyGoToHome = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push('/home')
}
handleHotkeyGoToNotifications = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push('/notifications')
}
2020-01-28 16:29:37 +00:00
handleHotkeyGoToStart = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push('/getting-started')
2020-01-28 16:29:37 +00:00
}
2020-02-29 15:42:47 +00:00
handleHotkeyGoToFavorites = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push(`/${meUsername}/favorites`)
}
handleHotkeyGoToProfile = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push(`/${meUsername}`)
}
handleHotkeyGoToBlocked = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push('/blocks')
}
handleHotkeyGoToMuted = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push('/mutes')
}
handleHotkeyGoToRequests = () => {
2020-02-22 23:26:23 +00:00
this.context.router.history.push('/follow_requests')
}
handleOpenComposeModal = () => {
2020-02-22 23:26:23 +00:00
this.props.dispatch(openModal("COMPOSE"))
}
render() {
2020-02-24 21:56:07 +00:00
const { draggingOver } = this.state
2020-02-28 15:20:47 +00:00
const { children, location } = this.props
const handlers = me ? {
help: this.handleHotkeyToggleHelp,
new: this.handleHotkeyNew,
search: this.handleHotkeySearch,
forceNew: this.handleHotkeyForceNew,
back: this.handleHotkeyBack,
goToHome: this.handleHotkeyGoToHome,
goToNotifications: this.handleHotkeyGoToNotifications,
2020-01-28 16:29:37 +00:00
goToStart: this.handleHotkeyGoToStart,
2020-02-29 15:42:47 +00:00
goToFavorites: this.handleHotkeyGoToFavorites,
goToProfile: this.handleHotkeyGoToProfile,
goToBlocked: this.handleHotkeyGoToBlocked,
goToMuted: this.handleHotkeyGoToMuted,
goToRequests: this.handleHotkeyGoToRequests,
2020-02-24 21:56:07 +00:00
} : {}
return (
2020-02-22 23:26:23 +00:00
<HotKeys
keyMap={keyMap}
handlers={handlers}
ref={this.setHotkeysRef}
attach={window}
focused
>
2020-02-28 15:20:47 +00:00
<div ref={this.setRef}>
2020-02-22 23:26:23 +00:00
<SwitchingArea
location={location}
onLayoutChange={this.handleLayoutChange}
>
{children}
2020-02-22 23:26:23 +00:00
</SwitchingArea>
<NotificationsContainer />
2020-02-28 15:20:47 +00:00
<ModalRoot />
<PopoverRoot />
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />
</div>
</HotKeys>
2020-02-24 21:56:07 +00:00
)
}
}