69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
|
'use strict';
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import { useIntl, defineMessages } from 'react-intl';
|
||
|
|
|
||
|
|
import { pinHost, unpinHost } from 'soapbox/actions/remote_timeline';
|
||
|
|
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
|
||
|
|
import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
|
||
|
|
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
||
|
|
|
||
|
|
const getRemoteInstance = makeGetRemoteInstance();
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
pinHost: { id: 'remote_instance.pin_host', defaultMessage: 'Pin {host}' },
|
||
|
|
unpinHost: { id: 'remote_instance.unpin_host', defaultMessage: 'Unpin {host}' },
|
||
|
|
});
|
||
|
|
|
||
|
|
interface IInstanceInfoPanel {
|
||
|
|
/** Hostname (domain) of the remote instance, eg "gleasonator.com" */
|
||
|
|
host: string,
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Widget that displays information about a remote instance to users. */
|
||
|
|
const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
|
||
|
|
const intl = useIntl();
|
||
|
|
const dispatch = useAppDispatch();
|
||
|
|
|
||
|
|
const settings = useSettings();
|
||
|
|
const remoteInstance: any = useAppSelector(state => getRemoteInstance(state, host));
|
||
|
|
const pinned: boolean = (settings.getIn(['remote_timeline', 'pinnedHosts']) as any).includes(host);
|
||
|
|
|
||
|
|
const handlePinHost: React.MouseEventHandler = () => {
|
||
|
|
if (!pinned) {
|
||
|
|
dispatch(pinHost(host));
|
||
|
|
} else {
|
||
|
|
dispatch(unpinHost(host));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const makeMenu = () => {
|
||
|
|
return [{
|
||
|
|
text: intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host }),
|
||
|
|
action: handlePinHost,
|
||
|
|
icon: require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
|
||
|
|
}];
|
||
|
|
};
|
||
|
|
|
||
|
|
const menu = makeMenu();
|
||
|
|
const icon = pinned ? 'thumbtack' : 'globe-w';
|
||
|
|
|
||
|
|
if (!remoteInstance) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='wtf-panel instance-federation-panel'>
|
||
|
|
<div className='wtf-panel-header'>
|
||
|
|
<i role='img' className={`fa fa-${icon} wtf-panel-header__icon`} />
|
||
|
|
<span className='wtf-panel-header__label'>
|
||
|
|
<span>{remoteInstance.get('host')}</span>
|
||
|
|
</span>
|
||
|
|
<div className='wtf-panel__menu'>
|
||
|
|
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default InstanceInfoPanel;
|