create-nextjs-cms 0.5.8

package/templates/default/components/ProtectedImage.tsx

@@ -0,0 +1,143 @@
+import Image from 'next/image'
+import React, { useEffect } from 'react'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { AxiosInstance } from 'axios'
+import { base64ToBlob } from 'nextjs-cms/utils'
+
+const defaultDataPlaceholder: string =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkY2Q8AgABCwDWK6njxAAAAABJRU5ErkJggg=='
+
+async function getProtectedPhoto({
+    src,
+    axiosPrivate,
+}: {
+    src: string
+    axiosPrivate: AxiosInstance
+}): Promise<string | null> {
+    try {
+        const res = await axiosPrivate.get(src)
+        return res.data
+    } catch (error) {
+        return null
+    }
+}
+
+const ProtectedImage = ({
+    section,
+    photo,
+    isThumb = false,
+    alt,
+    width,
+    height,
+    fill = false,
+    className = 'rounded-3xl object-cover',
+    displayAs = 'blob',
+}: {
+    section: string
+    photo: string
+    isThumb?: boolean
+    alt: string
+    width: number
+    height: number
+    fill?: boolean
+    className?: string
+    displayAs?: 'blob' | 'base64'
+}) => {
+    const axiosPrivate = useAxiosPrivate()
+    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
+
+    // Use trpc?
+    /*
+    const { data, isLoading } = trpc.files.getPhoto.useQuery({
+        name: photo,
+        folder: section,
+        isThumb: isThumb,
+    })
+
+    useEffect(() => {
+        if (!data) return
+        switch (displayAs) {
+            case 'blob':
+                setSrcUrl(
+                    URL.createObjectURL(
+                        base64ToBlob({
+                            base64: data,
+                            contentType: 'image/webp',
+                            stripHeader: true,
+                        }),
+                    ),
+                )
+                break
+            case 'base64':
+                setSrcUrl(data)
+                break
+        }
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [data])
+    */
+    useEffect(() => {
+        if (!photo || !section) return
+        getProtectedPhoto({
+            src: `/photo?name=${photo}&folder=${section}&isThumb=${isThumb}`,
+            axiosPrivate: axiosPrivate,
+        }).then((res) => {
+            if (!res) return
+            switch (displayAs) {
+                case 'blob':
+                    setSrcUrl(
+                        URL.createObjectURL(
+                            base64ToBlob({
+                                base64: res,
+                                contentType: 'image/webp',
+                                stripHeader: true,
+                            }),
+                        ),
+                    )
+                    break
+                case 'base64':
+                    setSrcUrl(res)
+                    break
+            }
+        })
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [])
+
+    return (
+        <Image
+            alt={alt}
+            className={className}
+            src={srcUrl ? srcUrl : defaultDataPlaceholder}
+            width={fill ? undefined : width}
+            height={fill ? undefined : height}
+            style={
+                !fill
+                    ? {
+                          width: `${width}px`,
+                          height: 'auto',
+                      }
+                    : undefined
+            }
+            fill={fill ? true : undefined}
+            onLoad={(e) => {
+                // Revoke the blob url after the image is loaded
+                if (displayAs === 'blob' && srcUrl) {
+                    URL.revokeObjectURL(srcUrl)
+                }
+            }}
+        />
+    )
+}
+
+export default ProtectedImage

package/templates/default/components/ProtectedVideo.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react'
+import { useRefreshToken } from 'nextjs-cms/auth/hooks'
+import { useSession } from 'nextjs-cms/auth/react'
+
+const ProtectedVideo = ({
+    section,
+    fieldName,
+    file,
+    width,
+    height,
+    className = 'rounded-3xl object-cover',
+}: {
+    section: string
+    fieldName: string
+    file: string
+    width: number
+    height: number
+    className?: string
+}) => {
+    const refresh = useRefreshToken()
+    const ref = React.useRef<HTMLVideoElement>(null)
+    const [currentTime, setCurrentTime] = React.useState(0)
+    const [isSeeking, setIsSeeking] = React.useState(false)
+
+    const session = useSession()
+    useEffect(() => {
+        if (ref.current && currentTime) {
+            ref.current.currentTime = currentTime
+            ref.current.play().then(() => {})
+        }
+    }, [session])
+
+    return (
+        <div className={className}>
+            {/**
+             * The video will stream as long as the access token is valid
+             * If the access token expires, the video will pause
+             * A refresh token request will be sent to `/api/auth/refresh`
+             * If the refresh token is valid, the video will resume playing
+             * If the refresh token is invalid, the user will be logged out
+             */}
+            <video
+                ref={ref}
+                src={`/api/video?sectionName=${section}&fieldName=${fieldName}&name=${file}`}
+                className='max-w-full'
+                width={width}
+                controls={true}
+                height={height}
+                onErrorCapture={async (e) => {
+                    if (isSeeking) return
+                    setIsSeeking(true)
+                    // console.log('seeked')
+                    /**
+                     * Pause the video
+                     */
+                    e.currentTarget.pause()
+                    /**
+                     * Get the current time of the video and save it in the state
+                     */
+                    setCurrentTime(e.currentTarget.currentTime)
+                    /**
+                     * Refresh the access token
+                     * This will trigger the `useEffect` hook
+                     * and set the current time of the video
+                     * to the time it was paused at
+                     * and play the video
+                     */
+                    await refresh()
+                    setIsSeeking(false)
+                }}
+            />
+        </div>
+    )
+}
+
+export default ProtectedVideo

package/templates/default/components/SectionItemCard.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import getString from 'nextjs-cms/translations'
+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 { 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 { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const utils = trpc.useUtils()
+    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
+        onError: (error) => {
+            setModal({
+                title: getString('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: getString('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
+                        {getString('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'>
+                {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'
+                    >
+                        {getString('edit')}
+                    </Link>
+                    <Button
+                        onClick={() => {
+                            setModal({
+                                title: getString('delete'),
+                                body: (
+                                    <div className='p-4'>
+                                        <div className='flex flex-col gap-4'>
+                                            <div>{getString('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'
+                    >
+                        {getString('delete')}
+                    </Button>
+                </CardFooter>
+            </Card>
+        </>
+    )
+}

package/templates/default/components/SectionItemStatusBadge.tsx

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

package/templates/default/components/SectionPage.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import React, { RefObject, useEffect, useRef, useState } from 'react'
+import getString from 'nextjs-cms/translations'
+import { AxiosError } from 'axios'
+import InfoCard from '@/components/InfoCard'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { DropzoneHandles } from '@/components/Dropzone'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+
+export default function SectionPage({ section }: { section: string }) {
+    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 { isLoading, isError, data, error, refetch } = trpc.simpleSections.create.useQuery({
+        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: getString('sectionUpdatedSuccessfully'),
+                        description: res.data?.errors?.length
+                            ? getString('errorsInSubmit')
+                            : getString('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()
+        }
+    }, [])
+
+    return (
+        <div className='flex w-full flex-col overflow-hidden'>
+            {isLoading ? (
+                <div>
+                    <LoadingSpinners />
+                </div>
+            ) : null}
+            {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-gradient-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                        <h1 className='pb-4 text-4xl'>{data.section?.title}</h1>
+                        <span>
+                            /{getString('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>
+    )
+}

package/templates/default/components/SelectBox.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { Fragment, useState } from 'react'
+import { Listbox, Transition, ListboxOptions, ListboxOption, ListboxButton } from '@headlessui/react'
+import classNames from 'classnames'
+import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons'
+import { SelectOption } from 'nextjs-cms/core/fields'
+
+export default function SelectBox({
+    items,
+    defaultValue,
+    onChange = () => {},
+    classname,
+}: {
+    items: SelectOption[]
+    defaultValue?: string | number | undefined
+    onChange: any
+    classname: string
+}) {
+    // Set the selected item,
+    // check for defaultValue and set it if it exists,
+    const [selected, setSelected] = useState(
+        defaultValue ? items.filter((item) => item.value?.toString() === defaultValue)[0] : items[0],
+    )
+
+    /*useEffect(() => {
+        onChange(selected)
+    }, [selected])*/
+
+    /*useEffect(() => {
+        setSelected(defaultValue ? items.filter((item) => item.value?.toString() === defaultValue)[0] : items[0])
+    }, [defaultValue])*/
+
+    return (
+        <Listbox
+            as='div'
+            value={selected}
+            onChange={(value) => {
+                setSelected(value)
+                onChange(value)
+            }}
+        >
+            {({ open }) => (
+                <>
+                    {/*<Listbox.Label className='block text-sm font-medium leading-6 text-gray-900'>Fabrics</Listbox.Label>*/}
+                    <div className={`relative ${classname}`}>
+                        <ListboxButton className='relative w-full cursor-default rounded bg-input p-3 pe-1 ps-1 text-start text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6'>
+                            <span className='ml-3 block truncate'>{selected?.label ? selected.label : ''}</span>
+                            <span className='pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2'>
+                                <ChevronDownIcon className='h-5 w-5 text-gray-400' aria-hidden='true' />
+                            </span>
+                        </ListboxButton>
+
+                        <Transition
+                            show={open}
+                            as={Fragment}
+                            leave='transition ease-in duration-100'
+                            leaveFrom='opacity-100'
+                            leaveTo='opacity-0'
+                        >
+                            <ListboxOptions className='absolute z-40 mt-1 max-h-56 w-full overflow-auto rounded-md border bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
+                                {items.map((item: SelectOption, index: number) => (
+                                    <ListboxOption
+                                        key={`${item.label}-${index}`}
+                                        className={({ focus }) =>
+                                            classNames(
+                                                focus ? 'bg-indigo-600 text-white' : 'text-foreground',
+                                                'relative cursor-default select-none py-2 pe-1 ps-1',
+                                            )
+                                        }
+                                        value={item}
+                                    >
+                                        {({ selected, focus }) => (
+                                            <div className='flex flex-wrap items-center gap-1 px-3'>
+                                                {selected && item.value !== undefined ? (
+                                                    <div
+                                                        className={classNames(focus ? 'text-white' : 'text-foreground')}
+                                                    >
+                                                        <CheckIcon />
+                                                    </div>
+                                                ) : null}
+
+                                                <div
+                                                    className={classNames(selected ? 'font-extrabold' : 'font-normal')}
+                                                >
+                                                    {item.label}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </ListboxOption>
+                                ))}
+                            </ListboxOptions>
+                        </Transition>
+                    </div>
+                </>
+            )}
+        </Listbox>
+    )
+}