split code for easier reusability

Author: vaibhavhrt

src/lib/githubButton.tsx

@@ -0,0 +1,58 @@
+/**
+ * @function GithubButton
+ */
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import classes from "../styles.css";
+
+import StarIcon from "./icons/starIcon";
+
+function getDataForVariant(variant: string, count: number): { title: string; label: string; Icon: () => JSX.Element; } {
+  let title: string;
+  let label: string;
+  if (variant === "star") {
+    title = "Star";
+    label = `${count} user starred this repository`;
+    return { title, label, Icon: StarIcon };
+  }
+  // throw new Error("Invalid Variant, supply one of [star, ]");
+  return { title: "", label: "", Icon: StarIcon };
+}
+
+export interface IPropTypes {
+  owner: string;
+  repo: string;
+  variant: string;
+  count: number;
+}
+
+export default function GithubButton(props: IPropTypes) {
+  const { owner, repo, variant, count } = props;
+  const { title, label, Icon } = getDataForVariant(variant, count);
+
+  return (
+    <div className={classes.root}>
+      <button title={`Star ${owner}/${repo}`} className={classes.button}>
+        <Icon />
+        {title}
+      </button>
+      <a
+        className={classes.count}
+        href={`https://github.com/${owner}/${repo}/stargazers`}
+        aria-label={label}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {count}
+      </a>
+  </div>
+  );
+}
+
+GithubButton.propTypes = {
+  count: PropTypes.node.isRequired,
+  owner: PropTypes.string.isRequired,
+  repo: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(["star", "fork"]),
+};

src/star/starIcon.tsx src/lib/icons/starIcon.tsxsrc/star/starIcon.tsx renamed to src/lib/icons/starIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import classes from "../styles.css";
+import classes from "../../styles.css";
 
 export default function StarIcon() {
   return (

src/star/star.tsx

@@ -4,8 +4,7 @@
 import * as PropTypes from "prop-types";
 import * as React from "react";
 
-import classes from "../styles.css";
-import StarSvg from "./starIcon";
+import GithubButton from "../lib/githubButton";
 
 export interface IPropTypes {
   owner: string;
@@ -37,24 +36,8 @@ export default class Star extends React.Component<IPropTypes, IState> {
   }
 
   render() {
-    const { owner, repo } = this.props;
+    // const { owner, repo } = this.props;
     const { stargazers_count } = this.state;
-    return (
-      <div className={classes.root}>
-        <button title={`Star ${owner}/${repo}`} className={classes.button}>
-          <StarSvg />
-          Star
-        </button>
-        <a
-          className={classes.count}
-          href={`https://github.com/${owner}/${repo}/stargazers`}
-          aria-label={`${stargazers_count} user starred this repository`}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          {stargazers_count}
-        </a>
-    </div>
-    );
+    return <GithubButton variant="star" count={stargazers_count} { ...this.props } />;
   }
 }