⏱ 0:00est. 12 min

Tekion

// Question 1
const cache = new Map();


function memoize(fn) {
  const context = this;
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log('called cache');
      return JSON.parse(cache.get(key));
    }
    
    const result = fn.call(context, ...args);
    cache.set(key, JSON.stringify(result));
    return result
  }
}
 
const add = (a, b, c) => {
  console.log(a + b + c)
  return a+b+c;
};

const memoizedAdd = memoize(add);
memoizedAdd(1,2,3) // computes
memoizedAdd(1,2,3) // does not compute
memoizedAdd(1,2,3) // does not compute


// Question 2
function executeInSequence(...tasks) {
  let sequence = Promise.resolve();
  let result = [];
  tasks.forEach(task => {
    sequence = sequence.then(task);
    result = result.concat(sequence);
  });

  return sequence;
}

function createPromise(waitMs) {
  return new Promise(resolve => setTimeout(resolve, waitMs));
}

executeInSequence(
  () => createPromise(1000).then(() => console.log('1')),
  () => createPromise(2000).then(() => console.log('2')),
  () => console.log('3'),
  () => createPromise(4000).then(() => console.log('4'))
);

// Question 3
// https://codesandbox.io/p/sandbox/dreamy-zeh-zttfnf?file=%2Fsrc%2FApp.js%3A1%2C1-125%2C1
import React from "react";
import "./styles.css";

const ShowUsers = ({ isShowingList, sortType }) => {
  const [users, setUsers] = React.useState(null);

  const setFilteredUsers = (userList) => {
    console.log("sortType", sortType);
    if (userList === null) {
      return userList;
    }

    // return setUsers(
    //   userList.sort((userA, userB) => {
    //     if (
    //       sortType === sortTypes.ASC &&
    //       userA.name.length > userB.name.length
    //     ) {
    //       return 1;
    //     } else if (
    //       sortType === sortTypes.DESC &&
    //       userA.name.length < userB.name.length
    //     ) {
    //       return -1;
    //     } else {
    //       return 0;
    //     }
    //   })
    // );
    // Ascending order

    switch (sortType) {
      case sortTypes.ASC:
        return setUsers(
          userList.sort((userA, userB) => userA.name.length - userB.name.length)
        );
      case sortTypes.DESC:
        return setUsers(
          userList.sort((userA, userB) => userB.name.length - userA.name.length)
        );
      default:
        return setUsers(
          userList.sort((userA, userB) => userA.name.length - userB.name.length)
        );
    }
  };

  async function getUsers() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await response.json();
    setFilteredUsers(data);
  }

  React.useEffect(() => {
    setFilteredUsers(users);
  }, [sortType]);

  React.useEffect(() => {
    if (isShowingList) getUsers();
  }, [isShowingList]);

  if (users === null) {
    return <div> ... </div>;
  }

  return (
    <ul>
      {users.map((user) => {
        return (
          <li key={user.id}>
            {" "}
            {user.name} {user.name.length}{" "}
          </li>
        );
      })}
    </ul>
  );
};

const Actions = ({ handleShowList, handleChangeSortType }) => {
  return (
    <div>
      <button onClick={handleShowList}>Show List</button>
      <button onClick={handleChangeSortType}>Sort List</button>
    </div>
  );
};

const sortTypes = {
  DEFAULT: "DEFAULT",
  ASC: "ASC",
  DESC: "DESC",
};

export default function App() {
  const [isShowingList, setIsShowingList] = React.useState(false);
  const [sortType, setSortType] = React.useState(sortTypes.DEFAULT);

  const handleShowList = () => {
    setIsShowingList(true);
  };

  const handleChangeSortType = () => {
    if (sortType === sortTypes.DEFAULT) {
      setSortType(sortTypes.ASC);
    } else if (sortType === sortTypes.ASC) {
      setSortType(sortTypes.DESC);
    } else {
      setSortType(sortTypes.DEFAULT);
    }
  };

  return (
    <div className="App">
      <h1> User List</h1>
      <Actions
        handleShowList={handleShowList}
        handleChangeSortType={handleChangeSortType}
      />
      <hr />
      <ShowUsers isShowingList={isShowingList} sortType={sortType} />
    </div>
  );
}