[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:
parent
e047eabd87
commit
790ee76c1c
4 changed files with 89 additions and 45 deletions
|
@ -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;
|
|
@ -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' ? (
|
<ColumnHeader
|
||||||
<div className='explore__search-header'>
|
icon={isSearching ? 'search' : 'hashtag'}
|
||||||
<Search />
|
title={intl.formatMessage(isSearching ? messages.searchResults : messages.title)}
|
||||||
</div>
|
onClick={this.handleHeaderClick}
|
||||||
) : (
|
multiColumn={multiColumn}
|
||||||
<ColumnHeader
|
/>
|
||||||
icon={isSearching ? 'search' : 'hashtag'}
|
|
||||||
title={intl.formatMessage(isSearching ? messages.searchResults : messages.title)}
|
<div className='explore__search-header'>
|
||||||
onClick={this.handleHeaderClick}
|
<Search />
|
||||||
multiColumn={multiColumn}
|
</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>
|
||||||
|
|
|
@ -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,15 +157,21 @@ class HomeTimeline extends React.PureComponent {
|
||||||
<ColumnSettingsContainer />
|
<ColumnSettingsContainer />
|
||||||
</ColumnHeader>
|
</ColumnHeader>
|
||||||
|
|
||||||
<StatusListContainer
|
{signedIn ? (
|
||||||
trackScroll={!pinned}
|
<StatusListContainer
|
||||||
scrollKey={`home_timeline-${columnId}`}
|
trackScroll={!pinned}
|
||||||
onLoadMore={this.handleLoadMore}
|
scrollKey={`home_timeline-${columnId}`}
|
||||||
timelineId='home'
|
onLoadMore={this.handleLoadMore}
|
||||||
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Follow more people to fill it up. {suggestions}' values={{ suggestions: <Link to='/start'><FormattedMessage id='empty_column.home.suggestions' defaultMessage='See some suggestions' /></Link> }} />}
|
timelineId='home'
|
||||||
bindToDocument={!multiColumn}
|
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Follow more people to fill it up. {suggestions}' values={{ suggestions: <Link to='/start'><FormattedMessage id='empty_column.home.suggestions' defaultMessage='See some suggestions' /></Link> }} />}
|
||||||
regex={this.props.regex}
|
bindToDocument={!multiColumn}
|
||||||
/>
|
regex={this.props.regex}
|
||||||
|
/>
|
||||||
|
) : <NotSignedInIndicator />}
|
||||||
|
|
||||||
|
<Helmet>
|
||||||
|
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
||||||
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,26 +265,32 @@ class Notifications extends React.PureComponent {
|
||||||
|
|
||||||
this.scrollableContent = scrollableContent;
|
this.scrollableContent = scrollableContent;
|
||||||
|
|
||||||
const scrollContainer = (
|
let scrollContainer;
|
||||||
<ScrollableList
|
|
||||||
scrollKey={`notifications-${columnId}`}
|
if (signedIn) {
|
||||||
trackScroll={!pinned}
|
scrollContainer = (
|
||||||
isLoading={isLoading}
|
<ScrollableList
|
||||||
showLoading={isLoading && notifications.size === 0}
|
scrollKey={`notifications-${columnId}`}
|
||||||
hasMore={hasMore}
|
trackScroll={!pinned}
|
||||||
numPending={numPending}
|
isLoading={isLoading}
|
||||||
prepend={needsNotificationPermission && <NotificationsPermissionBanner />}
|
showLoading={isLoading && notifications.size === 0}
|
||||||
alwaysPrepend
|
hasMore={hasMore}
|
||||||
emptyMessage={emptyMessage}
|
numPending={numPending}
|
||||||
onLoadMore={this.handleLoadOlder}
|
prepend={needsNotificationPermission && <NotificationsPermissionBanner />}
|
||||||
onLoadPending={this.handleLoadPending}
|
alwaysPrepend
|
||||||
onScrollToTop={this.handleScrollToTop}
|
emptyMessage={emptyMessage}
|
||||||
onScroll={this.handleScroll}
|
onLoadMore={this.handleLoadOlder}
|
||||||
bindToDocument={!multiColumn}
|
onLoadPending={this.handleLoadPending}
|
||||||
>
|
onScrollToTop={this.handleScrollToTop}
|
||||||
{scrollableContent}
|
onScroll={this.handleScroll}
|
||||||
</ScrollableList>
|
bindToDocument={!multiColumn}
|
||||||
);
|
>
|
||||||
|
{scrollableContent}
|
||||||
|
</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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue