restyle url sharing
This commit is contained in:
parent
dfbea0b6ab
commit
5eb36c1e15
|
@ -4,7 +4,7 @@ import { Formik, FormikHelpers } from 'formik';
|
||||||
import * as Yup from 'yup';
|
import * as Yup from 'yup';
|
||||||
import Form from 'react-bootstrap/Form';
|
import Form from 'react-bootstrap/Form';
|
||||||
import FormControl from 'react-bootstrap/FormControl';
|
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 { DeadCenter, GalleryContext } from 'pages/gallery';
|
||||||
import { User } from 'types/user';
|
import { User } from 'types/user';
|
||||||
import {
|
import {
|
||||||
|
@ -18,8 +18,8 @@ import SubmitButton from './SubmitButton';
|
||||||
import MessageDialog from './MessageDialog';
|
import MessageDialog from './MessageDialog';
|
||||||
import { Collection } from 'types/collection';
|
import { Collection } from 'types/collection';
|
||||||
import { transformShareURLForHost } from 'utils/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 {
|
interface Props {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
|
@ -83,7 +83,8 @@ function CollectionShare(props: Props) {
|
||||||
};
|
};
|
||||||
|
|
||||||
const createSharableURLHelper = async () => {
|
const createSharableURLHelper = async () => {
|
||||||
await createShareableURL(props.collection);
|
const publicURL = await createShareableURL(props.collection);
|
||||||
|
props.collection.publicURLs = [publicURL];
|
||||||
await props.syncWithRemote();
|
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) => (
|
const ShareeRow = ({ sharee, collectionUnshare }: ShareeProps) => (
|
||||||
<tr>
|
<tr>
|
||||||
<td>{sharee.email}</td>
|
<td>{sharee.email}</td>
|
||||||
|
@ -130,7 +139,7 @@ function CollectionShare(props: Props) {
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<MessageDialog
|
<MessageDialog
|
||||||
show={props.show}
|
show={true}
|
||||||
onHide={props.onHide}
|
onHide={props.onHide}
|
||||||
attributes={{ title: constants.SHARE_COLLECTION }}>
|
attributes={{ title: constants.SHARE_COLLECTION }}>
|
||||||
<DeadCenter style={{ width: '85%', margin: 'auto' }}>
|
<DeadCenter style={{ width: '85%', margin: 'auto' }}>
|
||||||
|
@ -190,13 +199,18 @@ function CollectionShare(props: Props) {
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</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
|
<div
|
||||||
style={{
|
style={{
|
||||||
height: '1px',
|
height: '1px',
|
||||||
|
@ -205,13 +219,14 @@ function CollectionShare(props: Props) {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{props.collection.publicURLs?.length > 0 && (
|
{props.collection.publicURLs?.length > 0 && (
|
||||||
<div style={{ width: '100%', wordBreak: 'break-all' }}>
|
<div style={{ width: '100%', wordBreak: 'break-all' }}>
|
||||||
<p>{constants.PUBLIC_URL}</p>
|
<p>{constants.PUBLIC_URL}</p>
|
||||||
|
|
||||||
{props.collection.publicURLs?.map((publicURL) => (
|
{props.collection.publicURLs?.map((publicURL) => (
|
||||||
<Row key={publicURL.url}>
|
<Row key={publicURL.url}>
|
||||||
<Value width="80%">
|
<Value width="85%">
|
||||||
{
|
{
|
||||||
<a
|
<a
|
||||||
href={transformShareURLForHost(
|
href={transformShareURLForHost(
|
||||||
|
@ -228,19 +243,17 @@ function CollectionShare(props: Props) {
|
||||||
}
|
}
|
||||||
</Value>
|
</Value>
|
||||||
<Value
|
<Value
|
||||||
width="20%"
|
width="15%"
|
||||||
style={{
|
style={{ justifyContent: 'space-around' }}>
|
||||||
justifyContent: 'space-around',
|
<IconButton>
|
||||||
}}>
|
<CopyIcon />
|
||||||
<IconButton onClick={deleteSharableLink}>
|
|
||||||
<CloseIcon />
|
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Value>
|
</Value>
|
||||||
</Row>
|
</Row>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{props.collection.sharees?.length > 0 ? (
|
{props.collection.sharees?.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<p>{constants.SHAREES}</p>
|
<p>{constants.SHAREES}</p>
|
||||||
|
|
||||||
|
@ -256,11 +269,13 @@ function CollectionShare(props: Props) {
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
</>
|
</>
|
||||||
) : (
|
|
||||||
<div style={{ marginTop: '12px' }}>
|
|
||||||
{constants.ZERO_SHAREES()}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
{props.collection.sharees?.length > 0 &&
|
||||||
|
props.collection.publicURLs?.length > 0 && (
|
||||||
|
<div style={{ marginTop: '12px' }}>
|
||||||
|
{constants.ZERO_SHAREES()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</DeadCenter>
|
</DeadCenter>
|
||||||
</MessageDialog>
|
</MessageDialog>
|
||||||
);
|
);
|
||||||
|
|
19
src/components/icons/CopyIcon.tsx
Normal file
19
src/components/icons/CopyIcon.tsx
Normal file
|
@ -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',
|
||||||
|
};
|
Loading…
Reference in a new issue