feat(hooks): Add useClientErrors from cozy-client

docs/styleguide.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
 const webpackMerge = require('webpack-merge')
 
 module.exports = {
   title: 'Cozy UI React components',
@@ -95,8 +95,7 @@
         '../react/SquareAppIcon',
         '../react/QualificationGrid',
         '../react/QualificationItem',
-        '../react/UploadQueue',
-        '../react/Viewer'
+        '../react/UploadQueue'
       ]
     },
     {

package.json

@@ -158,7 +158,8 @@
     "svgo": "2.8.0",
     "svgstore-cli": "1.3.2",
     "url-loader": "1.1.2",
-    "webpack": "4.39.3"
+    "webpack": "4.39.3",
+    "whatwg-fetch": "3.5.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.3.4",
@@ -210,4 +211,4 @@
   "browserslist": [
     "extends browserslist-config-cozy"
   ]
-}
+}

react/FileImageLoader/Readme.md

@@ -3,14 +3,77 @@
 A component to get the image in `links` prop of a file, according to its class (could be `image` or `pdf`).
 
 ```jsx
-import DemoProvider from 'cozy-ui/transpiled/react/Viewer/docs/DemoProvider'
-
+import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone"
 import BankIcon from "cozy-ui/transpiled/react/Icons/Bank"
 import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
 
+const demoTextFileResponse = {
+  text: () => new Promise(resolve => resolve('Hello World !'))
+}
+
+const demoFilesByClass = {
+  pdf: 'https://raw.githubusercontent.com/rospdf/pdf-php/2ccf7591fc2f18e63342ebfedad7997b08c34ed2/readme.pdf',
+  audio: 'https://viewerdemo.cozycloud.cc/Z.mp3',
+  video: 'https://viewerdemo.cozycloud.cc/Nextcloud.mp4',
+  text: 'https://viewerdemo.cozycloud.cc/notes.md'
+}
+
+const mockClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  on: () => {},
+  collection: () => ({
+    getDownloadLinkById: id =>
+      new Promise(resolve => resolve(demoFilesByClass[id])),
+    download: () =>
+      alert(
+        "This is a demo, there's no actual Cozy to download the file from ¯\\_(ツ)_/¯"
+      ),
+    get: () =>
+      new Promise(resolve =>
+        resolve({
+          data: {
+            links: {
+              large: CloudWallpaper
+            }
+          }
+        })
+      )
+  }),
+  getStackClient: () => ({
+    uri: '',
+    fetch: () => new Promise(resolve => resolve(demoTextFileResponse))
+  }),
+  getClient: () => mockClient,
+  store: {
+    getState: () => {},
+    subscribe: () => {},
+    unsubscribe: () => {}
+  },
+  getQueryFromState: queryName => {
+    if (queryName === 'io.cozy.files/parent_folder') {
+      return {
+        data: {
+          _id: 'parent_id',
+          path: '/Parent'
+        }
+      }
+    }
+  },
+  query: () => ({
+    data: [{ attributes: { slug: 'mespapiers' }, links: { related: '' } }]
+  }),
+  getInstanceOptions: () => ({ app: { slug: 'mespapiers' }, subdomain: 'flat' })
+}
+
 const file = {
   _id: 'image',
   class: 'image',
@@ -31,7 +94,7 @@ const FallbackComp = () => {
 
 ;
 
-<DemoProvider>
+<DemoProvider client={mockClient}>
   <FileImageLoader
     file={file}
     linkType="large"

react/FileImageLoader/index.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import { Component } from 'react'
 
 import { withClient } from 'cozy-client'
+import { isEncrypted } from 'cozy-client/dist/models/file'
 import logger from 'cozy-logger'
 
 const PENDING = 'PENDING'
@@ -12,8 +13,7 @@ const FAILED = 'FAILED'
 const GET_LINK = 'GET_LINK'
 
 import { checkImageSource } from './checkImageSource'
-import { isFileEncrypted } from '../Viewer/helpers'
-import { EncryptedContext } from '../Viewer/providers/EncryptedProvider'
+import { EncryptedContext } from '../providers/Encrypted'
 
 export class FileImageLoader extends Component {
   state = {
@@ -60,7 +60,7 @@ export class FileImageLoader extends Component {
 
   loadNextSrc(lastError = null) {
     const { file } = this.props
-    if (isFileEncrypted(file)) {
+    if (isEncrypted(file)) {
       // No link available for encrypted files
       return
     }

react/FileImageLoader/index.spec.jsx

@@ -6,7 +6,7 @@ import logger from 'cozy-logger'
 
 import { FileImageLoader } from '.'
 import { checkImageSource } from './checkImageSource'
-import EncryptedProvider from '../Viewer/providers/EncryptedProvider'
+import EncryptedProvider from '../providers/Encrypted'
 
 jest.mock('./checkImageSource', () => ({
   ...jest.requireActual('./checkImageSource'),