Commit graph

493 commits

Author SHA1 Message Date
ccd4885aad Add "New updates" / "Coming soon" to homepage
Not really sure how to scale these over time, I feel like some amount of history + blog cuteness could be fun? And like, the ability to catch up if you come back after a couple weeks could be nice. But this seems like a really useful at-a-glancer for folks!
2021-01-19 15:46:21 -08:00
61d60170f3 Fix console error in SearchToolbar on add filter 2021-01-19 14:34:30 -08:00
0333b47c05 Leave search suggestions open on blur
Someone wrote in how, when your search query ends with a string that creates Advanced Search suggestions, clicking on items in the list requires two clicks: one to blur and dismiss the suggestions, and one to actually click the item.

Here, I'm experimenting with just leaving the suggestions open. It doesn't feel _great_, but it definitely feels _better_ than before on this edge case, and I thiiink this only affects this edge case in practice? We'll see if it feels goofy in some cases I forgot tho!
2021-01-19 14:27:55 -08:00
8aa644a031 Stop sending client-side nav transaction to Sentry
Oops, we hit our Sentry transaction limit after 3 days!

This is in part because we selected a 100% sample rate to start, but also because our app has a lot of client-side navs that don't represent real navigation, and are just to update the state in the URL.

I'm not using most of Sentry's performance tracing features, though! I don't have logging that helps us understand once the page is really done, and I'm only really able to use Web Vitals right now - which only applies to first-time pageload events, anyway. So, that's now all we track!
2021-01-18 16:31:02 -08:00
b39914976b Add an /items/search page, and search box on Home
Woo, it's looking pretty good, I think!

I didn't bother with pagination yet, since I feel like that'll be a bit of a design and eng lift unto itself... but I figured people would appreciate the ability to look up individual items, even if the rest isn't ready yet 😅
2021-01-18 15:56:24 -08:00
9e5dfd1c84 Move "Log out" button into the nav menu
When actually using mobile, I was like "oh, it's maybe not great that the menu button is tiny and the Log out button is huge". Awkward click targets!
2021-01-18 13:51:52 -08:00
6e33132881 Load homepage faster for logged-in users
When building the code to await auth before sending _any_ GraphQL queries, I didn't realize that auth might be kinda slow. So, I've added a hack to let me mark queries with no user-specific data to skip auth, and applied that to the main queries on the homepage.

I think this is a hint that we might want to change our strategy - e.g. to flip it to hackily mark that auth _is_ required, or to create wrappers or option-builder helpers for logged-in queries, etc.

I also notice that SSR would have resolved this particular case...
2021-01-18 07:15:00 -08:00
154046695f Avoid alt text flash of content for item thumbnail 2021-01-18 06:51:23 -08:00
b78cede939 Add brief delay before Latest Items loading state
This UI generally loads very fast, thanks to the CDN cache, so the flash of skeleton content is more distracting than anything else! We still show it quickly after 300ms, but good network connections should reliably get it loaded before then.
2021-01-18 06:46:18 -08:00
f3633f5ab6 Privacy policy copy tweak 2021-01-18 06:44:07 -08:00
334d89c101 Add Latest Items section to homepage 2021-01-18 06:31:27 -08:00
934dd829c6 Fix ChunkLoadError crashes after deploys
Our host, Vercel, doesn't keep old build files on its CDN after a deploy for very long. This means that, after a deploy that changes a page's bundle, existing sessions that attempt to navigate to it for the first time will fail on the dynamic `import`, because the filename hash has changed.

The best fix I'm aware of for this is to just, reload the page when this happens!

To test this, I did the following:
1. Use `yarn build` to build a prod copy of the site.
2. Use `serve -s build` to start serving it on its own port. (API endpoints won't work, and that's okay!)
3. Don't touch the open copy of the site yet.
4. Make a change to `PrivacyPolicyPage.js`, and `yarn build` again. This simulates a deploy under similar circumstances.
5. Open the Console, tick the "Persist Logs" option, and try to navigate to Privacy Policy. Observe that it logs a ChunkLoadError in the console, and smoothly reloads the page to show you the updated Privacy Policy page.
6. Undo your change 😅
2021-01-18 05:17:14 -08:00
ca088f3310 Group Sentry stats by route 2021-01-17 08:48:22 -08:00
753305dd11 Fix "Untitled outfit" on open outfit in new window
Previously, when you navigated directly to an outfit by typing the URL into the browser or following an external link, the name would stay as "Untitled outfit", even after the outfit loaded.

