use consts for query param keys

Author: joepio

data-browser/src/components/forms/NewForm/index.tsx

@@ -1,6 +1,6 @@
 import { properties, useResource, useStore, useTitle } from '@tomic/react';
 import React, { useCallback, useState } from 'react';
-import { useQueryString } from '../../../helpers/navigation';
+import { newURLParams, useQueryString } from '../../../helpers/navigation';
 import { useEffectOnce } from '../../../hooks/useEffectOnce';
 import { Button } from '../../Button';
 import { DialogActions, DialogContent, DialogTitle } from '../../Dialog';
@@ -28,14 +28,16 @@ export const NewFormFullPage = ({
   classSubject,
 }: NewFormProps): JSX.Element => {
   const klass = useResource(classSubject);
-  const [subject, setSubject] = useQueryString('newSubject');
-  const [parentSubject] = useQueryString('parent');
+  const [subject, setSubject] = useQueryString(newURLParams.newSubject);
+  const [parent] = useQueryString(newURLParams.parent);
 
   const { subjectErr, subjectValue, setSubjectValue, resource } = useNewForm(
     klass,
-    subject!,
+    subject
+      ? subject
+      : `${parent}/${Math.random().toString(36).substring(2, 9)}`,
     setSubject,
-    parentSubject,
+    parent,
   );
 
   return (

data-browser/src/helpers/navigation.tsx

@@ -66,6 +66,13 @@ export function useSearchQuery() {
   return useQueryString('query');
 }
 
+/** Query parameters used by the `/new` route */
+export const newURLParams = {
+  classSubject: 'classSubject',
+  parent: 'parent',
+  newSubject: 'newSubject',
+};
+
 /** Constructs a URL for the New Resource form */
 export function newURL(
   classUrl: string,
@@ -74,9 +81,9 @@ export function newURL(
 ): string {
   const navTo = new URL(location.origin);
   navTo.pathname = paths.new;
-  navTo.searchParams.append('classSubject', classUrl);
-  parentURL && navTo.searchParams.append('parent', parentURL);
-  subject && navTo.searchParams.append('newSubject', subject);
+  navTo.searchParams.append(newURLParams.classSubject, classUrl);
+  parentURL && navTo.searchParams.append(newURLParams.parent, parentURL);
+  subject && navTo.searchParams.append(newURLParams.newSubject, subject);
 
   return paths.new + navTo.search;
 }