maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

useTypedQuery

This commit is contained in:
sean-brydon 2022-12-15 09:59:43 +00:00
parent 25df421200
commit 0f49a62e84
4 changed files with 9 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/features/bookings/components/TeamsMemberFilter.tsx
View File

@ -8,7 +8,7 @@ import { useFilterQuery } from "../lib/useFilterQuery";
export const TeamsMemberFilter = () => {
const { t } = useLocale();
const { data: query, pop, push, clear } = useFilterQuery();
const { data: query, removeByKey, pushItemToKey } = useFilterQuery();
const { data } = trpc.viewer.teams.list.useQuery();
return (
@ -28,7 +28,8 @@ export const TeamsMemberFilter = () => {
type="checkbox"
checked={!query.teamIds}
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 "
/>
@ -57,7 +58,7 @@ export const TeamsMemberFilter = () => {
checked={query.teamIds?.includes(team.id)}
onChange={(e) => {
if (e.target.checked) {
push("teamIds", team.id);
pushItemToKey("teamIds", team.id);
} else if (!e.target.checked) {
pop("teamIds", team.id);
}

98
packages/features/bookings/lib/useFilterQuery.tsx
View File

@ -1,6 +1,8 @@
import { useRouter } from "next/router";
import z from "zod";
import { useTypedQuery } from "./useTypedQuery";
// Take string and return number
export const queryNumberSchema = z.preprocess(
(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
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({
teamIds: queryNumberArray.optional(),
userIds: queryNumberArray.optional(),
@ -38,92 +33,5 @@ type Keys = keyof FilterQuerySchema;
type KeysWithoutStatus = Exclude<Keys, "status">;
export function useFilterQuery() {
const router = useRouter();
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 };
return useTypedQuery(filterQuerySchema);
}

3
packages/features/bookings/lib/useTypedQuery.ts
View File

@ -43,7 +43,7 @@ export function useTypedQuery<T extends z.Schema>(schema: T) {
existingValue.filter((item: InferedSchema[J][0]) => item !== value)
);
} 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);
setQuery("test2", "test");
removeByKey("test2");
pushItemToKey("test3", 1);
removeItemByKeyAndValue("test", "2");
}

2
packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
View File

@ -1,5 +1,3 @@
import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
import HorizontalTabItem, { HorizontalTabItemProps } from "./HorizontalTabItem";
export { HorizontalTabItem };