3nvi

Hello

From markdown

Syntax	Description
Header	Title
Paragraph	Text

3nvi

import Defer from './Defer';
import Card from './Cefer';

const Component = ({ items }) => {
  return (
    <Defer chunkSize={5}>
      {items.map(item => <Card key={item.id} item={item} />)}
    </Defer>
  )
};

3nvi

const Defer = ({ chunkSize, children }) => {
  const [renderedItemsCount, setRenderedItemsCount] = React.useState(chunkSize);

  const childrenArray = React.useMemo(() => React.Children.toArray(children), [
    children
  ]);

  React.useEffect(() => {
    if (renderedItemsCount < childrenArray.length) {
      window.requestIdleCallback(

3nvi

import React from 'react';
import { useQuery, useQueryClient, UseQueryOptions } from 'react-query';
import realTimeApi from './real-time-api';

function useRealTimeQuery<Data>(
  firebasePathKey: string,
  useQueryOptions: UseQueryOptions<Data> = {}
) {
  const queryClient = useQueryClient();

3nvi

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

// This value is the default 403 code from firebase
const PERMISSION_DENIED_STATUS_CODE = 'PERMISSION_DENIED';

export interface RealTimeFetchParams {
  path: string;
}

3nvi

import React from 'react';
import { useHistory } from 'react-router-dom';

const useQuery = ({ url }) => {
  const history = useHistory();
  const [apiData, setApiData] = React.useState();
  
  React.useEffect(() => {
    fetch(url)
      .then(data => data.json())

3nvi

import React from "react";
import { get } from 'lodash';
import { useParams, Link } from "react-router-dom";
import useQuery from './useQuery';
import Page404 from "./Page404";

const DogPage = () => {
  const { breed } = useParams();
  const { data, statusCode } = useQuery({ 
    url: `https://dog.ceo/api/breed/${breed}/images/random`

3nvi

import React from 'react';
import { useHistory } from 'react-router-dom';

const useQuery = ({ url }) => {
  const history = useHistory();
  const [apiData, setApiData] = React.useState();
  
  React.useEffect(() => {
    fetch(url)
      .then(data => data.json())

3nvi

import React from 'react';
import { useLocation } from 'react-router-dom';
import { get } from 'lodash';
import Page404 from './Page404';

const ErrorHandler = ({ children }) => {
  const location = useLocation();

  switch (get(location.state, 'errorStatusCode')) {
    case 404:

3nvi

import React from "react";
import { useParams, Link } from "react-router-dom";
import { get } from 'lodash';
import useQuery from "./useQuery";

const DogPage = () => {
  const { breed } = useParams();
  const { data } = useQuery({ 
    url: `https://dog.ceo/api/breed/${breed}/images/random`
  });