🐛 Fix allowing extra args in cmd

src/components/commands/Projects.tsx

@@ -1,6 +1,6 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import _ from "lodash";
-import { checkRedirect } from "../../utils/funcs";
+import { checkRedirect, getCurrentCmdArry } from "../../utils/funcs";
 import { UsageDiv } from "../styles/Output.styled";
 import {
   ProjectContainer,
@@ -14,19 +14,24 @@ const Projects: React.FC = () => {
   const { arg, history, rerender } = useContext(termContext);
 
   /* ===== get current command ===== */
-  const currentCommand = _.split(history[0], " ");
+  const currentCommand = getCurrentCmdArry(history);
 
   /* ===== check current command is redirect ===== */
-  if (checkRedirect(arg, rerender, currentCommand, "projects")) {
-    projects.forEach(({ id, url }) => {
-      id === parseInt(arg[1]) && window.open(url, "_blank");
-    });
-    return null;
-  }
+  useEffect(() => {
+    if (checkRedirect(arg, rerender, currentCommand, "projects")) {
+      projects.forEach(({ id, url }) => {
+        id === parseInt(arg[1]) && window.open(url, "_blank");
+      });
+    }
+  }, [arg, rerender, currentCommand]);
 
   /* ===== check arg is valid ===== */
   const checkArg = (a: string[]) => {
-    if (a[0] !== "go" || !_.includes([1, 2, 3, 4], parseInt(a[1])))
+    if (
+      a[0] !== "go" ||
+      !_.includes([1, 2, 3, 4], parseInt(a[1])) ||
+      arg.length > 2
+    )
       return (
         <UsageDiv data-testid="projects-invalid-arg">
           Usage: projects go &#60;project-no&#62; <br />
@@ -36,7 +41,7 @@ const Projects: React.FC = () => {
     return null;
   };
 
-  return arg.length > 0 ? (
+  return arg.length > 0 || arg.length > 2 ? (
     checkArg(arg)
   ) : (
     <div data-testid="projects">

src/components/commands/Socials.tsx

@@ -1,28 +1,37 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import _ from "lodash";
 import { ProjectsIntro } from "../styles/Projects.styled";
 import { Cmd, CmdDesc, CmdList, HelpWrapper } from "../styles/Help.styled";
-import { checkRedirect, generateTabs } from "../../utils/funcs";
+import {
+  checkRedirect,
+  generateTabs,
+  getCurrentCmdArry,
+} from "../../utils/funcs";
 import { UsageDiv } from "../styles/Output.styled";
 import { termContext } from "../Terminal";
 
 const Socials: React.FC = () => {
   const { arg, history, rerender } = useContext(termContext);
 
   /* ===== get current command ===== */
-  const currentCommand = _.split(history[0], " ");
+  const currentCommand = getCurrentCmdArry(history);
 
   /* ===== check current command makes redirect ===== */
-  if (checkRedirect(arg, rerender, currentCommand, "socials")) {
-    socials.forEach(({ id, url }) => {
-      id === parseInt(arg[1]) && window.open(url, "_blank");
-    });
-    return null;
-  }
+  useEffect(() => {
+    if (checkRedirect(arg, rerender, currentCommand, "socials")) {
+      socials.forEach(({ id, url }) => {
+        id === parseInt(arg[1]) && window.open(url, "_blank");
+      });
+    }
+  }, [arg, rerender, currentCommand]);
 
   /* ===== check arg is valid ===== */
   const checkArg = (a: string[]) => {
-    if (a[0] !== "go" || !_.includes([1, 2, 3, 4], parseInt(a[1])))
+    if (
+      a[0] !== "go" ||
+      !_.includes([1, 2, 3, 4], parseInt(a[1])) ||
+      arg.length > 2
+    )
       return (
         <UsageDiv data-testid="socials-invalid-arg">
           Usage: socials go &#60;social-no&#62; <br />
@@ -32,7 +41,7 @@ const Socials: React.FC = () => {
     return null;
   };
 
-  return arg.length > 0 ? (
+  return arg.length > 0 || arg.length > 2 ? (
     checkArg(arg)
   ) : (
     <HelpWrapper data-testid="socials">

src/components/commands/Themes.tsx

@@ -3,7 +3,7 @@ import _ from "lodash";
 import { themeContext } from "../../App";
 import { UsageDiv, Wrapper } from "../styles/Output.styled";
 import { ThemeSpan, ThemesWrapper } from "../styles/Themes.styled";
-import { checkThemeRedirect } from "../../utils/funcs";
+import { checkThemeRedirect, getCurrentCmdArry } from "../../utils/funcs";
 import { termContext } from "../Terminal";
 import theme from "../styles/themes";
 
@@ -13,8 +13,9 @@ const Themes: React.FC = () => {
   const { arg, history, rerender } = useContext(termContext);
 
   const themeSwitcher = useContext(themeContext);
+
   /* ===== get current command ===== */
-  const currentCommand = _.split(history[0], " ");
+  const currentCommand = getCurrentCmdArry(history);
 
   /* ===== check current command makes redirect ===== */
   useEffect(() => {
@@ -25,7 +26,7 @@ const Themes: React.FC = () => {
 
   /* ===== check arg is valid ===== */
   const checkArg = (a: string[]) => {
-    if (a[0] !== "set" || !_.includes(myThemes, a[1]))
+    if (a[0] !== "set" || !_.includes(myThemes, a[1]) || arg.length > 2)
       return (
         <UsageDiv data-testid="themes-invalid-arg">
           Usage: themes set &#60;theme-name&#62; <br />
@@ -35,7 +36,7 @@ const Themes: React.FC = () => {
     return null;
   };
 
-  return arg.length > 0 ? (
+  return arg.length > 0 || arg.length > 2 ? (
     checkArg(arg)
   ) : (
     <Wrapper data-testid="themes">

src/utils/funcs.ts

@@ -14,6 +14,14 @@ export const generateTabs = (num = 0): string => {
   return tabs;
 };
 
+/**
+ * Transform current array into array and return back the array
+ * @param {string[]} history - The history array
+ * @returns {string[]} array of cmd string
+ */
+export const getCurrentCmdArry = (history: string[]) =>
+  _.split(history[0].trim(), " ");
+
 /**
  * Check current render makes redirect
  * @param {string[]} arg - arg of the command
@@ -34,6 +42,7 @@ export const checkRedirect = (
     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;
@@ -62,6 +71,7 @@ export const checkThemeRedirect = (
     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;