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; return resizedImageData;
} }
async function processImage(assetType, remoteId, size, imageData, now) { async function processImage(assetType, remoteId, size, imageData) {
if (size !== 600) { if (size !== 600) {
imageData = await resize(imageData, size); 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`; const key = `${assetType}/${id1}/${id2}/${id3}/${remoteId}/${size}x${size}.png`;
upload("impress-asset-images", key, imageData); 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) => { export default async (req, res) => {
@ -72,20 +69,18 @@ export default async (req, res) => {
res.status(404).send(`Layer not found`); res.status(404).send(`Layer not found`);
} }
const now = new Date();
const { remote_id: remoteId, type: assetType } = layer; const { remote_id: remoteId, type: assetType } = layer;
const [imageUrl600, imageUrl300, imageUrl150] = await Promise.all([ const [imageUrl600, imageUrl300, imageUrl150] = await Promise.all([
processImage(assetType, remoteId, 600, imageData, now), processImage(assetType, remoteId, 600, imageData),
processImage(assetType, remoteId, 300, imageData, now), processImage(assetType, remoteId, 300, imageData),
processImage(assetType, remoteId, 150, imageData, now), 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( const [result] = await db.execute(
`UPDATE swf_assets SET image_manual = 1, converted_at = ? `UPDATE swf_assets SET image_manual = 1, converted_at = ?
WHERE type = ? AND remote_id = ? LIMIT 1`, WHERE type = ? AND remote_id = ? LIMIT 1`,
[nowTimestamp, assetType, remoteId] [now, assetType, remoteId]
); );
if (result.affectedRows !== 1) { if (result.affectedRows !== 1) {
res res

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

@ -1,4 +1,6 @@
import * as React from "react"; import * as React from "react";
import gql from "graphql-tag";
import { useApolloClient } from "@apollo/client";
import { import {
Button, Button,
Box, Box,
@ -34,6 +36,7 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
const supportSecret = useSupportSecret(); const supportSecret = useSupportSecret();
const toast = useToast(); const toast = useToast();
const apolloClient = useApolloClient();
// Once both images are ready, merge them! // Once both images are ready, merge them!
React.useEffect(() => { React.useEffect(() => {
@ -106,28 +109,17 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
toast({ toast({
status: "success", status: "success",
title: "Image successfully uploaded", 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 // NOTE: I tried to do this as a cache update, but I couldn't ever get
// know what configuration of stuff did it! :/ // the fragment with size parameters to work :/ (Other fields would
// const { imageUrl600, imageUrl300, imageUrl150 } = await res.json(); // update, but not these!) Ultimately the eviction is the only
// reliable method I found :/
// apolloClient.writeFragment({ apolloClient.cache.evict({
// id: `AppearanceLayer:${itemLayer.id}`, id: `AppearanceLayer:${itemLayer.id}`,
// fragment: gql` fieldName: "imageUrl",
// fragment LayerImage on AppearanceLayer { });
// imageUrl600: imageUrl(size: SIZE_600)
// imageUrl300: imageUrl(size: SIZE_300)
// imageUrl150: imageUrl(size: SIZE_150)
// }
// `,
// data: {
// imageUrl600,
// imageUrl300,
// imageUrl150,
// },
// });
} catch (e) { } catch (e) {
setIsUploading(false); setIsUploading(false);
setUploadError(e); setUploadError(e);