mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Improve message system

This commit is contained in:
viktorstrate 2019-08-23 00:33:10 +02:00
parent b28dd4750f
commit 3c51a23a50
7 changed files with 479 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
api/src/scanner/scanAlbum.js
View File

@ -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)
}
}
}

426
ui/package-lock.json generated
View File

@ -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": {

20
ui/package.json
View File

@ -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": {

2
ui/src/App.js
View File

@ -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 {

104
ui/src/Messages.js
View File

@ -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 (
<Message floating {...props}>
<Message.Content>
<Message.Header>{header}</Message.Header>
{content}
<StyledProgress
percent={percent}
size="tiny"
attached="bottom"
indicating
/>
</Message.Content>
</Message>
)
}
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 (
<Container>
<Subscription
subscription={syncSubscription}
shouldResubscribe
onSubscriptionData={() => {
this.setState({ showSyncMessage: true })
}}
>
{({ loading, error, data }) => {
if (error) return <div>error {error.message}</div>
if (loading) return null
console.log('Data update', data)
const update = data.scannerStatusUpdate
return (
<MessageProgress
hidden={!this.state.showSyncMessage}
onDismiss={() => {
this.setState({ showSyncMessage: false })
}}
header={update.finished ? 'Synced' : 'Syncing'}
content={update.message}
percent={update.progress}
/>
)
}}
</Subscription>
</Container>
)
}
}
export default Messages

36
ui/src/components/messages/MessageProgress.js Normal file
View File

@ -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 (
<Message floating {...props}>
<Message.Content>
<Message.Header>{header}</Message.Header>
{content}
<StyledProgress
percent={percent}
size="tiny"
attached="bottom"
indicating
/>
</Message.Content>
</Message>
)
}
MessageProgress.propTypes = {
header: PropTypes.string,
content: PropTypes.any,
percent: PropTypes.number,
}
export default MessageProgress

156
ui/src/components/messages/Messages.js Normal file
View File

@ -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 => <div {...props} ref={x => x && ref(x)} />
switch (message.type) {
case 'message':
return props => (
<Message
as={RefDiv}
onDismiss={() => {
dismissMessage(message.key)
}}
floating
{...message.props}
{...props}
/>
)
case 'progress':
return props => (
<MessageProgress
as={RefDiv}
onDismiss={() => {
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 (
<Container>
{transitions.map(({ item, props: style, key }) => {
const getRef = ref => {
refMap.set(item, ref)
}
const MessageElement = getMessageElement(item, getRef)
style.padding = 0
return (
<animated.div key={key} style={style}>
<MessageElement />
</animated.div>
)
})}
</Container>
)
}
export default Messages