From b2e3bea3602ab3f5d1d2de8f4c97b37dd3cb8639 Mon Sep 17 00:00:00 2001 From: dekzter Date: Tue, 8 Apr 2025 08:35:31 -0400 Subject: [PATCH] fixed m3u form submission --- frontend/src/api.js | 32 +++++- frontend/src/components/forms/M3U.jsx | 160 ++++++++++++-------------- 2 files changed, 98 insertions(+), 94 deletions(-) diff --git a/frontend/src/api.js b/frontend/src/api.js index 020b4ebd..3adb14f1 100644 --- a/frontend/src/api.js +++ b/frontend/src/api.js @@ -500,9 +500,7 @@ export default class API { static async addPlaylist(values) { let body = null; - let endpoint = `${host}/api/m3u/accounts/`; if (values.file) { - // endpoint = `${host}/api/m3u/accounts/upload/`; body = new FormData(); for (const prop in values) { body.append(prop, values[prop]); @@ -513,7 +511,7 @@ export default class API { body = JSON.stringify(body); } - const response = await fetch(endpoint, { + const response = await fetch(`${host}/api/m3u/accounts/`, { method: 'POST', headers: { Authorization: `Bearer ${await API.getAuthToken()}`, @@ -574,13 +572,37 @@ export default class API { static async updatePlaylist(values) { const { id, ...payload } = values; + + let body = null; + if (payload.file) { + delete payload.server_url; + + body = new FormData(); + for (const prop in values) { + body.append(prop, values[prop]); + } + } else { + delete payload.file; + if (!payload.server_url) { + delete payload.sever_url; + } + + body = { ...payload }; + delete body.file; + body = JSON.stringify(body); + } + const response = await fetch(`${host}/api/m3u/accounts/${id}/`, { method: 'PATCH', headers: { Authorization: `Bearer ${await API.getAuthToken()}`, - 'Content-Type': 'application/json', + ...(values.file + ? {} + : { + 'Content-Type': 'application/json', + }), }, - body: JSON.stringify(payload), + body, }); const retval = await response.json(); diff --git a/frontend/src/components/forms/M3U.jsx b/frontend/src/components/forms/M3U.jsx index 50efc713..a936c8be 100644 --- a/frontend/src/components/forms/M3U.jsx +++ b/frontend/src/components/forms/M3U.jsx @@ -19,11 +19,13 @@ import { Divider, Stack, Group, + Switch, } from '@mantine/core'; import M3UGroupFilter from './M3UGroupFilter'; import useChannelsStore from '../../store/channels'; import usePlaylistsStore from '../../store/playlists'; import { notifications } from '@mantine/notifications'; +import { isNotEmpty, useForm } from '@mantine/form'; const M3U = ({ playlist = null, isOpen, onClose, playlistCreated = false }) => { const theme = useMantineTheme(); @@ -43,7 +45,8 @@ const M3U = ({ playlist = null, isOpen, onClose, playlistCreated = false }) => { } }; - const formik = useFormik({ + const form = useForm({ + mode: 'uncontrolled', initialValues: { name: '', server_url: '', @@ -52,67 +55,69 @@ const M3U = ({ playlist = null, isOpen, onClose, playlistCreated = false }) => { max_streams: 0, refresh_interval: 24, }, - validationSchema: Yup.object({ - name: Yup.string().required('Name is required'), - user_agent: Yup.string().required('User-Agent is required'), - max_streams: Yup.string().required('Max streams is required'), - }), - onSubmit: async (values, { setSubmitting, resetForm }) => { - let newPlaylist; - if (playlist?.id) { - await API.updatePlaylist({ - id: playlist.id, - ...values, - file, - }); - } else { - newPlaylist = await API.addPlaylist({ - ...values, - file, - }); - notifications.show({ - title: 'Fetching M3U Groups', - message: 'Filter out groups or refresh M3U once complete.', - // color: 'green.5', - }); - - // Don't prompt for group filters, but keeping this here - // in case we want to revive it - newPlaylist = null; - } - - resetForm(); - setFile(null); - setSubmitting(false); - onClose(newPlaylist); + validate: { + name: isNotEmpty('Please select a name'), + user_agent: isNotEmpty('Please select a user-agent'), + refresh_interval: isNotEmpty('Please specify a refresh interval'), }, }); + useEffect(() => { + if (playlist) { + console.log(playlist); + form.setValues({ + name: playlist.name, + server_url: playlist.server_url, + max_streams: playlist.max_streams, + user_agent: `${playlist.user_agent}`, + is_active: playlist.is_active, + refresh_interval: playlist.refresh_interval, + }); + } + }, [playlist]); + + const onSubmit = async () => { + const values = form.getValues(); + + let newPlaylist; + if (playlist?.id) { + await API.updatePlaylist({ + id: playlist.id, + ...values, + file, + }); + } else { + newPlaylist = await API.addPlaylist({ + ...values, + file, + }); + + notifications.show({ + title: 'Fetching M3U Groups', + message: 'Filter out groups or refresh M3U once complete.', + // color: 'green.5', + }); + + // Don't prompt for group filters, but keeping this here + // in case we want to revive it + newPlaylist = null; + } + + form.reset(); + setFile(null); + onClose(newPlaylist); + }; + const closeGroupFilter = () => { setGroupFilterModalOpen(false); if (playlistCreated) { - formik.resetForm(); + form.reset(); setFile(null); onClose(); } }; - useEffect(() => { - if (playlist) { - formik.setValues({ - name: playlist.name, - server_url: playlist.server_url, - max_streams: playlist.max_streams, - user_agent: playlist.user_agent, - is_active: playlist.is_active, - refresh_interval: playlist.refresh_interval, - }); - } else { - formik.resetForm(); - } - }, [playlist]); - useEffect(() => { if (playlistCreated) { setGroupFilterModalOpen(true); @@ -126,12 +131,12 @@ const M3U = ({ playlist = null, isOpen, onClose, playlistCreated = false }) => { return ( -
+ { id="name" name="name" label="Name" - value={formik.values.name} - onChange={formik.handleChange} - error={formik.touched.name && Boolean(formik.errors.name)} - helperText={formik.touched.name && formik.errors.name} + {...form.getInputProps('name')} + key={form.key('name')} /> { id="server_url" name="server_url" label="URL" - value={formik.values.server_url} - onChange={formik.handleChange} - error={ - formik.touched.server_url && Boolean(formik.errors.server_url) - } - helperText={formik.touched.server_url && formik.errors.server_url} + {...form.getInputProps('server_url')} + key={form.key('server_url')} /> @@ -176,22 +175,16 @@ const M3U = ({ playlist = null, isOpen, onClose, playlistCreated = false }) => { name="max_streams" label="Max Streams" placeholder="0 = Unlimited" - value={formik.values.max_streams} - onChange={formik.handleChange} - error={ - formik.errors.max_streams ? formik.touched.max_streams : '' - } + {...form.getInputProps('max_streams')} + key={form.key('max_streams')} />