Skip to content
Snippets Groups Projects
Unverified Commit 91719a53 authored by Salomo309's avatar Salomo309 Committed by GitHub
Browse files

Merge pull request #7 from noelsimbolon/feat/form-zod

refactor: add zod validation
parents 84e82d24 6ae23e28
1 merge request!1Dev
import {useState} from "react"; import {useState} from "react";
import axios from "axios"; 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() { export default function AddAlbum() {
const [albumName, setAlbumName] = useState(""); const [albumName, setAlbumName] = useState("");
...@@ -21,6 +29,9 @@ export default function AddAlbum() { ...@@ -21,6 +29,9 @@ export default function AddAlbum() {
formData.append("coverFile", coverFile); formData.append("coverFile", coverFile);
} }
// Validate
albumSchema.parse({ albumName, releaseDate, genre, artist });
await axios.post("http://localhost:3000/api/premium-album", formData, { await axios.post("http://localhost:3000/api/premium-album", formData, {
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
......
import axios from "axios"; import axios from "axios";
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router"; 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 AddSong = () => {
const { albumId }= useParams(); const { albumId }= useParams();
...@@ -25,6 +34,8 @@ const AddSong = () => { ...@@ -25,6 +34,8 @@ const AddSong = () => {
formData.append("audioFile", audioFile); formData.append("audioFile", audioFile);
} }
songSchema.parse({ title, artist, songNumber, discNumber, duration });
await axios.post(`http://localhost:3000/api/premium-album/${albumId}`, formData, { await axios.post(`http://localhost:3000/api/premium-album/${albumId}`, formData, {
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
......
import axios from 'axios'; import axios from 'axios';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; 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() { export default function EditAlbum() {
const { albumId } = useParams(); const { albumId } = useParams();
...@@ -29,6 +38,7 @@ export default function EditAlbum() { ...@@ -29,6 +38,7 @@ export default function EditAlbum() {
const handleEditAlbum = async () => { const handleEditAlbum = async () => {
try { try {
albumSchema.parse(albumData);
await axios.patch( await axios.patch(
`http://localhost:3000/api/premium-album/${albumId}`, `http://localhost:3000/api/premium-album/${albumId}`,
albumData albumData
......
import axios from "axios"; import axios from "axios";
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; 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 EditSong = () => {
const { albumId, songId } = useParams(); const { albumId, songId } = useParams();
...@@ -15,6 +25,7 @@ const EditSong = () => { ...@@ -15,6 +25,7 @@ const EditSong = () => {
const handleEditSong = async () => { const handleEditSong = async () => {
try { try {
songSchema.parse(songsData);
await axios.patch( await axios.patch(
`/api/premium-album/${albumId}/${songId}`, `/api/premium-album/${albumId}/${songId}`,
songsData songsData
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment