A React component for estimating and scoring the quality of a domain name

DomainQualityMeter.tsx

import React, { useState, useEffect } from 'react'
import styled, { css } from 'styled-components'

/**
 * Domain Quality Criteria
 * 
 * - domain length
 * - if the domain has hyphens or not
 * - if the domain has numbers or not
 * - if the domain is using a common tld/extension
 * - if the domain has special characters/punycode/idn
 * - if the domain has any dictionary words in it
 */
interface IDomainQualityMeter {
    domainName: string
}

const DomainQualityMeter = ({ domainName }: IDomainQualityMeter) => {
    const [quality, setQuality] = useState<undefined | number>(undefined)

    const calculateQuality = () => {
        let points = 0

        if (!domainName) return setQuality(undefined)
        let parts = domainName.split('.')
        if (!parts.length) return setQuality(undefined)
        if (parts && parts.length > 2) parts = [parts[0], parts[1]]

        const [name, tld] = parts
        const hasHyphens = domainName.includes('-')
        const hasNumbers = !!domainName.match(/\d/)
        const hasCommonTld = !!domainName.match(/\.(com|net|org|io)/)

        if ( name ) {
            if (name.length <= 3) {
                points += 15
            } else if (name.length <= 5) {
                points += 10
            } else if (name.length <= 10) {
                points += 5
            } else if (name.length <= 15) {
                points += 2
            } else if (name.length <= 20) {
                points += 1
            } else if (name.length > 20 && name.length <= 25) {
                points -= 25
            } else if (name.length > 25) {
                points -= 50
            } else {
                points = 0
            }
        }

        if ( tld ) {
            if (tld.length <= 3) {
                points += 10
            } else {
                points += 5
            }
        }

        console.log(`points after length check: ${points}`)

        if (hasHyphens) {
            points += 15
        } else {
            points += 25
        }

        console.log(`points after hyphen check: ${points}`)

        if (hasNumbers) {
            points += 5
        } else {
            points += 25
        }

        console.log(`points after number check: ${points}`)

        if (hasCommonTld) {
            points += 25
        } else {
            points += 5
        }

        console.log(`points after tld check: ${points}`)

        const score = Math.round(points) / 100
        console.log({score})
        setQuality(score)
    }

    const qTint = () => {
       if (quality) {
            if (quality === 0) {
                return "black"
            } else if (quality < 0.3) {
                return "red"
            } else if (quality < 0.6) {
                return "orange"
            } else if (quality < 0.9) {
                return "yellow"
            } else if (quality < 1) {
                return "lime"
            } else if (quality === 1) {
                return "green"
            } else {
                return "transparent"
            }
       }
    }

    useEffect(calculateQuality, [domainName])

    const InnerBar = styled.div`
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;

        ${props => props.score && css`
            width: ${Math.round(props.score * 100)}%;
        `}

        ${props => props.color && css`
            background-color: ${qTint()};
        `}
    `

    return (
        <div className="flex flex-col">
            <h3 className="font-bold text-black dark:text-white text-lg my-2">
                Domain Analysis
            </h3>
            <div>
                <strong>Score: <span style={{color: qTint()}}>{quality ? `${Math.round(quality * 100)}%` : 'N/A'}</span></strong>
            </div>
            <p className="w-3/4 font-light text-black dark:text-white text-base leading-6">This is not a precise measure of monetary domain value, but more or less, domain quality. We don&apos;t provide an actual monetary value as we feel automated appraisals generally fall short or miss the mark completely.</p>
            <div className="w-3/4 h-6 bg-gray-300 mt-4 relative">
                <InnerBar score={quality || 0} color={qTint()} />
            </div>
        </div>
        
    )
}

export default DomainQualityMeter