Open new folders without dialog

Author: joepio

data-browser/src/components/NewInstanceButton/NewFolderButton.tsx

@@ -4,14 +4,12 @@ import { NewBookmarkButton } from './NewBookmarkButton';
 import { NewInstanceButtonProps } from './NewInstanceButtonProps';
 import { NewInstanceButtonDefault } from './NewInstanceButtonDefault';
 import { useSettings } from '../../helpers/AppSettings';
-import { NewFolderButton } from './NewFolderButton';
 
 type InstanceButton = (props: NewInstanceButtonProps) => JSX.Element;
 
 /** If your New Instance button requires custom logic, such as a custom dialog */
 const classMap = new Map<string, InstanceButton>([
   [classes.bookmark, NewBookmarkButton],
-  [classes.folder, NewFolderButton],
 ]);
 
 /** A button for creating a new instance of some thing */

data-browser/src/components/NewInstanceButton/index.tsx

@@ -12,7 +12,7 @@ import { useNavigate } from 'react-router-dom';
 import { constructOpenURL } from '../../helpers/navigation';
 
 /**
- * Hook that builds a function that will create a new resoure with the given
+ * Hook that builds a function that will create a new resource with the given
  * properties and then navigate to it.
  *
  * @param klass The type of resource to create a new instance of.

data-browser/src/components/NewInstanceButton/useCreateAndNavigate.ts

@@ -11,6 +11,13 @@ import { useSettings } from '../../helpers/AppSettings';
 import { newURL } from '../../helpers/navigation';
 import { useCreateAndNavigate } from './useCreateAndNavigate';
 
+/**
+ * Returns a function that can be used to create a new instance of the given Class.
+ * This is the place where you can add custom behavior for certain classes.
+ * By default, we're redirected to an empty Form for the new instance.
+ * For some Classes, though, we'd rather have some values are pre-filled (e.g. a new ChatRoom with a `new chatroom` title).
+ * For others, we want to render a custom form, perhaps with a different layout.
+ */
 export function useDefaultNewInstanceHandler(klass: string, parent?: string) {
   const store = useStore();
   const { setDrive } = useSettings();
@@ -22,61 +29,77 @@ export function useDefaultNewInstanceHandler(klass: string, parent?: string) {
   const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
 
   const onClick = useCallback(async () => {
-    switch (klass) {
-      case classes.chatRoom: {
-        createResourceAndNavigate('chatRoom', {
-          [properties.name]: 'New ChatRoom',
-          [properties.isA]: [classes.chatRoom],
-        });
-        break;
-      }
-
-      case classes.document: {
-        createResourceAndNavigate('documents', {
-          [properties.isA]: [classes.document],
-          [properties.name]: 'Untitled Document',
-        });
-        break;
-      }
+    try {
+      switch (klass) {
+        case classes.chatRoom: {
+          createResourceAndNavigate('chatRoom', {
+            [properties.name]: 'Untitled   ChatRoom',
+            [properties.isA]: [classes.chatRoom],
+          });
+          break;
+        }
 
-      case classes.importer: {
-        createResourceAndNavigate('importer', {
-          [properties.isA]: [classes.importer],
-        });
-        break;
-      }
+        case classes.document: {
+          createResourceAndNavigate('document', {
+            [properties.isA]: [classes.document],
+            [properties.name]: 'Untitled Document',
+          });
+          break;
+        }
 
-      case classes.drive: {
-        const agent = store.getAgent();
+        case classes.folder: {
+          createResourceAndNavigate('folder', {
+            [properties.isA]: [classes.folder],
+            [properties.name]: 'Untitled Folder',
+            [properties.displayStyle]: classes.displayStyles.list,
+          });
+          break;
+        }
 
-        if (!agent || agent.subject === undefined) {
-          throw new Error(
-            'No agent set in the Store, required when creating a Drive',
-          );
+        case classes.importer: {
+          createResourceAndNavigate('importer', {
+            [properties.isA]: [classes.importer],
+          });
+          break;
         }
 
-        const newResource = await createResourceAndNavigate(
-          'drive',
-          {
-            [properties.isA]: [classes.drive],
-            [properties.write]: [agent.subject],
-            [properties.read]: [agent.subject],
-          },
-          undefined,
-          true,
-        );
+        case classes.drive: {
+          const agent = store.getAgent();
 
-        const agentResource = await store.getResourceAsync(agent.subject);
-        agentResource.pushPropVal(properties.drives, newResource.getSubject());
-        agentResource.save(store);
-        setDrive(newResource.getSubject());
-        break;
-      }
+          if (!agent || agent.subject === undefined) {
+            throw new Error(
+              'No agent set in the Store, required when creating a Drive',
+            );
+          }
+
+          const newResource = await createResourceAndNavigate(
+            'drive',
+            {
+              [properties.isA]: [classes.drive],
+              [properties.write]: [agent.subject],
+              [properties.read]: [agent.subject],
+            },
+            undefined,
+            true,
+          );
 
-      default: {
-        // Opens an `Edit` form with the class and a decent subject name
-        navigate(newURL(klass, parent, store.createSubject(shortname)));
+          const agentResource = await store.getResourceAsync(agent.subject);
+          agentResource.pushPropVal(
+            properties.drives,
+            newResource.getSubject(),
+          );
+          agentResource.save(store);
+          setDrive(newResource.getSubject());
+          break;
+        }
+
+        default: {
+          // Opens an `Edit` form with the class and a decent subject name
+          navigate(newURL(klass, parent, store.createSubject(shortname)));
+        }
       }
+    } catch (e) {
+      store.handleError(e);
     }
   }, [klass, store, parent, createResourceAndNavigate]);
 

data-browser/src/components/NewInstanceButton/useDefaultNewInstanceHandler.tsx

@@ -134,6 +134,7 @@ export const datatypes = {
 
 export const instances = {
   publicAgent: 'https://atomicdata.dev/agents/publicAgent',
+  displayStyleGrid: 'https://atomicdata.dev/agents/publicAgent',
 };
 
 export const urls = {