BobsRepos/discord-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed typo in file names

Browse Source
This commit is contained in:
Bob Burningham 2023-11-13 00:29:05 -08:00
parent bbd7bf482d
commit ad16705a5f
3 changed files with 119 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
components/modals/message-file-modal.tsx Normal file
View 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>
)
}

114
components/modals/message-file-modal.tsx.tsx
View File

@ -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>
)
}

5
hooks/user-origin.ts → hooks/use-origin.ts
View File

@ -1,15 +1,14 @@
import { useEffect, useState } from "react";
import { useEffect, useState } from "react"
export const useOrigin = () => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
if (!mounted) {
return "";
}