Create contents label for group of shared mediafiles

ui/src/share/ShareList.js

@@ -5,12 +5,14 @@ import {
   NumberField,
   SimpleList,
   TextField,
+  useNotify,
   useTranslate,
 } from 'react-admin'
 import React from 'react'
+import { IconButton, Link, useMediaQuery } from '@material-ui/core'
+import ShareIcon from '@material-ui/icons/Share'
 import { DateField, QualityInfo } from '../common'
 import { shareUrl } from '../utils'
-import { Link, useMediaQuery } from '@material-ui/core'
 import config from '../config'
 
 export const FormatInfo = ({ record, size }) => {
@@ -23,6 +25,33 @@ export const FormatInfo = ({ record, size }) => {
 const ShareList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const translate = useTranslate()
+  const notify = useNotify()
+
+  const handleShare = (r) => (e) => {
+    const url = shareUrl(r?.id)
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        notify(translate('message.shareSuccess', { url }), {
+          type: 'info',
+          multiLine: true,
+          duration: 0,
+        })
+      })
+      .catch((err) => {
+        notify(
+          translate('message.shareFailure', { url }) + ': ' + err.message,
+          {
+            type: 'warning',
+            multiLine: true,
+            duration: 0,
+          }
+        )
+      })
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   return (
     <List
       {...props}
@@ -31,13 +60,23 @@ const ShareList = (props) => {
     >
       {isXsmall ? (
         <SimpleList
+          leftIcon={(r) => (
+            <IconButton onClick={handleShare(r)}>
+              <ShareIcon />
+            </IconButton>
+          )}
           primaryText={(r) => r.description || r.contents || r.id}
           secondaryText={(r) => (
             <>
               {translate('resources.share.fields.expiresAt')}:{' '}
-              <DateField record={r} source={'expiresAt'} showTime />
+              <DateField record={r} source={'expiresAt'} />
             </>
           )}
+          tertiaryText={(r) =>
+            `${translate('resources.share.fields.visitCount')}: ${
+              r.visitCount || '0'
+            }`
+          }
         />
       ) : (
         <Datagrid rowClick="edit">