feat: load spectra from external URL

Author: hamed-musallam

src/NMRiumWrapper.tsx

@@ -1,6 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import NMRium, { NMRiumData } from 'nmrium';
+import Button from 'nmrium/lib/component/elements/Button';
+import { useEffect, useState } from 'react';
+import events from './events';
 import useActions from './hooks/useActions';
 
 const styles = {
@@ -12,37 +15,51 @@ const styles = {
   header: css`
     height: 40px;
     width: 100%;
+    padding: 5px;
   `,
   wrapper: css`
     flex: 1;
     overflow: hidden;
   `,
 };
 
-interface NMRWrapperProps {
-  data?: NMRiumData;
-}
+export default function NMRiumWrapper() {
+  const [data, setDate] = useState<NMRiumData>();
+
+  const actionHandler = useActions();
 
-export default function NMRiumWrapper(props: NMRWrapperProps) {
-  const {
-    data = {
-      spectra: [
-        {
+  useEffect(() => {
+    events.on('load', (result) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const spectra: any[] = [];
+      // eslint-disable-next-line no-restricted-syntax
+      for (const jcampURL of result.urls) {
+        spectra.push({
           source: {
-            jcampURL:
-              'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
+            jcampURL,
           },
-        },
-      ],
-    },
-  } = props;
-
-  const actionHandler = useActions();
+        });
+      }
+      setDate({
+        spectra,
+      });
+    });
+  });
 
   return (
     <div css={styles.container}>
       <div css={styles.header}>
-        <span>header</span>
+        <Button.Done
+          onClick={() => {
+            events.trigger('load', {
+              urls: [
+                'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
+              ],
+            });
+          }}
+        >
+          Test Load from external URL
+        </Button.Done>
       </div>
 
       <div css={styles.wrapper}>