Test 'n play

Open the playgrounds in cozy-libs and run yarn start

How to use the lib

In your app, you have to :

• import the Provider: import SharingProvider, { ShareButton, ShareModal } from 'cozy-sharing'
• import the stylesheet.css: import 'cozy-sharing/dist/stylesheet.css'

Using the built-in components

Some of the exposed components are fully featured components, ready to render. They need a SharingProvider above them in the render tree and the imported stylesheet for their styles.

import { ShareModal } from 'cozy-sharing'

const ToggleModal = () => {
  const [isModalDisplayed, setIsModalDisplayed] = useState(false)

  return (
    <div>
      <Button onClick={() => setIsModalDisplayed(true)}>Open modal</Button>
      {isModalDisplayed && <ShareModal document={doc} />}
    </div>
  )
}

Other components accept a render prop as children that receive some information from the sharing context.

import { SharedDocument } from 'cozy-sharing'

const MyComp = () => {
  return (
    <SharedDocument docId='123'>
      {({ isShared, link }) => (
        {isShared ? link : 'Not shared yet'}
      )}
    </SharedDocument>
  )
}

Usage with hooks

cozy-sharing can now be used with hooks as well:

import { SharingContext } from 'cozy-sharing'

const MyComp = () => {
  const { share } = useContext(SharingContext)

  return <Button onClick={() => share(document, recipients, sharingType, description)}>Share</Button>
}

Share and send mail in development

Cozy apps let users share documents from cozy to cozy.

Meet Alice and Bob. Alice wants to share a folder with Bob. Alice clicks on the share button and fills in the email input with Bob's email address. Bob receives an email with a « Accept the sharing » button. Bob clicks on that button and is redirected to Alice's cozy to enter his own cozy url to link both cozys. Bob sees Alice's shared folder in his own cozy.

🤔 But how could we do this scenario on development environment?

With the docker image

If you develop with the cozy-app-dev docker image, MailHog is running inside it to catch emails.

If cozy-stack has to send an email, MailHog catches it and exposes it on its web interface on http://cozy.tools:8025/.

With the binary cozy-stack

If you develop with the cozy-stack CLI, you have to run MailHog on your computer and tell cozy-stack serve where to find the mail server with some options:

./cozy-stack serve --appdir drive:../cozy-drive/build,settings:../cozy-settings/build --mail-disable-tls --mail-port 1025

This commands assumes you git clone cozy-drive and cozy-settings in the same folder than you git clone cozy-stack.

Then simply run mailhog and open http://cozy.tools:8025/.

Retrieve sent emails

With MailHog, every email sent by cozy-stack is caught. That means the email address does not have to be a real one, ie. bob@cozy, [email protected] are perfectly fine. It could be a real one, but the email will not reach the real recipient's inbox, say [email protected].