feat: add upload audio modal

src/components/DiscRow.tsx

@@ -8,6 +8,7 @@ import { setDescription, setTitle } from "../store/discs"
 import { useState } from "react"
 
 import "./DiscRow.css"
+import UploadAudioModal from "./UploadAudioModal"
 
 interface DiscRowProps {
 	discId: number
@@ -18,6 +19,7 @@ function DiscRow({ discId }: DiscRowProps) {
 	const disc = discs.discs[discId]
 
 	const [showEditName, setShowEditName] = useState(false);
+	const [showUploadAudio, setShowUploadAudio] = useState(false);
 
 	const dispatch = useAppDispatch()
 	function onReset() {
@@ -33,7 +35,7 @@ function DiscRow({ discId }: DiscRowProps) {
 			<button data-tip="Edit name" onClick={() => setShowEditName(true)}>
 				<FontAwesomeIcon icon={solid("pen")} />
 			</button>
-			<button data-tip="Upload new audio">
+			<button data-tip="Upload new audio" onClick={() => setShowUploadAudio(true)}>
 				<FontAwesomeIcon icon={solid("file-audio")} />
 			</button>
 			<div className="disc-preview">
@@ -49,6 +51,11 @@ function DiscRow({ discId }: DiscRowProps) {
 				onClose={() => setShowEditName(false)}
 				discId={discId}
 			/>
+			<UploadAudioModal
+				show={showUploadAudio}
+				onClose={() => setShowUploadAudio(false)}
+				discId={discId}
+			/>
 		</div>
 	)
 }

src/components/UploadAudioModal.css

@@ -0,0 +1,6 @@
+.checkbox-group {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-top: 1rem;
+}

src/components/UploadAudioModal.tsx

@@ -0,0 +1,47 @@
+import { selectDiscs, useAppDispatch, useAppSelector } from "../store"
+import { setAudioUrl } from "../store/discs"
+import { useState } from "react"
+import Modal from "./Modal"
+import "./UploadAudioModal.css"
+
+interface UploadAudioModalProps {
+	discId: number
+	show: boolean
+	onClose: { (): void }
+}
+
+function UploadAudioModal({ discId, show, onClose }: UploadAudioModalProps) {
+	const discs = useAppSelector(selectDiscs)
+	const disc = discs.discs[discId]
+
+	const [url, setUrl] = useState("");
+	const [updateDescription, setUpdateDescription] = useState(true);
+
+	const dispatch = useAppDispatch()
+	async function onModalClose() {
+		onClose()
+		dispatch(setAudioUrl({
+			id: discId,
+			audioUrl: url
+		}))
+	}
+
+	return <Modal show={show} onClose={onModalClose}>
+		<label>Youtube URL:</label>
+		<input
+			onChange={(e) => setUrl(e.target.value)}
+			type="text"
+			value={url}
+		/>
+		<div className="checkbox-group">
+			<label>Update disc description:</label>
+			<input
+				onChange={(e) => setUpdateDescription(e.target.checked)}
+				type="checkbox"
+				checked={updateDescription}
+			/>
+		</div>
+	</Modal>
+}
+
+export default UploadAudioModal

src/store/discs.ts

@@ -3,6 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 export interface Disc {
 	title?: string
 	description?: string
+	audioUrl?: string
 	defaultTitle: string
 	defaultDescription: string
 	icon: string
@@ -86,10 +87,14 @@ export const discsSlice = createSlice({
 		setDescription: (state, action: PayloadAction<{ id: number, description: string }>) => {
 			const { id, description } = action.payload;
 			state.discs[id].description = description
+		},
+		setAudioUrl: (state, action: PayloadAction<{ id: number, audioUrl: string }>) => {
+			const { id, audioUrl } = action.payload;
+			state.discs[id].audioUrl = audioUrl
 		}
   }
 })
 
-export const { setTitle, setDescription } = discsSlice.actions
+export const { setTitle, setDescription, setAudioUrl } = discsSlice.actions
 
 export default discsSlice.reducer