🎨 implement advanced tab actions

Author: satnaing

src/components/Terminal.tsx

@@ -18,11 +18,12 @@ import {
   MobileSpan,
   Wrapper,
 } from "./styles/Terminal.styled";
+import { argTab } from "../utils/funcs";
 
 type Command = {
   cmd: string;
-  desc?: string;
-  tab?: number;
+  desc: string;
+  tab: number;
 }[];
 
 export const commands: Command = [
@@ -116,10 +117,23 @@ const Terminal = () => {
           hintsCmds = [...hintsCmds, cmd];
         }
       });
+
+      const returnedHints = argTab(inputVal, setInputVal, setHints, hintsCmds);
+      hintsCmds = returnedHints ? [...hintsCmds, ...returnedHints] : hintsCmds;
+
+      // if there are many command to autocomplete
       if (hintsCmds.length > 1) {
         setHints(hintsCmds);
-      } else if (hintsCmds.length === 1) {
-        setInputVal(hintsCmds[0]);
+      }
+      // if only one command to autocomplete
+      else if (hintsCmds.length === 1) {
+        const currentCmd = _.split(inputVal, " ");
+        setInputVal(
+          currentCmd.length !== 1
+            ? `${currentCmd[0]} ${currentCmd[1]} ${hintsCmds[0]}`
+            : hintsCmds[0]
+        );
+
         setHints([]);
       }
     }

src/utils/funcs.ts

@@ -1,4 +1,5 @@
 import _ from "lodash";
+import theme from "../components/styles/themes";
 
 /**
  * Generates html tabs
@@ -68,3 +69,83 @@ export const checkThemeRedirect = (
     return false;
   }
 };
+
+/**
+ * Perform advanced tab actions
+ * @param {string} inputVal - current input value
+ * @param {(value: React.SetStateAction<string>) => void} setInputVal - setInputVal setState
+ * @param {(value: React.SetStateAction<string[]>) => void} setHints - setHints setState
+ * @param {hintsCmds} hintsCmds - hints command array
+ * @returns {string[] | undefined} hints command or setState action(undefined)
+ */
+export const argTab = (
+  inputVal: string,
+  setInputVal: (value: React.SetStateAction<string>) => void,
+  setHints: (value: React.SetStateAction<string[]>) => void,
+  hintsCmds: string[]
+): string[] | undefined => {
+  // 1) if input is 'themes '
+  if (inputVal === "themes ") {
+    setInputVal(`themes set`);
+    return [];
+  }
+
+  // 2) if input is 'themes s'
+  else if (
+    _.startsWith("themes", _.split(inputVal, " ")[0]) &&
+    _.split(inputVal, " ")[1] !== "set" &&
+    _.startsWith("set", _.split(inputVal, " ")[1])
+  ) {
+    setInputVal(`themes set`);
+    return [];
+  }
+
+  // 3) if input is 'themes set '
+  else if (inputVal === "themes set ") {
+    setHints(_.keys(theme));
+    return [];
+  }
+
+  // 4) if input starts with 'themes set ' + theme
+  else if (_.startsWith(inputVal, "themes set ")) {
+    _.keys(theme).forEach((t) => {
+      if (_.startsWith(t, _.split(inputVal, " ")[2])) {
+        hintsCmds = [...hintsCmds, t];
+      }
+    });
+    return hintsCmds;
+  }
+
+  // 5) if input is 'projects' or 'socials'
+  else if (inputVal === "projects " || inputVal === "socials ") {
+    setInputVal(`${inputVal}go`);
+    return [];
+  }
+
+  // 6) if input is 'projects g' or 'socials g'
+  else if (inputVal === "projects g" || inputVal === "socials g") {
+    setInputVal(`${inputVal}o`);
+    return [];
+  }
+
+  // 7) if input is 'socials go '
+  else if (_.startsWith(inputVal, "socials go ")) {
+    ["1.Github", "2.Dev.to", "3.Facebook", "4.Instagram"].forEach((t) => {
+      hintsCmds = [...hintsCmds, t];
+    });
+    return hintsCmds;
+  }
+
+  // 8) if input is 'projects go '
+  else if (_.startsWith(inputVal, "projects go ")) {
+    [
+      "1.Sat Naing's Blog",
+      "2.Haru Fashion",
+      "3.Haru API",
+      "4.Tip Calculator",
+    ].forEach((t) => {
+      hintsCmds = [...hintsCmds, t];
+    });
+    return hintsCmds;
+  }
+};