📦 payloadcms / plugin-seo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60'use client'

import React, { useCallback, useEffect, useState } from 'react'
import { useAllFormFields, useForm } from 'payload/components/forms'
import { Field } from 'payload/dist/admin/components/forms/Form/types'

import { defaults } from '../defaults'

const {
  title: { minLength: minTitle, maxLength: maxTitle },
  description: { minLength: minDesc, maxLength: maxDesc },
} = defaults

export const Overview: React.FC = () => {
  const { dispatchFields, getFields } = useForm()

  const [
    {
      'meta.title': { value: metaTitle } = {} as Field,
      'meta.description': { value: metaDesc } = {} as Field,
      'meta.image': { value: metaImage } = {} as Field,
    },
  ] = useAllFormFields()

  const [titleIsValid, setTitleIsValid] = useState<boolean | undefined>()
  const [descIsValid, setDescIsValid] = useState<boolean | undefined>()
  const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()

  const resetAll = useCallback(() => {
    const fields = getFields()
    const fieldsWithoutMeta = fields
    fieldsWithoutMeta['meta.title'].value = ''
    fieldsWithoutMeta['meta.description'].value = ''
    fieldsWithoutMeta['meta.image'].value = ''
    // dispatchFields(fieldsWithoutMeta);
  }, [dispatchFields, getFields])

  useEffect(() => {
    if (typeof metaTitle === 'string')
      setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)
    if (typeof metaDesc === 'string')
      setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)
    setImageIsValid(Boolean(metaImage))
  }, [metaTitle, metaDesc, metaImage])

  const testResults = [titleIsValid, descIsValid, imageIsValid]

  const numberOfPasses = testResults.filter(Boolean).length

  return (
    <div
      style={{
        marginBottom: '20px',
      }}
    >
      <div>{`${numberOfPasses}/${testResults.length} checks are passing`}</div>
    </div>
  )
}