cozy-harvest-lib 8.2.1 → 8.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.3.0](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@8.2.1...cozy-harvest-lib@8.3.0) (2022-04-15)
+
+
+### Features
+
+* Implement ViewerModal as Route ([bdb6e88](https://github.com/cozy/cozy-libs/commit/bdb6e88e4c70217654f3b72828dee964aa2a4d1b))
+
+
+
+
+
 ## [8.2.1](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@8.2.0...cozy-harvest-lib@8.2.1) (2022-04-13)
 
 

package/dist/components/Routes.js

@@ -4,6 +4,7 @@ import { Switch, Route, Redirect } from 'react-router';
 import { withStyles } from '@material-ui/core/styles';
 import Dialog from 'cozy-ui/transpiled/react/Dialog';
 import { DialogCloseButton, useCozyDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import { useVaultUnlockContext, VaultUnlockProvider, VaultUnlockPlaceholder } from 'cozy-keys-lib';
 import KonnectorAccounts from './KonnectorAccounts';
 import AccountModal from './AccountModal';
 import NewAccountModal from './NewAccountModal';
@@ -14,7 +15,7 @@ import HarvestVaultProvider from './HarvestVaultProvider';
 import { MountPointProvider } from './MountPointContext';
 import DialogContext from './DialogContext';
 import { DatacardOptions } from './Datacards/DatacardOptionsContext';
-import { useVaultUnlockContext, VaultUnlockProvider, VaultUnlockPlaceholder } from 'cozy-keys-lib';
+import { ViewerModal } from '../datacards/ViewerModal';
 /**
  * Dialog will not be centered vertically since we need the modal to "stay in place"
  * when changing tabs. Since tabs content's height is not the same between the data
@@ -98,6 +99,12 @@ var Routes = function Routes(_ref) {
           accounts: accountsAndTriggers
         });
       }
+    }), /*#__PURE__*/React.createElement(Route, {
+      path: "".concat(konnectorRoot, "/viewer/:accountId/:folderToSaveId/:fileIndex"),
+      exact: true,
+      render: function render(routeComponentProps) {
+        return /*#__PURE__*/React.createElement(ViewerModal, routeComponentProps);
+      }
     }), /*#__PURE__*/React.createElement(Route, {
       path: "".concat(konnectorRoot, "/new"),
       exact: true,

package/dist/datacards/FileDataCard.js

@@ -1,10 +1,7 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useMemo } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import sortBy from 'lodash/sortBy';
-import uniq from 'lodash/uniq';
 import keyBy from 'lodash/keyBy';
 import 'leaflet/dist/leaflet.css';
 import Skeleton from '@material-ui/lab/Skeleton';
@@ -12,13 +9,11 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Slide from '@material-ui/core/Slide';
-import Modal from '@material-ui/core/Modal';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import { RealTimeQueries } from 'cozy-client';
 import palette from 'cozy-ui/transpiled/react/palette';
 import { Media, Bd, Img } from 'cozy-ui/transpiled/react/Media';
 import Circle from 'cozy-ui/transpiled/react/Circle';
-import Portal from 'cozy-ui/transpiled/react/Portal';
-import Viewer from 'cozy-ui/transpiled/react/Viewer';
 import Card from 'cozy-ui/transpiled/react/Card';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File';
@@ -26,8 +21,9 @@ import Typography from 'cozy-ui/transpiled/react/Typography';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
 import AppLinkCard, { AppLinkButton } from '../components/cards/AppLinkCard';
 import appLinksProps from '../components/KonnectorConfiguration/DataTab/appLinksProps';
-import CozyClient, { Q, queryConnect, isQueryLoading, hasQueryBeenLoaded, RealTimeQueries } from 'cozy-client';
+import { MountPointContext } from '../components/MountPointContext';
 import { getFileIcon } from './mime-utils';
+import { useDataCardFiles } from './useDataCardFiles';
 
 var LoadingFileListItem = function LoadingFileListItem(_ref) {
   var divider = _ref.divider;
@@ -85,10 +81,14 @@ var FileCard = function FileCard(_ref4) {
   var files = _ref4.files,
       loading = _ref4.loading,
       konnector = _ref4.konnector,
-      trigger = _ref4.trigger;
+      trigger = _ref4.trigger,
+      accountId = _ref4.accountId;
 
   var _useI18n2 = useI18n(),
-      t = _useI18n2.t; // Remember files that were there initially so that we do not
+      t = _useI18n2.t;
+
+  var _useContext = useContext(MountPointContext),
+      pushHistory = _useContext.pushHistory; // Remember files that were there initially so that we do not
   // animate their ListItem.
   // Only files coming from realtime and that are added to files
   // while the component is mounted will be animated.
@@ -102,19 +102,6 @@ var FileCard = function FileCard(_ref4) {
       _useState2 = _slicedToArray(_useState, 1),
       initialFilesById = _useState2[0];
 
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      viewerIndex = _useState4[0],
-      setViewerIndex = _useState4[1];
-
-  var handleCloseViewer = function handleCloseViewer() {
-    return setViewerIndex(null);
-  };
-
-  var handleFileChange = function handleFileChange(file, newIndex) {
-    return setViewerIndex(newIndex);
-  };
-
   return /*#__PURE__*/React.createElement(Card, {
     className: "u-ph-0 u-pb-0 u-ov-hidden"
   }, /*#__PURE__*/React.createElement("div", {
@@ -149,21 +136,12 @@ var FileCard = function FileCard(_ref4) {
       key: file._id
     }, /*#__PURE__*/React.createElement(FileListItem, {
       onClick: function onClick() {
-        return setViewerIndex(i);
+        pushHistory("/viewer/".concat(accountId, "/").concat(get(trigger, 'message.folder_to_save'), "/").concat(i));
       },
       file: file,
       divider: i !== files.length - 1
     }));
-  })), viewerIndex !== null && /*#__PURE__*/React.createElement(Portal, {
-    into: "body"
-  }, /*#__PURE__*/React.createElement(Modal, {
-    open: true
-  }, /*#__PURE__*/React.createElement(Viewer, {
-    files: files,
-    currentIndex: viewerIndex,
-    onCloseRequest: handleCloseViewer,
-    onChangeRequest: handleFileChange
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "u-ta-right u-mv-half u-mh-1"
   }, /*#__PURE__*/React.createElement(AppLinkButton, {
     slug: "drive",
@@ -171,63 +149,27 @@ var FileCard = function FileCard(_ref4) {
   })));
 };
 
-var makeFolderToSaveQueryFromProps = function makeFolderToSaveQueryFromProps(_ref5) {
-  var trigger = _ref5.trigger;
-  return {
-    query: Q('io.cozy.files').where({
-      dir_id: trigger.message.folder_to_save,
-      trashed: false
-    }).indexFields(['dir_id', 'cozyMetadata.createdAt']).sortBy([{
-      dir_id: 'desc'
-    }, {
-      'cozyMetadata.createdAt': 'desc'
-    }]).limitBy(5),
-    as: "fileDataCard_io.cozy.files/".concat(trigger.message.folder_to_save, "/io.cozy.files"),
-    fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
-  };
-};
+var FileDataCard = function FileDataCard(_ref5) {
+  var accountId = _ref5.accountId,
+      konnector = _ref5.konnector,
+      trigger = _ref5.trigger;
 
-var makeSourceAccountQueryFromProps = function makeSourceAccountQueryFromProps(_ref6) {
-  var accountId = _ref6.accountId;
-  return {
-    query: Q('io.cozy.files').where({
-      'cozyMetadata.sourceAccount': accountId,
-      trashed: false
-    }).indexFields(['cozyMetadata.sourceAccount', 'cozyMetadata.createdAt']).sortBy([{
-      'cozyMetadata.sourceAccount': 'desc'
-    }, {
-      'cozyMetadata.createdAt': 'desc'
-    }]).limitBy(5),
-    as: "fileDataCard_io.cozy.accounts/".concat(accountId, "/io.cozy.files"),
-    fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
-  };
-};
+  var _useDataCardFiles = useDataCardFiles(accountId, trigger.message.folder_to_save),
+      data = _useDataCardFiles.data,
+      fetchStatus = _useDataCardFiles.fetchStatus;
 
-var FileDataCard = function FileDataCard(_ref7) {
-  var folderToSaveFiles = _ref7.folderToSaveFiles,
-      sourceAccountFiles = _ref7.sourceAccountFiles,
-      konnector = _ref7.konnector,
-      trigger = _ref7.trigger;
-  var files1 = folderToSaveFiles.data;
-  var files2 = sourceAccountFiles.data;
-  var noFiles = hasQueryBeenLoaded(folderToSaveFiles) && files1.length === 0 && hasQueryBeenLoaded(sourceAccountFiles) && files2.length === 0;
-  var isLoading = isQueryLoading(folderToSaveFiles) || isQueryLoading(sourceAccountFiles);
-  var files = useMemo(function () {
-    return sortBy(uniq([].concat(_toConsumableArray(files1), _toConsumableArray(files2)), function (x) {
-      return x._id;
-    }), function (x) {
-      return get(x, 'cozyMetadata.createdAt');
-    }).reverse().slice(0, 5);
-  }, [files1, files2]);
+  var isLoading = fetchStatus === 'loading';
+  var noFiles = fetchStatus === 'empty' || fetchStatus === 'failed';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RealTimeQueries, {
     doctype: "io.cozy.files"
   }), noFiles ? /*#__PURE__*/React.createElement(AppLinkCard, appLinksProps.drive({
     trigger: trigger
   })) : /*#__PURE__*/React.createElement(FileCard, {
-    files: files,
+    files: data,
     loading: isLoading,
     konnector: konnector,
-    trigger: trigger
+    trigger: trigger,
+    accountId: accountId
   }));
 };
 
@@ -236,11 +178,4 @@ FileDataCard.propTypes = {
   accountId: PropTypes.string.isRequired,
   trigger: PropTypes.object.isRequired
 };
-export default queryConnect({
-  folderToSaveFiles: function folderToSaveFiles(props) {
-    return makeFolderToSaveQueryFromProps(props);
-  },
-  sourceAccountFiles: function sourceAccountFiles(props) {
-    return makeSourceAccountQueryFromProps(props);
-  }
-})(FileDataCard);
+export default FileDataCard;

package/dist/datacards/ViewerModal.js

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import Overlay from 'cozy-ui/transpiled/react/Overlay';
+import Viewer from 'cozy-ui/transpiled/react/Viewer';
+import { MountPointContext } from '../components/MountPointContext';
+import { useDataCardFiles } from './useDataCardFiles';
+export var ViewerModal = function ViewerModal(_ref) {
+  var _ref$match$params = _ref.match.params,
+      accountId = _ref$match$params.accountId,
+      folderToSaveId = _ref$match$params.folderToSaveId,
+      fileIndex = _ref$match$params.fileIndex;
+
+  var _useContext = useContext(MountPointContext),
+      pushHistory = _useContext.pushHistory,
+      replaceHistory = _useContext.replaceHistory;
+
+  var _useDataCardFiles = useDataCardFiles(accountId, folderToSaveId),
+      data = _useDataCardFiles.data,
+      fetchStatus = _useDataCardFiles.fetchStatus;
+
+  var handleCloseViewer = function handleCloseViewer() {
+    return replaceHistory("/accounts");
+  };
+
+  var handleFileChange = function handleFileChange(_file, newIndex) {
+    return pushHistory("/viewer/".concat(accountId, "/").concat(folderToSaveId, "/").concat(newIndex));
+  };
+
+  if (fetchStatus === 'empty' || fetchStatus === 'failed' || fetchStatus === 'loaded' && fileIndex > data.length) {
+    handleCloseViewer();
+    return null;
+  }
+
+  if (fetchStatus === 'loading') return /*#__PURE__*/React.createElement(Overlay, null);
+  return /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(Viewer, {
+    files: data,
+    currentIndex: Number(fileIndex),
+    onCloseRequest: handleCloseViewer,
+    onChangeRequest: handleFileChange
+  }));
+};

package/dist/datacards/useDataCardFiles.js

@@ -0,0 +1,63 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { useMemo } from 'react';
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+import uniq from 'lodash/uniq';
+import CozyClient, { Q, useQuery, hasQueryBeenLoaded } from 'cozy-client';
+
+var useFolderToSaveFiles = function useFolderToSaveFiles(folderToSaveId) {
+  return useQuery(Q('io.cozy.files').where({
+    dir_id: folderToSaveId,
+    trashed: false
+  }).indexFields(['dir_id', 'cozyMetadata.createdAt']).sortBy([{
+    dir_id: 'desc'
+  }, {
+    'cozyMetadata.createdAt': 'desc'
+  }]).limitBy(5), {
+    as: "fileDataCard_io.cozy.files/".concat(folderToSaveId, "/io.cozy.files"),
+    fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
+  });
+};
+
+var useSourceAccountFiles = function useSourceAccountFiles(accountId) {
+  return useQuery(Q('io.cozy.files').where({
+    'cozyMetadata.sourceAccount': accountId,
+    trashed: false
+  }).indexFields(['cozyMetadata.sourceAccount', 'cozyMetadata.createdAt']).sortBy([{
+    'cozyMetadata.sourceAccount': 'desc'
+  }, {
+    'cozyMetadata.createdAt': 'desc'
+  }]).limitBy(5), {
+    as: "fileDataCard_io.cozy.accounts/".concat(accountId, "/io.cozy.files"),
+    fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
+  });
+};
+
+var getResponse = function getResponse(folderToSaveFiles, sourceAccountFiles) {
+  var loaded = Boolean(hasQueryBeenLoaded(folderToSaveFiles) && hasQueryBeenLoaded(sourceAccountFiles));
+  if (folderToSaveFiles.fetchStatus === 'failed' && sourceAccountFiles === 'failed') return {
+    fetchStatus: 'failed'
+  };
+  if (loaded && folderToSaveFiles.data.length === 0 && sourceAccountFiles.data.length === 0) return {
+    fetchStatus: 'empty'
+  };
+  if (loaded) return {
+    data: sortBy(uniq([].concat(_toConsumableArray(folderToSaveFiles.data), _toConsumableArray(sourceAccountFiles.data)), function (x) {
+      return x._id;
+    }), function (x) {
+      return get(x, 'cozyMetadata.createdAt');
+    }).reverse().slice(0, 5),
+    fetchStatus: 'loaded'
+  };
+  return {
+    fetchStatus: 'loading'
+  };
+};
+
+export var useDataCardFiles = function useDataCardFiles(accountId, folderToSaveId) {
+  var folderToSaveFiles = useFolderToSaveFiles(folderToSaveId);
+  var sourceAccountFiles = useSourceAccountFiles(accountId);
+  return useMemo(function () {
+    return getResponse(folderToSaveFiles, sourceAccountFiles);
+  }, [folderToSaveFiles, sourceAccountFiles]);
+};

package/dist/datacards/useDataCardFiles.spec.js

@@ -0,0 +1,242 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { renderHook } from '@testing-library/react-hooks';
+import { useDataCardFiles } from './useDataCardFiles';
+var mockUseQuery = jest.fn();
+var mockFile1 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:11Z'
+  }
+};
+var mockFile2 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:10Z'
+  }
+};
+var mockFile3 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:09Z'
+  }
+};
+var mockFile4 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:08Z'
+  }
+};
+var mockFile5 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:07Z'
+  }
+};
+var mockFile6 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:06Z'
+  }
+};
+var mockFile7 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:05Z'
+  }
+};
+var mockFile8 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:04Z'
+  }
+};
+var mockFile9 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:03Z'
+  }
+};
+var mockFile10 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:02Z'
+  }
+};
+var mockFile11 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:01Z'
+  }
+};
+var mockFile12 = {
+  cozyMetadata: {
+    createdAt: '1970-01-01T00:00:00Z'
+  }
+};
+jest.mock('cozy-client', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('cozy-client')), {}, {
+    useQuery: function useQuery() {
+      return mockUseQuery();
+    }
+  });
+});
+afterEach(function () {
+  mockUseQuery.mockClear();
+});
+it('handles files pending', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'pending',
+    data: null
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'pending',
+    data: null
+  });
+
+  var _renderHook = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook.result;
+
+  expect(result.current).toStrictEqual({
+    fetchStatus: 'loading'
+  });
+});
+it('handles files loading', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: null
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: null
+  });
+
+  var _renderHook2 = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook2.result;
+
+  expect(result.current).toStrictEqual({
+    fetchStatus: 'loading'
+  });
+});
+it('handles files loading with partial data', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile1]
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile2]
+  });
+
+  var _renderHook3 = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook3.result;
+
+  expect(result.current).toStrictEqual({
+    fetchStatus: 'loading'
+  });
+});
+it('handles files loading with more partial data', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile1, mockFile2]
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile3, mockFile4]
+  });
+
+  var _renderHook4 = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook4.result;
+
+  expect(result.current).toStrictEqual({
+    fetchStatus: 'loading'
+  });
+});
+it('handles files loading with empty data', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [],
+    lastFetch: 1
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [],
+    lastFetch: 1
+  });
+
+  var _renderHook5 = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook5.result;
+
+  expect(result.current).toStrictEqual({
+    fetchStatus: 'empty'
+  });
+});
+it('handles files loaded and return in correct order', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile2, mockFile1],
+    lastFetch: 1
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile3, mockFile4],
+    lastFetch: 1
+  });
+
+  var _renderHook6 = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook6.result;
+
+  expect(result.current).toStrictEqual({
+    data: [mockFile1, mockFile2, mockFile3, mockFile4],
+    fetchStatus: 'loaded'
+  });
+});
+it('handles files loaded with identical double return', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile1, mockFile2, mockFile3, mockFile4],
+    lastFetch: 1
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile3, mockFile2, mockFile3, mockFile4],
+    lastFetch: 1
+  });
+
+  var _renderHook7 = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook7.result;
+
+  expect(result.current).toStrictEqual({
+    data: [mockFile1, mockFile2, mockFile3, mockFile4],
+    fetchStatus: 'loaded'
+  });
+});
+it('handles files loaded with more than 5 result', function () {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile1, mockFile2, mockFile3, mockFile4, mockFile5, mockFile6],
+    lastFetch: 1
+  });
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile7, mockFile8, mockFile9, mockFile10, mockFile11, mockFile12],
+    lastFetch: 1
+  });
+
+  var _renderHook8 = renderHook(function () {
+    return useDataCardFiles('1', '2');
+  }),
+      result = _renderHook8.result;
+
+  expect(result.current).toStrictEqual({
+    data: [mockFile1, mockFile2, mockFile3, mockFile4, mockFile5],
+    fetchStatus: 'loaded'
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-harvest-lib",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Provides logic, modules and components for Cozy's harvest applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -85,5 +85,5 @@
     "react-router-dom": "^5.0.1"
   },
   "sideEffects": false,
-  "gitHead": "34e61fe01b642f5a6640a52d70383ead998fdb70"
+  "gitHead": "9032817fd4e41f61aef183ae8a9ef5abbad418e0"
 }

