panel entity update design type rotate through fetcher template and api

app/models/design-type/design-type.update.rotate.server.ts

@@ -0,0 +1,122 @@
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import {
+	type DesignRotateUpdateSchemaType,
+	EditDesignRotateBasisSchema,
+	EditDesignRotateValueSchema,
+} from '#app/schema/rotate'
+import { ValidateDesignParentSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
+import { validateEntitySubmission } from '#app/utils/conform-utils'
+import { findFirstRotateInstance } from '#app/utils/prisma-extensions-rotate'
+import { type IDesign } from '../design.server'
+import { type IRotate } from '../rotate.server'
+
+export interface IDesignTypeRotateUpdatedResponse {
+	success: boolean
+	message?: string
+	updatedRotate?: IRotate
+}
+
+const validateUpdateSubmission = async ({
+	userId,
+	formData,
+	schema,
+}: IntentActionArgs & {
+	schema: DesignRotateUpdateSchemaType
+}) => {
+	const strategy = new ValidateDesignParentSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema,
+		strategy,
+	})
+}
+
+export async function validateDesignTypeUpdateRotateValueSubmission(
+	args: IntentActionArgs,
+) {
+	return validateUpdateSubmission({
+		...args,
+		schema: EditDesignRotateValueSchema,
+	})
+}
+
+export async function validateDesignTypeUpdateRotateBasisSubmission(
+	args: IntentActionArgs,
+) {
+	return validateUpdateSubmission({
+		...args,
+		schema: EditDesignRotateBasisSchema,
+	})
+}
+
+const getRotateInstance = async ({ id }: { id: IRotate['id'] }) => {
+	return await findFirstRotateInstance({
+		where: { id },
+	})
+}
+
+// updating instance instead of regular prism update
+// this may not be easier, but it's more explicit
+export const updateDesignTypeRotateValue = async ({
+	id,
+	designId,
+	value,
+}: {
+	id: IRotate['id']
+	designId: IDesign['id']
+	value: number
+}): Promise<IDesignTypeRotateUpdatedResponse> => {
+	const rotate = await getRotateInstance({ id })
+	if (!rotate) return { success: false }
+
+	try {
+		const data = EditDesignRotateValueSchema.parse({ id, designId, value })
+		rotate.value = data.value
+		rotate.updatedAt = new Date()
+		await rotate.save()
+
+		return { success: true, updatedRotate: rotate }
+	} catch (error) {
+		// consider how to handle this error where this is called
+		console.log('updateDesignTypeRotateValue error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}
+
+export const updateDesignTypeRotateBasis = async ({
+	id,
+	designId,
+	basis,
+}: {
+	id: IRotate['id']
+	designId: IDesign['id']
+	basis: string
+}): Promise<IDesignTypeRotateUpdatedResponse> => {
+	const rotate = await getRotateInstance({ id })
+	if (!rotate) return { success: false }
+
+	try {
+		const data = EditDesignRotateBasisSchema.parse({ id, designId, basis })
+		rotate.basis = data.basis
+		rotate.updatedAt = new Date()
+		await rotate.save()
+
+		return { success: true, updatedRotate: rotate }
+	} catch (error) {
+		// consider how to handle this error where this is called
+		console.log('updateDesignTypeRotateBasis error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}

app/routes/resources+/api.v1+/design.type.rotate.update.basis.tsx

@@ -0,0 +1,53 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import {
+	updateDesignTypeRotateBasis,
+	validateDesignTypeUpdateRotateBasisSubmission,
+} from '#app/models/design-type/design-type.update.rotate.server'
+import { validateNoJS } from '#app/schema/form-data'
+import { requireUserId } from '#app/utils/auth.server'
+
+// https://www.epicweb.dev/full-stack-components
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	await requireUserId(request)
+	return json({})
+}
+
+export async function action({ request }: DataFunctionArgs) {
+	const userId = await requireUserId(request)
+	const formData = await request.formData()
+	const noJS = validateNoJS({ formData })
+
+	let updateSuccess = false
+	const { status, submission } =
+		await validateDesignTypeUpdateRotateBasisSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success } = await updateDesignTypeRotateBasis({
+			userId,
+			...submission.value,
+		})
+		updateSuccess = success
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission },
+		{
+			status: status === 'error' || !updateSuccess ? 404 : 200,
+		},
+	)
+}

app/routes/resources+/api.v1+/design.type.rotate.update.value.tsx

@@ -0,0 +1,53 @@
+import {
+	type LoaderFunctionArgs,
+	json,
+	type DataFunctionArgs,
+} from '@remix-run/node'
+import { redirectBack } from 'remix-utils/redirect-back'
+import {
+	updateDesignTypeRotateValue,
+	validateDesignTypeUpdateRotateValueSubmission,
+} from '#app/models/design-type/design-type.update.rotate.server'
+import { validateNoJS } from '#app/schema/form-data'
+import { requireUserId } from '#app/utils/auth.server'
+
+// https://www.epicweb.dev/full-stack-components
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	await requireUserId(request)
+	return json({})
+}
+
+export async function action({ request }: DataFunctionArgs) {
+	const userId = await requireUserId(request)
+	const formData = await request.formData()
+	const noJS = validateNoJS({ formData })
+
+	let updateSuccess = false
+	const { status, submission } =
+		await validateDesignTypeUpdateRotateValueSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success } = await updateDesignTypeRotateValue({
+			userId,
+			...submission.value,
+		})
+		updateSuccess = success
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission },
+		{
+			status: status === 'error' || !updateSuccess ? 404 : 200,
+		},
+	)
+}

