Openstatus
www.openstatus.dev
Automatically generate slug based on title (#213)
+17
-3
+9
-2
apps/web/src/components/forms/status-page-form.tsx
+9
-2
apps/web/src/components/forms/status-page-form.tsx
···
26
26
import { Input } from "@/components/ui/input";
27
27
import { useToast } from "@/components/ui/use-toast";
28
28
import { useDebounce } from "@/hooks/use-debounce";
29
+
import { slugify } from "@/lib/utils";
29
30
import { api } from "@/trpc/client";
30
31
import { LoadingAnimation } from "../loading-animation";
31
32
···
62
63
const [isPending, startTransition] = useTransition();
63
64
const watchSlug = form.watch("slug");
64
65
const debouncedSlug = useDebounce(watchSlug, 1000); // using debounce to not exhaust the server
66
+
const watchTitle = form.watch("title");
65
67
const { toast } = useToast();
66
68
67
69
const checkUniqueSlug = useCallback(async () => {
···
85
87
form.clearErrors("slug");
86
88
}
87
89
}
88
-
watchSlugChanges();
90
+
91
+
void watchSlugChanges();
89
92
// eslint-disable-next-line react-hooks/exhaustive-deps
90
93
}, [checkUniqueSlug]);
91
94
95
+
useEffect(() => {
96
+
form.setValue("slug", slugify(watchTitle));
97
+
}, [watchTitle, form]);
98
+
92
99
const onSubmit = async ({
93
100
...props
94
101
}: z.infer<typeof insertPageSchemaWithMonitors>) => {
···
144
151
});
145
152
} else {
146
153
if (onSubmit) {
147
-
form.handleSubmit(onSubmit)(e);
154
+
void form.handleSubmit(onSubmit)(e);
148
155
}
149
156
}
150
157
}}
+8
-1
apps/web/src/lib/utils.ts
+8
-1
apps/web/src/lib/utils.ts
···
1
-
import { clsx } from "clsx";
2
1
import type { ClassValue } from "clsx";
2
+
import { clsx } from "clsx";
3
3
import { format } from "date-fns";
4
4
import { twMerge } from "tailwind-merge";
5
5
···
20
20
): value is TValue {
21
21
return value !== null && value !== undefined;
22
22
}
23
+
24
+
export const slugify = (str: string) => {
25
+
return str
26
+
.toLowerCase()
27
+
.replace(/ /g, "-")
28
+
.replace(/[^\w-]+/g, "");
29
+
};