UI Touchup

[codetheweb]

Highlights:

• Added linter (can swap it out if you want, I like it because it's strict)
• Converted class-based components to functional components
• Dark mode (changes based on system setting)
• A few UI tweaks
• Removed Thunk dependency for Redux, simplifies code

Preview:

Some ideas for further development:

• Mobile is garbage. Gotta figure out a good way to display tables. After increasing responsiveness, it's not actually that bad. The table works fine with horizontal scrolling.
• Increase performance when searching. @Blu3spirits suggested using a debouncer on user input. I changed the default table length to 10 rows and that seems to help as well, although obviously not an ideal solution.
• Make API endpoint URL an env var so we can set it at build time.
• In line with the above, make some kind of script that creates a static build and links it with Django. Edit: maybe? I guess they recommend using a different server for static files.
• In the screenshot, you may see I added a 'last updated at...' value. I think this would be helpful for people who use the site but may think it was abandoned and doesn't have up-to-date information.

[Blu3spirits]

Going to have to put this on the backburner for now as exams are this week.
Planning to get back to this Wed. Apr 29

[codetheweb]

Used a combination of debouncing and memoization to significantly improve responsiveness. Feels much snappier, especially on mobile.

[Blu3spirits]

In line with the above, make some kind of script that creates a static build and links it with Django. Edit: maybe? I guess they recommend using a different server for static files.

typically it is recommended to do this. However, using a module such as whitenoise is supported and "okay" to do. I'm going to handle doing this one as it's on the Django side and would help solve a deployment hang-up I've been having.

[Blu3spirits]

I really like the dark theme idea you've put forward. Definitely a lot easier on the eyes and with debounced input the UX is vastly improved.

[Blu3spirits]

Good work!

I'm going to attempt to deploy this real quick before I give my approval

[Kiro47]

I did find one minor bug, but it can be moved to another issue if you feel like dealing with it later.

Recreation:

1. Do normal development setup
2. Go to web page
3. Go up a few pages to where you're in a higher results list. (In example, I went to "Rows per Page=200" then went to the 4th page "Entries 601-800".
4. Search for something with less results than the lowest entry. (An example being "Dynamics" with 72 results).
5. On load it'll still have you on the page with 601-800 entries, and to get to your entries you'll just have to keep going back pages unless you're on actual values.

Proposed Solution:
On search query reset the page to page 1 with entries "1 to Max_Rows".

[codetheweb]

I can fix that tonight.

Looks like I also have to start signing commits.

[codetheweb]

Fixed @Kiro47. Edit: still working on signing old commits.

[Blu3spirits]

If you wanted you could probably just rebase if you want. It's not exactly "best practice" but it will get everything under one signed commit

[Kiro47]

Looks like you missed the topmost commit when resigning. To make it to resign here's a cheap little snippet:

git filter-branch -f --commit-filter 'git commit-tree -S "$@";' 6ac2b59359de934bc10252a76e4c39b2d9a57377^1..HEAD

It'll resign all the commits from that hash (6ac2b59359de934bc10252a76e4c39b2d9a57377) and on. Since each commit hash is based on the old one, you unfortunately have to resign all the commits after modifying even one, this makes it a bit easier.
Also, make sure you keep that ^1, otherwise it will gpg resign everything after that commit but skip that commit itself.

[codetheweb]

Sorry about that @Kiro47.

Looks like it's good to go now.