movies autocomplete exercise

At one of my interviews a was asked to create autocomplete that search movies and displays results.
I quickly created some input that handles changes and populates the state with the input:

export default function App() {
  const [term, setTerm] = useState("");
  useEffect(() => {
    // request logic...
  }, [term])
  return (
    <div className="App">
      <h1>
        <input
          onChange={(e) => setTerm(e.target.value)}
        />
      </h1>
      <h2>Term: {term}
    </div>
  );
}

the problem here, that changes populated imediately. and request sent for every character...
This can lead to performance issues and also - it is not exactly what user wants - he wants to start search after he finished to type the term...

Debounce

Instead we can take advantage of so called - debounce technique:
This means we only startnig the search after we indicated that user finished typing
If no typing happened for some period (one second in our case) only then we send a search request:

let debounceTimer;

const debounce = (callback, time) => {
  window.clearTimeout(debounceTimer);
  debounceTimer = window.setTimeout(callback, time);
};
export default function App() {
  const [term, setTerm] = useState("");
  useEffect(() => {
    // request logic...
  }, [term])
  return (
    <div className="App">
      <h1>
        <input
          onChange={(e) => debounce(() => {
           setTerm(e.target.value), 1000)}
          }
        />
      </h1>
      <h2>Term: {term}
    </div>
  );
}

Something about unit testing - After more than year!

It is importnat to understand what is a purpose of a unit test...
the prupose is to check only things that module (or component) is responsible of
example: if you have a toggle component like here:
code:

export function Toggle() {
  return (
    <label className="switch" role="toggle">
      <input type="checkbox" role="hidden-input" />
      <span className="slider round" />
    </label>
  );
}

you need to ask yourself: what is this thing responsible of? is it repsonsble for display nice slider and hide the real simple checkbox?
the answer is "yes", and this is exactly the thing you need to test:

Binary Tree Height Exersise

Recently i was at interview and asked following question:
Lest say, there is a binary tree like this:

Write a function which returns a highest level of the tree (in our exmaple is 3)

Solution

Here is a solution i came up with:
My assumption was that node structure has "name" property with node data and "children" with list of pointers to children nodes:

const tree = {
  name: 'a',
  children: [
    {
      name: 'b',
      children: [
        {
          name: 'd',
          children: []
        },
        {
          name: 'e',
          children: [{
               name: 'g',
               children: []
             },{
               name: 'h',
               children: []
             }        
          }]
        }       
      ]
    },
    {
      name: 'c',
      children: [
        {
          name: 'f',
          children: []
        },
        {
          name: 'g',
          children: []
        }        
      ]
    }    
  ]
}

Here is my solution:
I did it iterative way, because recursion can have space complexity issues

 
 function treeHeight(rootnode) {
    let nodes = [rootnode], maxLevel = 1; 
    nodes[0].level = 1;
    // loop through all the nodes
    while(nodes.length) {
       let node = nodes[0]
      
       if (node.children.length) {
         nodes = nodes.concat(node.children.map(ch => {ch.level = node.level + 1; return ch;})); /* if node has children - push them to the end of queue */
       }
       maxLevel = maxLevel < node.level ? node.level : maxLevel;    /* set maxLevel if some node level is bigger;*/
       nodes.shift(); /* remove the first node at each iteration */
    }
  
  	return maxLevel
}