pre-fill form with user data

ui/pages/PublicTagsSubmit.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { FormSubmitResult } from 'ui/publicTags/submit/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import PublicTagsSubmitForm from 'ui/publicTags/submit/PublicTagsSubmitForm';
 import PublicTagsSubmitResult from 'ui/publicTags/submit/PublicTagsSubmitResult';
 import ContentLoader from 'ui/shared/ContentLoader';
@@ -16,7 +17,8 @@ const PublicTagsSubmit = () => {
   const [ screen, setScreen ] = React.useState<Screen>('initializing');
   const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>();
 
-  const configQuery = useApiQuery('address_metadata_tag_types');
+  const userQuery = useFetchProfileInfo();
+  const configQuery = useApiQuery('address_metadata_tag_types', { queryOptions: { enabled: !userQuery.isLoading } });
 
   React.useEffect(() => {
     if (!configQuery.isPending) {
@@ -36,7 +38,7 @@ const PublicTagsSubmit = () => {
       case 'error':
         return <DataFetchAlert/>;
       case 'form':
-        return <PublicTagsSubmitForm config={ configQuery.data } onSubmitResult={ handleFormSubmitResult }/>;
+        return <PublicTagsSubmitForm config={ configQuery.data } onSubmitResult={ handleFormSubmitResult } userInfo={ userQuery.data }/>;
       case 'result':
         return <PublicTagsSubmitResult data={ submitResult }/>;
       default:

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -5,6 +5,7 @@ import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
 
 import type { FormFields, FormSubmitResult } from './types';
+import type { UserInfo } from 'types/api/account';
 import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
 
 import appConfig from 'configs/app';
@@ -23,21 +24,22 @@ import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldR
 import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
 import PublicTagsSubmitFieldTags from './fields/PublicTagsSubmitFieldTags';
 import * as mocks from './mocks';
-import { convertFormDataToRequestsBody, getDefaultValuesFromQuery } from './utils';
+import { convertFormDataToRequestsBody, getFormDefaultValues } from './utils';
 
 interface Props {
-  config: PublicTagTypesResponse | undefined;
+  config?: PublicTagTypesResponse | undefined;
+  userInfo?: UserInfo | undefined;
   onSubmitResult: (result: FormSubmitResult) => void;
 }
 
-const PublicTagsSubmitForm = ({ config, onSubmitResult }: Props) => {
+const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
   const isMobile = useIsMobile();
   const router = useRouter();
   const apiFetch = useApiFetch();
 
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
-    defaultValues: getDefaultValuesFromQuery(router.query),
+    defaultValues: getFormDefaultValues(router.query, userInfo),
   });
 
   React.useEffect(() => {

ui/publicTags/submit/utils.ts

@@ -2,6 +2,7 @@ import _isEqual from 'lodash/isEqual';
 import _pickBy from 'lodash/pickBy';
 
 import type { FormFieldTag, FormFields, FormSubmitResult, FormSubmitResultGrouped, FormSubmitResultItemGrouped, SubmitRequestBody } from './types';
+import type { UserInfo } from 'types/api/account';
 
 import type { Route } from 'nextjs-routes';
 
@@ -97,11 +98,11 @@ export function groupSubmitResult(data: FormSubmitResult | undefined): FormSubmi
   };
 }
 
-export function getDefaultValuesFromQuery(query: Route['query']) {
+export function getFormDefaultValues(query: Route['query'], userInfo: UserInfo | undefined) {
   return {
     addresses: getAddressesFromQuery(query),
-    requesterName: getQueryParamString(query?.requesterName),
-    requesterEmail: getQueryParamString(query?.requesterEmail),
+    requesterName: getQueryParamString(query?.requesterName) || userInfo?.nickname || userInfo?.name || undefined,
+    requesterEmail: getQueryParamString(query?.requesterEmail) || userInfo?.email || undefined,
     companyName: getQueryParamString(query?.companyName),
     companyWebsite: getQueryParamString(query?.companyWebsite),
     tags: [ { name: '', type: { label: 'name', value: 'name' as const } } ],