fixed typo in file names
This commit is contained in:
parent
bbd7bf482d
commit
ad16705a5f
117
components/modals/message-file-modal.tsx
Normal file
117
components/modals/message-file-modal.tsx
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import axios from "axios";
|
||||||
|
import qs from "query-string";
|
||||||
|
import * as z from "zod";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { FileUpload } from "@/components/file-upload";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useModal } from "@/hooks/use-modal-store";
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
fileUrl: z.string().min(1, {
|
||||||
|
message: "Attachment is required."
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
export const MessageFileModal = () => {
|
||||||
|
const { isOpen, onClose, type, data } = useModal();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const isModalOpen = isOpen && type === "messageFile";
|
||||||
|
const { apiUrl, query } = data;
|
||||||
|
|
||||||
|
const form = useForm({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
fileUrl: "",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
form.reset();
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLoading = form.formState.isSubmitting;
|
||||||
|
|
||||||
|
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||||||
|
try {
|
||||||
|
const url = qs.stringifyUrl({
|
||||||
|
url: apiUrl || "",
|
||||||
|
query,
|
||||||
|
});
|
||||||
|
|
||||||
|
await axios.post(url, {
|
||||||
|
...values,
|
||||||
|
content: values.fileUrl,
|
||||||
|
});
|
||||||
|
|
||||||
|
form.reset();
|
||||||
|
router.refresh();
|
||||||
|
handleClose();
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isModalOpen} onOpenChange={handleClose}>
|
||||||
|
<DialogContent className="bg-white text-black p-0 overflow-hidden">
|
||||||
|
<DialogHeader className="pt-8 px-6">
|
||||||
|
<DialogTitle className="text-2xl text-center font-bold">
|
||||||
|
Add an attachment
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription className="text-center text-zinc-500">
|
||||||
|
Send a file as a message
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<div className="space-y-8 px-6">
|
||||||
|
<div className="flex items-center justify-center text-center">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="fileUrl"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormControl>
|
||||||
|
<FileUpload
|
||||||
|
endpoint="messageFile"
|
||||||
|
value={field.value}
|
||||||
|
onChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter className="bg-gray-100 px-6 py-4">
|
||||||
|
<Button variant="primary" disabled={isLoading}>
|
||||||
|
Send
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,114 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
import qs from "query-string";
|
|
||||||
import * as z from "zod";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import{
|
|
||||||
Form,
|
|
||||||
FormControl,
|
|
||||||
FormField,
|
|
||||||
FormItem,
|
|
||||||
} from "@/components/ui/form";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { FileUpload } from "@/components/file-upload";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useModal } from "@/hooks/use-modal-store";
|
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
fileUrl: z.string().min(1, {
|
|
||||||
message: "Attachment is required",
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const MessageFileModal = () => {
|
|
||||||
const {isOpen, onClose, type, data} = useModal();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const isModalOpen = isOpen && type === "messageFile";
|
|
||||||
const { apiUrl, query } = data;
|
|
||||||
|
|
||||||
const form = useForm({
|
|
||||||
resolver: zodResolver(formSchema),
|
|
||||||
defaultValues: {
|
|
||||||
fileUrl: "",
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
form.reset();
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
|
|
||||||
const isLoading = form.formState.isSubmitting;
|
|
||||||
|
|
||||||
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
|
||||||
try {
|
|
||||||
const url = qs.stringifyUrl({
|
|
||||||
url: apiUrl || "",
|
|
||||||
query,
|
|
||||||
})
|
|
||||||
|
|
||||||
await axios.post(url, {...values, content: values.fileUrl,});
|
|
||||||
|
|
||||||
form.reset();
|
|
||||||
router.refresh();
|
|
||||||
handleClose();
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={isModalOpen} onOpenChange={handleClose}>
|
|
||||||
<DialogContent className="bg-white text-black p-0 overflow-hidden">
|
|
||||||
<DialogHeader className="pt-8 px-6">
|
|
||||||
<DialogTitle className="text-2xl text-center">
|
|
||||||
Add an attachment
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription className="text-center text-zinc-500">
|
|
||||||
Send a file as a message
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<Form {...form}>
|
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
|
||||||
<div className="space-y-8 px-6">
|
|
||||||
<div className="flex items-center justify-center text-center">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="fileUrl"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormControl>
|
|
||||||
<FileUpload
|
|
||||||
endpoint="messageFile"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<DialogFooter className="bg-gray-100 px-6 py-4">
|
|
||||||
<Button variant={"primary"} disabled={isLoading}>
|
|
||||||
Send
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,11 +1,10 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react"
|
||||||
|
|
||||||
export const useOrigin = () => {
|
export const useOrigin = () => {
|
||||||
const [mounted, setMounted] = useState(false);
|
const [mounted, setMounted] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMounted(true);
|
setMounted(true);
|
||||||
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||||
Loading…
x
Reference in New Issue
Block a user