Holding.tsx

import { CircularProgress } from '@material-ui/core';
import CardContent from '@material-ui/core/CardContent';
import React, { FunctionComponent, useEffect, useState } from 'react';
import { Redirect, RouteComponentProps } from 'react-router-dom';

const getStorage = () => new Promise(resolve => chrome.storage.local.get(resolve));

type Props = RouteComponentProps;
const Holding: FunctionComponent<Props> = (props: Props) => {
  const [redirect, setRedirect] = useState('');
  useEffect(() => {
    getNextRoute();
  }, []);
  const getNextRoute = async () => {
    try {
      let storage: any = await getStorage();
      switch (true) {
        case storage.ok === undefined:
          setRedirect('/signup');
        case storage.ok === true:
          setRedirect('/record');
      }
    } catch (e) {
      setRedirect(`/error/${e.message}`);
    }
  };
  return redirect === '' ? (
    <CardContent>
      <CircularProgress style={{ margin: '0 auto' }} />
    </CardContent>
  ) : (
    <Redirect to={redirect} />
  );
};

export { Holding };