add fork button

Author: vaibhavhrt

example/src/App.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 
-import { Star } from 'react-github-buttons';
+import { Fork, Star } from 'react-github-buttons';
 
 export default class App extends Component {
   render () {
     return (
       <div>
         <Star owner='vaibhavhrt' repo='react-github-buttons' />
+        <Fork owner='vaibhavhrt' repo='react-github-buttons' />
       </div>
     )
   }

package.json

@@ -20,7 +20,7 @@
     "prepare": "npm run build",
     "predeploy": "cd example && npm install && npm run build",
     "deploy": "gh-pages -d example/build",
-    "lint": "tslint **/*.{ts,tsx} --exclude **/node_modules/**"
+    "lint": "tslint **/src/**.{ts,tsx} --exclude **/node_modules/**"
   },
   "dependencies": {},
   "peerDependencies": {

src/fork.tsx

@@ -0,0 +1,43 @@
+/**
+ * @function Fork
+ */
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import GithubButton from "./lib/githubButton";
+
+export interface IPropTypes {
+  owner: string;
+  repo: string;
+}
+
+export interface IState {
+  forks_count: number;
+}
+
+export default class Fork extends React.Component<IPropTypes, IState> {
+  static propTypes = {
+    owner: PropTypes.string.isRequired,
+    repo: PropTypes.string.isRequired,
+  };
+
+  constructor(props: IPropTypes) {
+    super(props);
+    this.state = {
+      forks_count: 0,
+    };
+  }
+
+  componentDidMount() {
+    const { owner, repo } = this.props;
+    fetch(`https://api.github.com/repos/${owner}/${repo}`).then((res) => res.json()).then((res) => {
+      this.setState({ forks_count: res.forks_count });
+    });
+  }
+
+  render() {
+    // const { owner, repo } = this.props;
+    const { forks_count } = this.state;
+    return <GithubButton variant="fork" count={forks_count} { ...this.props } />;
+  }
+}

src/index.ts

@@ -1,3 +1,4 @@
 import Star from "./star";
+import Fork from "./fork";
 
-export { Star };
+export { Fork, Star };

src/lib/githubButton.tsx

@@ -7,17 +7,38 @@ import * as React from "react";
 import classes from "../styles.css";
 
 import StarIcon from "./icons/starIcon";
+import ForkIcon from "./icons/forkIcon";
 
-function getDataForVariant(variant: string, count: number): { title: string; label: string; Icon: () => JSX.Element; } {
+function getDataForVariant(
+  variant: string,
+  count: number,
+  owner: string,
+  repo: string
+  ): {
+    title: string;
+    btnTitle: string;
+    label: string;
+    countUrl: string;
+    Icon: () => JSX.Element;
+  } {
   let title: string;
+  let btnTitle: string;
   let label: string;
+  let countUrl: string;
   if (variant === "star") {
     title = "Star";
-    label = `${count} user starred this repository`;
-    return { title, label, Icon: StarIcon };
+    btnTitle = `Star ${owner}/${repo}`;
+    label = `${count} users starred this repository`;
+    countUrl = `https://github.com/${owner}/${repo}/stargazers`;
+    return { title, btnTitle, label, countUrl, Icon: StarIcon };
+  } else if (variant === "fork") {
+    title = "Fork";
+    btnTitle = `Fork your own copy of ${owner}/${repo} to your account`;
+    label = `${count} users forked this repository`;
+    countUrl = `https://github.com/vaibhavhrt/react-github-buttons/network/members`;
+    return { title, btnTitle, label, countUrl, Icon: ForkIcon };
   }
-  // throw new Error("Invalid Variant, supply one of [star, ]");
-  return { title: "", label: "", Icon: StarIcon };
+  throw new Error("Invalid Variant, supply one of [star, fork]");
 }
 
 export interface IPropTypes {
@@ -29,17 +50,17 @@ export interface IPropTypes {
 
 export default function GithubButton(props: IPropTypes) {
   const { owner, repo, variant, count } = props;
-  const { title, label, Icon } = getDataForVariant(variant, count);
+  const { title, btnTitle, label, countUrl, Icon } = getDataForVariant(variant, count, owner, repo);
 
   return (
     <div className={classes.root}>
-      <button title={`Star ${owner}/${repo}`} className={classes.button}>
+      <button title={btnTitle} className={classes.button}>
         <Icon />
         {title}
       </button>
       <a
         className={classes.count}
-        href={`https://github.com/${owner}/${repo}/stargazers`}
+        href={countUrl}
         aria-label={label}
         target="_blank"
         rel="noreferrer noopener"

src/lib/icons/forkIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable:max-line-length */
+import * as React from "react";
+import classes from "../../styles.css";
+
+export default function ForkIcon() {
+  return (
+    <svg
+      className={classes.svgicon}
+      viewBox="0 0 10 16"
+      version="1.1"
+      width="10"
+      height="16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"
+      />
+    </svg>
+  );
+}