This was because, when you render an `Editable` Chakra component with `value={undefined}`, it permanently enters "uncontrolled" mode, and providing a value later doesn't change that.

But tbh passing `undefined` down from outfit state wasn't my intention! But yeah, turns out the `?.` operator returns `undefined` rather than `null`, which I guess makes sense!

So, I've fixed this on both ends. I'm now passing more `null`s down via outfit state, because I think that's a more expected value in general.

But also, for the `Editable`, I'm making a point of passing in an empty string as `value`, so that this component will be resilient to upstream changes in the future. (It's pretty brittle to _depend_ on the difference between `null` and `undefined`, as we saw here 😅)
2021-01-17 08:19:47 -08:00
9b0a99e2ae Mention starred outfits in "Your outfits" WIP 2021-01-17 08:05:05 -08:00
e149d53595 Back links to Your Outfits, *if* it's yours
Previously, when you clicked on a saved outfit from Your Outfits, the back button would take you back to the homepage, which was confusing for scanning through stuff! Now, it goes back to Your Outfits if it's yours.

I'm not suuure this is the behavior we want? But it seems intuitive enough!
2021-01-17 08:04:21 -08:00
2dbed8b8c4 Use default values for plain /outfits/new URLs
Previously, if you navigated to /outfits/new without a species or color in the query string, we'd show a blank outfit page, with the species/color picker hidden. Now, we default to a Blue Acara instead!

We don't do anything to handle _invalid_ species/color IDs, but I don't super mind that, because in practice that would require some call site to malform the URL, and I don't super expect that.

This resolves more of the _cause_ of Sentry issue IMPRESS-2020-8, but I'm still wondering how a user got to the URL `/outfits/new?[object+Object]=&objects[]=35185&objects[]=67084`. I'm wondering if the pet loader on the homepage has a bug in Safari? I feel like I heard something like that from the feedback form, too...
2021-01-17 07:43:08 -08:00
f1dd3bffa6 Hide species/color on wardrobe page when not ready
If the species/color of the current outfit aren't available yet (e.g. a saved outfit is still loading in), hide the picker altogether. This is because the picker can't handle change events during that time, and it's easier to just hide all this than to add special case handlers like disabled states! (And, while placeholders are often helpful, I'm not sure the placeholder dropdowns are any better than empty space in this case.)

This can also happen when the user loads a page without a species/color ready, like just going straight to `/outfits/new`. I think I might want to add a handler for that, though.

Resolves the direct cause of Sentry issue IMPRESS-2020-8, though I'm not sure how the user got to the URL `/outfits/new?[object+Object]=&objects[]=35185&objects[]=67084` in the first place...
2021-01-17 07:24:54 -08:00
7393991046 log search result errors
We showed an error to the user, but nothing in the console! Now we have it :)
2021-01-17 04:47:11 -08:00
f6ce8611b2 Clearer errors when image download fails
Two fixes in here, for when image downloads fail!

1) Actually catch the error, and show UI feedback
2) Throw it as an actual exception, so the console message will have a stack trace

Additionally, debugging this was a bit trickier than normal, because I didn't fully understand that the image `onerror` argument is an error _event_, not an Error object. So, Sentry captured the uncaught promise rejection, but it didn't have trace information, because it wasn't an Error. Whereas now, if I forget to catch `loadImage` calls in the future, we'll get a real trace! both in the console for debugging, and in Sentry if it makes it to prod :)
2021-01-17 04:42:35 -08:00
cfb5504341 Add hidden command to send test error to Sentry
I haven't seen anything come in from prod yet, and it's hard to trigger one, maybe because the integration is React-specific? Or maybe it's... not working :p

I can send errors from dev! But just haven't _seeeen_ a prod error come in yet.

