HPCC-31049 fix useConst instances not taking a function

While not providing a function won't cause an error, it will be inefficent.  Especially in the case of `new`.

Signed-off-by: Gordon Smith <[email protected]>

esp/src/src-react/components/Activities.tsx

@@ -58,7 +58,7 @@ export const Activities: React.FunctionComponent<ActivitiesProps> = ({
     const [, { isContainer }] = useBuildInfo();
 
     //  Grid ---
-    const activity = useConst(ESPActivity.Get());
+    const activity = useConst(() => ESPActivity.Get());
     const { Grid, selection, refreshTable, copyButtons } = useGrid({
         store: activity.getStore({}),
         sort: { attribute: "idx", descending: false },

esp/src/src-react/components/DESDLBindingMethods.tsx

@@ -26,7 +26,7 @@ export const DESDLBindingMethods: React.FunctionComponent<DESDLBindingMethodsPro
     const [messageBarType, setMessageBarType] = React.useState<MessageBarType>();
 
     //  Grid ---
-    const store = useConst(new Observable(new MemoryTreeStore("__hpcc_id", "__hpcc_parentName", { Name: true })));
+    const store = useConst(() => new Observable(new MemoryTreeStore("__hpcc_id", "__hpcc_parentName", { Name: true })));
     const { Grid, refreshTable } = useGrid({
         store,
         query: { __hpcc_parentName: null },

esp/src/src-react/components/DESDLBindings.tsx

@@ -40,7 +40,7 @@ export const DESDLBindings: React.FunctionComponent<ESDLBindingProps> = ({
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
 
     //  Grid ---
-    const store = useConst(new Observable(new TreeStore("__hpcc_id", { Name: true })));
+    const store = useConst(() => new Observable(new TreeStore("__hpcc_id", { Name: true })));
     const { Grid, selection, refreshTable } = useGrid({
         store,
         query: { __hpcc_parentName: null },

esp/src/src-react/components/LandingZone.tsx

@@ -102,7 +102,7 @@ export const LandingZone: React.FunctionComponent<LandingZoneProps> = ({
     }, []);
 
     //  Grid ---
-    const store = useConst(FileSpray.CreateLandingZonesStore({}));
+    const store = useConst(() => FileSpray.CreateLandingZonesStore({}));
 
     const query = React.useMemo(() => {
         return formatQuery(targetDropzones, filter);

esp/src/src-react/components/Logs.tsx

@@ -101,7 +101,7 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
     const now = React.useMemo(() => new Date(), []);
 
     //  Grid ---
-    const gridStore = useConst(CreateLogsQueryStore());
+    const gridStore = useConst(() => CreateLogsQueryStore());
 
     const query = React.useMemo(() => {
         if (wuid !== undefined) {

esp/src/src-react/components/Menu.tsx

@@ -98,7 +98,7 @@ export const MainNavigation: React.FunctionComponent<MainNavigationProps> = ({
     hashPath
 }) => {
 
-    const menu = useConst([...navLinkGroups()]);
+    const menu = useConst(() => [...navLinkGroups()]);
     const { theme, setTheme, isDark } = useUserTheme();
 
     const selKey = React.useMemo(() => {
@@ -309,9 +309,9 @@ export const SubNavigation: React.FunctionComponent<SubNavigationProps> = ({
                     {!subNav &&
                         <Stack.Item grow={1} style={{ lineHeight: "24px" }}>
                             {hashPath.includes("/files/")
-                            ? <Breadcrumbs hashPath={hashPath} ignoreN={2} />
-                            : <Breadcrumbs hashPath={hashPath} ignoreN={1} />
-                            }                    
+                                ? <Breadcrumbs hashPath={hashPath} ignoreN={2} />
+                                : <Breadcrumbs hashPath={hashPath} ignoreN={1} />
+                            }
                         </Stack.Item>
                     }
                 </Stack>

esp/src/src-react/components/Permissions.tsx

@@ -40,10 +40,10 @@ export const Permissions: React.FunctionComponent<PermissionsProps> = ({
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
 
     //  Grid ---
-    const gridStore = useConst(WsAccess.CreatePermissionsStore(null, null));
-    const gridSort = useConst([{ attribute: "name", descending: false }]);
-    const gridQuery = useConst({});
-    const gridColumns = useConst({
+    const gridStore = useConst(() => WsAccess.CreatePermissionsStore(null, null));
+    const gridSort = useConst(() => [{ attribute: "name", descending: false }]);
+    const gridQuery = useConst(() => ({}));
+    const gridColumns = useConst(() => ({
         check: selector({
             width: 27,
             disabled: function (row) {
@@ -66,7 +66,7 @@ export const Permissions: React.FunctionComponent<PermissionsProps> = ({
         }),
         description: { label: nlsHPCC.Description },
         basedn: { label: "basedn" }
-    });
+    }));
 
     //  Selection  ---
     React.useEffect(() => {

esp/src/src-react/components/Result.tsx

@@ -237,7 +237,7 @@ export const Result: React.FunctionComponent<ResultProps> = ({
     const hasFilter = React.useMemo(() => Object.keys(filter).length > 0, [filter]);
     const [renderHTML, setRenderHTML] = React.useState(false);
 
-    const resultTable: ResultWidget = useConst(new ResultWidget()
+    const resultTable: ResultWidget = useConst(() => new ResultWidget()
         .baseUrl("")
         .wuid(wuid)
         .resultName(resultName)

esp/src/src-react/components/Search.tsx

@@ -47,7 +47,7 @@ export const Search: React.FunctionComponent<SearchProps> = ({
     searchText
 }) => {
 
-    const progress = useConst({ value: 0 });
+    const progress = useConst(() => ({ value: 0 }));
 
     const [uiState, setUIState] = React.useState({ ...defaultUIState });
     const [searchCount, setSearchCount] = React.useState(0);
@@ -59,7 +59,7 @@ export const Search: React.FunctionComponent<SearchProps> = ({
         refreshTable } = useFluentStoreState({});
 
     //  Search
-    const search = useConst(new ESPSearch(() => { progress.value++; }));
+    const search = useConst(() => new ESPSearch(() => { progress.value++; }));
 
     //  Grid ---
     const columns = React.useMemo((): FluentColumns => {

esp/src/src-react/components/SourceEditor.tsx

@@ -54,7 +54,7 @@ export const SourceEditor: React.FunctionComponent<SourceEditorProps> = ({
         { key: "divider_1", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
     ];
 
-    const editor = useConst(newEditor(mode)
+    const editor = useConst(() => newEditor(mode)
         .on("changes", () => {
             onChange(editor.text());
         })
@@ -202,7 +202,7 @@ export const ECLSourceEditor: React.FunctionComponent<ECLSourceEditorProps> = ({
     setEditor
 }) => {
 
-    const editor = useConst(new ECLEditor());
+    const editor = useConst(() => new ECLEditor());
     React.useEffect(() => {
         editor
             .text(text)

esp/src/src-react/components/WorkunitsDashboard.tsx

@@ -78,7 +78,7 @@ export const WorkunitsDashboard: React.FunctionComponent<WorkunitsDashboardProps
     }, [filterProps.lastNDays]);
 
     //  Cluster Chart ---
-    const clusterChart = useConst(
+    const clusterChart = useConst(() =>
         new Bar()
             .columns(["Cluster", "Count"])
             .on("click", (row, col, sel) => pushParamExact("cluster", sel ? row.Cluster : undefined))
@@ -99,7 +99,7 @@ export const WorkunitsDashboard: React.FunctionComponent<WorkunitsDashboardProps
         ;
 
     //  Owner Chart ---
-    const ownerChart = useConst(
+    const ownerChart = useConst(() =>
         new Column()
             .columns(["Owner", "Count"])
             .on("click", (row, col, sel) => pushParamExact("owner", sel ? row.Owner : undefined))
@@ -120,7 +120,7 @@ export const WorkunitsDashboard: React.FunctionComponent<WorkunitsDashboardProps
         ;
 
     //  State Chart ---
-    const stateChart = useConst(
+    const stateChart = useConst(() =>
         new Pie()
             .columns(["State", "Count"])
             .on("click", (row, col, sel) => pushParamExact("state", sel ? row.State : undefined))
@@ -140,7 +140,7 @@ export const WorkunitsDashboard: React.FunctionComponent<WorkunitsDashboardProps
         ;
 
     //  Protected Chart ---
-    const protectedChart = useConst(
+    const protectedChart = useConst(() =>
         new Pie()
             .columns(["Protected", "Count"])
             .on("click", (row, col, sel) => pushParamExact("protected", sel ? row.Protected === "true" : undefined))
@@ -159,7 +159,7 @@ export const WorkunitsDashboard: React.FunctionComponent<WorkunitsDashboardProps
         ;
 
     //  Day Chart ---
-    const dayChart = useConst(
+    const dayChart = useConst(() =>
         new Area()
             .columns(["Day", "Count"])
             .xAxisType("time")
@@ -183,7 +183,7 @@ export const WorkunitsDashboard: React.FunctionComponent<WorkunitsDashboardProps
         ;
 
     //  Table ---
-    const workunitsStore = useConst(new Observable(new Memory("Wuid")));
+    const workunitsStore = useConst(() => new Observable(new Memory("Wuid")));
     const tablePipeline = chain(
         filter<WorkunitEx>(row => filterProps.cluster === undefined || row.Cluster === filterProps.cluster),
         filter(row => filterProps.owner === undefined || row.Owner === filterProps.owner),

esp/src/src-react/components/controls/Grid.tsx

@@ -201,7 +201,7 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
     const [items, setItems] = React.useState<any[]>([]);
     const [columnWidths] = useNonReactiveEphemeralPageStore("columnWidths");
 
-    const selectionHandler = useConst(new Selection({
+    const selectionHandler = useConst(() => new Selection({
         onSelectionChanged: () => {
             setSelection(selectionHandler.getSelection());
         }
@@ -315,7 +315,7 @@ export const FluentGrid: React.FunctionComponent<FluentGridProps> = ({
     refresh
 }) => {
 
-    const constStore = useConst(new Memory(primaryID, alphaNumColumns));
+    const constStore = useConst(() => new Memory(primaryID, alphaNumColumns));
 
     React.useEffect(() => {
         constStore.setData(data);

esp/src/src-react/hooks/grid.tsx

@@ -47,10 +47,10 @@ export function useGrid({
     filename
 }: useGridProps): useGridResponse {
 
-    const constStore = useConst(store);
-    const constQuery = useConst({ ...query });
-    const constSort = useConst({ ...sort });
-    const constColumns = useConst({ ...columns });
+    const constStore = useConst(() => store);
+    const constQuery = useConst(() => ({ ...query }));
+    const constSort = useConst(() => ({ ...sort }));
+    const constColumns = useConst(() => ({ ...columns }));
     const constGetSelected = useConst(() => getSelected);
     const [grid, setGrid] = React.useState<any>(undefined);
     const [selection, setSelection] = React.useState([]);

esp/src/src-react/hooks/workunit.ts

@@ -180,7 +180,7 @@ export function useWorkunitWorkflows(wuid: string): [WUInfo.ECLWorkflow[], Worku
 
 export function useWorkunitXML(wuid: string): [string] {
 
-    const service = useConst(new WorkunitsService({ baseUrl: "" }));
+    const service = useConst(() => new WorkunitsService({ baseUrl: "" }));
 
     const [xml, setXML] = React.useState("");
 

esp/src/src-react/layouts/DojoAdapter.tsx

@@ -124,7 +124,7 @@ export const DojoComponent: React.FunctionComponent<DojoComponentProps> = ({
 }) => {
 
     const id = useId();
-    const divID = useConst(`dojo-component-${id}`);
+    const divID = useConst(() => `dojo-component-${id}`);
 
     React.useEffect(() => {
         const w = new Widget({