5
\$\begingroup\$

I recently received the following code challenge in connection with a job interview. After submitting, I was rejected. I want to know what (if anything) I could have done better here.

Task

Your task is to translate the provided mockup into a fully functional address autocomplete component. A useGetAddresses hook is provided to get you started.

Requirements

The component should match the mockup as closely as possible. The component should be composed of reusable components where appropriate. You may use CSS, SCSS/SASS, or styled-components for styling. You may not use CSS frameworks for styling (Tailwind, Bootstrap, Foundation, Bulma, etc). You may not use CSS animation libraries (Animate CSS, CSShake, AnimXYZ, etc). You may not use UI component libraries (MUI, Next UI, Tailwind UI, Ant Design, etc). You may not use third-party hook libraries other than those provided.

Here is my code:

import {useGetAddresses} from './hooks/useGetAddresses';
import { useState,useEffect } from 'react';

//Style for loading wheel in text input box
var loadingWheelstyle=
{
  backgroundImage: "url('../src/images/loading.gif')",
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center right",
  backgroundSize: "contain"
  
}

//To show/hide results box at various points
var divStyle=
{
  opacity:"0"
}

function App() {

  //Component for results box
  function ListItem(properties:any)
  {
    const [bgColor,setBgColor] = useState("");
    const [fontColor,setFontColor] = useState("black")
    var style =
    {
      backgroundColor:bgColor,
      color:fontColor,
      padding:7,
      fontFamily:'Trebuchet MS'
      
      //fontFamily:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    }

    return(
      <div style={style} onClick={()=>{setAddressClicked(true);setFormInput(properties.text)}} onMouseLeave={()=>{setFontColor("black"),setBgColor("")}} onMouseOver={()=>{setFontColor("white"),setBgColor("#276ef1")}}>{properties.text}</div>
    )
  }

  
  const [formInput,setFormInput] = useState("");
  const [isLoading,setIsLoading] = useState(false);
  //To Prevent hook re-call after someone selects an address from the list
  const [addressClicked,setAddressClicked] = useState(false);
  
  var theData = useGetAddresses(formInput);
  var locList = [];
  if(theData.data != undefined && theData.data?.features)
    for(var i = 0;i<theData.data?.features.length;i++)
    {
      locList.push({key:i,data:theData.data?.features[i].properties.formatted.replace("United States of America","USA")});
    }
    useEffect(()=>{setIsLoading(false)})
   //setIsLoading(false);
  return(
    <div>
  
  
  <input name="myinput" value={formInput} onChange={(e)=>{setIsLoading(true);setAddressClicked(false);setFormInput(e.target.value)}} style = {isLoading?loadingWheelstyle:undefined} className="textField"/>
  
  <div style={(isLoading || formInput=="" || locList.length==0 || addressClicked)?divStyle:undefined} className="responseDiv">{locList.map((loc)=>{return(<ListItem key={loc.key} text={loc.data}/>)})}</div>
  
  
</div>
);
}



export default App

\$\endgroup\$

1 Answer 1

7
\$\begingroup\$

A few things you can improve:

  • Use const instead var
  • Don't use any as type
  • Move ListItem to a file. It shouldn't be declared inside another component
  • Prefer to using scss/css files to style your components, also styled-components is recomended. You can use css to change the font-color and background-color too. See hover. At least type the style objects using React.CSSProperties
  • Declare good names for your variables and inputs: myinput, formInput, theData is generic and does not inform what is the usage.
  • The useEffect is not being used properly. Read the docs!
  • Prefer using functional programing instead for block. You could use useMemo with .map to replace your function. You don't need to use key as the lenght, you can use data itself if it is unique.
  • You may found your code buggy if you don't debounce what happens on your onChange event. Don't forget that the code to find address is async.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.