Maybe we're just squeaky clean tho :3
2021-01-16 12:01:28 -08: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
888825b1b7 add explainer text to outfits page WIP callout 2021-01-14 06:45:07 -08:00
9ce5a230e1 add cute "Impress 2021" flavor explainer text 2021-01-14 06:43:55 -08:00
1376e95f84 bug fixes for new ItemCard
Oops, I messed up the background color in dark mode! and left in an extra `as` prop
2021-01-14 05:34:13 -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
7a5a6b919b Fix Download button
Huh, I'm not sure why SVGs ever didn't have `crossOrigin: "anonymous"`? The old commit isn't really super helpful for understanding that. Maybe I just didn't notice the problem in that case?

Well, whatever. Let's see if this breaks something else! (I'm also wondering if we should just like, _always_ ask for things with crossOrigin set?)
2021-01-08 17:38:27 -08:00
11767828cf Disable PosePicker while saved outfit is loading
Oops, if you try to show PosePicker before we have a species/color ready, it sends a bad GraphQL request. No visible user impact, just an unnecessary network call and an error in the console! This happens when you're loading an outfit by ID.

Here, we hide PosePicker if there's no species/color ready yet. This stops the extra request from firing!
2021-01-08 03:37:56 -08:00
c7929b29a5 Fix awkward blinky loading state for outfit
When loading an outfit in the wardrobe page, there was an awkward state where the outfit preview loading spinner would vanish and then reappear.

This was because `useOutfitState` briefly reported `loading: false`, then fixed itself after almost immediately—but our OutfitPreview component has a delay before re-showing the spinner.

In this change, we smooth out the loading state, by enabling the second GQL request to start immediately once the first request is done, instead of waiting on a callback to finish.
2021-01-08 03:19:57 -08:00
62579dc671 Keep outfit thumbnail while individual layers load 2021-01-08 02:53:31 -08:00
9ae1704908 fix visual regressions on Your Outfits page
Oops, when refactoring and adding alt text, I didn't realize the padding for the text would affect the images too! And I forgot to add `overflow: hidden` to round the image's corners. Fixed!
2021-01-08 01:26:28 -08:00
2a8be58973 Show thumbnail in wardrobe page while outfit loads
To help the load time for outfits feel shorter, we now reuse the outfit thumbnail from the Your Outfits page as a placeholder!

This doesn't add any overhead when the thumbnail data _isn't_ in your session cache, e.g. if you navigate to the outfit directly. But if we have the thumbnail on hand already, we just show it, easy peasy!
2021-01-08 01:23:24 -08:00
fe799a9bbc Add alt text to OutfitCard images 2021-01-08 00:35:56 -08:00
b478f35103 Refactor OutfitCard a bit
Preparing to make a skeleton version for loading!
2021-01-08 00:35:09 -08:00
3804457839 fix OutfitPreview fade out bug
Oops, when switching to @emotion/react, it turns out they no longer support that cute hack I was doing to append suffixes to class names!

Here, I change strategy and let `CSSTransition` apply the plain `exit` and `exit-active` classes to its children, and apply Emotion styles to the child to check for _also_ having those classes.
2021-01-07 00:33:51 -08:00
4a352e04e0 simulate login with IMPRESS_LOG_IN_AS flag 2021-01-05 23:22:03 -08:00
20f3ca75b0 fix caching on Your Outfits page
Oh right, we can't cache objects  well when they're missing their ID!

Before this change, selecting an outfit then navigating back would require the outfits to reload. Now, they stay!
2021-01-05 06:45:27 +00:00
12b357fad9 oops, tweak outfit data query slightly 2021-01-05 06:43:33 +00:00
95d94a4844 Show loading spinner when outfit data is loading
A pretty easy tweak, phew!
2021-01-05 06:42:09 +00:00
102a29fefd show outfit name faster, instead of "Untitled Outfit"
That'll still show up when the outfit is still loading, but this lets us use the Apollo cache to show the name instantly if you're clicking through a link from Your Outfits
2021-01-05 06:39:12 +00:00
1f5a9d60a2 Show saved outfits in wardrobe page!
Still a pretty limited early version, no saving _back_ to the server. But you can click from the Your Outfits page and see the outfit for real! :3 We have a WIPCallout explaining the basics.
2021-01-05 06:29:39 +00:00
6749d19f9e fix dev emotion crasher in wardrobe page
This seemed to only show up in dev? But right, I guess it's not happy about passing stuff from ClassNames into a Popover Portal. Move it inside, fixed!
2021-01-05 05:51:54 +00:00
f36d6831d0 make outfits page links, to classic DTI
Mostly just getting the link style figured out! But getting them actually working is coming soon :)
2021-01-05 05:20:07 +00:00
71bb593974 center outfits, helps a lot on mobile
I pulled it up on my phone, and there was only one column, and being left-aligned for that was bleck!

