cozy-ui 68.3.1 → 68.4.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [68.4.0](https://github.com/cozy/cozy-ui/compare/v68.3.1...v68.4.0) (2022-06-08)
+
+
+### Bug Fixes
+
+* **UploadQueue:** The progress bar changes correctly every second ([e57a609](https://github.com/cozy/cozy-ui/commit/e57a609))
+
+
+### Features
+
+* **Chore:** Add rooks lib to use useIntervalWhen hook ([256e86d](https://github.com/cozy/cozy-ui/commit/256e86d))
+
 ## [68.3.1](https://github.com/cozy/cozy-ui/compare/v68.3.0...v68.3.1) (2022-06-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "68.3.1",
+  "version": "68.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -168,7 +168,8 @@
     "react-popper": "^2.2.3",
     "react-remove-scroll": "^2.4.0",
     "react-select": "^4.3.0",
-    "react-swipeable-views": "^0.13.3"
+    "react-swipeable-views": "^0.13.3",
+    "rooks": "^5.11.2"
   },
   "peerDependencies": {
     "@material-ui/core": ">=4.12",

package/react/UploadQueue/index.jsx

@@ -1,7 +1,8 @@
-import React, { Component, useEffect, useState } from 'react'
+import React, { Component, useState } from 'react'
 import cx from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
 import LinearProgress from '@material-ui/core/LinearProgress'
+import { useIntervalWhen } from 'rooks'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 
@@ -109,26 +110,14 @@ const QueueLinearProgress = withStyles({
 
 const FileUploadProgress = ({ progress: progressProps }) => {
   const [progress, setProgress] = useState(progressProps)
-  const [isWaiting, setIsWaiting] = useState(false)
-
-  useEffect(() => {
-    let interval
-    if (!isWaiting) {
+  useIntervalWhen(
+    () => {
       setProgress(progressProps)
-      interval = setInterval(() => {
-        setIsWaiting(false)
-      }, 1000)
-      setIsWaiting(true)
-    }
-    return () => {
-      if (interval) {
-        clearInterval(interval)
-      }
-      setIsWaiting(false)
-    }
-    // TODO: validate the deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    },
+    1000,
+    true,
+    true
+  )
 
   return (
     <div className={styles['upload-queue__upload-progress']}>

package/transpiled/react/UploadQueue/index.js

@@ -12,10 +12,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React, { Component, useEffect, useState } from 'react';
+import React, { Component, useState } from 'react';
 import cx from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
+import { useIntervalWhen } from 'rooks';
 import { splitFilename } from 'cozy-client/dist/models/file';
 import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
 import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
@@ -170,31 +171,9 @@ var FileUploadProgress = function FileUploadProgress(_ref2) {
       progress = _useState2[0],
       setProgress = _useState2[1];
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isWaiting = _useState4[0],
-      setIsWaiting = _useState4[1];
-
-  useEffect(function () {
-    var interval;
-
-    if (!isWaiting) {
-      setProgress(progressProps);
-      interval = setInterval(function () {
-        setIsWaiting(false);
-      }, 1000);
-      setIsWaiting(true);
-    }
-
-    return function () {
-      if (interval) {
-        clearInterval(interval);
-      }
-
-      setIsWaiting(false);
-    }; // TODO: validate the deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useIntervalWhen(function () {
+    setProgress(progressProps);
+  }, 1000, true, true);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['upload-queue__upload-progress']
   }, /*#__PURE__*/React.createElement("div", {