app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/__components/sidebars.panel.artboard-version.designs.tsx

@@ -22,7 +22,7 @@ export const PanelArtboardVersionDesigns = ({
 		designs: orderedDesigns,
 	})
 	// remove trim after testing actions work for one design type
-	const designsTrimmed = designTypePanels.slice(0, 6)
+	const designsTrimmed = designTypePanels.slice(0, 7)
 	// const designsTrimmed = designTypePanels
 
 	const strategyEntityNew =

app/schema/rotate.ts

@@ -43,6 +43,10 @@ export const RotateDataSchema = z.object({
 	basis: RotateBasisSchema.optional(),
 })
 
+export type DesignRotateUpdateSchemaType =
+	| typeof EditDesignRotateValueSchema
+	| typeof EditDesignRotateBasisSchema
+
 export const EditDesignRotateValueSchema = z.object({
 	id: z.string(),
 	designId: z.string(),

app/services/design-type/update-rotate.service.ts

@@ -0,0 +1,68 @@
+import { type User } from '@sentry/remix'
+import {
+	type IDesignTypeRotateUpdatedResponse,
+	updateDesignTypeRotateValue,
+	updateDesignTypeRotateBasis,
+} from '#app/models/design-type/design-type.update.rotate.server'
+import { type IDesign } from '#app/models/design.server'
+import { type IRotate } from '#app/models/rotate.server'
+
+export const updateDesignTypeRotateValueService = async ({
+	userId,
+	id,
+	designId,
+	value,
+}: {
+	userId: User['id']
+	id: IRotate['id']
+	designId: IDesign['id']
+	value: number
+}): Promise<IDesignTypeRotateUpdatedResponse> => {
+	try {
+		return await updateDesignTypeRotateValue({
+			id,
+			designId,
+			value,
+		})
+		// later will be adding Activity class
+		// i.e, edit history so you can undo changes and/or see who made them
+	} catch (error) {
+		console.log('updateDesignTypeRotateValueService error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}
+
+export const updateDesignTypeRotateBasisService = async ({
+	userId,
+	id,
+	designId,
+	basis,
+}: {
+	userId: User['id']
+	id: IRotate['id']
+	designId: IDesign['id']
+	basis: string
+}): Promise<IDesignTypeRotateUpdatedResponse> => {
+	try {
+		return await updateDesignTypeRotateBasis({
+			id,
+			designId,
+			basis,
+		})
+		// later will be adding Activity class
+		// i.e, edit history so you can undo changes and/or see who made them
+	} catch (error) {
+		console.log('updateDesignTypeRotateBasisService error:', error)
+		const errorType = error instanceof Error
+		const errorMessage = errorType ? error.message : 'An unknown error occurred'
+		return {
+			success: false,
+			message: errorMessage,
+		}
+	}
+}