restyle url sharing

src/components/CollectionShare.tsx

@@ -4,7 +4,7 @@ import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
-import { Button, Col, Table } from 'react-bootstrap';
+import { Button, Col, Row, Table } from 'react-bootstrap';
 import { DeadCenter, GalleryContext } from 'pages/gallery';
 import { User } from 'types/user';
 import {
@@ -18,8 +18,8 @@ import SubmitButton from './SubmitButton';
 import MessageDialog from './MessageDialog';
 import { Collection } from 'types/collection';
 import { transformShareURLForHost } from 'utils/collection';
-import { IconButton, Row, Value } from './Container';
+import CopyIcon from './icons/CopyIcon';
-import CloseIcon from './icons/CloseIcon';
+import { IconButton, Value } from './Container';
 
 interface Props {
     show: boolean;
@@ -83,7 +83,8 @@ function CollectionShare(props: Props) {
     };
 
     const createSharableURLHelper = async () => {
-        await createShareableURL(props.collection);
+        const publicURL = await createShareableURL(props.collection);
+        props.collection.publicURLs = [publicURL];
         await props.syncWithRemote();
     };
 
@@ -105,6 +106,14 @@ function CollectionShare(props: Props) {
         });
     };
 
+    const handleCollectionPublicSharing = () => {
+        if (props.collection.publicURLs?.length > 0) {
+            deleteSharableLink();
+        } else {
+            createSharableURLHelper();
+        }
+    };
+
     const ShareeRow = ({ sharee, collectionUnshare }: ShareeProps) => (
         <tr>
             <td>{sharee.email}</td>
@@ -130,7 +139,7 @@ function CollectionShare(props: Props) {
     }
     return (
         <MessageDialog
-            show={props.show}
+            show={true}
             onHide={props.onHide}
             attributes={{ title: constants.SHARE_COLLECTION }}>
             <DeadCenter style={{ width: '85%', margin: 'auto' }}>
@@ -190,13 +199,18 @@ function CollectionShare(props: Props) {
                         </Form>
                     )}
                 </Formik>
-                {props.collection.publicURLs?.length === 0 && (
+                <Row style={{ padding: '10px' }}>
-                    <Button
+                    <Value width="100%" style={{ paddingTop: '10px' }}>
-                        variant="outline-success"
+                        Public sharing
-                        onClick={createSharableURLHelper}>
+                    </Value>
-                        Create New Shareable URL
+                    <Form.Switch
-                    </Button>
+                        style={{ marginLeft: '20px' }}
-                )}
+                        checked={props.collection.publicURLs?.length > 0}
+                        id="collection-public-sharing-toggler"
+                        className="custom-switch-md"
+                        onChange={handleCollectionPublicSharing}
+                    />
+                </Row>
                 <div
                     style={{
                         height: '1px',
@@ -205,13 +219,14 @@ function CollectionShare(props: Props) {
                         width: '100%',
                     }}
                 />
+
                 {props.collection.publicURLs?.length > 0 && (
                     <div style={{ width: '100%', wordBreak: 'break-all' }}>
                         <p>{constants.PUBLIC_URL}</p>
 
                         {props.collection.publicURLs?.map((publicURL) => (
                             <Row key={publicURL.url}>
-                                <Value width="80%">
+                                <Value width="85%">
                                     {
                                         <a
                                             href={transformShareURLForHost(
@@ -228,19 +243,17 @@ function CollectionShare(props: Props) {
                                     }
                                 </Value>
                                 <Value
-                                    width="20%"
+                                    width="15%"
-                                    style={{
+                                    style={{ justifyContent: 'space-around' }}>
-                                        justifyContent: 'space-around',
+                                    <IconButton>
-                                    }}>
+                                        <CopyIcon />
-                                    <IconButton onClick={deleteSharableLink}>
-                                        <CloseIcon />
                                     </IconButton>
                                 </Value>
                             </Row>
                         ))}
                     </div>
                 )}
-                {props.collection.sharees?.length > 0 ? (
+                {props.collection.sharees?.length > 0 && (
                     <>
                         <p>{constants.SHAREES}</p>
 
@@ -256,7 +269,9 @@ function CollectionShare(props: Props) {
                             </tbody>
                         </Table>
                     </>
-                ) : (
+                )}
+                {props.collection.sharees?.length > 0 &&
+                    props.collection.publicURLs?.length > 0 && (
                         <div style={{ marginTop: '12px' }}>
                             {constants.ZERO_SHAREES()}
                         </div>

src/components/icons/CopyIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function CopyIcon(props) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={props.height}
+            viewBox={props.viewBox}
+            width={props.width}>
+            <path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
+        </svg>
+    );
+}
+
+CopyIcon.defaultProps = {
+    height: 20,
+    width: 20,
+    viewBox: '0 0 24 24',
+};