From 6ae23e284fec0974b45d97600fd339f144594206 Mon Sep 17 00:00:00 2001 From: Salomo309 <109785084+Salomo309@users.noreply.github.com> Date: Fri, 17 Nov 2023 13:28:28 +0700 Subject: [PATCH] refactor: add zod validation --- src/pages/AddAlbumPage.tsx | 11 +++++++++++ src/pages/AddSongPage.tsx | 11 +++++++++++ src/pages/EditAlbumPage.tsx | 10 ++++++++++ src/pages/EditSongPage.tsx | 11 +++++++++++ 4 files changed, 43 insertions(+) diff --git a/src/pages/AddAlbumPage.tsx b/src/pages/AddAlbumPage.tsx index a44c8c0..2fa1d3c 100644 --- a/src/pages/AddAlbumPage.tsx +++ b/src/pages/AddAlbumPage.tsx @@ -1,5 +1,13 @@ import {useState} from "react"; import axios from "axios"; +import { date, object, string, z } from "zod"; + +const albumSchema = object({ + albumName: string().min(1, "Album Name cannot be empty"), + releaseDate: date(), + genre: string().min(1, "Genre cannot be empty"), + artist: string().min(1, "Artist cannot be empty"), +}); export default function AddAlbum() { const [albumName, setAlbumName] = useState(""); @@ -21,6 +29,9 @@ export default function AddAlbum() { formData.append("coverFile", coverFile); } + // Validate + albumSchema.parse({ albumName, releaseDate, genre, artist }); + await axios.post("http://localhost:3000/api/premium-album", formData, { headers: { "Content-Type": "multipart/form-data", diff --git a/src/pages/AddSongPage.tsx b/src/pages/AddSongPage.tsx index 3c5d202..bb3f976 100644 --- a/src/pages/AddSongPage.tsx +++ b/src/pages/AddSongPage.tsx @@ -1,6 +1,15 @@ import axios from "axios"; import { useState } from "react"; import { useParams } from "react-router"; +import { number, object, string, z } from "zod"; + +const songSchema = object({ + title: string().min(1, "Title cannot be empty"), + artist: string().min(1, "Artist cannot be empty"), + songNumber: number().int("Song Number must be an integer").min(1, "Song Number must be greater than or equal to 1"), + discNumber: number().int("Disc Number must be an integer").min(1, "Disc Number must be greater than or equal to 1"), + duration: number().int("Duration must be an integer").min(1, "Duration must be greater than or equal to 1"), +}); const AddSong = () => { const { albumId }= useParams(); @@ -25,6 +34,8 @@ const AddSong = () => { formData.append("audioFile", audioFile); } + songSchema.parse({ title, artist, songNumber, discNumber, duration }); + await axios.post(`http://localhost:3000/api/premium-album/${albumId}`, formData, { headers: { "Content-Type": "multipart/form-data", diff --git a/src/pages/EditAlbumPage.tsx b/src/pages/EditAlbumPage.tsx index 58b5871..76b8f6d 100644 --- a/src/pages/EditAlbumPage.tsx +++ b/src/pages/EditAlbumPage.tsx @@ -1,6 +1,15 @@ import axios from 'axios'; import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; +import { date, object, string, z } from 'zod'; + +const albumSchema = object({ + albumName: string().min(1, "Album Name cannot be empty"), + releaseDate: date(), + genre: string().min(1, "Genre cannot be empty"), + artist: string().min(1, "Artist cannot be empty"), + coverFile: string().nullable(), +}); export default function EditAlbum() { const { albumId } = useParams(); @@ -29,6 +38,7 @@ export default function EditAlbum() { const handleEditAlbum = async () => { try { + albumSchema.parse(albumData); await axios.patch( `http://localhost:3000/api/premium-album/${albumId}`, albumData diff --git a/src/pages/EditSongPage.tsx b/src/pages/EditSongPage.tsx index 0eb0172..80d5f99 100644 --- a/src/pages/EditSongPage.tsx +++ b/src/pages/EditSongPage.tsx @@ -1,6 +1,16 @@ import axios from "axios"; import { useState } from "react"; import { useParams } from "react-router-dom"; +import { number, object, string, z } from "zod"; + +const songSchema = object({ + title: string().min(1, "Title cannot be empty"), + artist: string().min(1, "Artist cannot be empty"), + songNumber: number().int("Song Number must be an integer").min(1, "Song Number must be greater than or equal to 1"), + discNumber: number().int("Disc Number must be an integer").min(1, "Disc Number must be greater than or equal to 1"), + duration: number().int("Duration must be an integer").min(1, "Duration must be greater than or equal to 1"), + audioFile: string().nullable(), +}); const EditSong = () => { const { albumId, songId } = useParams(); @@ -15,6 +25,7 @@ const EditSong = () => { const handleEditSong = async () => { try { + songSchema.parse(songsData); await axios.patch( `/api/premium-album/${albumId}/${songId}`, songsData -- GitLab