@spacemade/ui 0.0.1

package/src/components/post/form/UpdatePostForm.tsx

@@ -0,0 +1,639 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { useMemo, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import { Avatar, Checkbox, CheckboxGroup, useCheckboxGroup } from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import {
+	EntityApprovedStatus,
+	EntityApprovedStatusLabeled,
+	EntityStatus,
+	Post,
+	PostPayload,
+} from '@store/model'
+import { useGetPostCategoriesQuery } from '@store/slice/api/categoriesApiSlice'
+import { useGetPreviousAndNextPostQuery } from '@store/slice/api/postApiSlice'
+import { useGetUsersForAdminQuery } from '@store/slice/api/userApiSlice'
+import { useGetProductsQuery } from '@store/slice/api/productsApiSlice'
+import { useListProvidersQuery } from '@store/slice/api/providerApiSlice'
+import { usePostStore } from '@hooks'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import AdvanceAccordion from '@components/common/forms/AdvanceAccordion'
+import { CheckBox } from '@components/common/forms/CheckBox'
+import DateTimePicker from '@components/common/forms/DateTimePicker'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import TagInput from '@components/common/forms/TagInput'
+import Textarea from '@components/common/forms/Textarea'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { MediaPickerBox } from '@components/media/items/MediaPickerBox'
+import { PostNextAndPrevButtons } from '@components/post/block/PostNextAndPrevButtons'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE, SLUG_REGEX } from '@helpers/constants'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { defaultAvatar } from '@helpers/images'
+import { getUserNameFromUser } from '@helpers/string'
+import { ButtonWithActions } from '@components/common/button/ButtonWithActions'
+
+const HTMLEditor = dynamic(() => import('@components/common/forms/HTMLEditor'), {
+	ssr: false,
+})
+
+interface FormValues extends FieldValues {
+	name: string
+	slug: string
+	intro: string | null
+	content: string | null
+	isFeatured: boolean
+	status: string
+	startDatetime: Date[] | Date | string | null
+	endDatetime?: Date[] | Date | string | null
+	tags: string[]
+	ownerId?: string
+	providerId?: string
+	productId?: string
+	approvedStatus?: EntityApprovedStatus
+}
+
+enum FormAction {
+	SaveAndContinue = 'save-and-continue',
+}
+
+const UpdatePostForm = ({ post }: { post: Post }) => {
+	const router = useRouter()
+	const formRef = useRef(null)
+
+	const { data: categories } = useGetPostCategoriesQuery({ mode: 'options' })
+
+	const sortedCategories = useMemo(() => {
+		if (!categories) return []
+
+		return [...categories].sort((a: any, b: any) => {
+			const labelA = String(a?.label || a?.name || '')
+			const labelB = String(b?.label || b?.name || '')
+			return labelA.localeCompare(labelB)
+		})
+	}, [categories])
+
+	const { savePost, removePost, isPostSlugAvailable } = usePostStore()
+
+	const { data: prevAndNextData } = useGetPreviousAndNextPostQuery({
+		postId: post.id,
+	})
+
+	const { value: checkedCategories, getCheckboxProps } = useCheckboxGroup({
+		defaultValue: post.categories && post.categories?.map((category) => category.id),
+	})
+
+	const [featuredMediaIdSelected, setFeaturedMediaIdSelected] = useState<
+		string | null | undefined
+	>(undefined)
+
+	const [userNameLike, setUserNameLike] = useState<string | undefined>(undefined)
+
+	const { data: users } = useGetUsersForAdminQuery({
+		nameLike: userNameLike,
+		isAdmin: true,
+		isEditor: true,
+		flagFetchCondition: 'OR',
+		limit: 20,
+	})
+
+	const userList = useMemo(() => {
+		let results = users?.results || []
+		const currentOwner = post.owner
+
+		if (currentOwner && !userNameLike) {
+			const found = results.find((item) => item.id === currentOwner.id)
+			if (!found) {
+				results = [...[currentOwner], ...results]
+			}
+		}
+
+		return results
+	}, [users?.results, post.owner, userNameLike])
+
+	// ✅ NEW: Provider lookup (optional)
+	const [providerNameLike, setProviderNameLike] = useState<string | undefined>(undefined)
+
+	const { data: providers } = useListProvidersQuery({
+		q: providerNameLike,
+		limit: 100,
+		isAdmin: true,
+	} as any)
+
+	const providerList = useMemo(() => {
+		let results: any[] = providers?.results || []
+		const currentProvider = (post as any).provider
+
+		if (currentProvider && !providerNameLike) {
+			const found = results.find((item) => item.id === currentProvider.id)
+			if (!found) {
+				results = [currentProvider, ...results]
+			}
+		}
+
+		return results
+	}, [providers?.results, (post as any).provider, providerNameLike])
+
+	// ✅ NEW: Product lookup (optional)
+	const [productNameLike, setProductNameLike] = useState<string | undefined>(undefined)
+
+	const { data: products } = useGetProductsQuery({
+		nameLike: productNameLike,
+		showAll: true,
+		limit: 20,
+	} as any)
+
+	const productList = useMemo(() => {
+		let results: any[] = (products as any)?.results || []
+		const currentProduct = (post as any).product
+
+		if (currentProduct && !productNameLike) {
+			const found = results.find((item) => item.id === currentProduct.id)
+			if (!found) {
+				results = [currentProduct, ...results]
+			}
+		}
+
+		return results
+	}, [(products as any)?.results, (post as any).product, productNameLike])
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		getValues,
+		clearErrors,
+		setValue,
+		control,
+		watch,
+		formState: { errors, isSubmitting },
+	} = useForm<FormValues>({
+		defaultValues: {
+			name: post.name,
+			slug: post.slug,
+			intro: post.intro,
+			content: post.content,
+			status: (post as any).status,
+			isFeatured: (post as any).isFeatured,
+			startDatetime: (post as any).startDatetime,
+			endDatetime: (post as any).endDatetime,
+			ownerId: (post as any).ownerId,
+			approvedStatus: (post as any).approvedStatus,
+			tags: (post as any).tags?.map((tag: any) => tag.name) || [],
+			providerId: (post as any).providerId || 'none',
+			productId: (post as any).productId || 'none',
+		},
+	})
+
+	const selectedProviderId = watch('providerId')
+	const watchedContent = watch('content')
+	const watchedName = watch('name')
+	const watchedSlug = watch('slug')
+	const watchedIntro = watch('intro')
+	const watchedStatus = watch('status')
+	const watchedApprovedStatus = watch('approvedStatus')
+	const watchedProductId = watch('productId')
+	const watchedIsFeatured = watch('isFeatured')
+	const watchedTags = watch('tags')
+
+	const editorAIContext = useMemo(
+		() => ({
+			entityType: 'post',
+			entityId: post.id,
+			fieldName: 'content',
+			projectId: null,
+			formContext: {
+				name: watchedName || null,
+				slug: watchedSlug || null,
+				intro: watchedIntro || null,
+				status: watchedStatus || null,
+				approvedStatus: watchedApprovedStatus || null,
+				isFeatured: !!watchedIsFeatured,
+				providerId: selectedProviderId || null,
+				productId: watchedProductId || null,
+				categoryIds: checkedCategories || [],
+				tags: watchedTags || [],
+			},
+		}),
+		[
+			post.id,
+			selectedProviderId,
+			watchedName,
+			watchedSlug,
+			watchedIntro,
+			watchedStatus,
+			watchedApprovedStatus,
+			watchedIsFeatured,
+			watchedProductId,
+			checkedCategories,
+			watchedTags,
+		]
+	)
+
+	const onDeletePost = async () => {
+		await removePost(post)
+		router.push(`/admin/posts`)
+		toast.success('Your Post has been deleted successfully')
+	}
+
+	const onSubmit: SubmitHandler<FormValues> = async (data, event) => {
+		const startDatetime = Array.isArray(data.startDatetime)
+			? data.startDatetime[0]
+			: data.startDatetime
+
+		try {
+			await savePost(false, {
+				...(post as any),
+				...(data as any),
+				startDatetime,
+				categories: checkedCategories,
+				featuredMediaId: featuredMediaIdSelected,
+				providerId: data.providerId === 'none' ? null : data.providerId,
+				productId: data.productId === 'none' ? null : data.productId,
+			} as PostPayload)
+
+			toast.success('Your post has been saved successfully')
+
+			const action = (event?.nativeEvent as { submitter: HTMLButtonElement }).submitter
+				.dataset.action
+
+			if (action === FormAction.SaveAndContinue && prevAndNextData?.next) {
+				router.push(`/admin/posts/${prevAndNextData?.next}`)
+			}
+		} catch (error: any) {
+			setError('server-error' as any, { type: 'custom', message: 'server-error' })
+			toast.error(
+				error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+					? error.data.message
+					: DEFAULT_ERROR_MESSAGE
+			)
+		}
+	}
+
+	const AdvanceAccordionComponent = () => {
+		return (
+			<AdvanceAccordion objectName={post.name} entityName='post' onDelete={onDeletePost}>
+				{/* your accordion contents (if any) */}
+			</AdvanceAccordion>
+		)
+	}
+
+	return (
+		<>
+			<form ref={formRef} onSubmit={handleSubmit(onSubmit)} className='pb-8 pb-lg-0'>
+				<div className='d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4 mt-3'>
+					<AppPageTitle title='Update Post'></AppPageTitle>
+					<div className='d-flex align-items-center gap-3'>
+						<a
+							href={`/blog/${post.id}?preview=true`}
+							className='btn link btn-outline-light-gray text-dark px-4 rounded'
+							target='_blank'
+							rel='noopener noreferrer'
+							aria-label='Go to post preview'
+						>
+							Preview
+						</a>
+
+						<ButtonWithActions
+							label='Save'
+							buttonType='submit'
+							isLoading={isSubmitting}
+							onClick={() => clearErrors(['server-error' as any])}
+							actions={[
+								{
+									icon: 'save',
+									label: 'Save & Continue',
+									buttonType: 'submit',
+									dataAction: FormAction.SaveAndContinue,
+									isDisabled: !prevAndNextData?.next,
+									onClick: () => clearErrors(['server-error' as any]),
+								},
+							]}
+						/>
+
+						<PostNextAndPrevButtons postId={post.id} isDisabled={isSubmitting} />
+					</div>
+				</div>
+
+				<div className='row mx-auto g-4 g-lg-5'>
+					<div className='col-lg-8 ps-lg-0'>
+						<div className='w-100 mt-4 mt-lg-0'>
+							<div>
+								<Input
+									register={register('name', { required: 'This field is required' })}
+									errors={errors as any}
+									placeholder='Enter Your Post Name'
+									label='Name'
+									getValues={getValues}
+									assistantContext={editorAIContext}
+								/>
+							</div>
+
+							<div className='mt-4'>
+								<Input
+									register={register('slug', {
+										required: 'This field is required',
+										pattern: {
+											value: SLUG_REGEX,
+											message:
+												'The slug must only contain lowercase letters, numbers, and hyphen',
+										},
+										minLength: {
+											value: 2,
+											message: 'Your post slug must have at least 2 characters',
+										},
+										validate: async (value) => await isPostSlugAvailable(value, post as any),
+									})}
+									customErrorMessage='This slug is already taken'
+									errors={errors as any}
+									placeholder='Enter your post slug'
+									label='Slug'
+									getValues={getValues}
+									assistantContext={editorAIContext}
+								/>
+							</div>
+
+							<div className='mt-4'>
+								<Textarea
+									register={register('intro')}
+									errors={errors as any}
+									label='Intro'
+									placeholder='Enter your intro paragraph '
+									helperText='Content that appears as an introductory paragraph on the blogroll.'
+									getValues={getValues}
+									assistantContext={editorAIContext}
+								/>
+							</div>
+
+							<div className='mt-4'>
+								<HTMLEditor
+									labelText='Content'
+									name='content'
+									value={watchedContent || ''}
+									onChange={(value) => setValue('content', value)}
+									post={post as any}
+									aiContext={editorAIContext}
+									height={1000}
+								/>
+							</div>
+						</div>
+
+						<div className='mt-4 d-none d-lg-block'>
+							<AdvanceAccordionComponent />
+						</div>
+					</div>
+
+					<div className='col-lg-4 pe-lg-0'>
+						<div className='mb-3 bg-white border border-light-gray rounded-md p-3'>
+							<h2 className='h5 mb-3'>Details</h2>
+							<div className='d-flex gap-2 align-items-center mb-3'>
+								<Avatar
+									name={(post as any).modifier?.name || '?'}
+									src={(post as any).modifier?.profileMedia?.media.sourceUrl || defaultAvatar}
+								/>
+								<div>
+									<p className='mb-0'>
+										By{' '}
+										<span className='fw-bold'>
+											{(post as any).modifier && getUserNameFromUser((post as any).modifier)}
+										</span>
+									</p>
+									<p className='mb-0'>
+										On <span>{FullDateAndTimeFormat((post as any).updatedAt)}</span>
+									</p>
+								</div>
+							</div>
+
+							<p className='mb-0'>
+								Approval Status:{' '}
+								<span
+									className={`fw-bold text-${EntityApprovedStatusLabeled[(post as any).approvedStatus].color
+										}`}
+								>
+									{EntityApprovedStatusLabeled[(post as any).approvedStatus].label}
+								</span>
+							</p>
+						</div>
+
+						<div className='mb-4'>
+							<MediaPickerBox
+								label='Post Image'
+								helperText='Click to select an image. This will appear in the post header and normal blogroll feed'
+								defaultMediaSelected={(post as any).featuredMedia?.media}
+								onSelectImage={setFeaturedMediaIdSelected}
+							/>
+						</div>
+
+						<div className='mb-4'>
+							<CheckBox control={control} name='isFeatured' label='Featured' />
+						</div>
+
+						<div className='mb-4'>
+							<Select
+								register={register('ownerId')}
+								errors={errors as any}
+								label='Author'
+								options={
+									userList.map((user: any) => ({
+										value: user.id,
+										label:
+											user.name +
+											(user.firstName ? ` (${user.firstName + ' ' + (user.lastName || '')})` : ''),
+										image: user.profileMedia?.media.sourceUrl || defaultAvatar,
+									})) || []
+								}
+								control={control}
+								getValues={getValues}
+								setFirstAsDefault={false}
+								onInputChange={(value) => setUserNameLike(value)}
+								formatOptionLabel={(option) => (
+									<div className='d-flex gap-2 align-items-center'>
+										{option.image && (
+											<OptimizedImage
+												src={option.image}
+												alt='user profile image'
+												width={25}
+												height={25}
+												className='object-fit-cover rounded-pill'
+											/>
+										)}
+										<span>{option.label}</span>
+									</div>
+								)}
+							/>
+						</div>
+
+						<div className='mb-4'>
+							<Select
+								label='Provider'
+								register={register('providerId')}
+								errors={errors as any}
+								options={[
+									{ value: 'none', label: '— None —', image: null },
+									...(providerList.map((provider: any) => ({
+										value: provider.id,
+										label: provider.label || provider.key,
+										image:
+											provider.iconMedia?.media?.sourceUrl ||
+											provider.featuredMedia?.media?.sourceUrl ||
+											provider.logoUrl ||
+											null,
+									})) || []),
+								]}
+								control={control}
+								getValues={getValues}
+								setFirstAsDefault={false}
+								onInputChange={(value) => setProviderNameLike(value)}
+								formatOptionLabel={(option) => (
+									<div className='d-flex gap-2 align-items-center'>
+										{option.image ? (
+											<OptimizedImage
+												src={option.image}
+												alt='provider icon'
+												width={22}
+												height={22}
+												className='object-fit-cover rounded-pill'
+											/>
+										) : (
+											<div
+												className='rounded-pill border border-light-gray'
+												style={{ width: 22, height: 22 }}
+											/>
+										)}
+										<span>{option.label}</span>
+									</div>
+								)}
+							/>
+						</div>
+
+						<div className='mb-4'>
+							<Select
+								label='Product (Optional)'
+								register={register('productId')}
+								errors={errors as any}
+								options={[
+									{ value: 'none', label: '— None —', image: null },
+									...(productList.map((product: any) => ({
+										value: product.id,
+										label: product.name,
+										image: product.productIconMedia?.media?.sourceUrl || null, // ✅ icon
+									})) || []),
+								]}
+								control={control}
+								getValues={getValues}
+								setFirstAsDefault={false}
+								onInputChange={(value) => setProductNameLike(value)}
+								formatOptionLabel={(option) => (
+									<div className='d-flex gap-2 align-items-center'>
+										{option.image ? (
+											<OptimizedImage
+												src={option.image}
+												alt='product icon'
+												width={22}
+												height={22}
+												className='object-fit-cover rounded-pill'
+											/>
+										) : (
+											// optional fallback “blank” icon circle to keep alignment consistent
+											<div
+												className='rounded-pill border border-light-gray'
+												style={{ width: 22, height: 22 }}
+											/>
+										)}
+										<span>{option.label}</span>
+									</div>
+								)}
+							/>
+						</div>
+
+						<div className='mb-4'>
+							<Select
+								label='Approved Status'
+								register={register('approvedStatus', { required: 'This field is required' })}
+								errors={errors as any}
+								options={[
+									{
+										value: EntityApprovedStatus.approved,
+										label: EntityApprovedStatusLabeled.approved.label,
+									},
+									{
+										value: EntityApprovedStatus.awaitingApproval,
+										label: EntityApprovedStatusLabeled.awaiting_approval.label,
+									},
+									{
+										value: EntityApprovedStatus.notApproved,
+										label: EntityApprovedStatusLabeled.not_approved.label,
+									},
+								]}
+								control={control}
+								getValues={getValues}
+								setFirstAsDefault={false}
+							/>
+						</div>
+
+						<div className='mb-4'>
+							<Select
+								label='Status'
+								register={register('status', { required: 'This field is required' })}
+								errors={errors as any}
+								options={[
+									{ value: EntityStatus.draft, label: 'Draft' },
+									{ value: EntityStatus.live, label: 'Live' },
+								]}
+								control={control}
+								getValues={getValues}
+								setFirstAsDefault={false}
+							/>
+						</div>
+
+						<span className='mb-3 d-block lead'>Schedule Post (Optional)</span>
+
+						<div className='mb-4'>
+							<DateTimePicker
+								register={register('startDatetime')}
+								label={`Start Time`}
+								control={control}
+								getValues={getValues}
+								setValue={setValue}
+								errors={errors as any}
+								minDate={new Date()}
+							/>
+						</div>
+
+						<div className='mb-4'>
+							<p className='mb-3 d-block lead'>Tags</p>
+							<TagInput setValue={setValue} register={register('tags')} control={control} />
+						</div>
+
+						<div className='mt-5'>
+							<p className='mb-3 d-block lead'>Categories</p>
+							<CheckboxGroup defaultValue={checkedCategories}>
+								<div className='d-flex flex-column gap-3 w-fit-content'>
+									{sortedCategories.map((category, key) => (
+											<Checkbox
+												key={key}
+												className='checkbox-lg'
+												{...getCheckboxProps({ value: category.value })}
+											>
+												{category.label}
+											</Checkbox>
+										))}
+								</div>
+							</CheckboxGroup>
+						</div>
+
+						<div className='mt-4 d-lg-none'>
+							<AdvanceAccordionComponent />
+						</div>
+					</div>
+				</div>
+			</form>
+		</>
+	)
+}
+
+export default UpdatePostForm