grey out irrelevant pubs based on genre data

src/app/submission/page.tsx

@@ -1,8 +1,9 @@
-import { getGenres, getPubs, getResponses, getStories, getSubsComplete } from "app/lib/get"
+import { getGenres, getPubs, getPubsWithGenres, getResponses, getStories, getStoriesWithGenres, getSubsComplete } from "app/lib/get"
 import { DataTable } from "app/ui/tables/data-table"
 import { columns } from "./columns"
-import { Pub, Response, Story, Sub } from "@prisma/client"
+import { Genre, Pub, Response, Story, Sub } from "@prisma/client"
 import CreateSubmissionDialog from "./create"
+import { PubWithGenres } from "app/publication/page"
 
 export type SubComplete = Sub & {
   pub: Pub,
@@ -12,10 +13,10 @@ export type SubComplete = Sub & {
 export default async function Page() {
 
   const subs: Array<SubComplete> = await getSubsComplete()
-  const stories = await getStories()
-  const pubs = await getPubs()
-  const responses = await getResponses()
-  const genres = await getGenres()
+  const stories: Story[] = await getStoriesWithGenres()
+  const pubs: PubWithGenres[] = await getPubsWithGenres()
+  const responses: Response[] = await getResponses()
+  const genres: Genre[] = await getGenres()
 
   return (
     <div className="container px-1 md:px-4 mx-auto">

src/app/tailwind.css

@@ -706,16 +706,12 @@ body {
   z-index: 100;
 }
 
-.m-auto {
-  margin: auto;
-}
-
 .m-6 {
   margin: 1.5rem;
 }
 
-.m-12 {
-  margin: 3rem;
+.m-auto {
+  margin: auto;
 }
 
 .-mx-1 {
@@ -758,10 +754,6 @@ body {
   margin-bottom: auto;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -1150,16 +1142,12 @@ body {
   gap: 0.5rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
 
-.gap-12 {
-  gap: 3rem;
+.gap-4 {
+  gap: 1rem;
 }
 
 .gap-x-16 {

src/app/ui/forms/sub.tsx

@@ -36,12 +36,14 @@ import { createSub } from "app/lib/create"
 import { subSchema } from "./schemas"
 import { useRouter } from "next/navigation"
 import { Ban } from "lucide-react"
-import { Story } from "@prisma/client"
+import { Pub, Response, Story, Sub } from "@prisma/client"
+import { StoryWithGenres } from "app/story/page"
+import { PubWithGenres } from "app/publication/page"
 
 export type SubForm = z.infer<typeof subSchema>
 
 
-export default function SubmissionForm({ stories, pubs, responses, defaults, closeDialog }: { stories: any, pubs: any, responses: any, defaults?: any, closeDialog?: () => void }) {
+export default function SubmissionForm({ stories, pubs, responses, defaults, closeDialog }: { stories: StoryWithGenres[], pubs: PubWithGenres[], responses: Response[], defaults?: Sub, closeDialog?: () => void }) {
 	const form = useForm<z.infer<typeof subSchema>>({
 		resolver: zodResolver(subSchema),
 		defaultValues: {
@@ -51,19 +53,41 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 	})
 	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
 	const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
+	const [relevantPubIds, setRelevantPubIds] = useState(pubs.map(e => e.id));
+
+	function updateRelevantPubs(storyId: number) {
+		console.log("storyId: " + storyId)
+		console.log("stories: ", stories)
+		const story = stories.find(e => e.id == storyId)
+		console.log("story: ", story)
+		const storyGenreIds = story?.genres.map(e => e.id) ?? []
+		const relevantPubIds = pubs.filter(e => {
+			const pubGenreIds = e.genres.map(e => e.id)
+			for (let i = 0; i < storyGenreIds.length; i++) {
+				const storyGenreId = storyGenreIds[i];
+				if (pubGenreIds.includes(storyGenreId)) return true
+			}
+		}).map(e => e.id)
+		console.log("relevant pubs: ", relevantPubIds)
+		setRelevantPubIds(relevantPubIds)
+	}
+
 	const storiesSelectItems = stories.map((e: Story) => (
 		<SelectItem value={e.id?.toString()} key={e.title}>
 			{e.title}
 		</SelectItem>
 	))
-	const pubsSelectItems = pubs.map(e => (
-		<SelectItem value={e.id} key={e.title}>
-			{e.title}
-		</SelectItem>
-	))
+	const pubsSelectItems = pubs.map(e => {
+		const isDisabled = !relevantPubIds.includes(e.id)
+		return (
+			<SelectItem disabled={isDisabled} value={e.id.toString()} key={e.title}>
+				{e.title}
+			</SelectItem>
+		)
+	})
 
 	const reponsesSelectItems = responses.map(e => (
-		<SelectItem value={e.id} key={e.title}>
+		<SelectItem value={e.id.toString()} key={e.response}>
 			{e.response}
 		</SelectItem>
 	))
@@ -127,7 +151,8 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value?.toString()}>
+							<Select onOpenChange={() => updateRelevantPubs(form.getValues().storyId
+							)} onValueChange={field.onChange} defaultValue={field.value?.toString()}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select something">