This is a good spacing compromise, I think :)
2021-01-04 09:36:01 +00:00
c9603a40ea tweak site bg color, to let card elements "pop"
This has been bothering me for a long time, but I couldn't really figure out what to do about it. But tweaking the site bg color a smidge has helped us really add texture to the cards I want to have pop out, like the outfit polaroids!

I kinda went all-in in a burst, but tbh I think it looks great :3

I haven't really touched the wardrobe page with it yet though, that'll probably need some tweaking... for now I'm overriding it to keep the old background!
2021-01-04 09:17:54 +00:00
98604b39da add message for when you have no outfits 2021-01-04 08:47:39 +00:00
72a99fd5bf fix dark mode styles for outfits page 2021-01-04 08:45:52 +00:00
be7de27c5c refine outfit thumbnail card styles 2021-01-04 08:39:15 +00:00
b01feba038 add items to outfit thumbnails
Now that wasn't so hard! :3
2021-01-04 08:26:05 +00:00
9a2308fd41 add Outfits link to global header 2021-01-04 08:13:37 +00:00
259ae9bd87 add WIP callout to outfits page 2021-01-04 08:12:25 +00:00
30e0a149be basic outfits page with pet-only thumbnails 2021-01-04 08:10:35 +00:00
b8d919b247 basic outfit data from GQL 2021-01-04 07:36:00 +00:00
778eefbdd5 placeholder Your Outfits page
it requires login, and runs a GQL query that will fail 😅
2021-01-04 07:31:02 +00:00
79bde552e2 move src/images into src/app/images
I'm gonna add a `src/shared` next, and it felt weird for `images` to be a sibling, esp since the images are only for the client app!
2021-01-04 03:49:08 +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
82003a91de fix a11y warning in privacy policy 2020-12-25 09:21:54 -08:00
131ff9d4c2 upgrade to new Chakra extendTheme API 2020-12-25 09:20:18 -08:00
91982c60d9 update to new Chakra <Wrap> API 2020-12-25 09:17:24 -08:00
b023cbeaf9 use @emotion/css instead of plain emotion 2020-12-25 09:09:16 -08:00
406849182a update chakra imports 2020-12-25 09:08:33 -08:00
a6ef12a5dd lol change the privacy policy link text from "Hey" 2020-12-07 22:56:58 -08:00
b07924c40f add a privacy policy 2020-12-07 22:56:23 -08:00
5342968872 fix a weird virtualization bug
surely not the last :p
2020-12-07 19:18:34 -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
d59a4948a0 fix species/color dropdown focus bug
Oops, creating a new `SpeciesColorPicker` fn on each render meant that React treated it as a whole new dropdown each time. I've extracted it out into a stable component class, and just pass in the extra props now!

