Comp.js - versão enviada a eles

import { useRouter } from 'next/router'
import { countryCodes } from '../../models/countryCodes'
import { sanitizeLicensePlate } from '../../helpers/licensePlateHelper'
import { getMessages } from '../../helpers/apiHelper'
import useSWR from 'swr'
import moment from 'moment'
import { useState, useEffect } from 'react'
 
export default () => {
    const router = useRouter()
    const [ isReady, setIsReady ] = useState(false)
    const [ isCountryValid, setCountryValid ] = useState(false)
    const { countryCode, licensePlate } = router.query

    useEffect(() => {
      if (!countryCode || !licensePlate)
      {
          setCountryValid(false)
          setIsReady(true)
      }else{
        // validate country code
        let country = countryCodes.find(c => c.code == countryCode);
        let countryIsValid = country != null;
        let plateIsValid = sanitizeLicensePlate(licensePlate) == licensePlate;
      
        if (!countryIsValid || !plateIsValid)
        {
          setCountryValid(false)
          setIsReady(true)
        }
      }
    }, [countryCode, licensePlate])
 
    // need to check getMessages
    const { data, error } = useSWR(() => `${countryCode}/${licensePlate}`, getMessages)

    if(!data || !isReady){
      return <p>Loading...</p>
    }
    if(isReady && !isCountryValid){
      return <p>Country not found!</p>
    }
    if(isReady && !data){
      return <p>Loading...</p>
    }

    let list = <p>Loading...</p>;
    if (data && Array.isArray(data))
    {
        if (data.length == 0)
        {
            list = <p>No messages yet</p>
        }
        else
        {
            list = <ul>{data.map((message, index) => (<li key={`m${index}`}>
                <div className="card">
                    <div className="avatar">
                        <i className="fa fa-user-secret fa-2x"></i>
                    </div>
                    <div className="content">
                        <p>{message.content}</p>
                        <span><i className="fas fa-mobile-alt"></i> @ {moment.utc(message.created).local().format("YYYY-MM-DD H:mm:ss")}</span>
                    </div>
                </div>
            </li>))}</ul>
        }
    }
    if (error)
    {
        list = <p>Error</p>
    }
  return (
    <div className="horizontal-flex">
        <header>
            <div className="logo vertical with-margin">
                <div>
                    <h1>carmsngr</h1>
                </div>
            </div>
        </header>
 
        <main>
            <h2><i className={`flag-icon flag-icon-${countryCode}`}></i> {country.plateDisplay(licensePlate)}</h2>
              {list}
            <div>
                <p className="black">To submit a message send an SMS or WhatsApp message in the following format:<br /><strong>{`${countryCode},${licensePlate},{your message}`}</strong><br />(e.g. "{`${countryCode},${licensePlate},Your left brake light is broken`}")<br />to <strong>+1 (334) 367-4637</strong>.<br />Following countries are supported: cz, sk, at, de, pl</p>
            </div>
        </main>
       
    </div>
  )
}

Comp.js - versão gerada no vídeo

import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import { countryCodes } from '../../models/countryCodes'
import { sanitizeLicensePlate } from '../../helpers/licensePlateHelper'
import { getMessages } from '../../helpers/apiHelper'
import useSWR from 'swr'
import moment from 'moment'

const Layout = ({ children, countryCode = '', licensePlateDisplay = '' }) => {
    return (
        <div className="horizontal-flex">
            <header>
                <div className="logo vertical with-margin">
                    <div>
                        <h1>carmsngr</h1>
                    </div>
                </div>
            </header>

            <main>
                { countryCode !== '' && <h2><i className={`flag-icon flag-icon-${countryCode}`}></i> {licensePlateDisplay}</h2> }
                {children}
                <div>
                    <p className="black">To submit a message send an SMS or WhatsApp message in the following format:<br /><strong>{`${countryCode},${licensePlate},{your message}`}</strong><br />(e.g. "{`${countryCode},${licensePlate},Your left brake light is broken`}")<br />to <strong>+1 (334) 367-4637</strong>.<br />Following countries are supported: cz, sk, at, de, pl</p>
                </div>
            </main>
        </div>
    )
}

export default () => {
    const router = useRouter()
    const { countryCode, licensePlate } = router.query
    const [ isValid, setIsValid ] = useState(false)
    const [ isReady, setIsReady ] = useState(false)
    const [ validData, setValidData ] = useState(null)

    const { data, error } = useSWR(() => `${validData.countryCode}/${validData.licensePlate}`, getMessages)

    useEffect(() => {
        setIsReady(true)
        if (!countryCode || !licensePlate) {
            setIsValid(false)
        }else{
            // validate country code
            let country = countryCodes.find(c => c.code == countryCode);
            let countryIsValid = country != null;
            let plateIsValid = sanitizeLicensePlate(licensePlate) == licensePlate;

            if (!countryIsValid || !plateIsValid) {
                setIsValid(false)
            }else{
                setIsValid(true)
                setValidData({
                    countryCode,
                    licensePlate,
                    licensePlateDisplay: country.plateDisplay(licensePlate)
                })
            }
        }
    }, [ countryCode, licensePlate ])

    if (!isReady){
        return <Layout>Loading...</Layout>
    }
    if (!isValid){
        return <Layout>Not found...</Layout>
    }
    if(!data){
        return <Layout>Loading...</Layout>
    }
    if(error){
        return <Layout>Error loading data...</Layout>
    }

    if (data.length == 0) {
        return (
            <Layout countryCode={countryCode} licensePlateDisplay={validData.licensePlateDisplay}>
                <p>No messages yet</p>
            </Layout>
        )
    }
    return (
        <Layout countryCode={countryCode} licensePlateDisplay={validData.licensePlateDisplay}>
            <ul>
                { data.map((message, index) => (
                    <li key={`m${index}`}>
                        <div className="card">
                            <div className="avatar">
                                <i className="fa fa-user-secret fa-2x"></i>
                            </div>
                            <div className="content">
                                <p>{message.content}</p>
                                <span><i className="fas fa-mobile-alt"></i> @ {moment.utc(message.created).local().format("YYYY-MM-DD H:mm:ss")}</span>
                            </div>
                        </div>
                    </li>
                    )
                )}
            </ul>
        </Layout>
    )
}