package/src/components/Routes.jsx

@@ -7,6 +7,11 @@ import {
   DialogCloseButton,
   useCozyDialog
 } from 'cozy-ui/transpiled/react/CozyDialogs'
+import {
+  useVaultUnlockContext,
+  VaultUnlockProvider,
+  VaultUnlockPlaceholder
+} from 'cozy-keys-lib'
 
 import KonnectorAccounts from './KonnectorAccounts'
 import AccountModal from './AccountModal'
@@ -18,11 +23,8 @@ import HarvestVaultProvider from './HarvestVaultProvider'
 import { MountPointProvider } from './MountPointContext'
 import DialogContext from './DialogContext'
 import { DatacardOptions } from './Datacards/DatacardOptionsContext'
-import {
-  useVaultUnlockContext,
-  VaultUnlockProvider,
-  VaultUnlockPlaceholder
-} from 'cozy-keys-lib'
+
+import { ViewerModal } from '../datacards/ViewerModal'
 
 /**
  * Dialog will not be centered vertically since we need the modal to "stay in place"
@@ -101,6 +103,13 @@ const Routes = ({ konnectorRoot, konnector, onDismiss, datacardOptions }) => {
                           />
                         )}
                       />
+                      <Route
+                        path={`${konnectorRoot}/viewer/:accountId/:folderToSaveId/:fileIndex`}
+                        exact
+                        render={routeComponentProps => (
+                          <ViewerModal {...routeComponentProps} />
+                        )}
+                      />
                       <Route
                         path={`${konnectorRoot}/new`}
                         exact

package/src/datacards/FileDataCard.jsx

@@ -1,8 +1,6 @@
-import React, { useState, useMemo } from 'react'
+import React, { useContext, useState } from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
-import sortBy from 'lodash/sortBy'
-import uniq from 'lodash/uniq'
 import keyBy from 'lodash/keyBy'
 
 import 'leaflet/dist/leaflet.css'
@@ -12,15 +10,13 @@ import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import Slide from '@material-ui/core/Slide'
-import Modal from '@material-ui/core/Modal'
 
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
+import { RealTimeQueries } from 'cozy-client'
 import palette from 'cozy-ui/transpiled/react/palette'
 import { Media, Bd, Img } from 'cozy-ui/transpiled/react/Media'
 import Circle from 'cozy-ui/transpiled/react/Circle'
-import Portal from 'cozy-ui/transpiled/react/Portal'
-import Viewer from 'cozy-ui/transpiled/react/Viewer'
 import Card from 'cozy-ui/transpiled/react/Card'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
@@ -29,16 +25,9 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
 import AppLinkCard, { AppLinkButton } from '../components/cards/AppLinkCard'
 import appLinksProps from '../components/KonnectorConfiguration/DataTab/appLinksProps'
-
-import CozyClient, {
-  Q,
-  queryConnect,
-  isQueryLoading,
-  hasQueryBeenLoaded,
-  RealTimeQueries
-} from 'cozy-client'
-
+import { MountPointContext } from '../components/MountPointContext'
 import { getFileIcon } from './mime-utils'
+import { useDataCardFiles } from './useDataCardFiles'
 
 const LoadingFileListItem = ({ divider }) => {
   return (
@@ -87,17 +76,15 @@ const TransitionWrapper = ({ children }) => {
   )
 }
 
-const FileCard = ({ files, loading, konnector, trigger }) => {
+const FileCard = ({ files, loading, konnector, trigger, accountId }) => {
   const { t } = useI18n()
+  const { pushHistory } = useContext(MountPointContext)
 
   // Remember files that were there initially so that we do not
   // animate their ListItem.
   // Only files coming from realtime and that are added to files
   // while the component is mounted will be animated.
   const [initialFilesById] = useState(() => keyBy(files, x => x._id))
-  const [viewerIndex, setViewerIndex] = useState(null)
-  const handleCloseViewer = () => setViewerIndex(null)
-  const handleFileChange = (file, newIndex) => setViewerIndex(newIndex)
 
   return (
     <Card className="u-ph-0 u-pb-0 u-ov-hidden">
@@ -138,7 +125,14 @@ const FileCard = ({ files, loading, konnector, trigger }) => {
             return (
               <ItemWrapper key={file._id}>
                 <FileListItem
-                  onClick={() => setViewerIndex(i)}
+                  onClick={() => {
+                    pushHistory(
+                      `/viewer/${accountId}/${get(
+                        trigger,
+                        'message.folder_to_save'
+                      )}/${i}`
+                    )
+                  }}
                   file={file}
                   divider={i !== files.length - 1}
                 />
@@ -147,18 +141,6 @@ const FileCard = ({ files, loading, konnector, trigger }) => {
           })
         )}
       </List>
-      {viewerIndex !== null && (
-        <Portal into="body">
-          <Modal open={true}>
-            <Viewer
-              files={files}
-              currentIndex={viewerIndex}
-              onCloseRequest={handleCloseViewer}
-              onChangeRequest={handleFileChange}
-            />
-          </Modal>
-        </Portal>
-      )}
       <div className="u-ta-right u-mv-half u-mh-1">
         <AppLinkButton
           slug="drive"
@@ -169,60 +151,14 @@ const FileCard = ({ files, loading, konnector, trigger }) => {
   )
 }
 
-const makeFolderToSaveQueryFromProps = ({ trigger }) => ({
-  query: Q('io.cozy.files')
-    .where({
-      dir_id: trigger.message.folder_to_save,
-      trashed: false
-    })
-    .indexFields(['dir_id', 'cozyMetadata.createdAt'])
-    .sortBy([{ dir_id: 'desc' }, { 'cozyMetadata.createdAt': 'desc' }])
-    .limitBy(5),
-  as: `fileDataCard_io.cozy.files/${trigger.message.folder_to_save}/io.cozy.files`,
-  fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
-})
-
-const makeSourceAccountQueryFromProps = ({ accountId }) => ({
-  query: Q('io.cozy.files')
-    .where({
-      'cozyMetadata.sourceAccount': accountId,
-      trashed: false
-    })
-    .indexFields(['cozyMetadata.sourceAccount', 'cozyMetadata.createdAt'])
-    .sortBy([
-      { 'cozyMetadata.sourceAccount': 'desc' },
-      { 'cozyMetadata.createdAt': 'desc' }
-    ])
-    .limitBy(5),
-  as: `fileDataCard_io.cozy.accounts/${accountId}/io.cozy.files`,
-  fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
-})
-
-const FileDataCard = ({
-  folderToSaveFiles,
-  sourceAccountFiles,
-  konnector,
-  trigger
-}) => {
-  const { data: files1 } = folderToSaveFiles
-  const { data: files2 } = sourceAccountFiles
-
-  const noFiles =
-    hasQueryBeenLoaded(folderToSaveFiles) &&
-    files1.length === 0 &&
-    hasQueryBeenLoaded(sourceAccountFiles) &&
-    files2.length === 0
-  const isLoading =
-    isQueryLoading(folderToSaveFiles) || isQueryLoading(sourceAccountFiles)
+const FileDataCard = ({ accountId, konnector, trigger }) => {
+  const { data, fetchStatus } = useDataCardFiles(
+    accountId,
+    trigger.message.folder_to_save
+  )
+  const isLoading = fetchStatus === 'loading'
+  const noFiles = fetchStatus === 'empty' || fetchStatus === 'failed'
 
-  const files = useMemo(() => {
-    return sortBy(
-      uniq([...files1, ...files2], x => x._id),
-      x => get(x, 'cozyMetadata.createdAt')
-    )
-      .reverse()
-      .slice(0, 5)
-  }, [files1, files2])
   return (
     <>
       <RealTimeQueries doctype="io.cozy.files" />
@@ -230,10 +166,11 @@ const FileDataCard = ({
         <AppLinkCard {...appLinksProps.drive({ trigger })} />
       ) : (
         <FileCard
-          files={files}
+          files={data}
           loading={isLoading}
           konnector={konnector}
           trigger={trigger}
+          accountId={accountId}
         />
       )}
     </>
@@ -246,7 +183,4 @@ FileDataCard.propTypes = {
   trigger: PropTypes.object.isRequired
 }
 
-export default queryConnect({
-  folderToSaveFiles: props => makeFolderToSaveQueryFromProps(props),
-  sourceAccountFiles: props => makeSourceAccountQueryFromProps(props)
-})(FileDataCard)
+export default FileDataCard

package/src/datacards/ViewerModal.jsx

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react'
+
+import Overlay from 'cozy-ui/transpiled/react/Overlay'
+import Viewer from 'cozy-ui/transpiled/react/Viewer'
+
+import { MountPointContext } from '../components/MountPointContext'
+import { useDataCardFiles } from './useDataCardFiles'
+
+export const ViewerModal = ({
+  match: {
+    params: { accountId, folderToSaveId, fileIndex }
+  }
+}) => {
+  const { pushHistory, replaceHistory } = useContext(MountPointContext)
+  const { data, fetchStatus } = useDataCardFiles(accountId, folderToSaveId)
+
+  const handleCloseViewer = () => replaceHistory(`/accounts`)
+  const handleFileChange = (_file, newIndex) =>
+    pushHistory(`/viewer/${accountId}/${folderToSaveId}/${newIndex}`)
+
+  if (
+    fetchStatus === 'empty' ||
+    fetchStatus === 'failed' ||
+    (fetchStatus === 'loaded' && fileIndex > data.length)
+  ) {
+    handleCloseViewer()
+
+    return null
+  }
+
+  if (fetchStatus === 'loading') return <Overlay />
+
+  return (
+    <Overlay>
+      <Viewer
+        files={data}
+        currentIndex={Number(fileIndex)}
+        onCloseRequest={handleCloseViewer}
+        onChangeRequest={handleFileChange}
+      />
+    </Overlay>
+  )
+}

package/src/datacards/useDataCardFiles.js

@@ -0,0 +1,84 @@
+import { useMemo } from 'react'
+import get from 'lodash/get'
+import sortBy from 'lodash/sortBy'
+import uniq from 'lodash/uniq'
+
+import CozyClient, { Q, useQuery, hasQueryBeenLoaded } from 'cozy-client'
+
+const useFolderToSaveFiles = folderToSaveId =>
+  useQuery(
+    Q('io.cozy.files')
+      .where({
+        dir_id: folderToSaveId,
+        trashed: false
+      })
+      .indexFields(['dir_id', 'cozyMetadata.createdAt'])
+      .sortBy([{ dir_id: 'desc' }, { 'cozyMetadata.createdAt': 'desc' }])
+      .limitBy(5),
+    {
+      as: `fileDataCard_io.cozy.files/${folderToSaveId}/io.cozy.files`,
+      fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
+    }
+  )
+
+const useSourceAccountFiles = accountId =>
+  useQuery(
+    Q('io.cozy.files')
+      .where({ 'cozyMetadata.sourceAccount': accountId, trashed: false })
+      .indexFields(['cozyMetadata.sourceAccount', 'cozyMetadata.createdAt'])
+      .sortBy([
+        { 'cozyMetadata.sourceAccount': 'desc' },
+        { 'cozyMetadata.createdAt': 'desc' }
+      ])
+      .limitBy(5),
+    {
+      as: `fileDataCard_io.cozy.accounts/${accountId}/io.cozy.files`,
+      fetchPolicy: CozyClient.fetchPolicies.olderThan(30 * 1000)
+    }
+  )
+
+const getResponse = (folderToSaveFiles, sourceAccountFiles) => {
+  const loaded = Boolean(
+    hasQueryBeenLoaded(folderToSaveFiles) &&
+      hasQueryBeenLoaded(sourceAccountFiles)
+  )
+
+  if (
+    folderToSaveFiles.fetchStatus === 'failed' &&
+    sourceAccountFiles === 'failed'
+  )
+    return { fetchStatus: 'failed' }
+
+  if (
+    loaded &&
+    folderToSaveFiles.data.length === 0 &&
+    sourceAccountFiles.data.length === 0
+  )
+    return { fetchStatus: 'empty' }
+
+  if (loaded)
+    return {
+      data: sortBy(
+        uniq(
+          [...folderToSaveFiles.data, ...sourceAccountFiles.data],
+          x => x._id
+        ),
+        x => get(x, 'cozyMetadata.createdAt')
+      )
+        .reverse()
+        .slice(0, 5),
+      fetchStatus: 'loaded'
+    }
+
+  return { fetchStatus: 'loading' }
+}
+
+export const useDataCardFiles = (accountId, folderToSaveId) => {
+  const folderToSaveFiles = useFolderToSaveFiles(folderToSaveId)
+  const sourceAccountFiles = useSourceAccountFiles(accountId)
+
+  return useMemo(
+    () => getResponse(folderToSaveFiles, sourceAccountFiles),
+    [folderToSaveFiles, sourceAccountFiles]
+  )
+}

package/src/datacards/useDataCardFiles.spec.js

@@ -0,0 +1,135 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useDataCardFiles } from './useDataCardFiles'
+
+const mockUseQuery = jest.fn()
+const mockFile1 = { cozyMetadata: { createdAt: '1970-01-01T00:00:11Z' } }
+const mockFile2 = { cozyMetadata: { createdAt: '1970-01-01T00:00:10Z' } }
+const mockFile3 = { cozyMetadata: { createdAt: '1970-01-01T00:00:09Z' } }
+const mockFile4 = { cozyMetadata: { createdAt: '1970-01-01T00:00:08Z' } }
+const mockFile5 = { cozyMetadata: { createdAt: '1970-01-01T00:00:07Z' } }
+const mockFile6 = { cozyMetadata: { createdAt: '1970-01-01T00:00:06Z' } }
+const mockFile7 = { cozyMetadata: { createdAt: '1970-01-01T00:00:05Z' } }
+const mockFile8 = { cozyMetadata: { createdAt: '1970-01-01T00:00:04Z' } }
+const mockFile9 = { cozyMetadata: { createdAt: '1970-01-01T00:00:03Z' } }
+const mockFile10 = { cozyMetadata: { createdAt: '1970-01-01T00:00:02Z' } }
+const mockFile11 = { cozyMetadata: { createdAt: '1970-01-01T00:00:01Z' } }
+const mockFile12 = { cozyMetadata: { createdAt: '1970-01-01T00:00:00Z' } }
+
+jest.mock('cozy-client', () => ({
+  ...jest.requireActual('cozy-client'),
+  useQuery: () => mockUseQuery()
+}))
+
+afterEach(() => {
+  mockUseQuery.mockClear()
+})
+
+it('handles files pending', () => {
+  mockUseQuery.mockReturnValueOnce({ fetchStatus: 'pending', data: null })
+  mockUseQuery.mockReturnValueOnce({ fetchStatus: 'pending', data: null })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({ fetchStatus: 'loading' })
+})
+
+it('handles files loading', () => {
+  mockUseQuery.mockReturnValueOnce({ fetchStatus: 'loading', data: null })
+  mockUseQuery.mockReturnValueOnce({ fetchStatus: 'loading', data: null })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({ fetchStatus: 'loading' })
+})
+
+it('handles files loading with partial data', () => {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile1]
+  })
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile2]
+  })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({ fetchStatus: 'loading' })
+})
+
+it('handles files loading with more partial data', () => {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile1, mockFile2]
+  })
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loading',
+    data: [mockFile3, mockFile4]
+  })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({ fetchStatus: 'loading' })
+})
+
+it('handles files loading with empty data', () => {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [],
+    lastFetch: 1
+  })
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [],
+    lastFetch: 1
+  })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({ fetchStatus: 'empty' })
+})
+
+it('handles files loaded and return in correct order', () => {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile2, mockFile1],
+    lastFetch: 1
+  })
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile3, mockFile4],
+    lastFetch: 1
+  })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({
+    data: [mockFile1, mockFile2, mockFile3, mockFile4],
+    fetchStatus: 'loaded'
+  })
+})
+
+it('handles files loaded with identical double return', () => {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile1, mockFile2, mockFile3, mockFile4],
+    lastFetch: 1
+  })
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile3, mockFile2, mockFile3, mockFile4],
+    lastFetch: 1
+  })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({
+    data: [mockFile1, mockFile2, mockFile3, mockFile4],
+    fetchStatus: 'loaded'
+  })
+})
+
+it('handles files loaded with more than 5 result', () => {
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile1, mockFile2, mockFile3, mockFile4, mockFile5, mockFile6],
+    lastFetch: 1
+  })
+  mockUseQuery.mockReturnValueOnce({
+    fetchStatus: 'loaded',
+    data: [mockFile7, mockFile8, mockFile9, mockFile10, mockFile11, mockFile12],
+    lastFetch: 1
+  })
+  const { result } = renderHook(() => useDataCardFiles('1', '2'))
+  expect(result.current).toStrictEqual({
+    data: [mockFile1, mockFile2, mockFile3, mockFile4, mockFile5],
+    fetchStatus: 'loaded'
+  })
+})