timurcatakli

'use strict';

const path = require('path');
const webpack = require('webpack');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

timurcatakli

const publicPath = 'public';
// Node os module
// The os module provides a number of operating system-related utility methods.
// It can be accessed using:
const os = require('os');
// Using a single monolithic configuration file impacts comprehension and
// removes any potential for reusability.
// As the needs of your project grow, you have to figure out the means to manage
// webpack configuration more effectively.

timurcatakli

import { useState } from "react";

export const useFetch = () => {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");
    const [data, setData] = useState<any>([]);

    const fetchData = async (url: string) => {
        setLoading(true);
        try {

timurcatakli

import { useEffect, useRef, useState } from "react";

import { useFetch } from "./hooks/useFetch";
import { useIsInViewPort } from "./hooks/useIsInViewPort";

type BreedListType = {
    breed: string;
    image: string;
};

timurcatakli

import { useEffect, useMemo, useState } from "react";

function useIsInViewPort(ref) {
    const [isVisible, setIsVisible] = useState(false);

    const observer = useMemo(() => {
        return new IntersectionObserver(
            ([entry]) => {
                setIsVisible(entry.isIntersecting);
            },

timurcatakli

// This works based on https://developer.mozilla.org/en-US/docs/Web/CSS/@media
<style>
body {
  font-family: "Courier New", Courier, monospace;
  padding: 80px;
}

@media screen and (min-width: 600px) {
  body {
    background-color: tomato;

timurcatakli

Use MAP or SET

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

The Set object lets you store unique values of any type, whether primitive values or object references.

import _ from "lodash";

const items2 = [

timurcatakli

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#

timurcatakli

// Dhruven
// In the interview, I put myself in a rabbit hole
// with no possible solution
//
// What I was trying to do is to pass the arguments from the first
// function to the second function.
//
// The problem is the second function is return as a value
// therefore it is an independent function and there is no way for it to accept
// a value... The value needs to be passed as an argument by the executed function

timurcatakli

license: mit