10 Frontend Components

Frontend Components

Alerts

code ./packages/web/src/components/AlertCombo.tsx

import { AxiosCustomError } from '@neo4j-crud/shared';
import { ErrorAlert, LoadingAlert } from './';

type AlertComboProps = {
  error: AxiosCustomError | null;
  isLoading: boolean;
  noData: any;
};

export const AlertCombo: React.FC<AlertComboProps> = ({
  error,
  isLoading,
  noData,
}) => {
  if (error) {
    return <ErrorAlert error={error} />;
  }

  if (isLoading) {
    return <LoadingAlert />;
  }

  if (noData) {
    return <div className="alert warn">No Data</div>;
  }

  return null;
};

code ./packages/web/src/components/ErrorAlert.tsx

import { AxiosCustomError } from '@neo4j-crud/shared';

type ErrorAlertProps = {
  error: AxiosCustomError;
};

export const ErrorAlert: React.FC<ErrorAlertProps> = ({ error }) => {
  return (
    <div className="alert danger">
      <div>{error.message}</div>
      <div>{error.response?.data.error}</div>
    </div>
  );
};

code ./packages/web/src/components/LoadingAlert.tsx

import { useEffect, useState } from 'react';

export const LoadingAlert: React.FC = () => {
  const [showLoading, setShowLoading] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowLoading(true);
    }, 100);
    return () => clearTimeout(timer);
  }, []);

  if (!showLoading) {
    return null;
  }

  return (
    <div className="alert info">
      <div>Loading</div>
    </div>
  );
};

code ./packages/web/src/components/NavigationAlert.tsx

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export const NavigationAlert = () => {
  const { state } = useLocation();

  useEffect(() => {
    if (state?.message) {
      window.history.replaceState(null, '', window.location.pathname);
    }
  }, [state]);

  return (
    state?.message && (
      <div className="alert success">
        <div>{state.message}</div>
      </div>
    )
  );
};

code ./packages/web/src/components/index.ts

...
export * from './AlertCombo';
export * from './ErrorAlert';
export * from './LoadingAlert';
export * from './NavigationAlert';

code ./packages/web/src/pages/movies/List/Content.tsx

...
import { AlertCombo } from '../../../components';

...

export const Content: React.FC<ContentProps> = ({ search }) => {
  ...

  const noData = !data || data.length === 0;

  if (error || isLoading || noData) {
    return <AlertCombo error={error} isLoading={isLoading} noData={noData} />;
  }

  ...
};

Test

open http://localhost:4200

No Data	Error (API not running)

Commit

git add .
git commit -m "Frontend Components"

Next step: Frontend Mutations