feat: customize the NMRium default empty message

close #125

Author: hamed-musallam

src/NMRiumWrapper.tsx

@@ -34,7 +34,7 @@ export default function NMRiumWrapper() {
   const { allowedOrigins, isFetchAllowedOriginsPending } = useWhiteList();
   const nmriumRef = useRef<NMRiumRef>(null);
   const [data, setDate] = useState<NMRiumData>();
-  const { workspace, preferences } = usePreferences();
+  const { workspace, preferences, defaultEmptyMessage } = usePreferences();
   const dataChangeHandler = useCallback<OnNMRiumChange>((state, source) => {
     events.trigger('data-change', { state, source });
   }, []);
@@ -101,6 +101,8 @@ export default function NMRiumWrapper() {
     };
   });
 
+  console.log(defaultEmptyMessage);
+
   return (
     <div style={styles.container}>
       {isLoading ||
@@ -115,6 +117,7 @@ export default function NMRiumWrapper() {
         onChange={dataChangeHandler}
         preferences={preferences}
         workspace={workspace}
+        emptyText={defaultEmptyMessage}
       />
     </div>
   );

src/hooks/usePreferences.ts

@@ -2,26 +2,41 @@ import { WorkspacePreferences } from 'nmr-load-save';
 import { NMRiumWorkspace } from 'nmrium';
 import { useLayoutEffect, useState } from 'react';
 
+interface Preferences {
+  preferences: WorkspacePreferences | undefined;
+  workspace: NMRiumWorkspace | undefined;
+  defaultEmptyMessage: string | undefined;
+}
+
+const DEFAULT_PREFERENCES = {
+  preferences: undefined,
+  workspace: undefined,
+  defaultEmptyMessage: undefined,
+};
+
 export function usePreferences() {
-  const [configuration, setConfiguration] = useState<{
-    preferences: WorkspacePreferences | undefined;
-    workspace: NMRiumWorkspace | undefined;
-  }>({ preferences: undefined, workspace: undefined });
+  const [configuration, setConfiguration] =
+    useState<Preferences>(DEFAULT_PREFERENCES);
 
   useLayoutEffect(() => {
     const { href } = window.location;
     const parameters = new URL(href).searchParams;
 
     let preferences: WorkspacePreferences | undefined;
     let workspace: NMRiumWorkspace | undefined;
+    let defaultEmptyMessage: string | undefined;
 
     if (parameters.has('workspace')) {
       workspace = parameters.get('workspace') as NMRiumWorkspace;
     }
     if (parameters.has('preferences')) {
       preferences = JSON.parse(parameters.get('preferences') || '');
     }
-    setConfiguration({ preferences, workspace });
+
+    if (parameters.has('defaultEmptyMessage')) {
+      defaultEmptyMessage = parameters.get('defaultEmptyMessage') as string;
+    }
+    setConfiguration({ preferences, workspace, defaultEmptyMessage });
   }, []);
 
   return configuration;