Skip to content

Refac react frontend #790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

MerlinScheurer
Copy link
Collaborator

@MerlinScheurer MerlinScheurer commented Aug 17, 2024

@MerlinScheurer MerlinScheurer marked this pull request as ready for review September 1, 2024 11:06
@MerlinScheurer MerlinScheurer self-assigned this Sep 1, 2024
@bbilly1
Copy link
Member

bbilly1 commented Nov 8, 2024

For the channel overwrite endpoint, I consolidated that to the channel ID endpoint. E.g.:

POST /api/channel/<channel-id>/
{"channel_overwrites": {"index_playlists": true}}

Then this now also handles None and bools correctly. E.g. to "unset" or "delete" an overwrite set it to null. And True/False for the boolean values respectively.

@MerlinScheurer
Copy link
Collaborator Author

@bbilly1 how do i GET the channel_overwrites now?

@bbilly1
Copy link
Member

bbilly1 commented Nov 9, 2024

They are part of the regular channel data, e.g. /api/channel/<channel-id>/ will have the overwrites, if there are any defined. All keys are optional... so for the channel about page, you should only need one API request to get all needed data.

@MerlinScheurer
Copy link
Collaborator Author

@bbilly1 implemented and it works, but feels a bit quirky. But not sure why that is.
Will have another look tomorrow.

@MerlinScheurer
Copy link
Collaborator Author

Fixed styling selection, it was expecting dark.css to exist as a file.

@MerlinScheurer
Copy link
Collaborator Author

React 19 & vite 6 😁 👌

@bbilly1
Copy link
Member

bbilly1 commented Dec 21, 2024

I've been messing around the static files, artwork and routing, trying to align local dev outside of the container and the container deployment, to be able to have both at the same time.

This is my local env file I've been using:

# backend/.env
TA_HOST="localhost"
TA_USERNAME=tubearchivist
TA_PASSWORD=verysecret
TA_MEDIA_DIR="static/volume/media"
TA_CACHE_DIR="static"
TA_APP_DIR="."
REDIS_HOST=localhost
ES_URL="http://localhost:9200"
ELASTIC_PASSWORD=verysecret
TZ=UTC
DJANGO_DEBUG=True

Then from the backend folder you can run python manage.py runserver to start the dev server on localhost:8000.

By pointing the TA_CACHE_DIR var to the static, this will produce correct URLs from the API for local dev. Then in the container, that variable falls back to /cache, where nginx will correctly route that with the alias definitions.

Now the frontend needs to use the artwork URLs as returned from the API. You shouldn't have to do string concatenation with the ID in for example ChannelBanner and ChannelIcon components, you should be able to just take the path as returned from the API, e.g.:

src={`${getApiUrl()}/${channel.channel_banner_url}`}

If that doesn't work out somewhere, we'll need to make sure the API returns the correct paths.

Then like this we have best of both worlds, local dev with convenient hot reload for both back and front end, and container deployment where nginx does the routing.

Additionally, I also fixed the admin and restframework static files like css and js routing in nginx: e18f176

Hope that makes sense?

@MerlinScheurer
Copy link
Collaborator Author

@bbilly1 since i'm using Windows, i'm going to stay with the container for now 😅 ( got some os.uname errors when trying to install the requirements.txt )

Removed the string concatenation for image paths on channel and playlist. 👍

@bbilly1
Copy link
Member

bbilly1 commented Dec 22, 2024

hmm, yeah, tried to install the dependencies on a windows VM. uwsgi fails, but you don't need it, as you use the dev backend server directly provided by django. But also the ldap installation fails, a very quick research showed that they don't ship windows headers, so that's unfortunate. But you don't need it if you don't activate ldap with then env var, so that might still work out...

But yeah, in any case, the artwork now loads flawlessly, in dev setup as well as in the container. very convenient. I'd say, let's merge this to our react branch, and then we go from there.

Very nice! :-)

@bbilly1 bbilly1 merged commit 5a5d47d into tubearchivist:refactor-react-migration Dec 22, 2024
2 checks passed
@MerlinScheurer MerlinScheurer deleted the Refac_react_frontend branch December 22, 2024 15:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants