MBS-9926: Change subscriptions to use React (2 - collection pages) (#867

)

root/collection/CollectionHeader.js

@@ -0,0 +1,99 @@
+/*
+ * @flow
+ * Copyright (C) 2018 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import React from 'react';
+
+import {l} from '../static/scripts/common/i18n';
+import EntityTabLink from '../components/EntityTabLink';
+import SubHeader from '../components/SubHeader';
+import Tabs from '../components/Tabs';
+import EditorLink from '../static/scripts/common/components/EditorLink';
+import EntityLink from '../static/scripts/common/components/EntityLink';
+import bracketed from '../static/scripts/common/utility/bracketed';
+import {withCatalystContext} from '../context';
+
+type Props = {|
+  +$c: CatalystContextT,
+  +collection: CollectionT,
+  +page: string,
+|};
+
+const CollectionHeader = ({$c, collection, page}: Props) => {
+  const owner = collection.editor;
+  const viewingOwnCollection = $c.user && owner && owner.id === $c.user.id;
+  const subHeading = (
+    <>
+      {collection.public ? (
+        l('Public collection by {owner}',
+          {owner: <EditorLink editor={owner} />})
+      ) : l('Private collection')}
+      {owner ? (
+        <span className="small">
+          {' '}
+          {bracketed(
+            <a
+              href={
+                '/user/' +
+                encodeURIComponent(owner.name) +
+                '/collections'
+              }
+            >
+              {viewingOwnCollection ? (
+                l('See all of your collections')
+              ) : (
+                l("See all of {editor}'s public collections",
+                  {editor: owner.name})
+              )}
+            </a>,
+          )}
+        </span>
+      ) : null}
+    </>
+  );
+  return (
+    <>
+      <div className="collectionheader">
+        <h1>
+          <EntityLink entity={collection} />
+        </h1>
+        <SubHeader subHeading={subHeading} />
+      </div>
+
+      <Tabs>
+        <EntityTabLink
+          content={l('Overview')}
+          entity={collection}
+          key=""
+          selected={'index' === page}
+          subPath=""
+        />
+        {viewingOwnCollection ? (
+          <>
+            <EntityTabLink
+              content={l('Edit')}
+              entity={collection}
+              key="own_collection/edit"
+              selected={'edit' === page}
+              subPath="own_collection/edit"
+            />
+            <EntityTabLink
+              content={l('Remove')}
+              entity={collection}
+              key="own_collection/delete"
+              selected={'delete' === page}
+              subPath="own_collection/delete"
+            />
+          </>
+        ) : null}
+      </Tabs>
+    </>
+  );
+};
+
+export default withCatalystContext(CollectionHeader);

root/collection/CollectionLayout.js

@@ -0,0 +1,48 @@
+/*
+ * @flow
+ * Copyright (C) 2018 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import React from 'react';
+import type {Node as ReactNode} from 'react';
+
+import Layout from '../layout';
+import {hyphenateTitle, l} from '../static/scripts/common/i18n';
+import CollectionSidebar from '../layout/components/sidebar/CollectionSidebar';
+
+import CollectionHeader from './CollectionHeader';
+
+type Props = {|
+  +children: ReactNode,
+  +entity: CollectionT,
+  +fullWidth?: boolean,
+  +page: string,
+  +title?: string,
+|};
+
+const CollectionLayout = ({
+  children,
+  entity: collection,
+  fullWidth,
+  page,
+  title,
+}: Props) => {
+  const mainTitle = l('Collection “{collection}”',
+    {collection: collection.name});
+
+  return (
+    <Layout title={title ? hyphenateTitle(mainTitle, title) : mainTitle}>
+      <div id="content">
+        <CollectionHeader collection={collection} page={page} />
+        {children}
+      </div>
+      {fullWidth ? null : <CollectionSidebar collection={collection} />}
+    </Layout>
+  );
+};
+
+export default CollectionLayout;

root/collection/layout.tt

@@ -1,7 +1,7 @@
 [% main_title = l("Collection “{collection}”", { collection => collection.name }) %]
 [%- WRAPPER "layout.tt" title=title ? main_title _ " - ${title}" : main_title -%]
   <div id="content">
-    [%- INCLUDE "collection/header.tt" -%]
+    [%~ React.embed(c, 'collection/CollectionHeader', { collection => collection, page => page }) ~%]
     [%- content -%]
   </div>
 

root/components/EntityTabLink.js

@@ -13,7 +13,7 @@ import EntityLink from '../static/scripts/common/components/EntityLink';
 
 type Props = {|
   +content: string,
-  +entity: CoreEntityT,
+  +entity: CoreEntityT | CollectionT,
   +selected: boolean,
   +subPath: string,
 |};

root/components/SubHeader.js

@@ -7,11 +7,13 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
-import React from 'react';
+import * as React from 'react';
 
-const SubHeader = ({subHeading}: {subHeading: string}) => (
+const SubHeader = ({subHeading}: {subHeading: React.Node}) => (
   <p className="subheader">
-    <span className="prefix">{'~'}</span>{' '}{subHeading}
+    <span className="prefix">{'~'}</span>
+    {' '}
+    {subHeading}
   </p>
 );
 

root/entity/Subscribers.js

@@ -14,7 +14,7 @@ import EditorLink from '../static/scripts/common/components/EditorLink';
 import chooseLayoutComponent from '../utility/chooseLayoutComponent';
 
 type Props = {|
-  +entity: CoreEntityT,
+  +entity: CoreEntityT | CollectionT,
   +privateEditors: number,
   +publicEditors: $ReadOnlyArray<EditorT>,
   +subscribed: boolean,

root/utility/chooseLayoutComponent.js

@@ -9,6 +9,7 @@
 
 import AreaLayout from '../area/AreaLayout';
 import ArtistLayout from '../artist/ArtistLayout';
+import CollectionLayout from '../collection/CollectionLayout';
 import EventLayout from '../event/EventLayout';
 import InstrumentLayout from '../instrument/InstrumentLayout';
 import LabelLayout from '../label/LabelLayout';
@@ -20,6 +21,7 @@ import SeriesLayout from '../series/SeriesLayout';
 const layoutPicker = {
   area: AreaLayout,
   artist: ArtistLayout,
+  collection: CollectionLayout,
   event: EventLayout,
   instrument: InstrumentLayout,
   label: LabelLayout,