canvas component pulled out so it can be loaded in starred versions t…

…able dialog

app/components/templates/canvas/artwork-canvas.tsx

@@ -0,0 +1,28 @@
+import { memo, useEffect, useRef } from 'react'
+import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator'
+import { canvasDrawService } from '#app/services/canvas/draw.service'
+
+export const ArtworkCanvas = memo(
+	({ generator }: { generator: IArtworkVersionGenerator }) => {
+		const { width, height, background } = generator.settings
+		const canvasRef = useRef<HTMLCanvasElement>(null)
+
+		useEffect(() => {
+			const canvas = canvasRef.current
+			if (canvas) {
+				canvasDrawService({ canvas, generator })
+			}
+		}, [canvasRef, generator])
+
+		return (
+			<canvas
+				id="canvas-editor"
+				ref={canvasRef}
+				width={width}
+				height={height}
+				style={{ backgroundColor: `#${background}` }}
+			/>
+		)
+	},
+)
+ArtworkCanvas.displayName = 'ArtworkCanvas'

app/components/templates/canvas/index.ts

@@ -0,0 +1 @@
+export * from './artwork-canvas'

app/models/artwork-version/artwork-version.get.server.ts

@@ -4,7 +4,6 @@ import { prisma } from '#app/utils/db.server'
 import {
 	type IArtworkVersionWithDesignsAndLayers,
 	type IArtworkVersion,
-	type IArtworkVersionWithBranch,
 } from './artwork-version.server'
 
 export type queryArtworkVersionWhereArgsType = z.infer<typeof whereArgs>
