From 975b6a3b01ca2ecf62241aad1507e7f572a149bf Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Fri, 20 Aug 2021 09:47:04 -0300
Subject: [PATCH] Add Copy List button on Collection page

---
 ui/component/collectionActions/view.jsx | 100 ++++++++++++++----------
 ui/page/collection/view.jsx             |  20 +++--
 ui/scss/component/_button.scss          |   5 ++
 3 files changed, 76 insertions(+), 49 deletions(-)

diff --git a/ui/component/collectionActions/view.jsx b/ui/component/collectionActions/view.jsx
index 52f7d03c0..0b9dd963c 100644
--- a/ui/component/collectionActions/view.jsx
+++ b/ui/component/collectionActions/view.jsx
@@ -15,7 +15,7 @@ import { ENABLE_FILE_REACTIONS } from 'config';
 type Props = {
   uri: string,
   claim: StreamClaim,
-  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
+  openModal: (id: string, {}) => void,
   myChannels: ?Array<ChannelClaim>,
   doToast: ({ message: string }) => void,
   claimIsPending: boolean,
@@ -24,6 +24,7 @@ type Props = {
   showInfo: boolean,
   setShowInfo: (boolean) => void,
   collectionHasEdits: boolean,
+  isBuiltin: boolean,
 };
 
 function CollectionActions(props: Props) {
@@ -37,6 +38,7 @@ function CollectionActions(props: Props) {
     showInfo,
     setShowInfo,
     collectionHasEdits,
+    isBuiltin,
   } = props;
   const { push } = useHistory();
   const isMobile = useIsMobile();
@@ -44,54 +46,66 @@ function CollectionActions(props: Props) {
   const webShareable = true; // collections have cost?
   const lhsSection = (
     <>
-      {ENABLE_FILE_REACTIONS && uri && <FileReactions uri={uri} />}
-      {uri && <ClaimSupportButton uri={uri} fileAction />}
-      {/* TODO Add ClaimRepostButton component */}
-      {uri && (
-        <Button
-          className="button--file-action"
-          icon={ICONS.SHARE}
-          label={__('Share')}
-          title={__('Share')}
-          onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
-        />
+      {!isBuiltin && (
+        <>
+          {ENABLE_FILE_REACTIONS && uri && <FileReactions uri={uri} />}
+          {uri && <ClaimSupportButton uri={uri} fileAction />}
+          {/* TODO Add ClaimRepostButton component */}
+          {uri && (
+            <Button
+              className="button--file-action"
+              icon={ICONS.SHARE}
+              label={__('Share')}
+              title={__('Share')}
+              onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
+            />
+          )}
+        </>
       )}
     </>
   );
 
   const rhsSection = (
     <>
-      {isMyCollection && (
-        <Button
-          title={uri ? __('Update') : __('Publish')}
-          label={uri ? __('Update') : __('Publish')}
-          className={classnames('button--file-action')}
-          onClick={() => push(`?${PAGE_VIEW_QUERY}=${EDIT_PAGE}`)}
-          icon={ICONS.PUBLISH}
-          iconColor={collectionHasEdits && 'red'}
-          iconSize={18}
-          disabled={claimIsPending}
-        />
-      )}
-      {isMyCollection && (
-        <Button
-          className={classnames('button--file-action')}
-          title={__('Delete List')}
-          onClick={() => openModal(MODALS.COLLECTION_DELETE, { uri, collectionId, redirect: `/$/${PAGES.LISTS}` })}
-          icon={ICONS.DELETE}
-          iconSize={18}
-          description={__('Delete List')}
-          disabled={claimIsPending}
-        />
-      )}
-      {!isMyCollection && (
-        <Button
-          title={__('Report content')}
-          className="button--file-action"
-          icon={ICONS.REPORT}
-          navigate={`/$/${PAGES.REPORT_CONTENT}?claimId=${claimId}`}
-        />
-      )}
+      {!isBuiltin &&
+        (isMyCollection ? (
+          <>
+            <Button
+              title={uri ? __('Update') : __('Publish')}
+              label={uri ? __('Update') : __('Publish')}
+              className={classnames('button--file-action')}
+              onClick={() => push(`?${PAGE_VIEW_QUERY}=${EDIT_PAGE}`)}
+              icon={ICONS.PUBLISH}
+              iconColor={collectionHasEdits && 'red'}
+              iconSize={18}
+              disabled={claimIsPending}
+            />
+            <Button
+              className={classnames('button--file-action')}
+              title={__('Delete List')}
+              onClick={() => openModal(MODALS.COLLECTION_DELETE, { uri, collectionId, redirect: `/$/${PAGES.LISTS}` })}
+              icon={ICONS.DELETE}
+              iconSize={18}
+              description={__('Delete List')}
+              disabled={claimIsPending}
+            />
+          </>
+        ) : (
+          <Button
+            title={__('Report content')}
+            className="button--file-action"
+            icon={ICONS.REPORT}
+            navigate={`/$/${PAGES.REPORT_CONTENT}?claimId=${claimId}`}
+          />
+        ))}
+      <Button
+        className={classnames('button--file-action')}
+        label={__('Copy List')}
+        title={__('Copy List')}
+        onClick={() => openModal(MODALS.COLLECTION_ADD, { collectionId })}
+        icon={ICONS.COPY}
+        iconSize={18}
+      />
     </>
   );
 
diff --git a/ui/page/collection/view.jsx b/ui/page/collection/view.jsx
index 1d640f9c4..e908371de 100644
--- a/ui/page/collection/view.jsx
+++ b/ui/page/collection/view.jsx
@@ -112,18 +112,26 @@ export default function CollectionPage(props: Props) {
       title={
         <span>
           <Icon
-            icon={(collectionId === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
-              (collectionId === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK}
-            className="icon--margin-right" />
+            icon={
+              (collectionId === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
+              (collectionId === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) ||
+              ICONS.STACK
+            }
+            className="icon--margin-right"
+          />
           {claim ? claim.value.title || claim.name : collection && collection.name}
         </span>
       }
       titleActions={titleActions}
       subtitle={subTitle}
       body={
-        !isBuiltin && (
-          <CollectionActions uri={uri} collectionId={collectionId} setShowInfo={setShowInfo} showInfo={showInfo} />
-        )
+        <CollectionActions
+          uri={uri}
+          collectionId={collectionId}
+          setShowInfo={setShowInfo}
+          showInfo={showInfo}
+          isBuiltin={isBuiltin}
+        />
       }
       actions={
         showInfo &&
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 5ab41ab9c..41379f357 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -240,6 +240,11 @@
   }
 }
 
+.button--file-action--right {
+  @extend .button--file-action;
+  float: right;
+}
+
 .button--fire {
   color: var(--color-fire);
   position: relative;