Commit graph

1136 commits

Author SHA1 Message Date
b762e11331 Add owns/wants badges on SquareItemCard
Boom, cute owns/wants badges on "Latest items", and the item search page, and trade matches!

I'm gonna add some additional flair to the trade match case, too!
2021-06-08 01:03:09 -07:00
4a22b50a77 Extract NC/PB/NP badge in SquareItemCard
This is just a small refactor to make `ItemThumbnail` more workable, because I'm gonna start working in it!
2021-06-08 00:33:23 -07:00
9a30b8c43f Fix bg color bug in homepage search field
This has been bugging me for a while lol, the background was leaking out of the corners!

I had applied the styles to the `InputGroup` because I didn't realize how Chakra implements this… I had assumed that the left/right elements wouldn't also get the background.

But it turns out, `InputGroup` uses `position: absolute` stuff, and uses padding to create visual space in the `Input` below them! So, this works perfect!
2021-06-08 00:20:23 -07:00
39f6c6f4ac Explain why AppearanceLayer.imageUrl can be null 2021-06-02 14:27:11 -07:00
cb55881029 Switch back to $20/mo copy 2021-06-02 14:26:47 -07:00
da8cd8eda9 Extend the outfit deadline to Aug 1
I figure 1 month is fiiiine, but 2 months is less likely to catch people unawares, and I think that's important here.
2021-06-01 17:38:23 -07:00
e1d6981274 Fix mobile layout for outift URLs no-op message
Copied styles from the similar layout in the bulk converter tool! The status will flush to the right of the field header on desktop, and move below the input on mobile.
2021-06-01 17:35:29 -07:00
9191a5a65a Add UI for already converted outfit URLs
When the outfit image URL is already converted, we show a happy no-change message!
2021-06-01 17:32:27 -07:00
1865d62945 Clarify that outfit page links won't change
I add copy to indicate this, and update the tool to respond with a happy-looking no-change UI when you put in an outfit page link!
2021-06-01 17:29:13 -07:00
598858c084 Oops, minor path regex fix
Escape those dots!
2021-05-27 18:41:01 -07:00
f932498066 Use a redirect for live outfits instead
I'm gonna try and see about getting Fastly to redirect these internally, so we can get all the benefits of CDN-caching the generated image, without forcing the user through another round-trip!
2021-05-27 18:33:14 -07:00
d461686bc3 Fix Maraquan modeling
This was a known oversight, that I've finally fixed because I realized this subquery probably would be just fine lol!

Now, instead of removing rows with _all_ species modeled, we remove rows with all species _for that color_ modeled.

This leaves the rest of the modeling list unchanged, but removed 10 Maraquan items that were done modeling but still on the list:
- Dyeworks Coral: Maraquan White Beaded Gown
- Dyeworks Green: Maraquan White Beaded Gown
- Dyeworks Lavender: Maraquan White Beaded Gown
- Dyeworks Purple: Maraquan Wig with Negg Accessory
- Dyeworks Lavender: Maraquan Sea Blue Gown
- Dyeworks Pink: Maraquan Sea Blue Gown
- Dyeworks Silver: Maraquan Sea Blue Gown
- Maraquan White Lace Gown
- Underwater Maraquan Markings

