Get completion types on component initialization

src/console/completion/actions.ts

@@ -1,17 +1,10 @@
-import CompletionType from "../../shared/CompletionType";
 import Completions from "../Completions";
 
-export const INIT_COMPLETIONS = "reset.completions";
 export const SET_COMPLETION_SOURCE = "set.completion.source";
 export const SET_COMPLETIONS = "set.completions";
 export const COMPLETION_NEXT = "completion.next";
 export const COMPLETION_PREV = "completion.prev";
 
-export interface InitCompletionAction {
-  type: typeof INIT_COMPLETIONS;
-  completionTypes: CompletionType[];
-}
-
 export interface SetCompletionSourceAction {
   type: typeof SET_COMPLETION_SOURCE;
   completionSource: string;
@@ -31,20 +24,11 @@ export interface CompletionPrevAction {
 }
 
 export type CompletionAction =
-  | InitCompletionAction
   | SetCompletionSourceAction
   | SetCompletionsAction
   | CompletionNextAction
   | CompletionPrevAction;
 
-export const initCompletion = (
-  completionTypes: CompletionType[]
-): InitCompletionAction => {
-  return {
-    type: INIT_COMPLETIONS,
-    completionTypes,
-  };
-};
 export const setCompletionSource = (
   query: string
 ): SetCompletionSourceAction => {

src/console/completion/hooks.ts

@@ -11,6 +11,7 @@ import CommandLineParser, {
 import { UnknownCommandError } from "../commandline/CommandParser";
 import Completions from "../Completions";
 import CompletionType from "../../shared/CompletionType";
+import { useGetCompletionTypes } from "./hooks/clients";
 
 const commandDocs = {
   [Command.Set]: "Set a value of the property",
@@ -208,21 +209,15 @@ export const useCompletions = () => {
   const state = React.useContext(CompletionStateContext);
   const dispatch = React.useContext(CompletionDispatchContext);
   const commandLineParser = React.useMemo(() => new CommandLineParser(), []);
+  const [completionTypes] = useGetCompletionTypes();
 
   const updateCompletions = React.useCallback((source: string) => {
     dispatch(actions.setCompletionSource(source));
   }, []);
 
-  const initCompletion = React.useCallback((source: string) => {
-    completionClient.getCompletionTypes().then((completionTypes) => {
-      dispatch(actions.initCompletion(completionTypes));
-      dispatch(actions.setCompletionSource(source));
-    });
-  }, []);
-
   const { delayedCallback: queryCompletions, enableDelay } = useDelayedCallback(
     React.useCallback(
-      (text: string, completionTypes?: CompletionType[]) => {
+      (text: string, completionTypes: CompletionType[]) => {
         const phase = commandLineParser.inputPhase(text);
         if (phase === InputPhase.OnCommand) {
           getCommandCompletions(text).then((completions) =>
@@ -241,11 +236,6 @@ export const useCompletions = () => {
             case Command.Open:
             case Command.TabOpen:
             case Command.WindowOpen:
-              if (!completionTypes) {
-                initCompletion(text);
-                return;
-              }
-
               getOpenCompletions(cmd.command, cmd.args, completionTypes).then(
                 (completions) => dispatch(actions.setCompletions(completions))
               );
@@ -282,13 +272,15 @@ export const useCompletions = () => {
   );
 
   React.useEffect(() => {
-    queryCompletions(state.completionSource, state.completionTypes);
-  }, [state.completionSource, state.completionTypes]);
+    if (typeof completionTypes === "undefined") {
+      return;
+    }
+    queryCompletions(state.completionSource, completionTypes);
+  }, [state.completionSource, completionTypes]);
 
   return {
     completions: state.completions,
     updateCompletions,
-    initCompletion,
   };
 };
 

src/console/completion/hooks/clients.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import CompletionClient from "../../clients/CompletionClient";
+import CompletionType from "../../../shared/CompletionType";
+
+const completionClient = new CompletionClient();
+
+export const useGetCompletionTypes = (): [
+  CompletionType[] | undefined,
+  boolean
+] => {
+  type State = {
+    loading: boolean;
+    result?: CompletionType[];
+  };
+  const [state, setState] = React.useState<State>({ loading: true });
+
+  React.useEffect(() => {
+    completionClient.getCompletionTypes().then((result) => {
+      setState({ loading: false, result });
+    });
+  }, []);
+  return [state.result, state.loading];
+};

src/console/completion/reducer.ts

@@ -1,7 +1,6 @@
 import Completions from "../Completions";
 import CompletionType from "../../shared/CompletionType";
 import {
-  INIT_COMPLETIONS,
   SET_COMPLETION_SOURCE,
   SET_COMPLETIONS,
   COMPLETION_NEXT,
@@ -58,13 +57,6 @@ export default function reducer(
   action: CompletionAction
 ): State {
   switch (action.type) {
-    case INIT_COMPLETIONS:
-      return {
-        ...state,
-        completionTypes: action.completionTypes,
-        completions: [],
-        select: -1,
-      };
     case SET_COMPLETION_SOURCE:
       return {
         ...state,

test/console/completion/reducer.test.ts

@@ -3,29 +3,13 @@ import reducer, {
   State,
 } from "../../../src/console/completion/reducer";
 import {
-  initCompletion,
   selectNext,
   selectPrev,
   setCompletions,
   setCompletionSource,
 } from "../../../src/console/completion/actions";
-import CompletionType from "../../../src/shared/CompletionType";
 
 describe("completion reducer", () => {
-  describe("initCompletion", () => {
-    it("initializes completions", () => {
-      const nextState = reducer(
-        defaultState,
-        initCompletion([CompletionType.Bookmarks, CompletionType.History])
-      );
-
-      expect(nextState.completionTypes).toEqual([
-        CompletionType.Bookmarks,
-        CompletionType.History,
-      ]);
-    });
-  });
-
   describe("setCompletionSource", () => {
     it("sets a completion source", () => {
       const nextState = reducer(defaultState, setCompletionSource("open "));