Commit graph

134 commits

Author SHA1 Message Date
03acbb9757 Add Cypress env to eslint 2021-05-04 12:33:13 -07:00
ec3aa1747d Lint against console.log
and replace `console.log` instances in the codebase with better alternatives!
2021-05-03 15:01:49 -07:00
ee0185a846 Upgrade Chakra to 1.6.0
Need this for an upcoming bug fix!
2021-04-30 12:48:03 -07:00
71215fe599 LRU caches to speed up outfit layer preload
The layer preloader already takes advantage of, and primes, the HTTP cache.

But we still do duplicate work, on every OutfitPreview render, to re-execute movie clip libraries, and create a movie clip to test for animations. The former is nontrivial cost, and the latter is often large cost. This can make even basic outfit changes slow, when there's no change to the movie clip layers and the player is paused!

Here, we add an LRU cache for movie clip libraries, and for the question of "is it animated?". This should speed up a number of places where we would reload the movie (including between toggling the item), and various changes that were triggering full movie clip rebuilds unnecessarily.

We _aren't_ solving here for the fact that toggling an animated item requires rebuilding the movie clip, which could conceivably be cached—but with some state management trickiness, because ideally it should be a separate clip for each context where it's being shown. Imo not yet worth the effort! (esp because I think users understand that toggling an animated item can be slow, whereas this was affecting _other_ actions way too much)
2021-04-16 20:16:56 -07:00
405e35a546 Basic outfit state Cypress tests 2021-04-16 04:27:19 -07:00
06ec0b0b52 Add disabled save UI 2021-03-29 19:46:21 -07:00
197c623426 delete-user.js script
I already had a script for this lying around, and adapted it a tiny bit to the repository!

Part of me thought about building it in as a support tool. I might've if:
- this CLI didn't already exist
- we already had tighter permissioning, this is pretty high stakes!!
2021-03-10 05:19:51 -08:00
281fdccb89 Upgrade Chakra, remove tooltip flicker workaround 2021-02-22 19:00:47 -08:00
d0e759d12a Oh, actually add TS_NODE_COMPILER to yarn start!
I wrote about this in the commit message, but forgot to do it!
2021-02-07 00:23:19 -08:00
1bb52e9f49 Use typescript-cached-transpile
I have this in the scripts, but the dev command is the big deal: it saves me ~2sec locally per GraphQL request :3

But the dev command requires an upstream change, I have a local fork working with it, but I'm gonna try to get a PR upstream!
2021-02-07 00:08:21 -08:00
c7b063313d Upgrade vercel package 2021-02-06 22:45:35 -08:00
957f345620 Fix tsconfig.json error
Oops, we had a trailing comma, I feel like this might be why some tools seemed to respect these settings and other tools didn't!

This change seems to enable us to remove our weird hacks that made `vercel dev` run…
2021-02-06 22:45:28 -08:00
c36fb38d42 Skip type checking in ts-node scripts 2021-02-06 22:44:34 -08:00
7997be3386 Install Cypress for e2e testing
It's my first time using it, but it feels great already, I'm excited!

Getting it set up in WSL OpenSUSE was a bit tricky, but we got there! Had to install a lot of deps, a font package, and add some basic config to ~/.bashrc.

This guide gave us most of it, but we had to do a couple other little things, too! None of them were too nasty though, just some Googling and trying things. https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress
2021-02-04 22:19:10 -08:00
1dda0d4edb Fix dev command for TS support
Gosh, I'm really down this rabbit hole, huh? :p Anyway, turns out the `vercel dev` command contains a _fork_ of ts-node that doesn't respect the `ts-node` override key in `tsconfig.json`. But it does respect the env var!

So I've now set up `yarn start` to invoke `vercel dev` with the new env, which in turn invokes `yarn dev` to start the create-react-app dev server. Whew! (Probably a better dev experience tbh.)
2021-02-02 22:25:54 -08:00
b58db4a629 Finally finish TS setup, build works!
`yarn build` was crashing on my `build-cached-data` script, because we were trying to run the Typescript file uncompiled!

Now, we run it with `ts-node`, which transparently compiles Typescript files before execution. Phew!

`react-scripts build` made some automated changes to `tsconfig.json` for compatibility with `create-react-app`, and I also added a `ts-node` section to override one of them so we can compile to CommonJS for `ts-node` script execution!
2021-02-02 21:38:57 -08:00
d3b9f72e67 Add stale-while-revalidate cache headers
Oh yay, I'm pleased with this! I hope it works out well!

stale-while-revalidate is an HTTP caching feature that gives us the ability to still serve relatively static content like item pages ASAP, while also making sure users generally see updates quickly.

The trick is that we declare a period of time where, you can still serve the data from the cache, but you should _then_ go re-fetch the latest data in the background for next time. This works on end users and on the CDN!

