[Glitch] Fix various issues with logged-out web UI

Port part of e2b561e3a5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2022-10-04 20:13:23 +02:00 committed by Claire
parent e047eabd87
commit 790ee76c1c
4 changed files with 89 additions and 45 deletions

View file

@ -0,0 +1,12 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
const NotSignedInIndicator = () => (
<div className='scrollable scrollable--flex'>
<div className='empty-column-indicator'>
<FormattedMessage id='not_signed_in_indicator.not_signed_in' defaultMessage='You need to sign in to access this resource.' />
</div>
</div>
);
export default NotSignedInIndicator;

View file

@ -31,13 +31,13 @@ class Explore extends React.PureComponent {
static contextTypes = { static contextTypes = {
router: PropTypes.object, router: PropTypes.object,
identity: PropTypes.object,
}; };
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
isSearching: PropTypes.bool, isSearching: PropTypes.bool,
layout: PropTypes.string,
}; };
handleHeaderClick = () => { handleHeaderClick = () => {
@ -49,22 +49,21 @@ class Explore extends React.PureComponent {
} }
render () { render () {
const { intl, multiColumn, isSearching, layout } = this.props; const { intl, multiColumn, isSearching } = this.props;
const { signedIn } = this.context.identity;
return ( return (
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}> <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
{layout === 'mobile' ? (
<div className='explore__search-header'>
<Search />
</div>
) : (
<ColumnHeader <ColumnHeader
icon={isSearching ? 'search' : 'hashtag'} icon={isSearching ? 'search' : 'hashtag'}
title={intl.formatMessage(isSearching ? messages.searchResults : messages.title)} title={intl.formatMessage(isSearching ? messages.searchResults : messages.title)}
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
multiColumn={multiColumn} multiColumn={multiColumn}
/> />
)}
<div className='explore__search-header'>
<Search />
</div>
<div className='scrollable scrollable--flex'> <div className='scrollable scrollable--flex'>
{isSearching ? ( {isSearching ? (
@ -75,7 +74,7 @@ class Explore extends React.PureComponent {
<NavLink exact to='/explore'><FormattedMessage id='explore.trending_statuses' defaultMessage='Posts' /></NavLink> <NavLink exact to='/explore'><FormattedMessage id='explore.trending_statuses' defaultMessage='Posts' /></NavLink>
<NavLink exact to='/explore/tags'><FormattedMessage id='explore.trending_tags' defaultMessage='Hashtags' /></NavLink> <NavLink exact to='/explore/tags'><FormattedMessage id='explore.trending_tags' defaultMessage='Hashtags' /></NavLink>
<NavLink exact to='/explore/links'><FormattedMessage id='explore.trending_links' defaultMessage='News' /></NavLink> <NavLink exact to='/explore/links'><FormattedMessage id='explore.trending_links' defaultMessage='News' /></NavLink>
<NavLink exact to='/explore/suggestions'><FormattedMessage id='explore.suggested_follows' defaultMessage='For you' /></NavLink> {signedIn && <NavLink exact to='/explore/suggestions'><FormattedMessage id='explore.suggested_follows' defaultMessage='For you' /></NavLink>}
</div> </div>
<Switch> <Switch>

View file

@ -13,6 +13,9 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/act
import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container'; import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container';
import classNames from 'classnames'; import classNames from 'classnames';
import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
import { Helmet } from 'react-helmet';
import { title } from 'flavours/glitch/util/initial_state';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' }, title: { id: 'column.home', defaultMessage: 'Home' },
@ -33,6 +36,10 @@ export default @connect(mapStateToProps)
@injectIntl @injectIntl
class HomeTimeline extends React.PureComponent { class HomeTimeline extends React.PureComponent {
static contextTypes = {
identity: PropTypes.object,
};
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
@ -115,6 +122,7 @@ class HomeTimeline extends React.PureComponent {
render () { render () {
const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props; const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props;
const pinned = !!columnId; const pinned = !!columnId;
const { signedIn } = this.context.identity;
let announcementsButton = null; let announcementsButton = null;
@ -149,6 +157,7 @@ class HomeTimeline extends React.PureComponent {
<ColumnSettingsContainer /> <ColumnSettingsContainer />
</ColumnHeader> </ColumnHeader>
{signedIn ? (
<StatusListContainer <StatusListContainer
trackScroll={!pinned} trackScroll={!pinned}
scrollKey={`home_timeline-${columnId}`} scrollKey={`home_timeline-${columnId}`}
@ -158,6 +167,11 @@ class HomeTimeline extends React.PureComponent {
bindToDocument={!multiColumn} bindToDocument={!multiColumn}
regex={this.props.regex} regex={this.props.regex}
/> />
) : <NotSignedInIndicator />}
<Helmet>
<title>{intl.formatMessage(messages.title)} - {title}</title>
</Helmet>
</Column> </Column>
); );
} }

View file

@ -28,6 +28,9 @@ import LoadGap from 'flavours/glitch/components/load_gap';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import compareId from 'flavours/glitch/util/compare_id'; import compareId from 'flavours/glitch/util/compare_id';
import NotificationsPermissionBanner from './components/notifications_permission_banner'; import NotificationsPermissionBanner from './components/notifications_permission_banner';
import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
import { Helmet } from 'react-helmet';
import { title } from 'flavours/glitch/util/initial_state';
import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container'; import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
@ -94,6 +97,10 @@ export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl @injectIntl
class Notifications extends React.PureComponent { class Notifications extends React.PureComponent {
static contextTypes = {
identity: PropTypes.object,
};
static propTypes = { static propTypes = {
columnId: PropTypes.string, columnId: PropTypes.string,
notifications: ImmutablePropTypes.list.isRequired, notifications: ImmutablePropTypes.list.isRequired,
@ -224,10 +231,11 @@ class Notifications extends React.PureComponent {
const { animatingNCD } = this.state; const { animatingNCD } = this.state;
const pinned = !!columnId; const pinned = !!columnId;
const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here." />; const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here." />;
const { signedIn } = this.context.identity;
let scrollableContent = null; let scrollableContent = null;
const filterBarContainer = showFilterBar const filterBarContainer = (signedIn && showFilterBar)
? (<FilterBarContainer />) ? (<FilterBarContainer />)
: null; : null;
@ -257,7 +265,10 @@ class Notifications extends React.PureComponent {
this.scrollableContent = scrollableContent; this.scrollableContent = scrollableContent;
const scrollContainer = ( let scrollContainer;
if (signedIn) {
scrollContainer = (
<ScrollableList <ScrollableList
scrollKey={`notifications-${columnId}`} scrollKey={`notifications-${columnId}`}
trackScroll={!pinned} trackScroll={!pinned}
@ -277,6 +288,9 @@ class Notifications extends React.PureComponent {
{scrollableContent} {scrollableContent}
</ScrollableList> </ScrollableList>
); );
} else {
scrollContainer = <NotSignedInIndicator />;
}
const extraButtons = []; const extraButtons = [];
@ -354,8 +368,13 @@ class Notifications extends React.PureComponent {
> >
<ColumnSettingsContainer /> <ColumnSettingsContainer />
</ColumnHeader> </ColumnHeader>
{filterBarContainer} {filterBarContainer}
{scrollContainer} {scrollContainer}
<Helmet>
<title>{intl.formatMessage(messages.title)} - {title}</title>
</Helmet>
</Column> </Column>
); );
} }