feat: frontend validation
fix
This commit is contained in:
@ -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);
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user