feat: frontend validation

fix
This commit is contained in:
2025-07-02 12:08:56 +01:00
parent 357927e2a0
commit 5cf0b66688

View File

@ -1,236 +1,250 @@
import { fetch } from "@tauri-apps/plugin-http"; import { fetch } from "@tauri-apps/plugin-http";
import { import {
type InferOutput, type InferOutput,
array, array,
literal, literal,
null_, null_,
nullable, nullable,
parse, parse,
pipe, pipe,
strictObject, strictObject,
string, string,
uuid, union,
variant, uuid,
variant,
} from "valibot"; } from "valibot";
type BaseRequestParams = Partial<{ type BaseRequestParams = Partial<{
path: string; path: string;
body: RequestInit["body"]; body: RequestInit["body"];
method: "GET" | "POST"; method: "GET" | "POST";
}>; }>;
// export const base = "https://haystack.johncosta.tech"; // export const base = "https://haystack.johncosta.tech";
export const base = "http://192.168.1.199:3040"; export const base = "http://192.168.1.199:3040";
const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => { const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => {
return new Request(`${base}/${path}`, { return new Request(`${base}/${path}`, {
body, body,
method, method,
}); });
}; };
const getBaseAuthorizedRequest = ({ const getBaseAuthorizedRequest = ({
path, path,
body, body,
method, method,
}: BaseRequestParams): Request => { }: BaseRequestParams): Request => {
return new Request(`${base}/${path}`, { return new Request(`${base}/${path}`, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("access")?.toString()}`, Authorization: `Bearer ${localStorage.getItem("access")?.toString()}`,
}, },
body, body,
method, method,
}); });
}; };
const sendImageResponseValidator = strictObject({ const sendImageResponseValidator = strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
ImageID: pipe(string(), uuid()), ImageID: pipe(string(), uuid()),
UserID: pipe(string(), uuid()), UserID: pipe(string(), uuid()),
Status: string(), Status: string(),
}); });
export const sendImageFile = async ( export const sendImageFile = async (
imageName: string, imageName: string,
file: File, file: File,
): Promise<InferOutput<typeof sendImageResponseValidator>> => { ): Promise<InferOutput<typeof sendImageResponseValidator>> => {
const request = getBaseAuthorizedRequest({ const request = getBaseAuthorizedRequest({
path: `image/${imageName}`, path: `image/${imageName}`,
body: file, body: file,
method: "POST", method: "POST",
}); });
request.headers.set("Content-Type", "application/oclet-stream"); request.headers.set("Content-Type", "application/oclet-stream");
const res = await fetch(request).then((res) => res.json()); const res = await fetch(request).then((res) => res.json());
return parse(sendImageResponseValidator, res); return parse(sendImageResponseValidator, res);
}; };
export const sendImage = async ( export const sendImage = async (
imageName: string, imageName: string,
base64Image: string, base64Image: string,
): Promise<InferOutput<typeof sendImageResponseValidator>> => { ): Promise<InferOutput<typeof sendImageResponseValidator>> => {
const request = getBaseAuthorizedRequest({ const request = getBaseAuthorizedRequest({
path: `image/${imageName}`, path: `image/${imageName}`,
body: base64Image, body: base64Image,
method: "POST", method: "POST",
}); });
request.headers.set("Content-Type", "application/base64"); request.headers.set("Content-Type", "application/base64");
const res = await fetch(request).then((res) => res.json()); const res = await fetch(request).then((res) => res.json());
return parse(sendImageResponseValidator, res); return parse(sendImageResponseValidator, res);
}; };
const locationValidator = strictObject({ const locationValidator = strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
CreatedAt: pipe(string()), CreatedAt: pipe(string()),
Name: string(), Name: string(),
Address: nullable(string()), Address: nullable(string()),
Description: nullable(string()), Description: nullable(string()),
Images: array(pipe(string(), uuid())), Images: array(pipe(string(), uuid())),
}); });
const contactValidator = strictObject({ const contactValidator = strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
CreatedAt: pipe(string()), CreatedAt: pipe(string()),
Name: string(), Name: string(),
Description: nullable(string()), Description: nullable(string()),
PhoneNumber: nullable(string()), PhoneNumber: nullable(string()),
Email: nullable(string()), Email: nullable(string()),
Images: array(pipe(string(), uuid())), Images: array(pipe(string(), uuid())),
}); });
const eventValidator = strictObject({ const eventValidator = strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
CreatedAt: nullable(pipe(string())), CreatedAt: nullable(pipe(string())),
Name: string(), Name: string(),
StartDateTime: nullable(pipe(string())), StartDateTime: nullable(pipe(string())),
EndDateTime: nullable(pipe(string())), EndDateTime: nullable(pipe(string())),
Description: nullable(string()), Description: nullable(string()),
LocationID: nullable(pipe(string(), uuid())), LocationID: nullable(pipe(string(), uuid())),
// Location: nullable(locationValidator), // Location: nullable(locationValidator),
OrganizerID: nullable(pipe(string(), uuid())), OrganizerID: nullable(pipe(string(), uuid())),
// Organizer: nullable(contactValidator), // Organizer: nullable(contactValidator),
Images: array(pipe(string(), uuid())), Images: array(pipe(string(), uuid())),
}); });
const noteValidator = strictObject({ const noteValidator = strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
CreatedAt: pipe(string()), CreatedAt: pipe(string()),
Name: string(), Name: string(),
Description: nullable(string()), Description: nullable(string()),
Content: string(), Content: string(),
Images: array(pipe(string(), uuid())), Images: array(pipe(string(), uuid())),
}); });
const locationDataType = strictObject({ const locationDataType = strictObject({
type: literal("location"), type: literal("location"),
data: locationValidator, data: locationValidator,
}); });
const eventDataType = strictObject({ const eventDataType = strictObject({
type: literal("event"), type: literal("event"),
data: eventValidator, data: eventValidator,
}); });
const noteDataType = strictObject({ const noteDataType = strictObject({
type: literal("note"), type: literal("note"),
data: noteValidator, data: noteValidator,
}); });
const contactDataType = strictObject({ const contactDataType = strictObject({
type: literal("contact"), type: literal("contact"),
data: contactValidator, data: contactValidator,
}); });
const dataTypeValidator = variant("type", [ const dataTypeValidator = variant("type", [
locationDataType, locationDataType,
eventDataType, eventDataType,
noteDataType, noteDataType,
contactDataType, contactDataType,
]); ]);
const userImageValidator = strictObject({ const userImageValidator = strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
CreatedAt: pipe(string()), CreatedAt: pipe(string()),
ImageID: pipe(string(), uuid()), ImageID: pipe(string(), uuid()),
UserID: pipe(string(), uuid()), UserID: pipe(string(), uuid()),
Image: strictObject({ Image: strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
ImageName: string(), ImageName: string(),
Image: null_(), Image: null_(),
}), }),
});
const userProcessingImageValidator = strictObject({
ID: pipe(string(), uuid()),
ImageID: pipe(string(), uuid()),
UserID: pipe(string(), uuid()),
Image: strictObject({
ID: pipe(string(), uuid()),
ImageName: string(),
Image: null_(),
}),
Status: union([literal("not-started"), literal("in-progress")]),
}); });
export type UserImage = InferOutput<typeof dataTypeValidator>; export type UserImage = InferOutput<typeof dataTypeValidator>;
const imageRequestValidator = strictObject({ const imageRequestValidator = strictObject({
UserImages: array(userImageValidator), UserImages: array(userImageValidator),
ImageProperties: array(dataTypeValidator), ImageProperties: array(dataTypeValidator),
ProcessingImages: array(userProcessingImageValidator),
}); });
export const getUserImages = async (): Promise< export const getUserImages = async (): Promise<
InferOutput<typeof imageRequestValidator> InferOutput<typeof imageRequestValidator>
> => { > => {
const request = getBaseAuthorizedRequest({ path: "image" }); const request = getBaseAuthorizedRequest({ path: "image" });
const res = await fetch(request).then((res) => res.json()); const res = await fetch(request).then((res) => res.json());
console.log("BACKEND RESPONSE: ", res); console.log("BACKEND RESPONSE: ", res);
return parse(imageRequestValidator, res); return parse(imageRequestValidator, res);
}; };
export const getImage = async (imageId: string): Promise<UserImage> => { export const getImage = async (imageId: string): Promise<UserImage> => {
const request = getBaseAuthorizedRequest({ const request = getBaseAuthorizedRequest({
path: `image-properties/${imageId}`, path: `image-properties/${imageId}`,
}); });
const res = await fetch(request).then((res) => res.json()); const res = await fetch(request).then((res) => res.json());
return parse(dataTypeValidator, res); return parse(dataTypeValidator, res);
}; };
export const postLogin = async (email: string): Promise<void> => { export const postLogin = async (email: string): Promise<void> => {
const request = getBaseRequest({ const request = getBaseRequest({
path: "login", path: "login",
body: JSON.stringify({ email }), body: JSON.stringify({ email }),
method: "POST", method: "POST",
}); });
await fetch(request); await fetch(request);
}; };
export const postDemoLogin = async (): Promise< export const postDemoLogin = async (): Promise<
InferOutput<typeof codeValidator> InferOutput<typeof codeValidator>
> => { > => {
const request = getBaseRequest({ const request = getBaseRequest({
path: "demo-login", path: "demo-login",
}); });
const res = await fetch(request).then((res) => res.json()); const res = await fetch(request).then((res) => res.json());
return parse(codeValidator, res); return parse(codeValidator, res);
}; };
const codeValidator = strictObject({ const codeValidator = strictObject({
access: string(), access: string(),
refresh: string(), refresh: string(),
}); });
export const postCode = async ( export const postCode = async (
email: string, email: string,
code: string, code: string,
): Promise<InferOutput<typeof codeValidator>> => { ): Promise<InferOutput<typeof codeValidator>> => {
const request = getBaseRequest({ const request = getBaseRequest({
path: "code", path: "code",
body: JSON.stringify({ email, code }), body: JSON.stringify({ email, code }),
method: "POST", method: "POST",
}); });
const res = await fetch(request).then((res) => res.json()); const res = await fetch(request).then((res) => res.json());
return parse(codeValidator, res); return parse(codeValidator, res);
}; };