⏱ 0:01est. 12 min

Bitgo

/*
// https://www.glassdoor.co.in/Interview/BitGo-Senior-Software-Engineer-Interview-Questions-EI_IE1912848.0,5_KO6,30.htm
- 2 leetcode medium questions related to recursion and window sliding
- Basic crud operation in react
- Shortest distance in the graph

// https://leetcode.com/discuss/interview-experience/1937742/bitgo-sde2-feb-2022-reject

// https://www.glassdoor.co.in/Interview/BitGo-Software-Engineer-Interview-Questions-EI_IE1912848.0,5_KO6,23.htm
- stale closure
  - https://medium.com/@anandsimmy7/stale-closures-and-react-hooks-ea60689a3544

-  Leetcode board game questions, medium difficulty

- Linked List
- Infix to postfix
- sliding window problem related to substring
- Design payment systems like Venmo

// https://github.com/joekinney-png/bitgo
// https://github.com/selvamanigovindaraj/bitgo-interview

- printTriangle
- printTriangleWithLinearSpace
  - https://github.com/prashantrai/Algo_DS_InterviewPrep/blob/ab9986dbd7c6d59f2eb36e0c98904c0d4b8bc9e2/src/interview/BitGoPascalTriangle.java#L4

// https://github.com/YPAzevedo/GoStack-Challenge01

// https://leetcode.com/company/bitgo/
- Zigzag Conversion
*/

// https://codesandbox.io/p/sandbox/confident-galois-883dlz?file=%2Fsrc%2FApp.js%3A42%2C36
import React, {useState} from "react";

/*
List 1 = ['A','B','C'];

List 2 = [];

--- 
OnClick -> a,b,c -> transfer to List 2
---
click a List 1
output
List 1 = ['B','C'];

List 2 = ['A'];

-
click a List 2
output
List 1 = ['B','C', 'A'];

List 2 = [];


*/

// 
// Move up/Move down
  // - should be disable if the operation is invalid
// Check boxes
  // - multiple selection


// config
import React, {useState, useEffect} from "react";

/*
List 1 = ['A','B','C'];

List 2 = [];

--- 
OnClick -> a,b,c -> transfer to List 2
---
click a List 1
output
List 1 = ['B','C'];

List 2 = ['A'];

-
click a List 2
output
List 1 = ['B','C', 'A'];

List 2 = [];


*/

// 
// Move up/Move down
  // - should be disable if the operation is invalid
// Check boxes
  // - multiple selection


// config
const listA = ['a', 'b', 'c'];
const listB = [];
const config = {
  listA, listB
}

const ListItem = ({item, handleOnClick}) => {
  const [isChecked, setIsChecked] = useState(false);
  const handleOnCheck = () => {
    setIsChecked(!isChecked);
    handleOnClick(item);
  }

  return <li key={item}><input type="checkbox" checked={isChecked} onClick={handleOnCheck}/>{item}</li>
}
const List = ({list, handleOnClick}) => {
  return (
  <ul>
    { list.map((item) => <ListItem item={item} handleOnClick={handleOnClick}/>) }
  </ul>
  )
}

export default function App() {
  const [listA, setListA] = useState(config.listA);
  const [listB, setListB] = useState(config.listB);
  const [tempA, setTempA] = useState([]);
  const [tempB, setTempB] = useState([]);
  const [isMoveUpValid, setIsMoveUpValid] = useState(false);
  const [isMoveDownValid, setIsMoveDownValid] = useState(false);
  
  // const handleOnClickA = (item) => {
  //     setListB((prevData) => [...prevData, item]);
  //     const newList = listA.filter((subject) => subject!=item);
  //     setListA(newList);
  // }

  // const handleOnClickB = (item) => {
  //   setListA((prevData) => [...prevData, item]);
  //   const newList = listB.filter((subject) => subject!=item);
  //   setListB(newList); 
  // }

  useEffect(() => {
    setIsMoveUpValid(isMoveUpDisabled(listB, tempB))
  }, [listB, tempB]);

  useEffect(() => {
    setIsMoveDownValid(isMoveDownDisabled(listA, tempA))
  }, [listA, tempA]);

  const isMoveUpDisabled = (list, temp) => {
    if (Boolean(list.length)) {
      return true;
    }
    if (Boolean(temp.length)) {
      return true;
    }

    return false;
    // if nothing is checked
  }


  const isMoveDownDisabled = () => {
    if (Boolean(listA.length)) {
      return true;
    }
    if (Boolean(tempA.length)) {
      return true;
    }

    return false;
    // if nothing is checked
  }

  const handleOnClickA = (item) => {
    setTempA((prevState) => [...prevState, item]);
  }

  const handleOnClickB = (item) => {
    setTempB((prevState) => [...prevState, item]);
  }

  const handleMoveUp = () => {
    setListA((prevState) => [...prevState, ...tempB] )
    setListB((prevState) => [...prevState.filter((obj) => !tempB.includes(obj))])
    setTempB([]);
  }
  const handleMoveDown = () => {
    setListB((prevState) => [...prevState, ...tempA] )
    setListA((prevState) => [...prevState.filter((obj) => !tempA.includes(obj))])
    setTempA([]);
  }

  return (
    <div className="App">
      <h1>ListA</h1>
        <List list={listA} handleOnClick={handleOnClickA}/>
        <button onClick={handleMoveUp} disabled={!isMoveUpValid}>Move Up</button>
        <button onClick={handleMoveDown} disabled={!isMoveDownValid}>Move Down</button>
      <h1>ListB</h1>
        <List list={listB} handleOnClick={handleOnClickB}/>
    </div>
  );
}