-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bccb965
commit 2dae22a
Showing
6 changed files
with
241 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| import styles from "./trackEditor.module.css"; | ||
| import pages from "@/helpers/navigation"; | ||
| import FormInputField from "./formInputField"; | ||
| import { useState, useCallback } from "react"; | ||
| import { apiCreateTrack, apiUpdateTrack } from "@/helpers/apiTracks"; | ||
|
|
||
| const TrackEditor = ({ track, album, artist, navigate, logout }) => { | ||
| // Split the track's formatted duration on the ":" | ||
| let initialMinutes = null; | ||
| let initialSeconds = null; | ||
| if (track.formattedDuration != null) { | ||
| const elements = track.formattedDuration.split(":"); | ||
| if (elements.length > 0) { | ||
| initialMinutes = elements[0]; | ||
| initialSeconds = elements[1]; | ||
| } | ||
| } | ||
|
|
||
| const [title, setTitle] = useState(track.title); | ||
| const [number, setNumber] = useState(track.number); | ||
| const [minutes, setMinutes] = useState(initialMinutes); | ||
| const [seconds, setSeconds] = useState(initialSeconds); | ||
| const [error, setError] = useState(""); | ||
|
|
||
| /* Callback to save retailer details */ | ||
| const saveTrack = useCallback( | ||
| async (e) => { | ||
| // Prevent the default action associated with the click event | ||
| e.preventDefault(); | ||
|
|
||
| // Clear pre-existing errors | ||
| setError(""); | ||
|
|
||
| try { | ||
| // Calculate the duration from the indiviidual minutes and seconds | ||
| // inputs | ||
| const durationMinutes = Number(minutes); | ||
| const durationSeconds = Number(seconds); | ||
| const duration = 1000 * (60 * durationMinutes + durationSeconds); | ||
|
|
||
| // Either add or update the track, depending on whether they currently | ||
| // have an ID | ||
| let updatedTrack = null; | ||
| if (track.id <= 0) { | ||
| // Invalid ID, so create a new track | ||
| updatedTrack = await apiCreateTrack( | ||
| title, | ||
| number, | ||
| duration, | ||
| album.id, | ||
| logout | ||
| ); | ||
| } else { | ||
| // Has a valid ID, so update an existing track | ||
| updatedTrack = await apiUpdateTrack( | ||
| track.id, | ||
| title, | ||
| number, | ||
| duration, | ||
| album.id, | ||
| logout | ||
| ); | ||
| } | ||
|
|
||
| // If all's well, navigate back to the track list page. Otherwise, show an error | ||
| if (updatedTrack == null) { | ||
| const action = track.Id <= 0 ? "adding" : "updating"; | ||
| setError(`An error occurred ${action} the track`); | ||
| } else { | ||
| navigate({ | ||
| page: pages.tracks, | ||
| artist: artist, | ||
| album: album, | ||
| }); | ||
| } | ||
| } catch (e) { | ||
| setError( | ||
| e.message | ||
| //"Error converting the supplied minutes and seconds to a duration" | ||
| ); | ||
| } | ||
| }, | ||
| [album, artist, track, title, number, minutes, seconds, navigate, logout] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="row mb-2 pageTitle"> | ||
| <h5 className="themeFontColor text-center">{title}</h5> | ||
| </div> | ||
| <div className={styles.trackEditorFormContainer}> | ||
| <form className={styles.trackEditorForm}> | ||
| <div className="row"> | ||
| {error != "" ? ( | ||
| <div className={styles.trackEditorError}>{error}</div> | ||
| ) : ( | ||
| <></> | ||
| )} | ||
| </div> | ||
| <div className="row align-items-start"> | ||
| <div className="col"> | ||
| <FormInputField | ||
| label="Title" | ||
| name="title" | ||
| value={title} | ||
| setValue={setTitle} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="row align-items-start"> | ||
| <div className="col"> | ||
| <FormInputField | ||
| label="Number" | ||
| name="number" | ||
| value={number} | ||
| setValue={setNumber} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="row align-items-start"> | ||
| <div className="col"> | ||
| <FormInputField | ||
| label="Minutes" | ||
| name="minutes" | ||
| value={minutes} | ||
| setValue={setMinutes} | ||
| /> | ||
| </div> | ||
| <div className="col"> | ||
| <FormInputField | ||
| label="Seconds" | ||
| name="seconds" | ||
| value={seconds} | ||
| setValue={setSeconds} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="d-grid gap-2 mt-3"></div> | ||
| <div className="d-grid gap-2 mt-3"></div> | ||
| <div className={styles.trackEditorButton}> | ||
| <button className="btn btn-primary" onClick={(e) => saveTrack(e)}> | ||
| Save | ||
| </button> | ||
| </div> | ||
| <div className={styles.trackEditorButton}> | ||
| <button | ||
| className="btn btn-primary" | ||
| onClick={() => | ||
| navigate({ | ||
| page: pages.tracks, | ||
| artist: artist, | ||
| album: album, | ||
| }) | ||
| } | ||
| > | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default TrackEditor; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| .trackEditorFormContainer { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .trackEditorForm { | ||
| width: 80%; | ||
| padding-top: 20px; | ||
| padding-bottom: 20px; | ||
| } | ||
|
|
||
| .trackEditorButton { | ||
| margin-left: 10px; | ||
| float: right; | ||
| } | ||
|
|
||
| .trackEditorError { | ||
| font-weight: bold; | ||
| color: red; | ||
| } | ||
|
|
||
| .trackEditorGeocode { | ||
| margin-left: 10px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters