src/app/publication/create/page.tsx

@@ -29,7 +29,7 @@ export default async function Page() {
 				<CreateContainerDescription>
 					Create a new entry for a publication i.e. a place you intend to submit to.
 				</CreateContainerDescription>
-				<PubForm genres={genres} createPub={createPub} className="mt-6" />
+				<PubForm genres={genres} createPub={createPub} />
 			</CreateContainerContent>
 		</CreateContainer>
 	)

src/app/publication/loading.tsx

@@ -1,5 +0,0 @@
-import { LoadingSpinner } from "app/loading";
-
-export default function Loading() {
-  return <LoadingSpinner />
-}

src/app/submission/loading.tsx

@@ -1,5 +0,0 @@
-import { LoadingSpinner } from "app/loading";
-
-export default function Loading() {
-  return <LoadingSpinner />
-}

src/app/ui/forms/pub.tsx

@@ -23,8 +23,6 @@ import {
 import GenresTrigger from "./genresTrigger"
 import GenreCheckbox from "./genreCheckbox"
 import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
-import { ComponentProps } from "react"
-import { Genre } from "@prisma/client"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
@@ -33,7 +31,7 @@ const formSchema = z.object({
 	genres: z.array(z.number()),
 })
 
-export default function PubForm({ genres, createPub, className }: ComponentProps<"div"> & { genres: Array<Genre>, createPub: (data: any) => void }) {
+export default function PubForm({ genres, createPub }) {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
@@ -77,87 +75,85 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 			.toLowerCase() +
 		".com"
 	return (
-		<div className={className}>
+		<Form {...form}>
-			<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
-				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+				<FormField
+					control={form.control}
+					name="title"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Title</FormLabel>
+							<FormControl>
+								<Input placeholder={exampleTitle} {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="link"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Website</FormLabel>
+							<FormControl>
+								<Input placeholder={exampleUrl} {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
 					<FormField
 						control={form.control}
-						name="title"
+						name="genres"
 						render={({ field }) => (
-							<FormItem>
+							<FormItem className="flex flex-col flex-wrap">
-								<FormLabel>Title</FormLabel>
+								<FormLabel className="h-5">Genres</FormLabel>
-								<FormControl>
+								<Popover>
-									<Input placeholder={exampleTitle} {...field} />
+									<GenresTrigger value={field.value} genres={genres} />
-								</FormControl>
+									<PopoverContent align="start">
+										{genres.map((item) => (
+											<FormField
+												key={item.id}
+												control={form.control}
+												name="genres"
+												render={({ field }) => {
+													return (
+														<GenreCheckbox field={field} item={item} />
+													)
+												}}
+											/>
+										))}
+										<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
+									</PopoverContent>
+								</Popover>
 								<FormMessage />
 							</FormItem>
 						)}
 					/>
 
+
 					<FormField
 						control={form.control}
-						name="link"
+						name="query_after_days"
 						render={({ field }) => (
-							<FormItem>
+							<FormItem className="flex flex-col">
-								<FormLabel>Website</FormLabel>
+								<FormLabel className="h-5">Query after (days)</FormLabel>
 								<FormControl>
-									<Input placeholder={exampleUrl} {...field} />
+									<Input className=" w-24" type="number" step={5} min={30} {...field}></Input>
 								</FormControl>
 								<FormMessage />
 							</FormItem>
 						)}
 					/>
+				</div>
 
-					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
+				<Button type="submit">Submit</Button>
-						<FormField
+			</form>
-							control={form.control}
+		</Form>
-							name="genres"
-							render={({ field }) => (
-								<FormItem className="flex flex-col flex-wrap">
-									<FormLabel className="h-5">Genres</FormLabel>
-									<Popover>
-										<GenresTrigger value={field.value} genres={genres} />
-										<PopoverContent align="start">
-											{genres.map((item) => (
-												<FormField
-													key={item.id}
-													control={form.control}
-													name="genres"
-													render={({ field }) => {
-														return (
-															<GenreCheckbox field={field} item={item} />
-														)
-													}}
-												/>
-											))}
-											<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-
-						<FormField
-							control={form.control}
-							name="query_after_days"
-							render={({ field }) => (
-								<FormItem className="flex flex-col">
-									<FormLabel className="h-5">Query after (days)</FormLabel>
-									<FormControl>
-										<Input className=" w-24" type="number" step={5} min={30} {...field}></Input>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</div>
-
-					<Button type="submit">Submit</Button>
-				</form>
-			</Form>
-		</div>
 
 	)
 }