search

Refsheet / refsheet-site

Refsheet is a place for character and world builders to attach assets related to their characters in one unified format, allowing artists and story writers to access the specific details of a character, maintaining synchronized dynamic canon.
https://refsheet.net
GNU General Public License v3.0
20 stars 1 forks source link

Color Problem.. But why.. #222

Open Vector-Bot opened 4 years ago

Vector-Bot commented 4 years ago

1] Click on your profile. 2] Click on a character. 3] Hit the back button to go back to your profile page. 4] Press refresh on that page (for some reason.) 5] Colors of the character's profile suddenly return to default colors.

This is an eager loading issue.

roughjericho commented 3 years ago

Can reproduce on Chrome- Version 87.0.4280.88 (Official Build) (64-bit), running on Windows 10 v.2004 19041.685. Additionally, the color values of at least one character need to be changed and saved for this to show up.

After a little digging- the HTML style attributes for the character link cards on down are outright missing when I refresh the page. Vector-Bot mentioned this to be an eager loading issue- does the frontend get those values through a request to the Ruby On Rails backend?

MauAbata commented 3 years ago

@roughjericho Correct, in part. The "older" parts of the site (all code under app/javascript/v1/*) uses a form of eager loading wherein the requested data is provided, serialized, as props to the React app when the page is served up from Rails for the first time. This data is consumed by an awful outdated StateUtils library I wrote, and used in place of executing a fresh query from the server.

In this case: I added the custom color attributes to the live query to the server, or though some other serialized endpoint or data transform or something, but the same data is not present on the initial load.

This method of eager loading I've since moved away from as it wasn't compatible with the new GraphQL endpoints, and bugs like this where the initial serialized data is missing what the dynamically fetched data should have.

roughjericho commented 3 years ago

Figured as much. From the sound of things v2's gonna render any fixes for this outright moot when it gets to the user profile page, then.

MauAbata commented 3 years ago

Yeah, that's just a matter of swapping the data source from the old JSON endpoints to the GraphQL API. For the user profile page, the only V2 conversion it needs (since I'm not keen on rewriting those like I did with character profiles) is tidying it up to the proper ES6 standards, removing the auto-generated nonsense when I moved from Coffeescript, and making sure it's a proper React Class or Functional component, and not a React.createClass thing.

That being said, there are a ton of createClass components still in the codebase, and it'd be wonderful to have those all converted one day. The "V2" conversion is really just going through the v1/ folder and doing this cleanup on them all, moving them to a proper folder with the other components, and making sure it works.

Bonus points for Jest snapshots.