@@ -107,7 +106,7 @@ export const getStarredArtworkVersions = async ({
 	artworkId,
 }: {
 	artworkId: string
-}): Promise<IArtworkVersionWithBranch[]> => {
+}): Promise<IArtworkVersionWithDesignsAndLayers[]> => {
 	const starredVersions = await prisma.artworkVersion.findMany({
 		where: {
 			branch: {
@@ -116,6 +115,7 @@ export const getStarredArtworkVersions = async ({
 			starred: true,
 		},
 		include: {
+			...includeDesignsAndLayers,
 			branch: true,
 		},
 		orderBy: {

app/models/artwork-version/artwork-version.server.ts

@@ -1,4 +1,5 @@
 import { type ArtworkVersion } from '@prisma/client'
+import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator'
 import { type DateOrString } from '#app/definitions/prisma-helper'
 import { type IArtworkBranch } from '../artwork-branch/artwork-branch.server'
 import { type IDesignWithType } from '../design/design.server'
@@ -20,8 +21,18 @@ export interface IArtworkVersion extends BaseArtworkVersion {
 export interface IArtworkVersionWithDesignsAndLayers extends IArtworkVersion {
 	designs: IDesignWithType[]
 	layers: ILayerWithDesigns[]
+	branch?: IArtworkBranch
 }
 
+// created this for profile artwork view to review starred versions
+// now wanting to display canvas from dialog
+// canvas requires designs and layers to compute
+// temp fix is to include branch for its name in table display
 export interface IArtworkVersionWithBranch extends IArtworkVersion {
 	branch: IArtworkBranch
 }
+
+export interface IArtworkVersionWithGenerator
+	extends IArtworkVersionWithDesignsAndLayers {
+	generator: IArtworkVersionGenerator
+}

app/routes/resources+/api.v1+/artwork-version.update.starred.tsx

@@ -27,6 +27,8 @@ import { Routes } from '#app/utils/routes.const'
 
 // https://www.epicweb.dev/full-stack-components
 
+// TODO: prevent starring if artwork doesn't have all design types set
+
 const route = Routes.RESOURCES.API.V1.ARTWORK_VERSION.UPDATE.STARRED
 const schema = ArtworkVersionStarredSchema
 

app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/canvas-content.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import {
 	ReactFlow,
 	type Node,
@@ -10,8 +10,8 @@ import {
 	type NodeProps,
 } from 'reactflow'
 import { ContainerIndex } from '#app/components/shared'
+import { ArtworkCanvas } from '#app/components/templates/canvas'
 import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator'
-import { canvasDrawService } from '#app/services/canvas/draw.service'
 import 'reactflow/dist/style.css'
 
 const initialNodes = [
@@ -23,31 +23,6 @@ const initialNodes = [
 	},
 ] satisfies Node[]
 
-const ArtworkCanvas = memo(
-	({ generator }: { generator: IArtworkVersionGenerator }) => {
-		const { width, height, background } = generator.settings
-		const canvasRef = useRef<HTMLCanvasElement>(null)
-
-		useEffect(() => {
-			const canvas = canvasRef.current
-			if (canvas) {
-				canvasDrawService({ canvas, generator })
-			}
-		}, [canvasRef, generator])
-
-		return (
-			<canvas
-				id="canvas-editor"
-				ref={canvasRef}
-				width={width}
-				height={height}
-				style={{ backgroundColor: `#${background}` }}
-			/>
-		)
-	},
-)
-ArtworkCanvas.displayName = 'ArtworkCanvas'
-
 export const CanvasContent = ({
 	generator,
 }: {

app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx

@@ -10,7 +10,13 @@ import { formatDistanceToNow } from 'date-fns'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ContainerDetails } from '#app/components/shared/container.tsx'
+import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator.ts'
 import { getStarredArtworkVersions } from '#app/models/artwork-version/artwork-version.get.server.ts'
+import {
+	type IArtworkVersionWithGenerator,
+	type IArtworkVersionWithDesignsAndLayers,
+} from '#app/models/artwork-version/artwork-version.server.ts'
+import { artworkVersionGeneratorBuildService } from '#app/services/artwork/version/generator/build.service.ts'
 import { requireUserId } from '#app/utils/auth.server'
 import { validateCSRF } from '#app/utils/csrf.server'
 import { prisma } from '#app/utils/db.server'
@@ -27,16 +33,32 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 	const artwork = await getArtwork(userId, params.artworkId as string)
 	invariantResponse(artwork, 'Not found', { status: 404 })
 
-	const starredVersions = await getStarredArtworkVersions({
-		artworkId: artwork.id,
-	})
+	// get all starred versions for this artwork
+	const starredVersions: IArtworkVersionWithDesignsAndLayers[] =
+		await getStarredArtworkVersions({
+			artworkId: artwork.id,
+		})
+
+	// get all generators for these versions
+	const generators: IArtworkVersionGenerator[] = await Promise.all(
+		starredVersions.map(version =>
+			artworkVersionGeneratorBuildService({ version }),
+		),
+	)
+
+	// combine versions and generators
+	const versionsWithGenerators: IArtworkVersionWithGenerator[] =
+		starredVersions.map((version, index) => ({
+			...version,
+			generator: generators[index],
+		}))
 
 	const date = new Date(artwork.updatedAt)
 	const timeAgo = formatDistanceToNow(date)
 
 	return json({
 		artwork,
-		starredVersions,
+		versionsWithGenerators,
 		timeAgo,
 		breadcrumb: artwork.name,
 		project: artwork.project,
@@ -116,7 +138,7 @@ export default function ArtworkDetailsRoute() {
 		<ContainerDetails>
 			<Header />
 			<Content />
-			<StarredVersions versions={data.starredVersions} />
+			<StarredVersions versions={data.versionsWithGenerators} />
 			{displayBar ? <Footer /> : null}
 		</ContainerDetails>
 	)

app/routes/users+/$username_+/artworks+/$artworkId/_index/starred-versions.tsx

@@ -5,6 +5,17 @@ import {
 	DashboardCardWrapper,
 } from '#app/components/layout'
 import { ContainerContent, ContainerP } from '#app/components/shared'
+import { ArtworkCanvas } from '#app/components/templates/canvas'
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from '#app/components/ui/dialog'
+import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import {
 	Table,
 	TableBody,
@@ -14,14 +25,14 @@ import {
 	TableHeader,
 	TableRow,
 } from '#app/components/ui/table'
-import { type IArtworkVersionWithBranch } from '#app/models/artwork-version/artwork-version.server'
+import { type IArtworkVersionWithGenerator } from '#app/models/artwork-version/artwork-version.server'
 import { ArtworkVersionTogglePublished } from '#app/routes/resources+/api.v1+/artwork-version.update.published'
 import { ArtworkVersionToggleStarred } from '#app/routes/resources+/api.v1+/artwork-version.update.starred'
 
 export const StarredVersions = ({
 	versions,
 }: {
-	versions: IArtworkVersionWithBranch[]
+	versions: IArtworkVersionWithGenerator[]
 }) => {
 	if (versions.length === 0) {
 		return (
@@ -60,17 +71,42 @@ export const StarredVersions = ({
 										published,
 										publishedAt,
 										branch,
+										generator,
 									} = version
 
+									const branchName = branch?.name || 'No branch found'
+
 									const timeAgo = publishedAt
 										? formatDistanceToNow(new Date(publishedAt))
 										: 'never' // I'm keeping "never ago"
 
 									return (
 										<TableRow key={id}>
+											<TableCell>
+												<Dialog>
+													<DialogTrigger asChild>
+														<PanelIconButton
+															iconName="eye-open"
+															iconText="View canvas"
+														/>
+													</DialogTrigger>
+													<DialogContent className="sm:max-w-[425px]">
+														<DialogHeader>
+															<DialogTitle>
+																{branchName} - {name}
+															</DialogTitle>
+															<DialogDescription>
+																{description}
+															</DialogDescription>
+														</DialogHeader>
+														<ArtworkCanvas generator={generator} />
+														<DialogFooter>footer</DialogFooter>
+													</DialogContent>
+												</Dialog>
+											</TableCell>
 											<TableCell>{name}</TableCell>
 											<TableCell>{description}</TableCell>
-											<TableCell>{branch.name}</TableCell>
+											<TableCell>{branchName}</TableCell>
 											<TableCell>
 												{published ? 'published' : 'not published'}
 											</TableCell>