Don't lose selected job category on re-render (#658)

This is a second fix for the same issue in #656. This doesn't require
our callers to be as careful to pass identical props.

- Simplify our querying of job category suggestions. Previously we were
  using a lazy query and then immediately invoking the query with a
  `useEffect`. This defeats Apollo's ability to avoid rerunning
  identical queries.

- Don't reset our selection on every render if the state already
  contained a selected job category.

.changeset/odd-moose-jump.md

@@ -0,0 +1,7 @@
+---
+'wingman-fe': patch
+---
+
+**JobCategorySuggest:** Don't lose selected job category on re-render
+
+If the user selects a job category their selection will now be preserved when the component re-renders.

fe/lib/components/JobCategorySuggest/JobCategorySuggest.tsx

@@ -1,12 +1,12 @@
-import { ApolloClient, useLazyQuery } from '@apollo/client';
+import { ApolloClient, useQuery } from '@apollo/client';
 import {
   FieldMessage,
   Loader,
   RadioGroup,
   Stack,
   Text,
 } from 'braid-design-system';
-import React, { ComponentPropsWithRef, forwardRef, useEffect } from 'react';
+import React, { ComponentPropsWithRef, forwardRef } from 'react';
 import isDeepEqual from 'react-fast-compare';
 import { useDebounce } from 'use-debounce';
 
@@ -55,32 +55,25 @@ export const JobCategorySuggest = React.memo(
       },
       forwardedRef,
     ) => {
-      const [
-        getCategorySuggestion,
-        { data: suggestData, error: suggestError, loading: suggestLoading },
-      ] = useLazyQuery<JobCategorySuggestQuery>(JOB_CATEGORY_SUGGEST, {
-        client,
-        // Avoid polluting the Apollo cache with partial searches
-        fetchPolicy: 'no-cache',
-      });
-
       const [debounceJobCategorySuggestInput] = useDebounce(
         positionProfile,
         debounceDelay,
       );
 
-      useEffect(() => {
-        if (debounceJobCategorySuggestInput) {
-          getCategorySuggestion({
-            variables: {
-              positionProfile: debounceJobCategorySuggestInput,
-              schemeId,
-              first: 5,
-            },
-          });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [schemeId, debounceJobCategorySuggestInput]);
+      const {
+        data: suggestData,
+        error: suggestError,
+        loading: suggestLoading,
+      } = useQuery<JobCategorySuggestQuery>(JOB_CATEGORY_SUGGEST, {
+        client,
+        // Avoid polluting the Apollo cache with partial searches
+        fetchPolicy: 'no-cache',
+        variables: {
+          positionProfile: debounceJobCategorySuggestInput,
+          schemeId,
+          first: 5,
+        },
+      });
 
       return (
         <Stack space="small">

fe/lib/components/JobCategorySuggest/JobCategorySuggestChoices.tsx

@@ -60,11 +60,11 @@ const JobCategorySuggestChoices = forwardRef<HTMLInputElement, Props>(
 
     useEffect(() => {
       const [firstChoice] = choices;
-      if (!initialValue && firstChoice.confidence > 0.5) {
+      if (!selectedJobCategory && firstChoice.confidence > 0.5) {
         setSelectedJobCategory(firstChoice.jobCategory.id.value);
         onSelect(firstChoice);
       }
-    }, [choices, initialValue, onSelect]);
+    }, [choices, selectedJobCategory, onSelect]);
 
     const handleChoiceSelect = (event: React.FormEvent<HTMLInputElement>) => {
       const choiceId = event.currentTarget.value;