[Glitch] Add title to pages with missing title in Web UI

Port a5112b51fd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/containers/mastodon.js

@@ -1,22 +1,25 @@
-import React from 'react';
-import { Provider } from 'react-redux';
 import PropTypes from 'prop-types';
-import configureStore from 'flavours/glitch/store/configureStore';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ScrollContext } from 'react-router-scroll-4';
+import configureStore from 'flavours/glitch/store/configureStore';
 import UI from 'flavours/glitch/features/ui';
 import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
 import { hydrateStore } from 'flavours/glitch/actions/store';
-import { connectUserStream } from 'flavours/glitch/actions/streaming';
 import { checkDeprecatedLocalSettings } from 'flavours/glitch/actions/local_settings';
-import { IntlProvider, addLocaleData } from 'react-intl';
+import { connectUserStream } from 'flavours/glitch/actions/streaming';
-import { getLocale } from 'locales';
-import initialState from 'flavours/glitch/initial_state';
 import ErrorBoundary from 'flavours/glitch/components/error_boundary';
+import initialState, { title as siteTitle } from 'flavours/glitch/initial_state';
+import { getLocale } from 'locales';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
 
+const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
+
 export const store = configureStore();
 const hydrateAction = hydrateStore(initialState);
 store.dispatch(hydrateAction);
@@ -78,15 +81,17 @@ export default class Mastodon extends React.PureComponent {
 
     return (
       <IntlProvider locale={locale} messages={messages}>
-        <Provider store={store}>
+        <ReduxProvider store={store}>
           <ErrorBoundary>
             <BrowserRouter basename='/web'>
               <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
                 <Route path='/' component={UI} />
               </ScrollContext>
             </BrowserRouter>
+
+            <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
           </ErrorBoundary>
-        </Provider>
+        </ReduxProvider>
       </IntlProvider>
     );
   }

app/javascript/flavours/glitch/features/account/components/header.js

@@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { autoPlayGif, me, title, domain } from 'flavours/glitch/initial_state';
+import { autoPlayGif, me, domain } from 'flavours/glitch/initial_state';
 import { preferencesLink, profileLink, accountAdminLink } from 'flavours/glitch/utils/backend_links';
 import classNames from 'classnames';
 import Icon from 'flavours/glitch/components/icon';
@@ -352,7 +352,7 @@ class Header extends ImmutablePureComponent {
         </div>
 
         <Helmet>
-          <title>{titleFromAccount(account)} - {title}</title>
+          <title>{titleFromAccount(account)}</title>
         </Helmet>
       </div>
     );

app/javascript/flavours/glitch/features/bookmarked_statuses/index.js

@@ -1,15 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
-import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'flavours/glitch/actions/bookmarks';
+import PropTypes from 'prop-types';
-import Column from 'flavours/glitch/features/ui/components/column';
+import React from 'react';
-import ColumnHeader from 'flavours/glitch/components/column_header';
+import { Helmet } from 'react-helmet';
-import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
-import StatusList from 'flavours/glitch/components/status_list';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'flavours/glitch/actions/bookmarks';
+import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
+import ColumnHeader from 'flavours/glitch/components/column_header';
+import StatusList from 'flavours/glitch/components/status_list';
+import Column from 'flavours/glitch/features/ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
@@ -95,6 +96,10 @@ class Bookmarks extends ImmutablePureComponent {
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}
         />
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/direct_timeline/index.js

