split home webview and component + prepare dynamic types

Author: Sebastian-ubs

extensions/src/platform-get-resources/src/home.web-view.tsx

@@ -1,12 +1,286 @@
 import papi, { logger } from '@papi/frontend';
 import { useData, useDataProvider, useLocalizedStrings, useSetting } from '@papi/frontend/react';
-import { HomeDialog } from 'platform-bible-react';
-
-globalThis.webViewComponent = HomeDialog({
-  useLocalizedStrings: useLocalizedStrings,
-  useDataProvider: useDataProvider,
-  useData: useData,
-  papi: papi,
-  logger: logger,
-  useSetting: useSetting,
-});
+import { HomeDialog, useEvent } from 'platform-bible-react';
+import {
+  getErrorMessage,
+  isErrorMessageAboutParatextBlockingInternetAccess,
+  isErrorMessageAboutRegistryAuthFailure,
+  isPlatformError,
+  LocalizeKey,
+  newGuid,
+  LocalProjectInfo,
+  SharedProjectsInfo,
+} from 'platform-bible-utils';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+const HOME_STRING_KEYS: LocalizeKey[] = [
+  '%resources_action%',
+  '%resources_activity%',
+  '%resources_clearSearch%',
+  '%home_dialog_title%',
+  '%resources_filterInput%',
+  '%resources_fullName%',
+  '%resources_get%',
+  '%resources_getResources%',
+  '%resources_items%',
+  '%resources_language%',
+  '%resources_loading%',
+  '%resources_noProjects%',
+  '%resources_noProjectsInstruction%',
+  '%resources_noSearchResults%',
+  '%resources_open%',
+  '%resources_searchedFor%',
+  '%resources_sync%',
+];
+
+const defaultExcludePdpFactoryIds: string[] = [];
+const defaultInterfaceLanguages: string[] = ['en'];
+
+globalThis.webViewComponent = function HomeDialogWebView() {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  const [localizedStrings] = useLocalizedStrings(HOME_STRING_KEYS);
+
+  const dblResourcesProvider = useDataProvider('platformGetResources.dblResourcesProvider');
+
+  const [showGetResourcesButton, setShowGetResourcesButton] = useState<boolean | undefined>(
+    undefined,
+  );
+
+  const [resourcesList] = useData('platformGetResources.dblResourcesProvider').DblResources(
+    undefined,
+    [],
+  );
+
+  const [isSendReceiveAvailable, setIsSendReceiveAvailable] = useState<boolean | undefined>(
+    undefined,
+  );
+
+  const openResourceOrProject = (projectId: string, isEditable: boolean) =>
+    papi.commands.sendCommand(
+      isEditable
+        ? 'platformScriptureEditor.openScriptureEditor'
+        : 'platformScriptureEditor.openResourceViewer',
+      projectId,
+    );
+
+  const openGetResources = () => papi.commands.sendCommand('platformGetResources.openGetResources');
+
+  const checkIfSendReceiveAvailable = useCallback(async () => {
+    const isAvailable = await papi.commands.sendCommand(
+      'platformGetResources.isSendReceiveAvailable',
+    );
+    if (isMounted.current) {
+      setIsSendReceiveAvailable(isAvailable);
+    }
+  }, []);
+
+  const [isSendReceiveInProgress, setIsSendReceiveInProgress] = useState<boolean>(false);
+  const [activeSendReceiveProjects, setActiveSendReceiveProjects] = useState<string[]>([]);
+
+  const [sharedProjectsInfo, setSharedProjectsInfo] = useState<SharedProjectsInfo>();
+  const [isLoadingRemoteProjects, setIsLoadingRemoteProjects] = useState<boolean>(true);
+
+  const sharedProjectErrorNotificationId = useMemo(() => newGuid(), []);
+
+  const sendReceiveProject = async (projectId: string) => {
+    if (!isSendReceiveAvailable) return;
+
+    try {
+      setIsSendReceiveInProgress(true);
+      setActiveSendReceiveProjects((prev) => [...prev, projectId]);
+
+      await papi.commands.sendCommand('paratextBibleSendReceive.sendReceiveProjects', [projectId]);
+
+      if (isMounted.current) {
+        setActiveSendReceiveProjects((prev) => prev.filter((id) => id !== projectId));
+        setIsSendReceiveInProgress(false);
+      }
+    } catch (e) {
+      logger.warn(
+        `Home web view failed to reload after running S/R for project ${projectId}: ${e}`,
+      );
+      if (isMounted.current) {
+        setActiveSendReceiveProjects((prev) => prev.filter((id) => id !== projectId));
+        setIsSendReceiveInProgress(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const fetchAvailability = async () => {
+      if (dblResourcesProvider) {
+        const isGetDblResourcesAvailable = await dblResourcesProvider.isGetDblResourcesAvailable();
+        if (isMounted.current) {
+          setShowGetResourcesButton(isGetDblResourcesAvailable);
+        }
+      } else {
+        setShowGetResourcesButton(undefined);
+      }
+    };
+
+    fetchAvailability();
+  }, [dblResourcesProvider]);
+
+  useEffect(() => {
+    checkIfSendReceiveAvailable();
+  }, [checkIfSendReceiveAvailable]);
+
+  useEvent(
+    papi.network.getNetworkEvent('platform.onDidReloadExtensions'),
+    checkIfSendReceiveAvailable,
+  );
+
+  useEffect(() => {
+    if (!isSendReceiveAvailable) {
+      setIsLoadingRemoteProjects(false);
+      return;
+    }
+
+    let promiseIsCurrent = true;
+    const getSharedProjects = async () => {
+      try {
+        const projectsInfo = await papi.commands.sendCommand(
+          'paratextBibleSendReceive.getSharedProjects',
+        );
+
+        if (promiseIsCurrent && isMounted.current) {
+          setIsLoadingRemoteProjects(false);
+          setSharedProjectsInfo(projectsInfo);
+        }
+      } catch (e) {
+        const errorMessage = getErrorMessage(e);
+        if (isErrorMessageAboutParatextBlockingInternetAccess(errorMessage)) {
+          papi.notifications.send({
+            severity: 'error',
+            message: '%data_loading_error_paratextData_internet_disabled%',
+            clickCommandLabel: '%general_open%',
+            clickCommand: 'paratextRegistration.showParatextRegistration',
+            notificationId: sharedProjectErrorNotificationId,
+          });
+        } else if (isErrorMessageAboutRegistryAuthFailure(errorMessage)) {
+          papi.notifications.send({
+            severity: 'error',
+            message: '%data_loading_error_paratextData_auth_failure%',
+            clickCommandLabel: '%general_open%',
+            clickCommand: 'paratextRegistration.showParatextRegistration',
+            notificationId: sharedProjectErrorNotificationId,
+          });
+        } else {
+          logger.warn(`Home web view failed to get shared projects: ${errorMessage}`);
+        }
+
+        if (promiseIsCurrent && isMounted.current) {
+          setIsLoadingRemoteProjects(false);
+        }
+      }
+    };
+
+    if (isSendReceiveInProgress) {
+      return;
+    }
+    if (!isSendReceiveAvailable) {
+      setIsLoadingRemoteProjects(false);
+      return;
+    }
+    getSharedProjects();
+
+    return () => {
+      // Mark this promise as old and not to be used
+      promiseIsCurrent = false;
+    };
+  }, [isSendReceiveAvailable, isSendReceiveInProgress, sharedProjectErrorNotificationId]);
+
+  const [localProjectResourceInfo, setLocalProjectsInfo] = useState<LocalProjectInfo[]>([]);
+  const [isLoadingLocalProjects, setIsLoadingLocalProjects] = useState<boolean>(true);
+
+  const [excludePdpFactoryIdsInHomePossiblyError] = useSetting(
+    'platformGetResources.excludePdpFactoryIdsInHome',
+    defaultExcludePdpFactoryIds,
+  );
+
+  const excludePdpFactoryIds = useMemo(() => {
+    if (isPlatformError(excludePdpFactoryIdsInHomePossiblyError)) {
+      logger.warn(
+        'Failed to load setting: platformGetResources.excludePdpFactoryIdsInHome',
+        excludePdpFactoryIdsInHomePossiblyError,
+      );
+      return defaultExcludePdpFactoryIds;
+    }
+    return excludePdpFactoryIdsInHomePossiblyError;
+  }, [excludePdpFactoryIdsInHomePossiblyError]);
+
+  useEffect(() => {
+    let promiseIsCurrent = true;
+    const getLocalProjects = async () => {
+      const projectMetadata = await papi.projectLookup.getMetadataForAllProjects({
+        includeProjectInterfaces: ['platformScripture.USJ_Chapter'],
+        excludePdpFactoryIds,
+      });
+      const projectInfo: LocalProjectInfo[] = await Promise.all(
+        projectMetadata.map(async (data) => {
+          const pdp = await papi.projectDataProviders.get('platform.base', data.id);
+          const isEditable = await pdp.getSetting('platform.isEditable');
+          return {
+            id: data.id,
+            isEditable: isEditable,
+            fullName: await pdp.getSetting('platform.fullName'),
+            name: await pdp.getSetting('platform.name'),
+            language: await pdp.getSetting('platform.language'),
+            // TODO: fix when the papi offers a way to distinguish between types
+            type: isEditable ? 'project' : 'resource',
+          };
+        }),
+      );
+
+      if (promiseIsCurrent && isMounted.current) {
+        setIsLoadingLocalProjects(false);
+        setLocalProjectsInfo(projectInfo);
+      }
+    };
+
+    if (isSendReceiveInProgress) {
+      return;
+    }
+    getLocalProjects();
+
+    return () => {
+      // Mark this promise as old and not to be used
+      promiseIsCurrent = false;
+    };
+    // resourcesList is only used to trigger a re-fetch of installed resources when the list of resources changes
+  }, [isSendReceiveInProgress, excludePdpFactoryIds, resourcesList]);
+
+  const [interfaceLanguages] = useSetting('platform.interfaceLanguage', defaultInterfaceLanguages);
+
+  const uiLocales = useMemo(() => {
+    if (isPlatformError(interfaceLanguages)) {
+      logger.warn('Failed to load setting: platform.interfaceLanguage', interfaceLanguages);
+      return defaultInterfaceLanguages;
+    }
+    return interfaceLanguages;
+  }, [interfaceLanguages]);
+
+  return (
+    <HomeDialog
+      localizedStrings={localizedStrings}
+      uiLocales={uiLocales}
+      onOpenGetResources={openGetResources}
+      onOpenResourceOrProject={openResourceOrProject}
+      onSendReceiveProject={sendReceiveProject}
+      showGetResourcesButton={showGetResourcesButton}
+      isSendReceiveInProgress={isSendReceiveInProgress}
+      isLoadingLocalProjects={isLoadingLocalProjects}
+      isLoadingRemoteProjects={isLoadingRemoteProjects}
+      localProjectResourceInfo={localProjectResourceInfo}
+      sharedProjectsInfo={sharedProjectsInfo}
+      activeSendReceiveProjects={activeSendReceiveProjects}
+    />
+  );
+};

extensions/src/platform-scripture/src/types/platform-scripture.d.ts

@@ -807,6 +807,7 @@ declare module 'platform-scripture' {
 
   // #endregion
   // #region Send/Receive Types
+  //TODO: can we just remove them from here and use those from platform-bible-utils? Which extension uses them?
 
   /**
    * In what state the project to S/R is

lib/platform-bible-react/dist/index.cjs

@@ -141,6 +141,36 @@ type LocalizedStringValue = string;
 interface LanguageStrings {
 	[k: LocalizeKey]: LocalizedStringValue;
 }
+type EditedStatus = undefined | "" | "edited" | "new" | "unregistered";
+type SharedProjectInfo = {
+	id: string;
+	name: string;
+	fullName: string;
+	language: string;
+	editedStatus: EditedStatus;
+	lastSendReceiveDate: string;
+	/** Names of admins on this project. Only filled if project is new */
+	adminNames?: string[];
+	warnings?: string[];
+};
+type SharedProjectsInfo = {
+	[projectId: string]: SharedProjectInfo;
+};
+type LocalProjectInfo = {
+	id: string;
+	isEditable: boolean;
+	fullName: string;
+	name: string;
+	language: string;
+	type: ProjectTypeKey;
+};
+declare const PROJECT_TYPE_KEYS: readonly [
+	"project",
+	"resource",
+	"dictionary",
+	"media"
+];
+type ProjectTypeKey = (typeof PROJECT_TYPE_KEYS)[number];
 export type ChapterRangeSelectorProps = {
 	/** The selected start chapter */
 	startChapter: number;
@@ -1627,6 +1657,21 @@ export declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
 export declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** @inheritdoc Tooltip */
 export declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+export type HomeDialogProps = {
+	localizedStrings?: LanguageStrings;
+	uiLocales?: Intl.LocalesArgument;
+	onOpenGetResources?: () => void;
+	onOpenResourceOrProject?: (projectId: string, isEditable: boolean) => void;
+	onSendReceiveProject?: (projectId: string) => void;
+	showGetResourcesButton?: boolean;
+	isSendReceiveInProgress?: boolean;
+	isLoadingLocalProjects?: boolean;
+	isLoadingRemoteProjects?: boolean;
+	localProjectResourceInfo?: LocalProjectInfo[];
+	sharedProjectsInfo?: SharedProjectsInfo;
+	activeSendReceiveProjects?: string[];
+};
+export declare function HomeDialog({ localizedStrings, uiLocales, onOpenGetResources, onOpenResourceOrProject, onSendReceiveProject, showGetResourcesButton, isSendReceiveInProgress, isLoadingLocalProjects, isLoadingRemoteProjects, localProjectResourceInfo, sharedProjectsInfo, activeSendReceiveProjects, }: HomeDialogProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Adds an event handler to an event so the event handler runs when the event is emitted. Use
  * `papi.network.getNetworkEvent` to use a networked event with this hook.