OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

show new PNG in the app ~immediately

Browse source 
I had a hard time getting this to work the ideal way, but this way is Good Enough! a few seconds delay, oh well
This commit is contained in:
Emi Matchu 2020-08-05 14:00:53 -07:00
parent 1a9b495558
commit b520d1095c
2 changed files with 18 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
api/uploadLayerImage.js
View file

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

32
src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
View file

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