Function App

src/App.tsx:30–145

()

  });

const App: FC = () => {
  const queryClient = useCustomQueryClient();
  const { user, isAuthenticated } = useAuthState();

  // The total time spent on the app
  // It is used to show force the user to login after a certain amount of time
  const [startTime, setStartTime] = useState<boolean>(false);

  // Time limit in seconds
  const timeLimit = 75; // 75 seconds

  // The AuthDialog is shown when the user is not authenticated and the time limit is reached
  const initialShowDialog = localStorage.getItem("expiredFreeTrial") === "true";
  const [showAuthDialog, setShowAuthDialog] =
    useState<boolean>(initialShowDialog);

  // Create time context
  const unauthenticatedTimeContext: UnauthenticatedTimeContextProps = {
    setStartTime,
  };

  const userID = useMemo(() => {
    if (user) {
      return user.uid;
    }

    return "";
  }, [user]);

  useEffect(() => {
    // The time limit is only active in production
    const devMode = import.meta.env.DEV;

    if (!devMode && startTime && !isAuthenticated) {
      console.log("Starting time");
      const interval = setInterval(() => {
        console.log("Time limit reached");
        setShowAuthDialog(true);
        localStorage.setItem("expiredFreeTrial", "true");
      }, timeLimit * 1000);
      return () => clearInterval(interval);
    }
  }, [startTime, isAuthenticated]);

  useEffect(() => {
    if (isAuthenticated) {
      setShowAuthDialog(false);
    }
  }, [isAuthenticated]);

  // Ensure that context is never scoped outside of the current instance of the app
  const helmetContext = {};
  return (
    <>
      <HelmetProvider context={helmetContext}>
        <QueryClientProvider client={queryClient}>
          <MobileWarningTemplate className="h-screen w-screen sm:hidden" />
          <div className="hidden h-fit w-fit sm:block">