🐛 Prevent doing action when incorrect option is used

Fix theme switch and redirects when incorrect options are used.

Author: satnaing

src/components/commands/Projects.tsx

@@ -21,7 +21,7 @@ const Projects: React.FC = () => {
 
   /* ===== check current command is redirect ===== */
   useEffect(() => {
-    if (checkRedirect(arg, rerender, currentCommand, "projects")) {
+    if (checkRedirect(rerender, currentCommand, "projects")) {
       projects.forEach(({ id, url }) => {
         id === parseInt(arg[1]) && window.open(url, "_blank");
       });

src/components/commands/Socials.tsx

@@ -18,7 +18,7 @@ const Socials: React.FC = () => {
 
   /* ===== check current command makes redirect ===== */
   useEffect(() => {
-    if (checkRedirect(arg, rerender, currentCommand, "socials")) {
+    if (checkRedirect(rerender, currentCommand, "socials")) {
       socials.forEach(({ id, url }) => {
         id === parseInt(arg[1]) && window.open(url, "_blank");
       });

src/components/commands/Themes.tsx

@@ -24,7 +24,7 @@ const Themes: React.FC = () => {
 
   /* ===== check current command makes redirect ===== */
   useEffect(() => {
-    if (checkThemeSwitch(arg, rerender, currentCommand, myThemes)) {
+    if (checkThemeSwitch(rerender, currentCommand, myThemes)) {
       themeSwitcher?.(theme[currentCommand[2]]);
     }
   }, [arg, rerender, currentCommand]);

src/test/Terminal.spec.tsx

@@ -196,6 +196,22 @@ describe("Terminal Component", () => {
         await user.type(terminalInput, `${cmd} ${arg} extra-arg{enter}`);
         expect(screen.getByTestId(`${cmd}-invalid-arg`)).toBeInTheDocument();
       });
+
+      it(`should return usage component for '${cmd}' cmd with incorrect option`, async () => {
+        const arg = cmd === "themes" ? "go light" : "set 4";
+        window.open = vi.fn();
+
+        // firstly run commands correct options
+        await user.type(terminalInput, `projects go 4{enter}`);
+        await user.type(terminalInput, `socials go 4{enter}`);
+        await user.type(terminalInput, `themes set espresso{enter}`);
+
+        // then run cmd with incorrect options
+        await user.type(terminalInput, `${cmd} ${arg}{enter}`);
+        expect(window.open).toBeCalledTimes(2);
+
+        // TODO: Test theme change
+      });
     });
   });
 

src/utils/funcs.ts

@@ -38,61 +38,41 @@ export const getCurrentCmdArry = (history: string[]) =>
 
 /**
  * Check current render makes redirect
- * @param {string[]} arg - arg of the command
  * @param {boolean} rerender - is submitted or not
  * @param {string[]} currentCommand - current submitted command
  * @param {string} command - the command of the function
  * @returns {boolean} redirect - true | false
  */
 export const checkRedirect = (
-  arg: string[],
   rerender: boolean,
   currentCommand: string[],
   command: string
-): boolean => {
-  if (
-    arg.length > 0 && // contains arg
-    arg[0] === "go" && // first arg is 'go'
-    rerender && // is submitted
-    currentCommand[0] === command && // current command starts with ('socials'|'projects')
-    currentCommand.length > 1 && // current command has arg
-    currentCommand.length < 4 && // if num of arg is valid (not `projects go 1 sth`)
-    _.includes([1, 2, 3, 4], parseInt(currentCommand[2])) // arg last part is one of id
-  ) {
-    return true;
-  } else {
-    return false;
-  }
-};
+): boolean =>
+  rerender && // is submitted
+  currentCommand[0] === command && // current command starts with ('socials'|'projects')
+  currentCommand[1] === "go" && // first arg is 'go'
+  currentCommand.length > 1 && // current command has arg
+  currentCommand.length < 4 && // if num of arg is valid (not `projects go 1 sth`)
+  _.includes([1, 2, 3, 4], parseInt(currentCommand[2])); // arg last part is one of id
 
 /**
  * Check current render makes redirect for theme
- * @param {string[]} arg - arg of the command
  * @param {boolean} rerender - is submitted or not
  * @param {string[]} currentCommand - current submitted command
  * @param {string[]} themes - the command of the function
  * @returns {boolean} redirect - true | false
  */
 export const checkThemeSwitch = (
-  arg: string[],
   rerender: boolean,
   currentCommand: string[],
   themes: string[]
-): boolean => {
-  if (
-    arg.length > 0 && // contains arg
-    arg[0] === "set" && // first arg is 'set'
-    rerender && // is submitted
-    currentCommand[0] === "themes" && // current command starts with ('themes')
-    currentCommand.length > 1 && // current command has arg
-    currentCommand.length < 4 && // if num of arg is valid (not `themes set light sth`)
-    _.includes(themes, currentCommand[2]) // arg last part is one of id
-  ) {
-    return true;
-  } else {
-    return false;
-  }
-};
+): boolean =>
+  rerender && // is submitted
+  currentCommand[0] === "themes" && // current command starts with 'themes'
+  currentCommand[1] === "set" && // first arg is 'set'
+  currentCommand.length > 1 && // current command has arg
+  currentCommand.length < 4 && // if num of arg is valid (not `themes set light sth`)
+  _.includes(themes, currentCommand[2]); // arg last part is one of id
 
 /**
  * Perform advanced tab actions