⏱ 0:01est. 13 min

Compliance Innovation Indiaprivate Limited

import { useEffect } from "react";
import "./styles.css";

// What's hydrate, how it's used with ssr
// What's polyfill
// Replace fetch with then
// Difference b/w React and Vue
// Redux 
/* fetch("https://jsonplaceholder.typicode.com/posts") // https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data
  .then(function (response) {
    // console.log(response.text());
    return response.json();
    // console.log(response.json());
  })
  .then((data) => {
    console.log("data", data);
  });
*/
// 


// https://jsonplaceholder.typicode.com/posts
// [
//   {
//     "userId": 1,
//     "id": 1,
//     "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
//     "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
//     },
// ]

export default function App() {
  const fetchData = () => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(function (response) {
        // console.log(response.text());
        return response.json();
        // console.log(response.json());
      })
      .then((data) => {
        console.log("data", data);
      });
    //const data = await response.json();
    // console.log(data);
    const arr = [1, 2, 3];
    // froEach // filter // map // flat
    Array.prototype.getFirst = function () {
      if (this?.length === 0) {
        return -1;
      }
      return this[0];
    };
    console.log("getFirst", arr.getFirst());
    const arr1 = [1, 2, 3, 4, 54, 5, 4, 5, 4];
    // "4:3"
    const obj = { 1: 1, 2: 1, 3: 1, 4: 3, 5: 2, 54: 1 };

    const mp = {};
    arr1.forEach((item) => {
      mp[item] = arr1.filter((i) => i === item).length;
    });
    console.log("map", mp);
    // (O(nxm))
    let highestFrequencyElement = -1;
    let highestFrequency = 0;
    for (key in mp) {
      if (highestFrequency < mp[key]) {
        highestFrequency = mp[key];
        highestFrequencyElement = key;
      }
    }

    console.log(
      "highestFrequencyElement",
      `${highestFrequencyElement}:${highestFrequency}`
    );

    for (let i = 0; i < arr1.length; i++) {
      let item = arr1[i];
      highestFrequency = 0;
      return "abcd";
      if (!map.has(item)) {
        map[item] = 1;
      } else {
        const updatedValue = map.get(item) + 1;
        map.set(item, updatedValue);
        if (highestFrequency < updatedValue) {
          highestFrequency = updatedValue;
          highestFrequencyElement = item;
        }
      }
    }
    console.log("map", map);
  };

  useEffect(() => {
    console.log("component has mounted");
    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}


// css
// write your name in center of the page
<div className="App">
  <div className="name">Nishant</div>
</div>
.App {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

// create custom hook useCounter, auto increment on click
import React from "react";

function useCounter() {
  const [count, setCount] = React.useState(0);
  return [count, setCount];
}

export default useCounter;

// create custom local storage
// constructor
function localStorage() {
  if (!window) {
    return;
  }
}

localStorage.prototype.setLocalItem = function (key, value) {
  if (!value === "string") {
    value = JSON.stringify(value);
  }
  return window.localStorage.set(key, value);
};

localStorage.prototype.getLocalItem = function (key) {
  return window.localStorage.get(key);
};

export default new localStorage();

import localStorage from "./localStorage";
localStorage.setLocalItem("new", "value");
localStorage.get("new");

// How do you achieve lazy loading. Lazy/Suspnese in react
// Create custom hook counter
const onClickCounter = () => {
  setInterval(() => {
    setCount((prev) => prev + 1);
  }, 100);
};

// use React.ref and focus an input
const onClickHandler = () => {
  if (inputRef?.current) {
    inputRef.current.focus();
  }
};
<input ref={inputRef} />
<button onClick={onClickHandler}>Focus input</button>

// What's virtual dom
// What are closures in javascript
// what is hoisting
// What's prototype in javascript


// HM Round
/**
 *  Build an app which could send money from one user to another
 *  - 10k and increasing 1k per month
 *  - Requirements - Functional/Non-functional
 *  - Building (Monolithic/Micro service)
 *  - How ACID works in this 
 * - FE
 *  - How will you secure user on FE
 *  - JWT, SSL?
 *  - JWT can be used by anyone to fetch data from postman
 *  - CSRF?
 *  - How does third party login integration done
 *    - explain OAUTH
 * 
 * */