(I also went in the database and marked the "Maraquan Ocean Blue Contacts" with the `modeling_status_hint = "done"`, because it's not compatible with Lutari.)
2021-05-27 17:39:56 -07:00
a5c3108a90 Whoops, fix outfitImage caching bug
I was accidentally serving images _without_ `updatedAt` with the long-term cache headers, but only in prod, not in dev

I think this is probably because I made a mistake in my Vercel route config, by including an `$updatedAt` parameter that doesn't actually exist in this case.

I'm guessing the Vercel dev server has different behavior for my mistake than the prod server. I'm guessing the dev server makes it an empty string, and the prod server makes it the literal string `$updatedAt`. Oops!

I hope this fixes it!
2021-05-27 17:29:06 -07:00
e608844171 Add better 404 message for outfit image 2021-05-27 17:01:20 -07:00
27437c33de Merge branch 'graphql-docs' into main 2021-05-27 16:52:15 -07:00
8525ac393f Fix GraphQL docstrings
Oops, right, I forgot for a while that GraphQL fields have a special syntax for docstrings, and it's not just comments! This will help stuff show up in our GraphQL Playground API docs correctly 🥰
2021-05-27 16:51:31 -07:00
5f0089f990 Access-Control-Allow-Origin: * for GraphQL
Someone asked to use the DTI API for a small client-side project, so I'm making this change to support it!

As explained in the comment, I think this should be safe regarding CSRF attacks. But it _does_ increase the risk that someday we change something elsewhere that creates a problem, like using cookies to authorize something. So, let's remember to be careful! (as I would hope we would be when adding another auth mechanism!)
2021-05-27 16:41:52 -07:00
abc322c24d Remove imageUrl from Outfit GQL
I'm not sure which image url is better to return from stuff like this, and I don't actually have a use case for it anymore, so let's just clear it out until we need something like it!
2021-05-26 20:01:03 -07:00
684bf5778f Use live outfit URLs in bulk converter 2021-05-26 20:00:01 -07:00
929e6c57a4 Use live outfit image URLs in single image converter 2021-05-26 19:57:06 -07:00
2543f89255 Add ~live outfit image URLs
Gonna have the /outfit-urls page start returning these instead, for feature parity with before

I might change the strategy on this at some point, like have it get `updatedAt` and redirect instead of generating the image. But this is simpler for now (and the Vercel cache doesn't seem to be as aggressive as I want anyway), and I can change it later!
2021-05-26 19:44:35 -07:00
3603d6fd85 Explain the error condition 2021-05-26 19:11:04 -07:00
81b434347a Add title to OutfitUrlsPage 2021-05-26 19:03:21 -07:00
accd847a7d Merge branch 'main' of github.com:matchu/impress-2020 into main 2021-05-26 18:50:25 -07:00
7f0a450480 Apply sampling rates to Honeycomb events
Oops, we get a _lot_ of outfit image requests, and it's pushing the limits of our free Honeycomb plan! But I don't really need all that much detail, because there's so many.

So, we here apply sampling! `api/outfitImage` is getting a 1/10 rate, and for GraphQL, `ApiOutfitImage` is getting 1/10, and `SearchPanel` is getting 1/5.

I had to add a `addTraceContext` call, to give all the child events awareness of what operation they're being called in, too!

I haven't actually tested that this is working-working, just that the endpoints still return good data. We'll see how it shakes out in prod!

But I did add `console.log(sampleRate, shouldSample, data);` to the `samplerHook` briefly, to see the data flow through, and I reloaded a `SearchPanel` request a few times and observed a plausibly 20% success rate.
2021-05-26 18:50:19 -07:00
5cab2c87c4 Fix UC outfit images
Oops, I wasn't requesting `bodyId` for item layers, so the check for `layer.bodyId !== "0"` was always true—because it was always `undefined`, even when it should have been `"0"`.

This wasn't an issue on the client, because the client _does_ request `bodyId` for caching item appearances between pets of the same body, and I didn't realize that it needs to be part of this fragment too!
2021-05-25 17:02:29 -07:00
e829cc5525 Add a delay to bulk image conversion loading state
Right, yeah, in prod this is way faster, so the loading indicator is a distraction!
2021-05-25 05:49:47 -07:00
5f1980241f Oops, don't stretch preview when showing error
Right, oops, if you typed an invalid image url, the preview square would try to stretch to match! Now, it has a max-height to match its max-width.
2021-05-25 05:47:58 -07:00
11703140c4 Add more explainer copy to /outfit-urls 2021-05-25 05:46:10 -07:00
a08f4e3bd1 Fix controlled component warning
Mm right, when we first render the output, `imageUrl` is `undefined`, so the output textbox renders with `value={undefined}`, which is an "uncontrolled" component that the DOM is free to change.

In practice, this isn't an issue because the textbox has `isReadOnly`, so the user can't _actually_ change it. But it's still a good idea for consistency and clarity to use an empty string instead of `undefined`, and it removes warning spam from my console!
2021-05-25 05:30:57 -07:00
f9f8cdc553 Wire up the bulk outfit image converter
Heck yeah, it's looking great!! Good error handling too :) you can test the partial error case by changing some image URLs to have invalid IDs.
2021-05-25 05:28:02 -07:00
08eee30743 Lookup/petpage converter layout upgrades
Added placeholders, and improved copy styles

I tried a two-column view for desktop, but it's too busy with the long label text. This is clearer!
2021-05-25 04:17:09 -07:00
8b3cfe7118 Basic lookup/petpage design for /outfit-urls
Not converting yet, and only mobile design, but hitting save on it anyway!
2021-05-25 04:04:35 -07:00
01711fe0c2 Don't shrink error icon for long error text
Oops, previously the MajorErrorMessage was willing to shrink the width of the cute Grundo Programmer icon, to allow error messages with long words to avoid word breaks.

Here, we switch `1fr` for `minmax(0, 1fr)`, which allows the text zone to get smaller. (`1fr` is short for `minmax(auto, 1fr)`, which isn't capable of shrinking smaller than the natural value.)

Now, the error text is more willing to shrink by word-wrapping, than the image is by shrinking the image. Success!
2021-05-25 03:54:14 -07:00
390c21b53e Add image converter to /outfit-urls
Adding the tool that will help people convert one image at a time!
2021-05-25 03:35:32 -07:00
42b8c3833c Create /outfit-urls page
Gonna put an upgrade tool here for outfit images, and provide the URL in the replacement images on S3!
2021-05-24 21:07:30 -07:00
e5551a6847 Fix performance regression in SpeciesColorPicker
Oops, my cute API idea for `speciesPickerProps` breaks `React.memo`, of course!

We could fix this by having the caller memoize the `speciesPickerProps` object, but that's too unusual and error-prone. We could also fix this by writing a custom function for `React.memo` to determine whether props match, but that seems like overkill when there's only one actual prop we're using here in practice.

So yeah, I've updated `SpeciesColorPicker` to just accept `speciesTestId` and `colorTestId` props instead!

Note that actually this component _is_ still re-rendering too often, because of a Chakra bug I just discovered and reported! So this change won't immediately improve performance, but it should stop re-rendering too often once we _also_ upgrade Chakra after this bug is fixed. https://github.com/chakra-ui/chakra-ui/issues/4080
2021-05-24 17:50:31 -07:00
e3ae5e7116 extract PaginationToolbar from ItemSearchPage
wanna reuse in like outfits page
2021-05-21 00:50:55 -07:00
a676be0f0f Use impress-outfit-images.openneo.net outfit URLs
Oops, right, I meant to use the new `impress-outfit-images.openneo.net` host for this! It works just fine from `impress-2020.openneo.net` as the backing source right now, but I want these semi-permanent URLs to be a bit more decoupled.
2021-05-20 20:57:06 -07:00
0eec503b91 Create pretty route for outfit images
This is mostly for decoupling's sake: I want pretty outfit URLs that aren't dependent on the `/api/outfitImage` path structure, so that we can serve them as ~permanent pretty URLs that don't actually indicate where or how the image is stored.
2021-05-20 20:35:41 -07:00
ae82a6236f Revert "Use current host for outfit share tags"
This reverts commit a0121f09ea.

I didn't realize that VERCEL_URL wouldn't use the canonical URL. And thinking further about the Open Graph semantics, I think having just one canonical host makes more sense, even if it makes testing a bit more annoying in some cases.
2021-05-14 21:09:09 -07:00
a0121f09ea Use current host for outfit share tags
This will help test preview pages and such!
2021-05-14 20:47:15 -07:00
2bc2fc5bfe Don't handle /outfits/new with SSR
Right, the routes are a bit confusing, `/outfits/new` matches `/outfits/:id`, but shouldn't.

I fix this at the routing level, by creating a more specific `/outfits/new` route that matches first, and just serves `index.html` right from the CDN.

To check that it's exact, I check for either a `?` or the end-of-string after `new`. That way, `/outfits/newish` correctly redirects to the SSR. (This doesn't actually matter a lot, because outfit IDs are only ever numbers and therefore can't start with "new"? But I figure, better to have an unambiguous semantic, then leave random things relying on outfit ID format assumptions.)
2021-05-14 20:35:24 -07:00
d31809cc62 Use VERCEL_URL in /api/outfitImage
Ah right, this is how we get the deployed API code to know its own hostname! This way, when we do a preview deploy, /api/outfitImage will use the preview version of the GraphQL endpoint, too.
2021-05-14 20:28:33 -07:00
5e657e7547 Fix prod outfit SSR by just using URLs, not build
Hmm, the built copy of the HTML isn't deployed with the API function on Vercel. Ok! Let's just do the same trick as we did for the dev server, and make an HTTP request.

This is fine enough for perf because we're caching this result locally to the function, plus it should be a fast CDN-cached response anyway.
2021-05-14 20:27:45 -07:00
08347ad88f Add a note explaining our outfit SSR decision 2021-05-14 20:04:46 -07:00
0fafeb92e1 Oops, fix production outfit SSR
That's what I get for not testing lol!
2021-05-14 20:02:32 -07:00
34ada18beb Use 600x600 outfit images in shares, not 300x300
Size upgrade, wowie! (I figure sharing services probably prefer a higher-resolution image, they're not very big, and to then scale them down for the application-specific use case & device.)
2021-05-14 19:55:12 -07:00
f48e6ba03d Add support for 600x600 outfit images
Gonna use this in the sharing, come next commit!
2021-05-14 19:54:18 -07:00
8f83ac412c Add sharing meta tags to outfit pages
Meta tags are a bit tricky in apps built with `create-react-app`! While some bots like Google are able to render the full page when crawling, not all bots are. Most will just see the empty-ish index.html that would normally load up the application.

But we want outfit sharing to work! And be cool! And use our new outfit thumbnails!

In this change, we add a new server-side rendering API route to handle `/outfits/:id`.

It's very weak server-side rendering: it just loads index.html, and makes a few small tweaks inside the `<head>` tag. But it should be enough for sharing to work in clients that support the basics of Open Graph, which I think most major providers respect! (I know Twitter has their own tags, but it also respects the basics of OG, so let's see whether there's anything we end up _wanting_ to tweak or not!)
2021-05-14 19:51:48 -07:00