Merge pull request #231 from zimmerman-team/feat/DX-1801

fix: Issue with Federated search scrolling/loading assets

src/app/Routes.tsx

@@ -49,6 +49,8 @@ import {
   PaymentSuccessCallbackModule,
   PaymentCanceledCallbackModule,
 } from "app/modules/callback-module/payment";
+import { useRecoilValue } from "recoil";
+import { fetchPlanLoadingAtom } from "./state/recoil/atoms";
 
 const ChartModule = lazy(() => import("app/modules/chart-module"));
 const ReportModule = lazy(() => import("app/modules/report-module"));
@@ -104,6 +106,15 @@ const Auth0ProviderWithRedirectCallback = (props: {
   );
 };
 
+const PlanLoader = () => {
+  const planLoading = useRecoilValue(fetchPlanLoadingAtom);
+
+  if (planLoading) {
+    return <PageLoader />;
+  }
+  return null;
+};
+
 const AuthLoader = () => {
   const { isLoading } = useAuth0();
 
@@ -191,7 +202,7 @@ const IntercomBootupComponent = () => {
               // @ts-ignore
               window.Intercom("boot", {
                 api_base: "https://api-iam.intercom.io",
-                app_id: "tfvurn19",
+                app_id: process.env.REACT_APP_INTERCOM_APP_ID,
                 name: user?.name, // Full name
                 email: user?.email, // the email for your user
                 user_id: user?.sub, // user_id as a string
@@ -207,7 +218,7 @@ const IntercomBootupComponent = () => {
         // @ts-ignore
         window.Intercom("boot", {
           api_base: "https://api-iam.intercom.io",
-          app_id: "tfvurn19",
+          app_id: process.env.REACT_APP_INTERCOM_APP_ID,
         });
       }
   }, [isAuthenticated]);
@@ -229,6 +240,7 @@ export function MainRoutes() {
       }}
     >
       <AuthLoader />
+      <PlanLoader />
       <OneTapLoginComponent />
       {process.env.REACT_APP_ENV_TYPE === "prod" ? (
         <IntercomBootupComponent />

src/app/hooks/useCheckUserPlan.tsx

@@ -1,5 +1,5 @@
 import { useAuth0 } from "@auth0/auth0-react";
-import { planDialogAtom } from "app/state/recoil/atoms";
+import { fetchPlanLoadingAtom, planDialogAtom } from "app/state/recoil/atoms";
 import { useStoreState } from "app/state/store/hooks";
 import axios from "axios";
 import React from "react";
@@ -10,6 +10,8 @@ export function useCheckUserPlan() {
   const token = useStoreState((state) => state.AuthToken.value);
   const setPlanDialog = useSetRecoilState(planDialogAtom);
 
+  const setLoading = useSetRecoilState(fetchPlanLoadingAtom);
+
   const [userPlan, setUserPlan] = React.useState<{
     planData: {
       name: string;
@@ -49,6 +51,7 @@ export function useCheckUserPlan() {
 
   React.useEffect(() => {
     if (!token) return;
+    setLoading(true);
     axios
       .get(`${process.env.REACT_APP_API}/users/plan-data`, {
         headers: {
@@ -58,6 +61,12 @@ export function useCheckUserPlan() {
       })
       .then((response) => {
         setUserPlan(response.data);
+      })
+      .catch((error) => {
+        console.error(error);
+      })
+      .finally(() => {
+        setLoading(false);
       });
   }, [token]);
 

src/app/hooks/useOneDrivePicker.tsx

@@ -21,7 +21,7 @@ export const useOneDrivePicker = ({
   const msalParams = {
     auth: {
       authority: "https://login.microsoftonline.com/consumers",
-      clientId: "a5f756dd-d422-443e-93d2-3361f8a4a6f8",
+      clientId: process.env.REACT_APP_ONEDRIVE_CLIENT_ID!,
       redirectUri: window.location.origin,
     },
   };

src/app/modules/dataset-module/routes/upload-module/upload-steps/externalSearch.tsx

@@ -12,6 +12,7 @@ import { useSetRecoilState } from "recoil";
 import { planDialogAtom } from "app/state/recoil/atoms";
 import SaveAltIcon from "@material-ui/icons/SaveAlt";
 import ExternalSearchTable from "../component/table/externalSearchTable";
+import { useCheckUserPlan } from "app/hooks/useCheckUserPlan";
 
 export interface IExternalDataset {
   name: string;
@@ -73,7 +74,9 @@ export default function ExternalSearch(props: {
     setOffset(0);
   };
 
-  const free = true;
+  const { userPlan } = useCheckUserPlan();
+
+  const free = userPlan?.planData.name === "Free";
   // Pagination on scroll
   React.useEffect(() => {
     if (isObserved && datasets.length > 0 && !free) {

src/app/state/recoil/atoms/index.ts

@@ -175,3 +175,8 @@ export const planDialogAtom = atom<{
     onTryAgain: () => {},
   },
 });
+
+export const fetchPlanLoadingAtom = atom<boolean>({
+  key: "fetchPlanLoadingAtom",
+  default: false,
+});