cupid-dust

export interface Customer {
  id: string;
  address1?: string;
  address2?: string;
  avatar?: string;
  balance?: number;
  city?: string;
  country?: string;
  currency?: string;

cupid-dust

import type { Customer } from '../types/customer';

cupid-dust

class CustomerApi {
  getCustomers() {
    const customers = [
      {
        id: '5e887ac47eed253091be10cb',
        avatar: '/static/mock-images/avatars/avatar-carson_darrin.png',
        city: 'Cleveland',
        country: 'USA',
        currency: '$',

cupid-dust

import type { Customer } from '../types/customer';

class CustomerApi {
  getCustomers(): Promise<Customer[]> {
    const customers: Customer[] = [
      {
        id: '5e887ac47eed253091be10cb',
        avatar: '/static/mock-images/avatars/avatar-carson_darrin.png',
        city: 'Cleveland',
        country: 'USA',

cupid-dust

import { useEffect, useState, useCallback } from 'react';
import { Customer } from './types/customer';
import { customerApi } from './__fakeApi__/customerApi';
import useMounted from './hooks/useMounted';
import './App.css';

function App() {
  const mounted = useMounted();
  const [customers, setCustomers] = useState<Customer[]>([]);

cupid-dust

import { useEffect, useRef } from 'react';
import type { MutableRefObject } from 'react';

const useMounted = (): MutableRefObject<boolean> => {
  const isMounted = useRef(true);

  useEffect(
    () => (): void => {
      isMounted.current = false;
    },

cupid-dust

import { Suspense, lazy } from 'react';
import LoadingScreen from './components/LoadingScreen';

const Loadable = (Component: any) => (props: JSX.IntrinsicAttributes) =>
  (
    <Suspense fallback={<LoadingScreen />}>
      <Component {...props} />
    </Suspense>
  );

cupid-dust

import { Suspense, lazy } from 'react';
import LoadingScreen from './components/LoadingScreen';

const Loadable = (Component: any) => (props: JSX.IntrinsicAttributes) =>
  (
    <Suspense fallback={<LoadingScreen />}>
      <Component {...props} />
    </Suspense>
  );

cupid-dust

import { Suspense, lazy } from 'react';
import LoadingScreen from './components/LoadingScreen';
import type { RouteObject } from 'react-router';

const Loadable = (Component: any) => (props: JSX.IntrinsicAttributes) =>
  (
    <Suspense fallback={<LoadingScreen />}>
      <Component {...props} />
    </Suspense>
  );

cupid-dust

import { Suspense, lazy } from 'react';
import type { RouteObject } from 'react-router';
import LoadingScreen from './components/LoadingScreen';
import MainLayout from './layout/MainLayout';

const Loadable = (Component: any) => (props: JSX.IntrinsicAttributes) =>
  (
    <Suspense fallback={<LoadingScreen />}>
      <Component {...props} />
    </Suspense>