From 3c51a23a50becdc2940e4e87d64d495c9f1f467e Mon Sep 17 00:00:00 2001 From: viktorstrate Date: Fri, 23 Aug 2019 00:33:10 +0200 Subject: [PATCH] Improve message system --- api/src/scanner/scanAlbum.js | 43 +- ui/package-lock.json | 426 ++++++++++-------- ui/package.json | 20 +- ui/src/App.js | 2 +- ui/src/Messages.js | 104 ----- ui/src/components/messages/MessageProgress.js | 36 ++ ui/src/components/messages/Messages.js | 156 +++++++ 7 files changed, 479 insertions(+), 308 deletions(-) delete mode 100644 ui/src/Messages.js create mode 100644 ui/src/components/messages/MessageProgress.js create mode 100644 ui/src/components/messages/Messages.js diff --git a/api/src/scanner/scanAlbum.js b/api/src/scanner/scanAlbum.js index d5aafa8d..ffd3c27e 100644 --- a/api/src/scanner/scanAlbum.js +++ b/api/src/scanner/scanAlbum.js @@ -16,6 +16,24 @@ export default async function scanAlbum(scanner, album) { const list = await fs.readdir(albumPath) let processingImagePromises = [] + const addPhotoToProcess = photo => { + markImageToProgress(photo.id) + + processingImagePromises.push( + _processImage(scanner, photo.id).catch(e => { + console.error(`Error processing image (${e.path}): ${e.stack}`) + scanner.pubsub.publish(EVENT_SCANNER_PROGRESS, { + scannerStatusUpdate: { + progress: 0, + finished: false, + success: false, + message: `Error processing image at ${e.path}: ${e.message}`, + }, + }) + }) + ) + } + for (const item of list) { const itemPath = path.resolve(albumPath, item) processedImages.push(itemPath) @@ -34,34 +52,29 @@ export default async function scanAlbum(scanner, album) { if (photoResult.records.length != 0) { // console.log(`Photo already exists ${item}`) - const photoId = photoResult.records[0].get('p').properties.id - markImageToProgress(photoId) + const photo = photoResult.records[0].get('p').properties - const thumbnailPath = path.resolve( - getImageCachePath(photoId, id), - 'thumbnail.jpg' - ) - - processingImagePromises.push(_processImage(scanner, photoId)) + addPhotoToProcess(photo) } else { console.log(`Found new image at ${itemPath}`) - const photoId = generateID() - markImageToProgress(photoId) + const photo = { + id: generateID(), + path: itemPath, + title: item, + } await session.run( `MATCH (a:Album { id: {albumId} }) - CREATE (p:Photo {id: {id}, path: {path}, title: {title} }) + CREATE (p:Photo {photo}) CREATE (a)-[:CONTAINS]->(p)`, { - id: photoId, - path: itemPath, - title: item, + photo, albumId: id, } ) - processingImagePromises.push(_processImage(scanner, photoId)) + addPhotoToProcess(photo) } } } diff --git a/ui/package-lock.json b/ui/package-lock.json index 544159d5..0f5bc263 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -4,6 +4,60 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@apollo/react-common": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@apollo/react-common/-/react-common-3.0.1.tgz", + "integrity": "sha512-7SC4qqPFo/41AhaQKCRovIshKkm4JLEGXyRHi+NPsaNJyk2J/HrWREnlHVqoPzYeIyq33f1L6j/NAkKn1NOnnQ==", + "requires": { + "ts-invariant": "^0.4.4", + "tslib": "^1.10.0" + } + }, + "@apollo/react-components": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@apollo/react-components/-/react-components-3.0.1.tgz", + "integrity": "sha512-IQwcwv+ItW/QHUeO2zQH+CJGnqepPwwShD9H6+v1ptLvixggodr7S4KalNKXgRUVJsoPBFiVgpTMoJe3h4+Eyg==", + "requires": { + "@apollo/react-common": "^3.0.1", + "@apollo/react-hooks": "^3.0.1", + "prop-types": "^15.7.2", + "ts-invariant": "^0.4.4", + "tslib": "^1.10.0" + } + }, + "@apollo/react-hoc": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@apollo/react-hoc/-/react-hoc-3.0.1.tgz", + "integrity": "sha512-sKt0/xjr6jknJztJRWA0zX9wUY/xBq6lwyqPxrRM72hCatz/BSi1tgVv9LMHTA0aJPBK79pWXFq/EeiXW2LkVw==", + "requires": { + "@apollo/react-common": "^3.0.1", + "@apollo/react-components": "^3.0.1", + "hoist-non-react-statics": "^3.3.0", + "ts-invariant": "^0.4.4", + "tslib": "^1.10.0" + } + }, + "@apollo/react-hooks": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-3.0.1.tgz", + "integrity": "sha512-Boai/T+2z3m23Gy82m1pB+FOlrhkBJ//EIYa3pqX9sUsvgRWMKC+3NxpeHEUYqsf0qzFiM1dO4Pn9OxCFstM8g==", + "requires": { + "@apollo/react-common": "^3.0.1", + "@wry/equality": "^0.1.9", + "ts-invariant": "^0.4.4", + "tslib": "^1.10.0" + } + }, + "@apollo/react-ssr": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@apollo/react-ssr/-/react-ssr-3.0.1.tgz", + "integrity": "sha512-eeAaajIH1zbMk+zigNAlEeyVH80ELrsjvRCcQxH80+THgnJx/hgkKfmhG2p1q2Djefyv6VfImAwd4xqX6/LRSA==", + "requires": { + "@apollo/react-common": "^3.0.1", + "@apollo/react-hooks": "^3.0.1", + "tslib": "^1.10.0" + } + }, "@babel/code-frame": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", @@ -1131,9 +1185,9 @@ "dev": true }, "@types/node": { - "version": "12.0.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.12.tgz", - "integrity": "sha512-Uy0PN4R5vgBUXFoJrKryf5aTk3kJ8Rv3PdlHjl6UaX+Cqp1QE0yPQ68MPXGrZOfG7gZVNDIJZYyot0B9ubXUrQ==" + "version": "12.7.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.2.tgz", + "integrity": "sha512-dyYO+f6ihZEtNPDcWNR1fkoTDf3zAK3lAABDze3mz6POyIercH0lEUawUFXlG8xaQZmm1yEBON/4TsYv/laDYg==" }, "@types/normalize-package-data": { "version": "2.4.0", @@ -1206,9 +1260,9 @@ } }, "acorn-jsx": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz", - "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.2.tgz", + "integrity": "sha512-tiNTrP1MP0QrChmD2DdupCr6HWSFeKVw5d/dHTu4Y7rkAkRhU/Dt7dphAfIUyxtHpl/eBVip5uTNSpQJHylpAw==", "dev": true }, "acorn-walk": { @@ -1233,10 +1287,13 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=" }, "ansi-escapes": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", - "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", - "dev": true + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.2.1.tgz", + "integrity": "sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==", + "dev": true, + "requires": { + "type-fest": "^0.5.2" + } }, "ansi-regex": { "version": "2.1.1", @@ -1294,21 +1351,21 @@ } }, "apollo-cache-inmemory": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.2.tgz", - "integrity": "sha512-AyCl3PGFv5Qv1w4N9vlg63GBPHXgMCekZy5mhlS042ji0GW84uTySX+r3F61ZX3+KM1vA4m9hQyctrEGiv5XjQ==", + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.3.tgz", + "integrity": "sha512-S4B/zQNSuYc0M/1Wq8dJDTIO9yRgU0ZwDGnmlqxGGmFombOZb9mLjylewSfQKmjNpciZ7iUIBbJ0mHlPJTzdXg==", "requires": { "apollo-cache": "^1.3.2", "apollo-utilities": "^1.3.2", - "optimism": "^0.9.0", + "optimism": "^0.10.0", "ts-invariant": "^0.4.0", "tslib": "^1.9.3" } }, "apollo-client": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.3.tgz", - "integrity": "sha512-DS8pmF5CGiiJ658dG+mDn8pmCMMQIljKJSTeMNHnFuDLV0uAPZoeaAwVFiAmB408Ujqt92oIZ/8yJJAwSIhd4A==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.4.tgz", + "integrity": "sha512-oWOwEOxQ9neHHVZrQhHDbI6bIibp9SHgxaLRVPoGvOFy7OH5XUykZE7hBQAVxq99tQjBzgytaZffQkeWo1B4VQ==", "requires": { "@types/zen-observable": "^0.8.0", "apollo-cache": "1.3.2", @@ -2048,6 +2105,34 @@ "requires": { "slice-ansi": "0.0.4", "string-width": "^1.0.1" + }, + "dependencies": { + "is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "dev": true, + "requires": { + "number-is-nan": "^1.0.0" + } + }, + "slice-ansi": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", + "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", + "dev": true + }, + "string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "dev": true, + "requires": { + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" + } + } } }, "cli-width": { @@ -3001,9 +3086,9 @@ } }, "eslint": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.1.0.tgz", - "integrity": "sha512-QhrbdRD7ofuV09IuE2ySWBz0FyXCq0rriLTZXZqaWSI79CVtHVRdkFuFTViiqzZhkCgfOh9USpriuGN2gIpZDQ==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.2.1.tgz", + "integrity": "sha512-ES7BzEzr0Q6m5TK9i+/iTpKjclXitOdDK4vT07OqbkBT2/VcN/gO9EL1C4HlK3TAOXYv2ItcmbVR9jO1MR0fJg==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -3013,9 +3098,9 @@ "debug": "^4.0.1", "doctrine": "^3.0.0", "eslint-scope": "^5.0.0", - "eslint-utils": "^1.3.1", - "eslint-visitor-keys": "^1.0.0", - "espree": "^6.0.0", + "eslint-utils": "^1.4.2", + "eslint-visitor-keys": "^1.1.0", + "espree": "^6.1.0", "esquery": "^1.0.1", "esutils": "^2.0.2", "file-entry-cache": "^5.0.1", @@ -3070,12 +3155,6 @@ "is-glob": "^4.0.1" } }, - "ignore": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", - "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", - "dev": true - }, "import-fresh": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz", @@ -3137,12 +3216,6 @@ } } }, - "eslint-plugin-react-hooks": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz", - "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==", - "dev": true - }, "eslint-scope": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz", @@ -3154,9 +3227,9 @@ } }, "eslint-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.0.tgz", - "integrity": "sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz", + "integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==", "dev": true, "requires": { "eslint-visitor-keys": "^1.0.0" @@ -3169,20 +3242,20 @@ "dev": true }, "espree": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/espree/-/espree-6.0.0.tgz", - "integrity": "sha512-lJvCS6YbCn3ImT3yKkPe0+tJ+mH6ljhGNjHQH9mRtiO6gjhVAOhVXW1yjnwqGwTkK3bGbye+hb00nFNmu0l/1Q==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.0.tgz", + "integrity": "sha512-boA7CHRLlVWUSg3iL5Kmlt/xT3Q+sXnKoRYYzj1YeM10A76TEJBbotV5pKbnK42hEUIr121zTv+QLRM5LsCPXQ==", "dev": true, "requires": { - "acorn": "^6.0.7", + "acorn": "^7.0.0", "acorn-jsx": "^5.0.0", - "eslint-visitor-keys": "^1.0.0" + "eslint-visitor-keys": "^1.1.0" }, "dependencies": { "acorn": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz", - "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.0.0.tgz", + "integrity": "sha512-PaF/MduxijYYt7unVGRuds1vBC9bFxbNf+VWqhOClfdgy7RlVkQqt610ig1/yxTgsDIfW1cWDel5EBbOy3jdtQ==", "dev": true } } @@ -3490,13 +3563,12 @@ } }, "figures": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", - "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-3.0.0.tgz", + "integrity": "sha512-HKri+WoWoUgr83pehn/SIgLOMZ9nAWC6dcGj26RY2R4F50u4+RTUz0RCrUlOV3nKRAICW1UGzyb+kcX2qK1S/g==", "dev": true, "requires": { - "escape-string-regexp": "^1.0.5", - "object-assign": "^4.1.0" + "escape-string-regexp": "^1.0.5" } }, "file-entry-cache": { @@ -4240,6 +4312,12 @@ "is-glob": "^4.0.1" } }, + "ignore": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz", + "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==", + "dev": true + }, "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -4282,9 +4360,9 @@ } }, "graphql": { - "version": "14.4.2", - "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.4.2.tgz", - "integrity": "sha512-6uQadiRgnpnSS56hdZUSvFrVcQ6OF9y6wkxJfKquFtHlnl7+KSuWwSJsdwiK1vybm1HgcdbpGkCpvhvsVQ0UZQ==", + "version": "14.5.0", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.5.0.tgz", + "integrity": "sha512-wnGcTD181L2xPnIwHHjx/moV4ulxA2Kms9zcUY+B/SIrK+2N+iOC6WNgnR2zVTmg1Z8P+CZq5KXibTnatg3WUw==", "requires": { "iterall": "^1.2.2" } @@ -4423,9 +4501,9 @@ } }, "hosted-git-info": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", - "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.4.tgz", + "integrity": "sha512-pzXIvANXEFrc5oFFXRMkbLPQ2rXRoDERwDLyrcUxGhaZhgP54BBSl9Oheh7Vv0T090cszWBxPjkQQ5Sq1PbBRQ==", "dev": true }, "hsl-regex": { @@ -4541,9 +4619,9 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, "husky": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/husky/-/husky-3.0.2.tgz", - "integrity": "sha512-WXCtaME2x0o4PJlKY4ap8BzLA+D0zlvefqAvLCPriOOu+x0dpO5uc5tlB7CY6/0SE2EESmoZsj4jW5D09KrJoA==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/husky/-/husky-3.0.4.tgz", + "integrity": "sha512-7Rnt8aJfy+MlV28snmYK7O7vWwtOfeVxV6KhLpUFXlmx5ukQ1nQmNUB7QsAwSgdySB5X+bm7q7JIRgazqBUzKA==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -4553,7 +4631,7 @@ "is-ci": "^2.0.0", "opencollective-postinstall": "^2.0.2", "pkg-dir": "^4.2.0", - "please-upgrade-node": "^3.1.1", + "please-upgrade-node": "^3.2.0", "read-pkg": "^5.1.1", "run-node": "^1.0.0", "slash": "^3.0.0" @@ -4578,9 +4656,9 @@ "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==" }, "ignore": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.2.tgz", - "integrity": "sha512-vdqWBp7MyzdmHkkRWV5nY+PfGRbYbahfuvsBCh277tq+w9zyNi7h5CYJCK0kmzti9kU+O/cB7sE8HvKv6aXAKQ==", + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "dev": true }, "import-fresh": { @@ -4649,15 +4727,6 @@ "through": "^2.3.6" }, "dependencies": { - "ansi-escapes": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.2.1.tgz", - "integrity": "sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==", - "dev": true, - "requires": { - "type-fest": "^0.5.2" - } - }, "ansi-regex": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", @@ -4673,21 +4742,6 @@ "restore-cursor": "^3.1.0" } }, - "figures": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-3.0.0.tgz", - "integrity": "sha512-HKri+WoWoUgr83pehn/SIgLOMZ9nAWC6dcGj26RY2R4F50u4+RTUz0RCrUlOV3nKRAICW1UGzyb+kcX2qK1S/g==", - "dev": true, - "requires": { - "escape-string-regexp": "^1.0.5" - } - }, - "is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true - }, "restore-cursor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", @@ -4698,17 +4752,6 @@ "signal-exit": "^3.0.2" } }, - "string-width": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.1.0.tgz", - "integrity": "sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==", - "dev": true, - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^5.2.0" - } - }, "strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -4717,12 +4760,6 @@ "requires": { "ansi-regex": "^4.1.0" } - }, - "type-fest": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.5.2.tgz", - "integrity": "sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==", - "dev": true } } }, @@ -4863,13 +4900,10 @@ "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" }, "is-fullwidth-code-point": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "dev": true, - "requires": { - "number-is-nan": "^1.0.0" - } + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true }, "is-glob": { "version": "4.0.1", @@ -5258,9 +5292,9 @@ "dev": true }, "lint-staged": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-9.2.1.tgz", - "integrity": "sha512-3lGgJfBddCy/WndKdNko+uJbwyYjBD1k+V+SA+phBYWzH265S95KQya/Wln/UL+hOjc7NcjtFYVCUWuAcqYHhg==", + "version": "9.2.3", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-9.2.3.tgz", + "integrity": "sha512-ovDmF0c0VJDTP0VmwLetJQ+lVGyNqOkTniwO9S0MOJxGxIExpSRTL56/ZmvXZ1tHNA53GBbXQbfS8RnNGRXFjg==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -5273,6 +5307,7 @@ "listr": "^0.14.3", "log-symbols": "^3.0.0", "micromatch": "^4.0.2", + "normalize-path": "^3.0.0", "please-upgrade-node": "^3.1.1", "string-argv": "^0.3.0", "stringify-object": "^3.3.0" @@ -5288,9 +5323,9 @@ } }, "execa": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/execa/-/execa-2.0.3.tgz", - "integrity": "sha512-iM124nlyGSrXmuyZF1EMe83ESY2chIYVyDRZKgmcDynid2Q2v/+GuE7gNMl6Sy9Niwf4MC0DDxagOxeMPjuLsw==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/execa/-/execa-2.0.4.tgz", + "integrity": "sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==", "dev": true, "requires": { "cross-spawn": "^6.0.5", @@ -5434,6 +5469,16 @@ "supports-color": "^2.0.0" } }, + "figures": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", + "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.5", + "object-assign": "^4.1.0" + } + }, "log-symbols": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz", @@ -5493,11 +5538,6 @@ "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz", "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=" }, - "lodash.isequal": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" - }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -5531,6 +5571,14 @@ "ansi-escapes": "^3.0.0", "cli-cursor": "^2.0.0", "wrap-ansi": "^3.0.1" + }, + "dependencies": { + "ansi-escapes": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", + "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", + "dev": true + } } }, "loose-envify": { @@ -6093,9 +6141,9 @@ } }, "optimism": { - "version": "0.9.6", - "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.9.6.tgz", - "integrity": "sha512-bWr/ZP32UgFCQAoSkz33XctHwpq2via2sBvGvO5JIlrU8gaiM0LvoKj3QMle9LWdSKlzKik8XGSerzsdfYLNxA==", + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.2.tgz", + "integrity": "sha512-zPfBIxFFWMmQboM9+Z4MSJqc1PXp82v1PFq/GfQaufI69mHKlup7ykGNnfuGIGssXJQkmhSodQ/k9EWwjd8O8A==", "requires": { "@wry/context": "^0.4.0" } @@ -6180,9 +6228,9 @@ "dev": true }, "p-limit": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz", - "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", + "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -6599,9 +6647,9 @@ } }, "please-upgrade-node": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz", - "integrity": "sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", + "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==", "dev": true, "requires": { "semver-compare": "^1.0.0" @@ -7239,39 +7287,36 @@ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" }, "react": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", - "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz", + "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.13.6" + "prop-types": "^15.6.2" } }, "react-apollo": { - "version": "2.5.8", - "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.5.8.tgz", - "integrity": "sha512-60yOQrnNosxU/tRbOxGDaYNLFcOKmQqxHPhxyvKTlGIaF/rRCXQRKixUgWVffpEupSHHD7psY5k5ZOuZsdsSGQ==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-3.0.1.tgz", + "integrity": "sha512-2hsSYBfxPqPquS8CupWq+U+6XuDfr/Rr1ssXwfOTYe5gCyTthdUqafIm+pyStur9X2W4ZNQMFyjVicsPNq2tnA==", "requires": { - "apollo-utilities": "^1.3.0", - "fast-json-stable-stringify": "^2.0.0", - "hoist-non-react-statics": "^3.3.0", - "lodash.isequal": "^4.5.0", - "prop-types": "^15.7.2", - "ts-invariant": "^0.4.2", - "tslib": "^1.9.3" + "@apollo/react-common": "^3.0.1", + "@apollo/react-components": "^3.0.1", + "@apollo/react-hoc": "^3.0.1", + "@apollo/react-hooks": "^3.0.1", + "@apollo/react-ssr": "^3.0.1" } }, "react-dom": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", - "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz", + "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.6" + "scheduler": "^0.15.0" } }, "react-is": { @@ -7370,6 +7415,12 @@ "json-parse-better-errors": "^1.0.1", "lines-and-columns": "^1.1.6" } + }, + "type-fest": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", + "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", + "dev": true } } }, @@ -7725,9 +7776,9 @@ } }, "scheduler": { - "version": "0.13.6", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", - "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz", + "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -7925,10 +7976,23 @@ "dev": true }, "slice-ansi": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", - "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", - "dev": true + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz", + "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.0", + "astral-regex": "^1.0.0", + "is-fullwidth-code-point": "^2.0.0" + }, + "dependencies": { + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + } + } }, "snapdragon": { "version": "0.8.2", @@ -8230,14 +8294,31 @@ "dev": true }, "string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.1.0.tgz", + "integrity": "sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==", "dev": true, "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^5.2.0" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dev": true, + "requires": { + "ansi-regex": "^4.1.0" + } + } } }, "string_decoder": { @@ -8417,17 +8498,6 @@ "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", "dev": true }, - "slice-ansi": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz", - "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.0", - "astral-regex": "^1.0.0", - "is-fullwidth-code-point": "^2.0.0" - } - }, "string-width": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", @@ -8646,9 +8716,9 @@ } }, "type-fest": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", - "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.5.2.tgz", + "integrity": "sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==", "dev": true }, "typed-styles": { diff --git a/ui/package.json b/ui/package.json index bbf85ae2..99fd1ec0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -5,8 +5,8 @@ "description": "UI app for Photoview", "dependencies": { "@babel/preset-env": "^7.5.5", - "apollo-cache-inmemory": "^1.6.2", - "apollo-client": "^2.6.3", + "apollo-cache-inmemory": "^1.6.3", + "apollo-client": "^2.6.4", "apollo-link": "^1.2.12", "apollo-link-context": "^1.0.18", "apollo-link-error": "^1.1.11", @@ -14,14 +14,14 @@ "apollo-link-ws": "^1.0.18", "babel-plugin-styled-components": "^1.10.6", "copy-to-clipboard": "^3.2.0", - "graphql": "^14.2.1", + "graphql": "^14.5.0", "graphql-tag": "^2.10.1", "parcel-bundler": "^1.12.3", "prettier": "^1.18.2", "prop-types": "^15.7.2", - "react": "^0.14.0 || ^15.0.0 || ^16.0.0", - "react-apollo": "^2.5.5", - "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0", + "react": "^16.9.0", + "react-apollo": "^3.0.1", + "react-dom": "^16.9.0", "react-lazyload": "^2.6.2", "react-router-dom": "^5.0.1", "react-spring": "^8.0.27", @@ -41,12 +41,12 @@ "@babel/core": "^7.5.5", "@babel/plugin-transform-runtime": "^7.5.5", "babel-eslint": "^10.0.2", - "eslint": "^6.1.0", + "eslint": "^6.2.1", "eslint-plugin-react": "^7.14.3", - "eslint-plugin-react-hooks": "^1.7.0", - "husky": "^3.0.2", + "eslint-plugin-react-hooks": "^2.0.1", + "husky": "^3.0.4", "isarray": "^2.0.5", - "lint-staged": "^9.2.1", + "lint-staged": "^9.2.3", "react-router-prop-types": "^1.0.4" }, "husky": { diff --git a/ui/src/App.js b/ui/src/App.js index ae7ededb..4e4c9ff7 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import { createGlobalStyle } from 'styled-components' import Routes from './Routes' -import Messages from './Messages' +import Messages from './components/messages/Messages' const GlobalStyle = createGlobalStyle` #root, body { diff --git a/ui/src/Messages.js b/ui/src/Messages.js deleted file mode 100644 index 81c4fe0a..00000000 --- a/ui/src/Messages.js +++ /dev/null @@ -1,104 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' -import { Message, Progress } from 'semantic-ui-react' -import gql from 'graphql-tag' -import { Subscription } from 'react-apollo' - -const syncSubscription = gql` - subscription syncSubscription { - scannerStatusUpdate { - finished - success - message - progress - } - } -` - -const Container = styled.div` - position: fixed; - bottom: 20px; - right: 20px; - width: 500px; -` - -const MessageProgress = ({ header, content, percent = 0, ...props }) => { - const StyledProgress = styled(Progress)` - position: absolute !important; - bottom: 0; - left: 0; - width: 100%; - ` - - return ( - - - {header} - {content} - - - - ) -} - -MessageProgress.propTypes = { - header: PropTypes.string, - content: PropTypes.any, - percent: PropTypes.number, -} - -class Messages extends Component { - constructor(props) { - super(props) - - this.state = { - showSyncMessage: true, - } - } - - render() { - if (!localStorage.getItem('token')) { - return null - } - - return ( - - { - this.setState({ showSyncMessage: true }) - }} - > - {({ loading, error, data }) => { - if (error) return
error {error.message}
- if (loading) return null - - console.log('Data update', data) - const update = data.scannerStatusUpdate - - return ( - - - ) - } -} - -export default Messages diff --git a/ui/src/components/messages/MessageProgress.js b/ui/src/components/messages/MessageProgress.js new file mode 100644 index 00000000..0d0beeef --- /dev/null +++ b/ui/src/components/messages/MessageProgress.js @@ -0,0 +1,36 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styled from 'styled-components' +import { Message, Progress } from 'semantic-ui-react' + +const MessageProgress = ({ header, content, percent = 0, ...props }) => { + const StyledProgress = styled(Progress)` + position: absolute !important; + bottom: 0; + left: 0; + width: 100%; + ` + + return ( + + + {header} + {content} + + + + ) +} + +MessageProgress.propTypes = { + header: PropTypes.string, + content: PropTypes.any, + percent: PropTypes.number, +} + +export default MessageProgress diff --git a/ui/src/components/messages/Messages.js b/ui/src/components/messages/Messages.js new file mode 100644 index 00000000..5e16b4a0 --- /dev/null +++ b/ui/src/components/messages/Messages.js @@ -0,0 +1,156 @@ +import React, { useState, useEffect } from 'react' +import { useSubscription } from 'react-apollo' +import { useTransition, animated } from 'react-spring' +import PropTypes from 'prop-types' +import styled from 'styled-components' +import { Message } from 'semantic-ui-react' +import gql from 'graphql-tag' +import MessageProgress from './MessageProgress' + +const syncSubscription = gql` + subscription syncSubscription { + scannerStatusUpdate { + finished + success + message + progress + } + } +` + +const Container = styled.div` + position: fixed; + bottom: 20px; + right: 20px; + width: 500px; +` + +const Messages = () => { + if (!localStorage.getItem('token')) { + return null + } + + const { data, error } = useSubscription(syncSubscription) + + const [messages, setMessages] = useState([]) + const [refMap] = useState(() => new WeakMap()) + + useEffect(() => { + if (error) { + setMessages(state => [ + ...state, + { + key: Math.random().toString(26), + type: 'message', + props: { + header: 'Network error', + content: error.message, + negative: true, + }, + }, + ]) + } + + if (!data) return + + const update = data.scannerStatusUpdate + const newMessages = [...messages] + + if (update.success) { + newMessages[0] = { + key: 'primary', + type: 'progress', + props: { + header: update.finished ? 'Synced' : 'Syncing', + content: update.message, + percent: update.progress, + positive: update.finished, + }, + } + + if (!update.finished) newMessages[0].props.onDismiss = null + } else { + const key = Math.random().toString(26) + newMessages.push({ + key, + type: 'message', + props: { + header: 'Sync error', + content: update.message, + negative: true, + }, + }) + } + + setMessages(newMessages) + }, [data, error]) + + const getMessageElement = (message, ref) => { + const dismissMessage = key => { + setMessages(messages => messages.filter(msg => msg.key != key)) + } + + const RefDiv = props =>
x && ref(x)} /> + + switch (message.type) { + case 'message': + return props => ( + { + dismissMessage(message.key) + }} + floating + {...message.props} + {...props} + /> + ) + case 'progress': + return props => ( + { + dismissMessage(message.key) + }} + {...message.props} + {...props} + /> + ) + } + } + + const transitions = useTransition(messages.slice().reverse(), x => x.key, { + from: { + opacity: 0, + height: '0px', + }, + enter: item => async next => { + await next({ + opacity: 1, + height: `${refMap.get(item).offsetHeight + 10}px`, + }) + }, + leave: { opacity: 0, height: '0px' }, + }) + + return ( + + {transitions.map(({ item, props: style, key }) => { + const getRef = ref => { + refMap.set(item, ref) + } + const MessageElement = getMessageElement(item, getRef) + + style.padding = 0 + + return ( + + + + ) + })} + + ) +} + +export default Messages