Merge branch 'next-link-footer' into 'next'
Next: LinkFooter improvements See merge request soapbox-pub/soapbox-fe!1168
This commit is contained in:
Alex Gleason
commit
0421be4aaa
|
|
@ -1,105 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { logOut } from 'soapbox/actions/auth';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
import emojify from 'soapbox/features/emoji/emoji';
|
||||
import { getBaseURL } from 'soapbox/utils/accounts';
|
||||
import sourceCode from 'soapbox/utils/code';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
|
||||
import { openModal } from '../../../actions/modals';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const me = state.get('me');
|
||||
const account = state.getIn(['accounts', me]);
|
||||
const instance = state.get('instance');
|
||||
const features = getFeatures(instance);
|
||||
const soapboxConfig = getSoapboxConfig(state);
|
||||
|
||||
return {
|
||||
account,
|
||||
soapboxConfig,
|
||||
profileDirectory: features.profileDirectory,
|
||||
federating: features.federating,
|
||||
showAliases: features.accountAliasesAPI,
|
||||
importAPI: features.importAPI,
|
||||
baseURL: getBaseURL(account),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
onOpenHotkeys(e) {
|
||||
dispatch(openModal('HOTKEYS'));
|
||||
e.preventDefault();
|
||||
},
|
||||
onClickLogOut(e) {
|
||||
dispatch(logOut(intl));
|
||||
e.preventDefault();
|
||||
},
|
||||
});
|
||||
|
||||
const LinkFooter = ({ onOpenHotkeys, account, profileDirectory, federating, showAliases, importAPI, onClickLogOut, baseURL, soapboxConfig }) => (
|
||||
<div className='space-y-2'>
|
||||
<ul className='flex flex-wrap items-center divide-x-dot'>
|
||||
{account && <>
|
||||
{profileDirectory && <li><Link to='/directory' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></Link></li>}
|
||||
<li><Link to='/blocks' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.blocks' defaultMessage='Blocks' /></Link></li>
|
||||
<li><Link to='/mutes' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.mutes' defaultMessage='Mutes' /></Link></li>
|
||||
{/* <li><Link to='/filters' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.filters' defaultMessage='Filters' /></Link></li> */}
|
||||
{federating && <li><Link to='/domain_blocks' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.domain_blocks' defaultMessage='Domain blocks' /></Link></li>}
|
||||
{/* <li><Link to='/follow_requests'><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></Link></li> */}
|
||||
{/* isAdmin(account) && <li><a href='/pleroma/admin' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.admin_settings' defaultMessage='AdminFE' /></a></li> */}
|
||||
{/* isAdmin(account) && <li><Link to='/soapbox/config' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.soapbox_config' defaultMessage='Soapbox config' /></Link></li> */}
|
||||
{/* <li><Link to='/settings/export'><FormattedMessage id='navigation_bar.export_data' defaultMessage='Export data' /></Link></li> */}
|
||||
{/* <li>{importAPI ? (
|
||||
<Link to='/settings/import'><FormattedMessage id='navigation_bar.import_data' defaultMessage='Import data' /></Link>
|
||||
) : (
|
||||
<a href={`${baseURL}/settings/import`}><FormattedMessage id='navigation_bar.import_data' defaultMessage='Import data' /></a>
|
||||
)}</li> */}
|
||||
{(federating && showAliases) && <li><Link to='/settings/aliases' className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.account_aliases' defaultMessage='Account aliases' /></Link></li>}
|
||||
{/* <li><a href='#' onClick={onOpenHotkeys}><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></a></li> */}
|
||||
</>}
|
||||
{/* <li><Link to='/about'><FormattedMessage id='navigation_bar.info' defaultMessage='About this server' /></Link></li> */}
|
||||
{account && <li><Link to='/auth/sign_out' onClick={onClickLogOut} className='text-gray-400 hover:text-gray-500 hover:underline'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></Link></li>}
|
||||
</ul>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
{soapboxConfig.get('linkFooterMessage') ? (
|
||||
<span
|
||||
className='inline-block align-middle'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(soapboxConfig.get('linkFooterMessage')) }}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id='getting_started.open_source_notice'
|
||||
defaultMessage='{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).'
|
||||
values={{
|
||||
code_name: sourceCode.displayName,
|
||||
code_link: <a href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a>,
|
||||
code_version: sourceCode.version,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
|
||||
LinkFooter.propTypes = {
|
||||
account: ImmutablePropTypes.record,
|
||||
soapboxConfig: ImmutablePropTypes.map,
|
||||
profileDirectory: PropTypes.bool,
|
||||
federating: PropTypes.bool,
|
||||
showAliases: PropTypes.bool,
|
||||
importAPI: PropTypes.bool,
|
||||
onOpenHotkeys: PropTypes.func.isRequired,
|
||||
onClickLogOut: PropTypes.func.isRequired,
|
||||
baseURL: PropTypes.string,
|
||||
};
|
||||
|
||||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LinkFooter));
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { logOut } from 'soapbox/actions/auth';
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
import emojify from 'soapbox/features/emoji/emoji';
|
||||
import { useSoapboxConfig, useOwnAccount, useFeatures } from 'soapbox/hooks';
|
||||
import sourceCode from 'soapbox/utils/code';
|
||||
|
||||
interface IFooterLink {
|
||||
to: string,
|
||||
className?: string,
|
||||
onClick?: React.EventHandler<React.MouseEvent>,
|
||||
}
|
||||
|
||||
const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JSX.Element => {
|
||||
return (
|
||||
<Link className={classNames('text-gray-400 hover:text-gray-500 hover:underline', className)} {...rest}>{children}</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const LinkFooter: React.FC = (): JSX.Element => {
|
||||
const account = useOwnAccount();
|
||||
const features = useFeatures();
|
||||
const soapboxConfig = useSoapboxConfig();
|
||||
|
||||
const intl = useIntl();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const onClickLogOut: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
dispatch(logOut(intl));
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='space-y-2'>
|
||||
<div className='flex flex-wrap items-center divide-x-dot'>
|
||||
{account && <>
|
||||
{features.profileDirectory && (
|
||||
<FooterLink to='/directory'><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></FooterLink>
|
||||
)}
|
||||
<FooterLink to='/blocks'><FormattedMessage id='navigation_bar.blocks' defaultMessage='Blocks' /></FooterLink>
|
||||
<FooterLink to='/mutes'><FormattedMessage id='navigation_bar.mutes' defaultMessage='Mutes' /></FooterLink>
|
||||
{features.filters && (
|
||||
<FooterLink to='/filters'><FormattedMessage id='navigation_bar.filters' defaultMessage='Filters' /></FooterLink>
|
||||
)}
|
||||
{features.federating && (
|
||||
<FooterLink to='/domain_blocks'><FormattedMessage id='navigation_bar.domain_blocks' defaultMessage='Domain blocks' /></FooterLink>
|
||||
)}
|
||||
{account.locked && (
|
||||
<FooterLink to='/follow_requests'><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></FooterLink>
|
||||
)}
|
||||
{features.importAPI && (
|
||||
<FooterLink to='/settings/import'><FormattedMessage id='navigation_bar.import_data' defaultMessage='Import data' /></FooterLink>
|
||||
)}
|
||||
{(features.federating && features.accountMoving) && (
|
||||
<FooterLink to='/settings/migration'><FormattedMessage id='navigation_bar.account_migration' defaultMessage='Move account' /></FooterLink>
|
||||
)}
|
||||
<FooterLink to='/auth/sign_out' onClick={onClickLogOut}><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></FooterLink>
|
||||
</>}
|
||||
</div>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
{soapboxConfig.linkFooterMessage ? (
|
||||
<span
|
||||
className='inline-block align-middle'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(soapboxConfig.linkFooterMessage) }}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id='getting_started.open_source_notice'
|
||||
defaultMessage='{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).'
|
||||
values={{
|
||||
code_name: sourceCode.displayName,
|
||||
code_link: <a href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a>,
|
||||
code_version: sourceCode.version,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinkFooter;
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export { useAppSelector } from './useAppSelector';
|
||||
export { useFeatures } from './useFeatures';
|
||||
export { useOnScreen } from './useOnScreen';
|
||||
export { useOwnAccount } from './useOwnAccount';
|
||||
export { useSettings } from './useSettings';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
|
||||
import type { Features } from 'soapbox/utils/features';
|
||||
|
||||
/** Get features for the current instance */
|
||||
export const useFeatures = (): Features => {
|
||||
return useAppSelector((state) => getFeatures(state.instance));
|
||||
};
|
||||
|
|
@ -112,6 +112,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
|
|||
authenticatedProfile: true,
|
||||
singleUserMode: false,
|
||||
singleUserModeProfile: '',
|
||||
linkFooterMessage: '',
|
||||
}, 'SoapboxConfig');
|
||||
|
||||
type SoapboxConfigMap = ImmutableMap<string, any>;
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ const getInstanceFeatures = (instance: Instance) => {
|
|||
};
|
||||
};
|
||||
|
||||
type Features = ReturnType<typeof getInstanceFeatures>;
|
||||
export type Features = ReturnType<typeof getInstanceFeatures>;
|
||||
|
||||
export const getFeatures = createSelector([
|
||||
(instance: Instance) => instance,
|
||||
|
|
|
|||
Loading…
Reference in New Issue