@@ -1,15 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
+import { mountConversations, unmountConversations, expandConversations } from 'flavours/glitch/actions/conversations';
+import { connectDirectStream } from 'flavours/glitch/actions/streaming';
+import { expandDirectTimeline } from 'flavours/glitch/actions/timelines';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import { expandDirectTimeline } from 'flavours/glitch/actions/timelines';
+import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
-import { mountConversations, unmountConversations, expandConversations } from 'flavours/glitch/actions/conversations';
-import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
-import { connectDirectStream } from 'flavours/glitch/actions/streaming';
 import ConversationsListContainer from './containers/conversations_list_container';
 
 const messages = defineMessages({
@@ -143,6 +144,10 @@ class DirectTimeline extends React.PureComponent {
         </ColumnHeader>
 
         {contents}
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.title)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/favourited_statuses/index.js

@@ -1,15 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
-import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'flavours/glitch/actions/favourites';
+import PropTypes from 'prop-types';
-import Column from 'flavours/glitch/features/ui/components/column';
+import React from 'react';
-import ColumnHeader from 'flavours/glitch/components/column_header';
+import { Helmet } from 'react-helmet';
-import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
+import ImmutablePropTypes from 'react-immutable-proptypes';
-import StatusList from 'flavours/glitch/components/status_list';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
+import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'flavours/glitch/actions/favourites';
+import ColumnHeader from 'flavours/glitch/components/column_header';
+import StatusList from 'flavours/glitch/components/status_list';
+import Column from 'flavours/glitch/features/ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.favourites', defaultMessage: 'Favourites' },
@@ -95,6 +96,10 @@ class Favourites extends ImmutablePureComponent {
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}
         />
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/favourites/index.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import ColumnHeader from 'flavours/glitch/components/column_header';
+import Icon from 'flavours/glitch/components/icon';
 import { fetchFavourites } from 'flavours/glitch/actions/interactions';
+import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Column from 'flavours/glitch/features/ui/components/column';
-import Icon from 'flavours/glitch/components/icon';
-import ColumnHeader from 'flavours/glitch/components/column_header';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ScrollableList from '../../components/scrollable_list';
 
 const messages = defineMessages({
   heading: { id: 'column.favourited_by', defaultMessage: 'Favourited by' },

app/javascript/flavours/glitch/features/getting_started/index.js

@@ -17,6 +17,7 @@ import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 import NavigationBar from '../compose/components/navigation_bar';
 import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
 import TrendsContainer from './containers/trends_container';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@@ -190,6 +191,10 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
         </div>
 
         {multiColumn && showTrends && <TrendsContainer />}
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.menu)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/list_timeline/index.js

@@ -1,20 +1,22 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
-import Column from 'flavours/glitch/components/column';
-import ColumnHeader from 'flavours/glitch/components/column_header';
-import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { connectListStream } from 'flavours/glitch/actions/streaming';
+import { connect } from 'react-redux';
-import { expandListTimeline } from 'flavours/glitch/actions/timelines';
+import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import { fetchList, deleteList, updateList } from 'flavours/glitch/actions/lists';
 import { openModal } from 'flavours/glitch/actions/modal';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
+import { connectListStream } from 'flavours/glitch/actions/streaming';
-import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+import { expandListTimeline } from 'flavours/glitch/actions/timelines';
+import Column from 'flavours/glitch/components/column';
+import ColumnBackButton from 'flavours/glitch/components/column_back_button';
+import ColumnHeader from 'flavours/glitch/components/column_header';
 import Icon from 'flavours/glitch/components/icon';
+import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import RadioButton from 'flavours/glitch/components/radio_button';
+import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 
 const messages = defineMessages({
   deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@@ -210,6 +212,10 @@ class ListTimeline extends React.PureComponent {
           emptyMessage={<FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet.' />}
           bindToDocument={!multiColumn}
         />
+
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/lists/index.js

@@ -1,18 +1,19 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import Column from 'flavours/glitch/features/ui/components/column';
-import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
-import { fetchLists } from 'flavours/glitch/actions/lists';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchLists } from 'flavours/glitch/actions/lists';
+import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
+import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+import ScrollableList from 'flavours/glitch/components/scrollable_list';
+import Column from 'flavours/glitch/features/ui/components/column';
 import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
 import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
 import NewListForm from './components/new_list_form';
-import { createSelector } from 'reselect';
-import ScrollableList from 'flavours/glitch/components/scrollable_list';
 
 const messages = defineMessages({
   heading: { id: 'column.lists', defaultMessage: 'Lists' },
@@ -76,6 +77,10 @@ class Lists extends ImmutablePureComponent {
             <ColumnLink key={list.get('id')} to={`/lists/${list.get('id')}`} icon='list-ul' text={list.get('title')} />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/status/index.js

@@ -47,7 +47,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { HotKeys } from 'react-hotkeys';
-import { boostModal, favouriteModal, deleteModal, title } from 'flavours/glitch/initial_state';
+import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
@@ -684,7 +684,7 @@ class Status extends ImmutablePureComponent {
         </ScrollContainer>
 
         <Helmet>
-          <title>{titleFromStatus(status)} - {title}</title>
+          <title>{titleFromStatus(status)}</title>
         </Helmet>
       </Column>
     );

app/javascript/flavours/glitch/features/ui/index.js

@@ -56,7 +56,7 @@ import {
   PrivacyPolicy,
 } from './util/async-components';
 import { HotKeys } from 'react-hotkeys';
-import { me, title } from 'flavours/glitch/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
@@ -669,10 +669,6 @@ class UI extends React.Component {
           <LoadingBarContainer className='loading-bar' />
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
-
-          <Helmet>
-            <title>{title}</title>
-          </Helmet>
         </div>
       </HotKeys>
     );