I've scanned the basic wardrobe and homepage stuff and brought them up-to-date, and gave particular attention to the item page, which I hope can be very very snappy now! :3

Note to self: Vercel says we can manually clear out a stale-while-revalidate resource by requesting it with `Pragma: no-cache`. I'm not sure it will listen to us for _fresh_ resources, though, so I'm not sure we can actually use that to flush things out in the way I had been hoping until writing this sentence lol :p
2021-02-02 19:07:48 -08:00
cbe519c59f Update to latest Chakra UI
I found a bug, and just wanted to make sure the latest version didn't have it! So hey, update time!
2021-02-02 16:00:49 -08:00
9ef73d5cd7 Upgrade @apollo/client to 3.3.7
So, I ran into some weird Apollo behavior, and was hoping it was a bug that the upgrade would fix. It didn't! But it seems to still run the site fine, so, okay, new version, neat!

Idly wondering if it's time to start adding some basic e2e tests, to validate updates like this...
2021-01-22 14:37:06 -08:00
dependabot[bot]
d9c89cef39
Bump immer from 6.0.8 to 8.0.1
Bumps [immer](https://github.com/immerjs/immer) from 6.0.8 to 8.0.1.
- [Release notes](https://github.com/immerjs/immer/releases)
- [Commits](https://github.com/immerjs/immer/compare/v6.0.8...v8.0.1)

Signed-off-by: dependabot[bot] <support@github.com>
2021-01-21 07:31:25 +00:00
ffe411c0b1 Add Sentry error logging + privacy statement
My main reason for adding this now is that I'm getting some scattered reports of things not displaying correctly, and I want to start gathering some browser data on that...

I recently confirmed that animations work on iOS (at least one did!), which was going to be my guess of what was breaking...
2021-01-16 10:59:54 -08:00
8567f9d4b8 Try a grid-based view for item lists
I took out virtualization for now too, I wanna see how this non-Chakra UI version, with fewer nodes and no tooltips etc, performs on large lists in production.
2021-01-14 04:58:40 -08:00
4a352e04e0 simulate login with IMPRESS_LOG_IN_AS flag 2021-01-05 23:22:03 -08:00
eb22290a64 outfit-images: fix prod-only bugs
We needed an extra build step to get node-canvas working! And `setHeader` is fluent in dev, but not in prod? Go figure!
2021-01-04 06:58:09 +00:00
d875b5f6ce outfit-images: use node-canvas to render image 2021-01-04 04:17:32 +00:00
385c476ae8 outfit-images: placeholder function and test! 2021-01-04 04:17:09 +00:00
4120c7aa88 fix large-icon visual bug
Looks like there was some kind of runtime conflict when running @emotion/css and @emotion/react at the same time in this app? Some styles would just get clobbered, making things look all weird.

Here, I've removed our @emotion/css dependency, and use the `<ClassNames>` utility element from `@emotion/react` instead. I'm not thrilled about the solution, but it seems okay for now...

...one other thing I tried was passing a `css` prop to Chakra elements, which seemed to work, but to clobber the element's own Emotion-based styles. I assumed that the Babel macro wouldn't help us, and wouldn't convert css props to className props for non-HTML elements... but I suppose I'm not sure!

Anyway, I don't love this syntax... but I'm happy for the site to be working again. I wonder if we can find something better.
2021-01-04 03:11:55 +00:00
40728daa99 upgrade to React 17
Another longshot attempt to fix the prod-only emotion bug for free :p

This should be a very easy upgrade, bc I don't think we depend on the minor stuff that had breaking changes.
2020-12-28 14:07:03 -08:00
1d498ef960 remove Storybook
This was helpful for playing with OutfitMovieLayer, but we haven't found it super useful since then. We can re-add it later if we want it!
2020-12-28 13:49:46 -08:00
23c6f83573 upgrade to react-scripts 4.0.1
I'm naively hoping that this fixes the issue with Emotion/Chakra styles that only shows up on prod…

We've had an issue with prod-only bugs before, and it was due to a compiler bug re comments in JSX. I'm wondering if maybe one of our deps now has the same or a similar bug? and if maybe upgrading react-scripts will upgrade webpack, which might fix it?

It's a bit of a longshot, but it's a good upgrade to do anyway, so let's see if we get lucky!

Also, react-scripts 4 has Fast Refresh built in, so we can remove our overrides that added it!
2020-12-28 13:47:09 -08:00
131ff9d4c2 upgrade to new Chakra extendTheme API 2020-12-25 09:20:18 -08:00
b023cbeaf9 use @emotion/css instead of plain emotion 2020-12-25 09:09:16 -08:00
69b60944c2 upgrade Chakra packages 2020-12-25 09:07:59 -08:00
0c2ec4685e use react-virtualized to speed up user items page
There's a known bug that items with a lot of zones will overflow the row… filing that as a separate fix tho!
2020-12-07 18:58:10 -08:00
15f10c615b add descriptions to closet lists (formatted! :3) 2020-10-28 00:00:14 -07:00
e7cc20876b use xmlrpc to load pets, not json.php
The AMFPHP gateway's json.php endpoint has always had a problem parsing pets whose names start with digits… I've dug into it before, and checked again today, and there really is just no way around it: d584b58e95/core/json/app/Actions.php (L43)

And there aren't any reliable AMFPHP Node libraries out there to make the actual native AMF call.

Buuuut! In today's investigation, I noticed the xmlrpc.php endpoint for the first time. And, wouldn't you know it, there's //great// reliability for something as enterprise-standard as that!

So here, I've switched over to using an xmlrpc client library, which simplifies our calling code //and// makes number pets work correctly 😁 I wouldn't have done it just for the simplification, I think bringing in a library is net more complexity… but getting this finally right is a big relief.
2020-10-22 23:22:04 -07:00
6c97c15979 add closet_lists to dev schema too 2020-10-22 20:32:02 -07:00
0dcbe6fc2d Add users and closet_hangers to local db schema 2020-10-22 19:53:32 -07:00
d602287190 feedback form now sends actual emails! 2020-10-09 08:55:03 -07:00
99e6480486 add logging to modeling
my hope is that, if we fuck things up, this will make it clear 😅
2020-10-06 07:06:19 -07:00
df2d814c13 enable running against a local dev database
had to add some missing tables, but it seems to work! (some known errors though, from assumptions we make e.g. blue acaras existing)
2020-10-06 06:18:19 -07:00
41e70ba8d0 finish modeling full pet appearance 2020-09-25 03:29:02 -07:00
50537758c5 start test/dev db IDs at 1, not wherever prod is
We download the schema from prod, and omit real data, but I didn't notice that we were still pulling the metadata of the auto increment counter for IDs! Now, we scrub that from the schema file we save.
2020-09-25 03:29:02 -07:00
ff3fc943d7 modeling saves pet type 2020-09-25 03:29:01 -07:00
9111dfddd3 save item swf assets during modeling 2020-09-25 03:29:01 -07:00
507d0709e4 fix conflict between storybook and jest
Huh, Storybook added some Babel dev deps, and it seemed to break Jest by anchoring to a bad verison. But removing them seems fine? So, cool.
2020-09-22 03:23:07 -07:00
31a0108d44 install storybook
I want it for faster feedback on the Easel stuff
2020-09-21 21:16:40 -07:00
abda9e4687 add a footer, move the dark/light toggle to it 2020-09-19 22:10:52 -07:00
07691a4e6b add basic test db infra
Boom, now we can also run a clean MySQL test db on each test that wants it :)

the test I wrote as a sample is currently marked `it.skip` because it's not passing yet!
2020-09-18 05:50:17 -07:00
68b7beae1b start setting up a local dev database 2020-09-18 05:24:03 -07:00
0c3d9443c2 upgrade to next Chakra RC
some regressions in here with global styles and color mode! I think we got it fixed though!
2020-09-07 20:59:38 -07:00
5a91dd2f2a in-memory cache for modeling query
I'm using my first ever MySQL Store Procedure for clever cleverness in caching the modeling query!

I realized that checking for the latest contribution timestamp is a pretty reliable way of deciding when modeling data was last updated at all. If that timestamp hasn't changed, we can reuse the results!

I figured that, because query roundtrips are a bottleneck in this environment, I didn't want to make that query separately. So, I built a MySQL procedure to do the check on the database side!
2020-09-06 15:49:08 -07:00
12b87ee7d1 set up auth on the server + test utils 2020-09-02 23:00:16 -07:00
56332ec8c0 redo auth0 export script to use APIs, not JSON 2020-09-02 15:26:33 -07:00
6982f00729 script to export users to auth0 2020-09-02 03:49:58 -07:00
3c3d18d371 add auth0 for login
Gonna need to import our folx into it, but gosh it would be nice to not be responsible for this anymore 😬
2020-09-02 03:06:09 -07:00
d013dd6d89 WIP: search suggestions 2020-09-01 18:05:31 -07:00
47d22ad25c Build cached zones, stop querying on server
In this change, we cache the zones table as part of the JS build process. This keeps the database as our source of truth, while aggressively caching the data at deploy time.

See the new README for some rationale!

I tested this by pulling up dev Honeycomb, and observing that we no longer run db queries to `zones` in the new traces for the wardrobe page. (It's a good thing we did it this way, because I noticed some code in the server that was still loading the zone anyway, and fixed it here!)
2020-08-19 17:50:05 -07:00
4977f1ee54 Revert "cache zone data"
This reverts commit 0f7ab9d10e.

The Production Vercel deploys don't seem to like how I did this build trick, even though the Preview deploys seem fine with it 🤔 Reverting for now, sent a message to Vercel support.
2020-08-17 18:49:37 -07:00
e20364cc0a create cache-asset-manifests script
Just gonna bulk load all those manifests into the db, and then that should make most loads notably faster by removing the net request! 🤞

We'll still load manifests inline sometimes, but only the first time anyone pulls up the layer in impress-2020. After that, it should be cached forever!
2020-08-17 18:23:39 -07:00
0f7ab9d10e cache zone data
I noticed that, while looking up zone data from the db is near instant when you're on the same box, it's like 300ms here!

In this change, we start downloading zone data into the build process. That way, we can have a very fast and practically-up-to-date cache (I'm not sure I've changed it in many years), while being confident that it's in sync with the database source of truth (for things like join queries).
2020-08-17 15:28:05 -07:00
ce028e4956 add Honeycomb logging
This will let me see traces for stuff!
2020-08-16 23:28:41 -07:00
3411914680 add a convenient yarn mysql-admin just for me
I use this as an easy shortcut to log into the prod database, with credentials that have more permissions than the app currently does 😅
2020-08-11 22:07:56 -07:00
a56ca20f69 Finish support tool to upload manual PNGs
Great for fixing those ones that the auto converters can't do!
2020-08-04 18:39:31 -07:00
8211444d67 apollo client 3 initial upgrade
Some bugs remaining… outfit items don't show up at first, and item search and scrolling seems _very_ weird, wearing is broken too…
2020-07-31 23:10:34 -07:00
bdef19e775 upgrade to chakra-ui rc (this fixes toasts!)
I had upgraded to a prerelease version of chakra-ui recently, and there was a bug that broke the "toast" message when you like, submit a bad pet name! It looked… very bad 😂

Now things look good again!!
2020-07-31 15:32:10 -07:00
3e86d1f2e7 enable Fast Refresh
Following this guide: https://dutzi.party/react-fast-refresh/

This enables code changes in dev to appear faster and preserve state, instead of reloading the page!
2020-07-22 21:03:04 -07:00
419a270df9 upgrade to Chakra v1
it's a preview version, but it has a feature I want, so let's get ahead of the curve!
2020-07-20 21:32:42 -07:00
Matt Dunn-Rankin
db9dc3390b code-split OutfitControls 2020-05-18 00:11:18 -07:00
Matt Dunn-Rankin
543a12123d remove use-http to save 31kb 2020-05-17 23:44:33 -07:00
Matt Dunn-Rankin
2b8ed15bc1 remove react-helmet to save 12kb 2020-05-17 23:26:00 -07:00
Matt Dunn-Rankin
9c8a48a325 http caching for all color/species requests 2020-05-14 15:51:08 -07:00
Matt Dunn-Rankin
385360ef10 basic home page! 2020-05-10 00:21:04 -07:00
Matt Dunn-Rankin
1bf33c14db use compressed validPetPoses to save network
it also has valid emotion/gp data in there too, which we'll use later!
2020-05-03 01:52:39 -07:00
Matt Dunn-Rankin
c61612125c add --database to yarn mysql script 2020-04-30 00:34:17 -07:00
Matt Dunn-Rankin
9075d4837e add yarn mysql shortcut script! 2020-04-30 00:01:49 -07:00
Matt Dunn-Rankin
1ca61215be use outfit name in page title 2020-04-25 20:54:18 -07:00
Matt Dunn-Rankin
48da0903ca use radios for items! 2020-04-25 15:26:11 -07:00
Matt Dunn-Rankin
90ad9feb0c move neopets.com loading into server
the client stuff worked locally, but not in prod because you can't request http from https, even with cors set up correctly 😅
2020-04-25 06:50:34 -07:00
Matt Dunn-Rankin
abfe854756 use item data to detect conflicts 2020-04-24 18:39:38 -07:00
Matt Dunn-Rankin
d9e4b8cb59 smooth fade-in/out for layers! 2020-04-24 00:28:00 -07:00
Matt Dunn-Rankin
4a61919649 add GQL support for appearance data! 2020-04-23 01:09:06 -07:00
Matt Dunn-Rankin
496d69dc95 got apollo server running as a vercel function! 2020-04-22 14:02:23 -07:00
Matt Dunn-Rankin
81a2306667 move to vercel now function api structure
I haven't really tested the API yet, because it's hard to query GraphQL directly, but I'll set up the client in a bit for it!
2020-04-22 13:03:32 -07:00
Renamed from app/package.json (Browse further)