create-nextjs-cms 0.7.0 → 0.7.2

package/templates/default/components/SectionItemCard.tsx

@@ -1,144 +1,144 @@
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import useModal from '@/hooks/useModal'
-import ProtectedImage from '@/components/ProtectedImage'
-import SectionItemStatusBadge from '@/components/SectionItemStatusBadge'
-import { displayDateFromString } from 'nextjs-cms/utils'
-import Link from 'next/link'
-import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { PersonIcon } from '@radix-ui/react-icons'
-import { trpc } from '@/app/_trpc/client'
-import type { RouterOutputs } from 'nextjs-cms/api'
-
-// Used to get elements of array types as types
-type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never
-
-export default function SectionItemCard({
-    sectionName,
-    item,
-    action,
-}: {
-    sectionName: string
-    item: ArrElement<RouterOutputs['hasItemsSections']['listItems']['items']>
-    action: any
-}) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const utils = trpc.useUtils()
-    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('delete'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
-                        {error.message}
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-
-        onSuccess: async (data) => {
-            await utils.hasItemsSections.listItems.invalidate({
-                sectionName: sectionName,
-            })
-            action()
-            setModal({
-                title: t('delete'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
-                        {t('itemDeletedSuccessfully')}
-                    </div>
-                ),
-                headerColor: 'bg-green-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-    })
-    const handleDelete = async () => {
-        deleteMutation.mutate({
-            sectionName: sectionName,
-            sectionItemId: item.id,
-        })
-    }
-
-    return (
-        <>
-            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
-                {item.coverPhoto ? (
-                    <div className='relative h-[200px]'>
-                        {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}
-                        <ProtectedImage
-                            className='h-64 w-full object-cover'
-                            photo={item.coverPhoto}
-                            section={sectionName}
-                            isThumb={true}
-                            alt={'item'}
-                            width={100}
-                            height={50}
-                            fill={true}
-                        />
-                    </div>
-                ) : null}
-                <CardHeader className='p-6'>
-                    <CardTitle className='text-xl font-bold'>{item.headingTitle}</CardTitle>
-                </CardHeader>
-                <CardContent className='mt-2'>
-                    <div className='flex flex-row flex-wrap gap-1'>
-                        <PersonIcon fontSize='small' /> {item.createdBy},{' '}
-                        {displayDateFromString(item.createdAt, 'en', false, ',')}
-                    </div>
-                </CardContent>
-                <CardFooter className='absolute bottom-0 start-0 flex h-[85px] w-full justify-between p-6'>
-                    <Link
-                        href={`/edit/${sectionName}/${item.id}`}
-                        className='rounded bg-primary px-3 py-1 font-semibold text-primary-foreground'
-                    >
-                        {t('edit')}
-                    </Link>
-                    <Button
-                        onClick={() => {
-                            setModal({
-                                title: t('delete'),
-                                body: (
-                                    <div className='p-4'>
-                                        <div className='flex flex-col gap-4'>
-                                            <div>{t('deleteItemText')}</div>
-                                            <div className='flex gap-2'>
-                                                <button
-                                                    className='rounded bg-success px-2 py-1 text-success-foreground'
-                                                    onClick={handleDelete}
-                                                >
-                                                    Yes
-                                                </button>
-                                                <button
-                                                    className='rounded bg-destructive px-2 py-1 text-destructive-foreground'
-                                                    onClick={() => {
-                                                        setModal(null)
-                                                    }}
-                                                >
-                                                    No
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                ),
-                                headerColor: 'bg-red-700',
-                                titleColor: 'text-white',
-                                lang: 'en',
-                            })
-                        }}
-                        variant='destructive'
-                        className='rounded px-3 py-1 font-semibold'
-                    >
-                        {t('delete')}
-                    </Button>
-                </CardFooter>
-            </Card>
-        </>
-    )
-}
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import useModal from '@/hooks/useModal'
+import ProtectedImage from '@/components/ProtectedImage'
+import SectionItemStatusBadge from '@/components/SectionItemStatusBadge'
+import { displayDateFromString } from 'nextjs-cms/utils'
+import Link from 'next/link'
+import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { PersonIcon } from '@radix-ui/react-icons'
+import { trpc } from '@/app/_trpc/client'
+import type { RouterOutputs } from 'nextjs-cms/api'
+
+// Used to get elements of array types as types
+type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never
+
+export default function SectionItemCard({
+    sectionName,
+    item,
+    action,
+}: {
+    sectionName: string
+    item: ArrElement<RouterOutputs['hasItemsSections']['listItems']['items']>
+    action: any
+}) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const utils = trpc.useUtils()
+    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
+        onError: (error) => {
+            setModal({
+                title: t('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
+                        {error.message}
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            await utils.hasItemsSections.listItems.invalidate({
+                sectionName: sectionName,
+            })
+            action()
+            setModal({
+                title: t('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
+                        {t('itemDeletedSuccessfully')}
+                    </div>
+                ),
+                headerColor: 'bg-green-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+    })
+    const handleDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: sectionName,
+            sectionItemId: item.id,
+        })
+    }
+
+    return (
+        <>
+            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
+                {item.coverPhoto ? (
+                    <div className='relative h-[200px]'>
+                        {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}
+                        <ProtectedImage
+                            className='h-64 w-full object-cover'
+                            photo={item.coverPhoto}
+                            section={sectionName}
+                            isThumb={true}
+                            alt={'item'}
+                            width={100}
+                            height={50}
+                            fill={true}
+                        />
+                    </div>
+                ) : null}
+                <CardHeader className='p-6'>
+                    <CardTitle className='text-xl font-bold'>{item.headingTitle}</CardTitle>
+                </CardHeader>
+                <CardContent className='mt-2'>
+                    <div className='flex flex-row flex-wrap gap-1'>
+                        <PersonIcon fontSize='small' /> {item.createdBy},{' '}
+                        {displayDateFromString(item.createdAt, 'en', false, ',')}
+                    </div>
+                </CardContent>
+                <CardFooter className='absolute bottom-0 start-0 flex h-[85px] w-full justify-between p-6'>
+                    <Link
+                        href={`/edit/${sectionName}/${item.id}`}
+                        className='rounded bg-primary px-3 py-1 font-semibold text-primary-foreground'
+                    >
+                        {t('edit')}
+                    </Link>
+                    <Button
+                        onClick={() => {
+                            setModal({
+                                title: t('delete'),
+                                body: (
+                                    <div className='p-4'>
+                                        <div className='flex flex-col gap-4'>
+                                            <div>{t('deleteItemText')}</div>
+                                            <div className='flex gap-2'>
+                                                <button
+                                                    className='rounded bg-success px-2 py-1 text-success-foreground'
+                                                    onClick={handleDelete}
+                                                >
+                                                    Yes
+                                                </button>
+                                                <button
+                                                    className='rounded bg-destructive px-2 py-1 text-destructive-foreground'
+                                                    onClick={() => {
+                                                        setModal(null)
+                                                    }}
+                                                >
+                                                    No
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ),
+                                headerColor: 'bg-red-700',
+                                titleColor: 'text-white',
+                                lang: 'en',
+                            })
+                        }}
+                        variant='destructive'
+                        className='rounded px-3 py-1 font-semibold'
+                    >
+                        {t('delete')}
+                    </Button>
+                </CardFooter>
+            </Card>
+        </>
+    )
+}

package/templates/default/components/SectionItemStatusBadge.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Badge } from '@/components/ui/badge'
-
-const SectionItemStatusBadge = ({ status }: { status: number }) => {
-    const t = useI18n()
-    return (
-        <Badge
-            variant={status === 1 ? 'success' : 'destructive'}
-            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
-        >
-            {status === 1 ? t('approved') : t('pendingApproval')}
-        </Badge>
-    )
-}
-
-export default SectionItemStatusBadge
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Badge } from '@/components/ui/badge'
+
+const SectionItemStatusBadge = ({ status }: { status: number }) => {
+    const t = useI18n()
+    return (
+        <Badge
+            variant={status === 1 ? 'success' : 'destructive'}
+            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
+        >
+            {status === 1 ? t('approved') : t('pendingApproval')}
+        </Badge>
+    )
+}
+
+export default SectionItemStatusBadge

package/templates/default/components/SectionPage.tsx

@@ -1,125 +1,125 @@
-'use client'
-
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { RefObject, useEffect, useRef, useState } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { AxiosError } from 'axios'
-import InfoCard from '@/components/InfoCard'
-import { DropzoneHandles } from '@/components/Dropzone'
-import { useToast } from '@/components/ui/use-toast'
-import { trpc } from '@/app/_trpc/client'
-import Form from '@/components/form/Form'
-import ErrorComponent from './ErrorComponent'
-
-export default function SectionPage({ section }: { section: string }) {
-    const t = useI18n()
-    const [progress, setProgress] = useState(0)
-    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [response, setResponse] = useState<any>(null)
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-    const { toast } = useToast()
-    const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
-
-    const [data, {refetch, error, isError}] = trpc.simpleSections.create.useSuspenseQuery({
-        sectionName: section,
-    })
-
-    const handleSubmit = async (formData: FormData) => {
-        setIsSubmitting(true)
-        if (isSubmitting) return
-        setResponse(null)
-        formData.append('sectionName', section)
-        formData.append('formType', 'edit')
-        formData.append('sectionType', 'has_items')
-        try {
-            const res = await axiosPrivate.put(`/submit/section/simple`, formData, {
-                signal: controller.signal,
-                onUploadProgress: (progressEvent) => {
-                    if (!progressEvent.total) return
-                    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
-                    // Update progress bar value here
-                    setProgress(progress)
-
-                    if (progress === 100) {
-                        setProgressVariant('query')
-                    }
-                },
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            })
-
-            if (res) {
-                setIsSubmitting(false)
-                setProgress(0)
-                setProgressVariant('determinate')
-                if (res.status === 200) {
-                    toast({
-                        variant: res.data?.errors?.length ? 'warning' : 'success',
-                        title: t('sectionUpdatedSuccessfully'),
-                        description: res.data?.errors?.length
-                            ? t('errorsInSubmit')
-                            : t('sectionUpdatedSuccessfully'),
-                    })
-
-                    // Refetch the page
-                    await refetch()
-                }
-            }
-        } catch (error: AxiosError | any) {
-            setIsSubmitting(false)
-            setProgress(0)
-            setProgressVariant('determinate')
-            if (error?.response?.data) {
-                setResponse(<InfoCard result={{ key: 'danger', title: error.response.data.error, status: false }} />)
-            }
-        }
-    }
-
-    function cancelSubmit() {
-        controller.abort()
-        setIsSubmitting(false)
-        setProgress(0)
-        setProgressVariant('determinate')
-    }
-
-    useEffect(() => {
-        return () => {
-            cancelSubmit()
-        }
-    }, [])
-
-
-    if (data.error) {
-            return <ErrorComponent message={data.error.message} />
-    }
-
-    return (
-        <div className='flex w-full flex-col overflow-hidden'>
-            {isError ? <div>{error?.message}</div> : null}
-            {data ? (
-                <div className='flex w-full flex-col'>
-                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
-                        <h1 className='pb-4 text-4xl'>{data.section?.title}</h1>
-                        <span>
-                            /{t('edit')} {data.section?.title}
-                        </span>
-                    </div>
-                    <Form
-                        formType='edit'
-                        progressVariant={progressVariant}
-                        response={response}
-                        progress={progress}
-                        data={data}
-                        dropzoneRef={dropzoneRef}
-                        handleSubmit={handleSubmit}
-                        isSubmitting={isSubmitting}
-                    />
-                </div>
-            ) : null}
-        </div>
-    )
-}
+'use client'
+
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { RefObject, useEffect, useRef, useState } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { AxiosError } from 'axios'
+import InfoCard from '@/components/InfoCard'
+import { DropzoneHandles } from '@/components/Dropzone'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+import ErrorComponent from './ErrorComponent'
+
+export default function SectionPage({ section }: { section: string }) {
+    const t = useI18n()
+    const [progress, setProgress] = useState(0)
+    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [response, setResponse] = useState<any>(null)
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+    const { toast } = useToast()
+    const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
+
+    const [data, {refetch, error, isError}] = trpc.simpleSections.create.useSuspenseQuery({
+        sectionName: section,
+    })
+
+    const handleSubmit = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        setResponse(null)
+        formData.append('sectionName', section)
+        formData.append('formType', 'edit')
+        formData.append('sectionType', 'has_items')
+        try {
+            const res = await axiosPrivate.put(`/submit/section/simple`, formData, {
+                signal: controller.signal,
+                onUploadProgress: (progressEvent) => {
+                    if (!progressEvent.total) return
+                    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+                    // Update progress bar value here
+                    setProgress(progress)
+
+                    if (progress === 100) {
+                        setProgressVariant('query')
+                    }
+                },
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            })
+
+            if (res) {
+                setIsSubmitting(false)
+                setProgress(0)
+                setProgressVariant('determinate')
+                if (res.status === 200) {
+                    toast({
+                        variant: res.data?.errors?.length ? 'warning' : 'success',
+                        title: t('sectionUpdatedSuccessfully'),
+                        description: res.data?.errors?.length
+                            ? t('errorsInSubmit')
+                            : t('sectionUpdatedSuccessfully'),
+                    })
+
+                    // Refetch the page
+                    await refetch()
+                }
+            }
+        } catch (error: AxiosError | any) {
+            setIsSubmitting(false)
+            setProgress(0)
+            setProgressVariant('determinate')
+            if (error?.response?.data) {
+                setResponse(<InfoCard result={{ key: 'danger', title: error.response.data.error, status: false }} />)
+            }
+        }
+    }
+
+    function cancelSubmit() {
+        controller.abort()
+        setIsSubmitting(false)
+        setProgress(0)
+        setProgressVariant('determinate')
+    }
+
+    useEffect(() => {
+        return () => {
+            cancelSubmit()
+        }
+    }, [])
+
+
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
+
+    return (
+        <div className='flex w-full flex-col overflow-hidden'>
+            {isError ? <div>{error?.message}</div> : null}
+            {data ? (
+                <div className='flex w-full flex-col'>
+                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
+                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                        <h1 className='pb-4 text-4xl'>{data.section?.title}</h1>
+                        <span>
+                            /{t('edit')} {data.section?.title}
+                        </span>
+                    </div>
+                    <Form
+                        formType='edit'
+                        progressVariant={progressVariant}
+                        response={response}
+                        progress={progress}
+                        data={data}
+                        dropzoneRef={dropzoneRef}
+                        handleSubmit={handleSubmit}
+                        isSubmitting={isSubmitting}
+                    />
+                </div>
+            ) : null}
+        </div>
+    )
+}