diff --git a/api/uploadLayerImage.js b/api/uploadLayerImage.js index d699b64..72b9a4f 100644 --- a/api/uploadLayerImage.js +++ b/api/uploadLayerImage.js @@ -27,7 +27,7 @@ async function resize(imageData, size) { return resizedImageData; } -async function processImage(assetType, remoteId, size, imageData, now) { +async function processImage(assetType, remoteId, size, imageData) { if (size !== 600) { imageData = await resize(imageData, size); } @@ -39,9 +39,6 @@ async function processImage(assetType, remoteId, size, imageData, now) { const key = `${assetType}/${id1}/${id2}/${id3}/${remoteId}/${size}x${size}.png`; upload("impress-asset-images", key, imageData); - - const when = Number(now); - return `https://impress-asset-images.s3.amazonaws.com/${key}?v2-${when}`; } export default async (req, res) => { @@ -72,20 +69,18 @@ export default async (req, res) => { res.status(404).send(`Layer not found`); } - const now = new Date(); - const { remote_id: remoteId, type: assetType } = layer; const [imageUrl600, imageUrl300, imageUrl150] = await Promise.all([ - processImage(assetType, remoteId, 600, imageData, now), - processImage(assetType, remoteId, 300, imageData, now), - processImage(assetType, remoteId, 150, imageData, now), + processImage(assetType, remoteId, 600, imageData), + processImage(assetType, remoteId, 300, imageData), + processImage(assetType, remoteId, 150, imageData), ]); - const nowTimestamp = now.toISOString().slice(0, 19).replace("T", " "); + const now = new Date().toISOString().slice(0, 19).replace("T", " "); const [result] = await db.execute( `UPDATE swf_assets SET image_manual = 1, converted_at = ? WHERE type = ? AND remote_id = ? LIMIT 1`, - [nowTimestamp, assetType, remoteId] + [now, assetType, remoteId] ); if (result.affectedRows !== 1) { res diff --git a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js index 86781e9..1008cdf 100644 --- a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js +++ b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js @@ -1,4 +1,6 @@ import * as React from "react"; +import gql from "graphql-tag"; +import { useApolloClient } from "@apollo/client"; import { Button, Box, @@ -34,6 +36,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) { const supportSecret = useSupportSecret(); const toast = useToast(); + const apolloClient = useApolloClient(); // Once both images are ready, merge them! React.useEffect(() => { @@ -106,28 +109,17 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) { toast({ status: "success", title: "Image successfully uploaded", - description: "Reload the page to see!", + description: "It might take a few seconds to update in the app!", }); - // TODO: This seemed to be unreliable, I got it to work once but I don't - // know what configuration of stuff did it! :/ - // const { imageUrl600, imageUrl300, imageUrl150 } = await res.json(); - - // apolloClient.writeFragment({ - // id: `AppearanceLayer:${itemLayer.id}`, - // fragment: gql` - // fragment LayerImage on AppearanceLayer { - // imageUrl600: imageUrl(size: SIZE_600) - // imageUrl300: imageUrl(size: SIZE_300) - // imageUrl150: imageUrl(size: SIZE_150) - // } - // `, - // data: { - // imageUrl600, - // imageUrl300, - // imageUrl150, - // }, - // }); + // NOTE: I tried to do this as a cache update, but I couldn't ever get + // the fragment with size parameters to work :/ (Other fields would + // update, but not these!) Ultimately the eviction is the only + // reliable method I found :/ + apolloClient.cache.evict({ + id: `AppearanceLayer:${itemLayer.id}`, + fieldName: "imageUrl", + }); } catch (e) { setIsUploading(false); setUploadError(e);