This bug caused changes to kick you out of focus for the dropdown, because it had unmounted and remounted.
2020-12-04 13:01:39 -08:00
0674834fb2 try column headers "Trade for your/their…" 2020-11-25 02:24:15 -08:00
def46b0d9c add matches to the trades list page when logged in 2020-11-25 01:53:42 -08:00
066b914bd5 random-sorted "this week" for most recent trades 2020-11-25 00:33:00 -08:00
7310e62699 trades page col heading tweak 2020-11-24 23:59:44 -08:00
429d7fd497 "Search for another user" -> "Find another user"
copy was too long for the search field on some devices!
2020-11-24 21:21:38 -08:00
a7e32232e2 fix query op name on UserItemsPage 2020-11-24 20:54:10 -08:00
bb173552e9 oops, use client-side nav for these links! 2020-11-24 15:05:23 -08:00
65b4a05639 fix bug on "no trades yet" screen w/o "Compare" 2020-11-24 15:02:03 -08:00
ec9b96ff70 link to the new trade pages from item page 2020-11-24 15:01:24 -08:00
1f2e83e11e sort trades by user activity (will refine later)
I think a plain sort by last update is too game-y, so I have some ideas how to make this a bit more random but still usefully sorted
2020-11-24 14:58:11 -08:00
c8af209012 hide compare column for now 2020-11-24 14:49:20 -08:00
c23243fcb7 add real timestamp to trades page 2020-11-24 14:43:43 -08:00
d275c96396 fix bug in table loading placeholders
The extra word width of "Placeholder" caused wrapping on some screens!
2020-11-24 14:29:00 -08:00
54abd1ac80 real trade data on the page! 2020-11-24 14:24:34 -08:00
6681f9642a add media query for "this week" vs "<1 week" 2020-11-23 13:30:34 -08:00
c1012e57d5 fix bug linking directly to a specific list 2020-11-23 13:28:43 -08:00
8068a1d260 offer/seek trade pages, with placeholder data 2020-11-23 11:25:23 -08:00
9481ce05a6 open trading links in new page from wardrobe page 2020-11-23 09:36:24 -08:00
1af034e4e7 refactor ItemPage components to be more reusable
this is because I'm about to make trades pages!
2020-11-23 09:34:46 -08:00
d219750ea1 support can look up users by email, not just name 2020-11-18 10:32:49 -08:00
7c9313f4a6 support tool to edit usernames 2020-11-18 07:42:40 -08:00
6a43f92438 can search for user by name from items page 2020-11-18 06:45:33 -08:00
68e6e9e243 add real offering/seeking counts to item page 2020-11-09 06:26:29 -08:00
90233c0a03 add items.jellyneo.net to valid trade list links 2020-11-09 06:11:07 -08:00
a5bfadf126 fix missing pause/play button for some animations
We do animation detection during the preload now, but this wasn't always working correctly: some movies don't actually fully mount the children onto the stage until we start playing. This caused the play/pause button to be missing on the outfit page and the item page, but the animations would still play, depending on the user's saved play/pause state in localStorage.
2020-11-08 16:17:07 -08:00
652d3cff7d add trade link placeholders to item page 2020-11-08 15:46:11 -08:00
d02f7ced72 add pb badge to pb items, instead of nc/np badge 2020-11-08 15:13:30 -08:00
02e173d7de nc/np/pb search filters 2020-11-08 15:04:17 -08:00
63a17824e5 lint fixes 2020-11-08 14:35:02 -08:00
d701f51c15 move own/want badges to end of wardrobe items
I saw the short-near-the-front and it just frankly looked awkward? Not sure why I liked it before?

I think this medium at the end of the list is better aesthatically, though it's starting to get a bit messy with the different colors mixed around… but I think there's also a semantic argument that we're keeping the facts about the item together, and the _user-specific_ stuff separate at the end… (putting it at the front would be a good semantic argument too, but I think the NC/NP alignment is too important)
2020-11-03 20:24:56 -08:00
045fb95d69 fix spacing bugs with item badges
In a previous change, I moved the margin for item badges onto an ItemBadge element… but I didn't think through how that would break the spacing for the loading state of ItemPage. Now, the loading skeleton items _contained_ the badge margin, and so the spacing between badges was shiny skeleton-y.

Here, I replace ZoneBadgesList with a function that just returns the elements, and go back to using Chakra's Wrap component. That will apply the margin to direct children, and the zone badges are direct children now.

One option I'm thinking of in hindsight is an idea I had earlier: Chakra hacks the margin onto _React_ children, but could we use CSS direct child selector instead? A bit trickier to resolve the margin size to the theme's value, but plenty doable… something to consider!
2020-11-03 20:11:37 -08:00
e47bec0abc refactor menu/nav a bit 2020-11-03 19:36:48 -08:00
2de840b53e fix mobile flash-of-wrong-nav-menu
In the previous impl, the buttons variant of the menu would appear on first render, and then the breakpoint stuff would adjust and re-render as the compact nav menu. Now I'm using CSS to show/hide instead!
2020-11-03 14:57:26 -08:00
2772c3e090 adjust WIP callout on user items page 2020-11-03 14:45:43 -08:00