useTypedQuery
This commit is contained in:
parent
25df421200
commit
0f49a62e84
|
@ -8,7 +8,7 @@ import { useFilterQuery } from "../lib/useFilterQuery";
|
||||||
|
|
||||||
export const TeamsMemberFilter = () => {
|
export const TeamsMemberFilter = () => {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
const { data: query, pop, push, clear } = useFilterQuery();
|
const { data: query, removeByKey, pushItemToKey } = useFilterQuery();
|
||||||
const { data } = trpc.viewer.teams.list.useQuery();
|
const { data } = trpc.viewer.teams.list.useQuery();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -28,7 +28,8 @@ export const TeamsMemberFilter = () => {
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={!query.teamIds}
|
checked={!query.teamIds}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
clear("teamIds"); // Always clear on toggle or not toggle (seems weird but when you know the behviour it works well )
|
removeByKey("teamIds");
|
||||||
|
// clear("teamIds"); // Always clear on toggle or not toggle (seems weird but when you know the behviour it works well )
|
||||||
}}
|
}}
|
||||||
className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
|
className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
|
||||||
/>
|
/>
|
||||||
|
@ -57,7 +58,7 @@ export const TeamsMemberFilter = () => {
|
||||||
checked={query.teamIds?.includes(team.id)}
|
checked={query.teamIds?.includes(team.id)}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
push("teamIds", team.id);
|
pushItemToKey("teamIds", team.id);
|
||||||
} else if (!e.target.checked) {
|
} else if (!e.target.checked) {
|
||||||
pop("teamIds", team.id);
|
pop("teamIds", team.id);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import z from "zod";
|
import z from "zod";
|
||||||
|
|
||||||
|
import { useTypedQuery } from "./useTypedQuery";
|
||||||
|
|
||||||
// Take string and return number
|
// Take string and return number
|
||||||
export const queryNumberSchema = z.preprocess(
|
export const queryNumberSchema = z.preprocess(
|
||||||
(a) => parseInt(z.string().parse(a), 10),
|
(a) => parseInt(z.string().parse(a), 10),
|
||||||
|
@ -19,13 +21,6 @@ export const queryNumberArray = z.preprocess(
|
||||||
// Take string and return return zod string array - comma separated
|
// Take string and return return zod string array - comma separated
|
||||||
export const queryStringArray = z.preprocess((a) => z.string().parse(a).split(","), z.string().array());
|
export const queryStringArray = z.preprocess((a) => z.string().parse(a).split(","), z.string().array());
|
||||||
|
|
||||||
const filterSingleSchema = z.object({
|
|
||||||
teamIds: z.number().positive().optional(),
|
|
||||||
userIds: z.number().positive().optional(),
|
|
||||||
status: z.enum(["upcoming", "recurring", "past", "cancelled", "unconfirmed"]),
|
|
||||||
eventTypeIds: z.number().positive().optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const filterQuerySchema = z.object({
|
export const filterQuerySchema = z.object({
|
||||||
teamIds: queryNumberArray.optional(),
|
teamIds: queryNumberArray.optional(),
|
||||||
userIds: queryNumberArray.optional(),
|
userIds: queryNumberArray.optional(),
|
||||||
|
@ -38,92 +33,5 @@ type Keys = keyof FilterQuerySchema;
|
||||||
type KeysWithoutStatus = Exclude<Keys, "status">;
|
type KeysWithoutStatus = Exclude<Keys, "status">;
|
||||||
|
|
||||||
export function useFilterQuery() {
|
export function useFilterQuery() {
|
||||||
const router = useRouter();
|
return useTypedQuery(filterQuerySchema);
|
||||||
const data = filterQuerySchema.parse(router.query);
|
|
||||||
|
|
||||||
const push = (key: KeysWithoutStatus, item: string | number) => {
|
|
||||||
const newData = data;
|
|
||||||
const search = new URLSearchParams();
|
|
||||||
const keyData = data[key] ?? [];
|
|
||||||
// parse item to make sure it fits the schema and then add it to the array
|
|
||||||
const itemParsed = filterSingleSchema.shape[key].parse(item);
|
|
||||||
if (!itemParsed) return;
|
|
||||||
|
|
||||||
const itemWithArray = [...keyData, itemParsed] as number[];
|
|
||||||
|
|
||||||
newData[key] = itemWithArray;
|
|
||||||
|
|
||||||
Object.entries(newData).forEach(([key, value]) => {
|
|
||||||
if (value) {
|
|
||||||
search.append(key, value.toString());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(newData);
|
|
||||||
router.replace({ query: search.toString() }, undefined, { shallow: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
const pop = (key: KeysWithoutStatus, item: string | number) => {
|
|
||||||
// Pop item from array
|
|
||||||
const newData = data;
|
|
||||||
const search = new URLSearchParams();
|
|
||||||
const keyData = (data[key] as string[] & number[]) ?? [];
|
|
||||||
const itemParsed = filterSingleSchema.shape[key].parse(item);
|
|
||||||
if (!itemParsed) return;
|
|
||||||
|
|
||||||
const itemWithArray = keyData.filter((a: string | number) => a !== itemParsed) as string[] & number[];
|
|
||||||
|
|
||||||
newData[key] = itemWithArray;
|
|
||||||
|
|
||||||
Object.entries(newData).forEach(([key, value]) => {
|
|
||||||
if (value.length > 0) {
|
|
||||||
search.append(key, value.toString());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
router.replace({ query: search.toString() }, undefined, { shallow: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
const set = (key: KeysWithoutStatus, item: string | number) => {
|
|
||||||
// Set item to array
|
|
||||||
const newData = data;
|
|
||||||
const search = new URLSearchParams();
|
|
||||||
const itemParsed = filterSingleSchema.shape[key].parse(item);
|
|
||||||
if (!itemParsed) return;
|
|
||||||
|
|
||||||
newData[key] = [itemParsed] as string[] & number[];
|
|
||||||
|
|
||||||
Object.entries(newData).forEach(([key, value]) => {
|
|
||||||
if (value) {
|
|
||||||
search.append(key, value.toString());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
router.replace({ query: search.toString() }, undefined);
|
|
||||||
};
|
|
||||||
|
|
||||||
const clear = (schemaKey: KeysWithoutStatus) => {
|
|
||||||
// Clear item from array
|
|
||||||
const newData = data;
|
|
||||||
const search = new URLSearchParams();
|
|
||||||
newData[schemaKey] = [];
|
|
||||||
|
|
||||||
Object.entries(newData).forEach(([key, value]) => {
|
|
||||||
if (value) {
|
|
||||||
search.append(key, value.toString());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
search.delete(schemaKey);
|
|
||||||
router.replace({ query: search.toString() }, undefined);
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataAsSearchString = () => {
|
|
||||||
const search = new URLSearchParams();
|
|
||||||
Object.entries(data).forEach(([key, value]) => {
|
|
||||||
if (value) {
|
|
||||||
search.append(key, value.toString());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return search.toString();
|
|
||||||
};
|
|
||||||
|
|
||||||
return { data, push, pop, set, clear, dataAsSearchString };
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,7 +43,7 @@ export function useTypedQuery<T extends z.Schema>(schema: T) {
|
||||||
existingValue.filter((item: InferedSchema[J][0]) => item !== value)
|
existingValue.filter((item: InferedSchema[J][0]) => item !== value)
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
setQuery(key, undefined);
|
removeByKey(key); // if its the last item, remove the key from the query entirely
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,5 +60,6 @@ function Test() {
|
||||||
const { data, setQuery, removeByKey, pushItemToKey, removeItemByKeyAndValue } = useTypedQuery(testSchema);
|
const { data, setQuery, removeByKey, pushItemToKey, removeItemByKeyAndValue } = useTypedQuery(testSchema);
|
||||||
setQuery("test2", "test");
|
setQuery("test2", "test");
|
||||||
removeByKey("test2");
|
removeByKey("test2");
|
||||||
|
pushItemToKey("test3", 1);
|
||||||
removeItemByKeyAndValue("test", "2");
|
removeItemByKeyAndValue("test", "2");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
|
|
||||||
|
|
||||||
import HorizontalTabItem, { HorizontalTabItemProps } from "./HorizontalTabItem";
|
import HorizontalTabItem, { HorizontalTabItemProps } from "./HorizontalTabItem";
|
||||||
|
|
||||||
export { HorizontalTabItem };
|
export { HorizontalTabItem };
|
||||||
|
|
Loading…
Reference in New Issue
Block a user