SpeedLimitSection/hooks/useUpdateReviewTable.tsx

import React, { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { speedLimitItemType, StatusTypes } from '../types'

const useUpdateReviewTable = () => {
  const lang = useSelector((state: any) => state.language)

  const customFields = useMemo(() => {
    const fields = [
      {
        key: 'type',
        label: 'Type',
        _style: {
          background: 'white',
          textAlign: 'center',
          display: 'none',
          verticalAlign: 'middle'
        }
      },
      {
        key: 'data',
        label: 'data',
        _style: {
          background: 'white',
          textAlign: 'center',
          display: 'none'
        }
      }
    ]

    return fields
  }, [lang])

  const renderCustomCells = () => {
    const renderType = (status: StatusTypes) => {
      switch (status) {
        case StatusTypes.NewAdded:
          return (
            <span className="text-sm text-green-400 font-semibold">Add</span>
          )
        case StatusTypes.Edited:
          return (
            <span className="text-sm text-yellow-300 font-semibold">
              Modify
            </span>
          )
        case StatusTypes.Delete:
          return (
            <span className="text-sm text-red-400 font-semibold">Delete</span>
          )
      }
    }

    return {
      type: (item: speedLimitItemType, index: number) => {
        return (
          <td className={`p-0 text-center w-[20%] align-middle border-none`}>
            {renderType(item?.status!)}
          </td>
        )
      },
      data: (item: speedLimitItemType, index: number) => {
        return (
          <td className={` p-0 text-center w-[80%] align-middle border-none`}>
            <div className="flex items-center justify-center gap-2 my-2">
              <span>{item.type}</span>
              <span>|</span>
              <span>
                {item?.new_subdivision &&
                item.new_subdivision !== item?.subdivision ? (
                  <>
                    <span className="line-through">{item?.subdivision}</span>
                    <span className="font-bold"> → {item.new_subdivision}</span>
                  </>
                ) : (
                  item?.subdivision
                )}
              </span>
              <span>|</span>
              <span>
                {item?.new_speed_limit_mph ? (
                  <>
                    <span className="line-through">
                      {item?.speed_limit_mph}
                    </span>
                    <span className="font-bold">
                      → {item?.new_speed_limit_mph}
                    </span>{' '}
                    mph
                  </>
                ) : (
                  <span> {item?.speed_limit_mph} mph</span>
                )}
              </span>
              <span>|</span>
              <span>
                From{' '}
                {item?.new_start_mile ? (
                  <>
                    <span className="line-through">{item?.start_mile}</span>
                    <span className="font-bold">→ {item?.new_start_mile}</span>
                  </>
                ) : (
                  item?.start_mile
                )}
              </span>
              <span>
                to{' '}
                {item?.new_end_mile ? (
                  <>
                    <span className="line-through">{item?.end_mile}</span>
                    <span className="font-bold">→ {item?.new_end_mile}</span>
                  </>
                ) : (
                  item?.end_mile
                )}
              </span>
            </div>
          </td>
        )
      }
    }
  }
  return {
    fields: customFields,
    customCells: renderCustomCells()
  }
}

export default useUpdateReviewTable