feat: add mod versions list in mod modal

src/components/dashboard/modpacks/modal/modpack-modal.tsx

@@ -8,7 +8,7 @@ import { gradient, gradientDanger, notify } from '~/lib/utils';
 import { createModpack, deleteModpack, updateModpack, updateModpackPicture } from '~/server/data/modpacks';
 
 import { ModpackModalGeneral } from './modpack-general';
-import { ModpackVersions } from '../../modpack-versions/modpack-version';
+import { ModpackVersions } from './modpack-versions/modpack-version';
 
 export function ModpackModal({ modpack, onClose }: { modpack?: Modpack | undefined, onClose: (editedModpack: Modpack | string) => void }) {
 	const [isPending, startTransition] = useTransition();

src/components/dashboard/modpack-versions/modpack-version.tsx → src/components/dashboard/modpacks/modal/modpack-versions/modpack-version.tsx

@@ -7,13 +7,12 @@ import { useDisclosure } from '@mantine/hooks';
 import { useState } from 'react';
 
 import { useEffectOnce } from '~/hooks/use-effect-once';
-import { gradient } from '~/lib/utils';
+import { gradient, notify } from '~/lib/utils';
 import { getModpackVersions } from '~/server/data/modpacks-version';
 import type { ModpackVersionWithMods } from '~/types';
 
 import { ModpackVersionModal } from './modpack-version-modal';
 
-
 export function ModpackVersions({ modpack }: { modpack: Modpack }) {
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [modalModpackVersion, setModalModpackVersion] = useState<ModpackVersionWithMods | undefined>();
@@ -24,6 +23,7 @@ export function ModpackVersions({ modpack }: { modpack: Modpack }) {
 			.then(setModpackVersions)
 			.catch((error) => {
 				console.error(error);
+				notify('Error', error.message, 'red');
 			});
 	})
 
@@ -47,8 +47,8 @@ export function ModpackVersions({ modpack }: { modpack: Modpack }) {
 				<ModpackVersionModal modpack={modpack} modpackVersion={modalModpackVersion} onClose={closeModpackVersionModal} />
 			</Modal>
 			<Group gap="md" align="start" mt="md">
-				{!modpackVersions && (<Text mt="sm">Loading...</Text>)}
-				{modpackVersions.length === 0 && (<Text mt="sm">This Modpack has no versions yet</Text>)}
+				{!modpackVersions && <Text mt="sm">Loading...</Text>}
+				{modpackVersions.length === 0 && <Text mt="sm">This Modpack has no versions yet</Text>}
 
 				{modpackVersions.length > 0 && <>
 					<Table striped highlightOnHover withColumnBorders withTableBorder>

src/components/dashboard/mods/modal/mod-versions/mod-version.tsx

@@ -0,0 +1,54 @@
+import type { Mod } from '@prisma/client';
+
+import { Group, Table, Text } from '@mantine/core';
+import { useState } from 'react';
+
+import { useEffectOnce } from '~/hooks/use-effect-once';
+import { notify } from '~/lib/utils';
+import { getModVersionsWithModpacks } from '~/server/data/mods-version';
+import { ModVersionWithModpacks } from '~/types';
+
+export function ModVersions({ mod }: { mod: Mod }) {
+	const [modVersions, setModVersions] = useState<ModVersionWithModpacks[]>([]);
+
+	useEffectOnce(() => {
+		getModVersionsWithModpacks(mod.id)
+			.then(setModVersions)
+			.catch((err) => {
+				console.error(err);
+				notify('Error', err.message, 'red');
+			})
+	})
+
+	return (
+		<Group gap="md" align="start" mt="md">
+			{!modVersions && <Text mt="sm">Loading...</Text>}
+			{modVersions.length === 0 && <Text mt="sm">This Mod has no versions yet</Text>}
+
+			{modVersions.length > 0 && <>
+				<Table striped highlightOnHover withColumnBorders withTableBorder>
+					<Table.Thead>
+						<Table.Tr>
+							<Table.Th>Version</Table.Th>
+							<Table.Th>MC Version</Table.Th>
+							<Table.Th>Modpacks</Table.Th>
+							<Table.Th>Created</Table.Th>
+							<Table.Th>Updated</Table.Th>
+						</Table.Tr>
+					</Table.Thead>
+					<Table.Tbody>
+						{modVersions.map((version) => (
+							<Table.Tr key={version.id} onClick={() => {}}>
+								<Table.Td>{version.version}</Table.Td>
+								<Table.Td>{version.mcVersion}</Table.Td>
+								<Table.Td>{version.modpacks.map((m) => m.name)}</Table.Td>
+								<Table.Td>{version.createdAt.toLocaleString()}</Table.Td>
+								<Table.Td>{version.updatedAt.toLocaleString()}</Table.Td>
+							</Table.Tr>
+						))}
+					</Table.Tbody>
+				</Table>
+			</>}
+		</Group>
+	)
+}

src/components/dashboard/mods/modal/mods-modal.tsx

@@ -7,6 +7,7 @@ import { useState, useTransition } from 'react';
 import { gradient, gradientDanger, notify } from '~/lib/utils';
 import { createMod, deleteMod, updateMod, updateModPicture } from '~/server/data/mods';
 
+import { ModVersions } from './mod-versions/mod-version';
 import { ModModalGeneral } from './mods-general';
 
 export interface ModModalFormValues {
@@ -91,7 +92,7 @@ export function ModModal({ mod, onClose }: {mod?: Mod | undefined, onClose: (edi
 					</Tabs.List>
 
 					<Tabs.Panel value="first"><ModModalGeneral form={form} previewImg={previewImg} mod={mod} /></Tabs.Panel>
-					<Tabs.Panel value="second">Todo 2</Tabs.Panel>
+					<Tabs.Panel value="second"><ModVersions mod={mod} /></Tabs.Panel>
 				</Tabs>
 				: 
 				'Hello World'

src/server/data/mods-version.ts

@@ -1,9 +1,31 @@
+'use server';
+
 import { ModVersion } from '@prisma/client';
 
 import { db } from '~/lib/db';
+import type { ModVersionWithModpacks } from '~/types';
 
 import { deleteResource } from './resource';
 
+export async function getModVersionsWithModpacks(modId: string): Promise<ModVersionWithModpacks[]> {
+	const res: ModVersionWithModpacks[] = [];
+	const modVersions = await db.modVersion.findMany({ where: { modId } });
+
+	for (const modVer of modVersions) {
+		console.log(modVer.id);
+		const modpacks = await db.modpackVersion.findMany({ where: { mods: { some: { id: modVer.id }}}, include: { modpack: true }})
+			.then((modpackVersions) =>
+				modpackVersions.map((modpackVersion) => modpackVersion.modpack)
+			);
+
+		console.log(modpacks);
+
+		res.push({ ...modVer, modpacks });
+	}
+
+	return res;
+}
+
 export async function createModVersion({ mod, version, mcVersion }: { mod: { id: string }, version: string, mcVersion: string }): Promise<ModVersion> {
 	return db.modVersion.create({ data: { modId: mod.id, version, mcVersion } });
 }

src/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { ModpackVersion } from '@prisma/client';
+import type { Modpack, ModpackVersion, ModVersion } from '@prisma/client';
 
 export type Prettify<T> = {
 	[K in keyof T]: T[K];
@@ -13,6 +13,8 @@ export type CreateObject<T extends { id: string }, K extends keyof T = 'id'> =
 
 export type ModpackVersionWithMods = ModpackVersion & { mods: ModVersion[] };
 
+export type ModVersionWithModpacks = ModVersion & { modpacks: Modpack[] };
+
 export type MCModInfoData = MCModInfo[] | {
 	modListVersion: number;
 	modList: MCModInfo[];