diff --git a/frontend/src/pages/TrackEditor.tsx b/frontend/src/pages/TrackEditor.tsx index 699bc1a..393ec39 100644 --- a/frontend/src/pages/TrackEditor.tsx +++ b/frontend/src/pages/TrackEditor.tsx @@ -1,6 +1,6 @@ -import React from 'react' -import _ from 'lodash' -import {connect} from 'react-redux' +import React from "react"; +import _ from "lodash"; +import { connect } from "react-redux"; import { Divider, Message, @@ -14,189 +14,201 @@ import { TextArea, Checkbox, Header, -} from 'semantic-ui-react' -import {useHistory, useParams, Link} from 'react-router-dom' -import {concat, of, from} from 'rxjs' -import {pluck, distinctUntilChanged, map, switchMap} from 'rxjs/operators' -import {useObservable} from 'rxjs-hooks' -import {findInput} from 'utils' -import {useForm, Controller} from 'react-hook-form' +} from "semantic-ui-react"; +import { useHistory, useParams, Link } from "react-router-dom"; +import { concat, of, from } from "rxjs"; +import { pluck, distinctUntilChanged, map, switchMap } from "rxjs/operators"; +import { useObservable } from "rxjs-hooks"; +import { findInput } from "utils"; +import { useForm, Controller } from "react-hook-form"; +import { useTranslation, Trans as Translate } from "react-i18next"; +import Markdown from "react-markdown"; -import api from 'api' -import {Page, FileUploadField} from 'components' -import type {Track} from 'types' +import api from "api"; +import { Page, FileUploadField } from "components"; +import type { Track } from "types"; -import {FileUploadStatus} from 'pages/UploadPage' +import { FileUploadStatus } from "pages/UploadPage"; -function ReplaceTrackData({slug}) { - const [file, setFile] = React.useState(null) - const [result, setResult] = React.useState(null) - const onComplete = React.useCallback((_id, r) => setResult(r), [setResult]) +function ReplaceTrackData({ slug }) { + const { t } = useTranslation(); + const [file, setFile] = React.useState(null); + const [result, setResult] = React.useState(null); + const onComplete = React.useCallback((_id, r) => setResult(r), [setResult]); return ( <> -
Replace track data
+
{t("TrackEditor.replaceTrackData")}
{!file ? ( ) : result ? ( - Upload complete. Show track + + Upload complete. Show track + ) : ( - + )} - ) + ); } -const TrackEditor = connect((state) => ({login: state.login}))(function TrackEditor({login}) { - const [busy, setBusy] = React.useState(false) - const {register, control, handleSubmit} = useForm() - const {slug} = useParams() - const history = useHistory() +const TrackEditor = connect((state) => ({ login: state.login }))( + function TrackEditor({ login }) { + const { t } = useTranslation(); + const [busy, setBusy] = React.useState(false); + const { register, control, handleSubmit } = useForm(); + const { slug } = useParams(); + const history = useHistory(); - const track: null | Track = useObservable( - (_$, args$) => { - const slug$ = args$.pipe(pluck(0), distinctUntilChanged()) - return slug$.pipe( - map((slug) => `/tracks/${slug}`), - switchMap((url) => concat(of(null), from(api.get(url)))), - pluck('track') - ) - }, - null, - [slug] - ) + const track: null | Track = useObservable( + (_$, args$) => { + const slug$ = args$.pipe(pluck(0), distinctUntilChanged()); + return slug$.pipe( + map((slug) => `/tracks/${slug}`), + switchMap((url) => concat(of(null), from(api.get(url)))), + pluck("track") + ); + }, + null, + [slug] + ); - const loading = busy || track == null - const isAuthor = login?.username === track?.author?.username + const loading = busy || track == null; + const isAuthor = login?.username === track?.author?.username; - // Navigate to track detials if we are not the author - React.useEffect(() => { - if (!login || (track && !isAuthor)) { - history.replace(`/tracks/${slug}`) - } - }, [slug, login, track, isAuthor, history]) + // Navigate to track detials if we are not the author + React.useEffect(() => { + if (!login || (track && !isAuthor)) { + history.replace(`/tracks/${slug}`); + } + }, [slug, login, track, isAuthor, history]); - const onSubmit = React.useMemo( - () => - handleSubmit(async (values) => { - setBusy(true) + const onSubmit = React.useMemo( + () => + handleSubmit(async (values) => { + setBusy(true); - try { - await api.put(`/tracks/${slug}`, {body: {track: _.pickBy(values, (v) => typeof v !== 'undefined')}}) - history.push(`/tracks/${slug}`) - } finally { - setBusy(false) - } - }), - [slug, handleSubmit, history] - ) + try { + await api.put(`/tracks/${slug}`, { + body: { + track: _.pickBy(values, (v) => typeof v !== "undefined"), + }, + }); + history.push(`/tracks/${slug}`); + } finally { + setBusy(false); + } + }), + [slug, handleSubmit, history] + ); - const [confirmDelete, setConfirmDelete] = React.useState(false) - const onDelete = React.useCallback(async () => { - setBusy(true) + const [confirmDelete, setConfirmDelete] = React.useState(false); + const onDelete = React.useCallback(async () => { + setBusy(true); - try { - await api.delete(`/tracks/${slug}`) - history.push('/tracks') - } finally { - setConfirmDelete(false) - setBusy(false) - } - }, [setBusy, setConfirmDelete, slug, history]) + try { + await api.delete(`/tracks/${slug}`); + history.push("/tracks"); + } finally { + setConfirmDelete(false); + setBusy(false); + } + }, [setBusy, setConfirmDelete, slug, history]); - const title = `Edit ${track ? track.title || 'Unnamed track' : 'track'}` - return ( - - - - -
{title}
-
- - - + const trackTitle: string = track?.title || t("general.unnamedTrack"); + const title = t("TrackEditor.title", { trackTitle }); - - - -