fix: White screen issue and persevering and recovering modelKind in s…

…hared links (casbin#133)

* refactor: improve type safety and default handling in share content loading and sharing

* refactor: remove commented-out reactStrictMode config

* Fix: Preserve and restore modelKind in shared links

* style: reformat return statement in useIndex hook

app/components/editor/hooks/useIndex.tsx

@@ -48,11 +48,17 @@ export default function useIndex() {
         })
         .then((content) => {
           const sharedContent = JSON.parse(content) as ShareFormat;
-          setPolicyPersistent(sharedContent.policy);
-          setModelTextPersistent(sharedContent.model);
-          setCustomConfigPersistent(sharedContent.customConfig);
-          setRequestPersistent(sharedContent.request);
-          setModelKind(sharedContent.modelKind);
+          // Use empty string as default value with type checking
+          setPolicyPersistent(sharedContent.policy ?? '');
+          setModelTextPersistent(sharedContent.model ?? '');
+          setCustomConfigPersistent(sharedContent.customConfig ?? '');
+          setRequestPersistent(sharedContent.request ?? '');
+          // Make sure it's a valid ModelKind type
+          if (sharedContent.modelKind && example[sharedContent.modelKind as ModelKind]) {
+            setModelKind(sharedContent.modelKind as ModelKind);
+          } else {
+            setModelKind('basic'); // Use Default
+          }
           window.location.hash = ''; // prevent duplicate load
           setEcho(<div>Shared Content Loaded.</div>);
         })

app/components/editor/hooks/useShareInfo.tsx

@@ -19,12 +19,12 @@ interface ShareProps extends ShareFormat {
 }
 
 export interface ShareFormat {
-  modelKind: string;
-  model: string;
-  policy: string;
-  customConfig: string;
-  request: string;
-  requestResult: object;
+  modelKind?: string;
+  model?: string;
+  policy?: string;
+  customConfig?: string;
+  request?: string;
+  requestResult?: object;
 }
 
 async function dpaste(content: string) {
@@ -43,19 +43,35 @@ export default function useShareInfo() {
     if (sharing) return;
     setSharing(true);
     props.onResponse(<div>Sharing...</div>);
+
+    // Create an object that contains only non-null values
     const shareContent: ShareFormat = {
+      ...Object.entries(props).reduce((acc, [key, value]) => {
+        if (key !== 'onResponse' && value != null && value !== '') {
+          acc[key as keyof ShareFormat] = value;
+        }
+        return acc;
+      }, {} as ShareFormat),
       modelKind: props.modelKind,
-      model: props.model,
-      policy: props.policy,
-      customConfig: props.customConfig,
-      request: props.request,
-      requestResult: props.requestResult,
     };
-    dpaste(JSON.stringify(shareContent)).then((url: string) => {
+
+    // Check if there are any non-null values to share
+    if (Object.keys(shareContent).length === 0) {
       setSharing(false);
-      const hash = url.split('/')[3];
-      props.onResponse(hash);
-    });
+      props.onResponse(<div>No content to share</div>);
+      return;
+    }
+
+    dpaste(JSON.stringify(shareContent))
+      .then((url: string) => {
+        setSharing(false);
+        const hash = url.split('/')[3];
+        props.onResponse(hash);
+      })
+      .catch((error) => {
+        setSharing(false);
+        props.onResponse(<div>Error sharing content: {error.message}</div>);
+      });
   }
 
   return {

app/components/editor/index.tsx

@@ -144,7 +144,7 @@ export const EditorScreen = () => {
             <div className={clsx('h-10 pl-2', 'flex items-center justify-start gap-2')}>
               <div className={'font-bold'}>{t('Model')}</div>
               <select
-                defaultValue={'basic'}
+                value={modelKind}
                 onChange={(e) => {
                   setModelKind(e.target.value);
                 }}