Proyectos de Subversion LeadersLinked - SPA

import { useDispatch } from 'react-redux'

import { Controller, useForm } from 'react-hook-form'

import { useHabitsUrls } from '@hooks'

import { savePreferences } from '@services/habits/daily-log'

import { addNotification } from '@store/notification/notification.actions'

import EmojiGroup from '@components/common/emoji-selector'

const EMOJI_PICKERS_POSITIONS = [

  { column: '2 / 3', row: 'auto' },

  { column: '1 / 2', row: '3 / 4' },

  { column: '3 / 4', row: '3 / 4' }

export default function SelfRating() {

  const [show, setShow] = useState(false)

  const formRef = useRef()

  const dispatch = useDispatch()

  const { categories, links, selectEmoji } = useHabitsUrls()

  const formValues = watch()

  const toggleShow = () => setShow(!show)

  const onSubmit = handleSubmit(async (data) => {

    try {

      const mediaResponse = await savePreferences(

        links.link_aspect_daily_log,

        data

      )

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }))

    }

  })

  useEffect(() => {

    const shouldDisplay = categories.every((cat) => !cat.selected)

    if (categories.length && shouldDisplay) {

      setShow(true)

    }

  }, [categories])

  useEffect(() => {

    const categoriesSelectedValues = Object.values(formValues)

    const areAllCategoriesSelected = categoriesSelectedValues.every(

      (val) => val !== undefined

    )

    if (categoriesSelectedValues.length && areAllCategoriesSelected) {

      onClick={toggleShow}

    >

      <Widget styles={{ maxWidth: '800px' }}>

        <Widget.Body>

          <Box

            component='form'

            sx={{

              display: 'grid',

              gridTemplateColumns: '1fr 1fr 1fr',

              gridTemplateRows: '1fr 1fr 1fr',

              gap: '1rem',

              placeItems: 'center'

            }}

            ref={formRef}

            onSubmit={onSubmit}

          >

            {categories?.map(({ uuid, name, emojis }, index) => (

              <Box

                key={uuid}

                sx={{

                  gridColumn: EMOJI_PICKERS_POSITIONS[index].column,

                  gridRow: EMOJI_PICKERS_POSITIONS[index].row

                }}

              >

                <Typography variant='h2' textAlign='center'>

                  {name}

                </Typography>

                <Controller

                  control={control}

                  name={name}

                  render={({ field: { onChange } }) => (

                    <EmojiGroup>

                      {emojis?.map(({ code, image }, index) => (

                        <EmojiGroup.Item

                          key={code}

                          image={image}

                          index={index}

                          onClick={(e) => {

                            selectEmoji(uuid, code)

                            onChange(code)

                          }}

                        />

                      ))}

                    </EmojiGroup>

                  )}

                />

              </Box>

            ))}

            <Box sx={{ gridColumn: '2 / 3', gridRow: '2 / 3' }}>

              <img

                src='/images/logo-app-02.png'

                alt='habits image'

                width={150}