♻️ Refactor duplicate codes

Author: satnaing

src/components/Usage.tsx

@@ -0,0 +1,24 @@
+import { UsageDiv } from "./styles/Output.styled";
+
+type Props = {
+  cmd: "themes" | "projects" | "socials";
+  marginY?: boolean;
+};
+
+const arg = {
+  themes: { placeholder: "theme-name", example: "ubuntu" },
+  projects: { placeholder: "project-no", example: "ubuntu" },
+  socials: { placeholder: "social-no", example: "ubuntu" },
+};
+
+const Usage: React.FC<Props> = ({ cmd, marginY = false }) => {
+  const action = cmd === "themes" ? "set" : "go";
+  return (
+    <UsageDiv data-testid={`${cmd}-invalid-arg`} marginY={marginY}>
+      Usage: {cmd} {action} &#60;{arg[cmd].placeholder}&#62; <br />
+      eg: {cmd} {action} {arg[cmd].example}
+    </UsageDiv>
+  );
+};
+
+export default Usage;

src/components/commands/Projects.tsx

@@ -1,14 +1,17 @@
 import { useContext, useEffect } from "react";
-import _ from "lodash";
-import { checkRedirect, getCurrentCmdArry } from "../../utils/funcs";
-import { UsageDiv } from "../styles/Output.styled";
+import {
+  checkRedirect,
+  getCurrentCmdArry,
+  isArgInvalid,
+} from "../../utils/funcs";
 import {
   ProjectContainer,
   ProjectDesc,
   ProjectsIntro,
   ProjectTitle,
 } from "../styles/Projects.styled";
 import { termContext } from "../Terminal";
+import Usage from "../Usage";
 
 const Projects: React.FC = () => {
   const { arg, history, rerender } = useContext(termContext);
@@ -26,23 +29,13 @@ const Projects: React.FC = () => {
   }, [arg, rerender, currentCommand]);
 
   /* ===== check arg is valid ===== */
-  const checkArg = (a: string[]) => {
-    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 />
-          eg: projects go 1
-        </UsageDiv>
-      );
-    return null;
-  };
+  const checkArg = () =>
+    isArgInvalid(arg, "go", ["1", "2", "3", "4"]) ? (
+      <Usage cmd="projects" />
+    ) : null;
 
   return arg.length > 0 || arg.length > 2 ? (
-    checkArg(arg)
+    checkArg()
   ) : (
     <div data-testid="projects">
       <ProjectsIntro>
@@ -55,10 +48,7 @@ const Projects: React.FC = () => {
           <ProjectDesc>{desc}</ProjectDesc>
         </ProjectContainer>
       ))}
-      <UsageDiv marginY>
-        Usage: projects go &#60;project-no&#62; <br />
-        eg: projects go 1
-      </UsageDiv>
+      <Usage cmd="projects" marginY />
     </div>
   );
 };

src/components/commands/Socials.tsx

@@ -1,14 +1,14 @@
 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,
   getCurrentCmdArry,
+  isArgInvalid,
 } from "../../utils/funcs";
-import { UsageDiv } from "../styles/Output.styled";
 import { termContext } from "../Terminal";
+import Usage from "../Usage";
 
 const Socials: React.FC = () => {
   const { arg, history, rerender } = useContext(termContext);
@@ -26,23 +26,13 @@ const Socials: React.FC = () => {
   }, [arg, rerender, currentCommand]);
 
   /* ===== check arg is valid ===== */
-  const checkArg = (a: string[]) => {
-    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 />
-          eg: socials go 1
-        </UsageDiv>
-      );
-    return null;
-  };
+  const checkArg = () =>
+    isArgInvalid(arg, "go", ["1", "2", "3", "4"]) ? (
+      <Usage cmd="socials" />
+    ) : null;
 
   return arg.length > 0 || arg.length > 2 ? (
-    checkArg(arg)
+    checkArg()
   ) : (
     <HelpWrapper data-testid="socials">
       <ProjectsIntro>Here are my social links</ProjectsIntro>
@@ -53,10 +43,7 @@ const Socials: React.FC = () => {
           <CmdDesc>- {url}</CmdDesc>
         </CmdList>
       ))}
-      <UsageDiv marginY>
-        Usage: socials go &#60;social-id&#62; <br />
-        eg: socials go 1
-      </UsageDiv>
+      <Usage cmd="socials" marginY />
     </HelpWrapper>
   );
 };

src/components/commands/Themes.tsx

@@ -1,11 +1,16 @@
 import { useContext, useEffect } from "react";
 import _ from "lodash";
 import { themeContext } from "../../App";
-import { UsageDiv, Wrapper } from "../styles/Output.styled";
+import { Wrapper } from "../styles/Output.styled";
 import { ThemeSpan, ThemesWrapper } from "../styles/Themes.styled";
-import { checkThemeRedirect, getCurrentCmdArry } from "../../utils/funcs";
+import {
+  checkThemeRedirect,
+  getCurrentCmdArry,
+  isArgInvalid,
+} from "../../utils/funcs";
 import { termContext } from "../Terminal";
 import theme from "../styles/themes";
+import Usage from "../Usage";
 
 const myThemes = _.keys(theme);
 
@@ -25,30 +30,19 @@ const Themes: React.FC = () => {
   }, [arg, rerender, currentCommand]);
 
   /* ===== check arg is valid ===== */
-  const checkArg = (a: string[]) => {
-    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 />
-          eg: themes set dark
-        </UsageDiv>
-      );
-    return null;
-  };
+  const checkArg = () =>
+    isArgInvalid(arg, "set", myThemes) ? <Usage cmd="themes" /> : null;
 
   return arg.length > 0 || arg.length > 2 ? (
-    checkArg(arg)
+    checkArg()
   ) : (
     <Wrapper data-testid="themes">
       <ThemesWrapper>
         {myThemes.map(myTheme => (
           <ThemeSpan key={myTheme}>{myTheme}</ThemeSpan>
         ))}
       </ThemesWrapper>
-      <UsageDiv marginY>
-        Usage: themes set &#60;theme-name&#62; <br />
-        eg: themes set dark
-      </UsageDiv>
+      <Usage cmd="themes" marginY />
     </Wrapper>
   );
 };

src/utils/funcs.ts

@@ -14,6 +14,19 @@ export const generateTabs = (num = 0): string => {
   return tabs;
 };
 
+/**
+ * Check arg is valid
+ * @param {string[]} arg - The arg array
+ * @param {string} action - The action to compare | "go" | "set"
+ * @param {string[]} options - Option array to compare | "dark" | "1"
+ * @returns {boolean} boolean
+ */
+export const isArgInvalid = (
+  arg: string[],
+  action: string,
+  options: string[]
+) => arg[0] !== action || !_.includes(options, arg[1]) || arg.length > 2;
+
 /**
  * Transform current cmd & arg into array
  * then return back the array