add watch button

Author: vaibhavhrt

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to the "react-github-buttons" project will be documented in this file.
 
+## [Unreleased]
+### Added
+
+- Watch Button
+
 ## [0.1.0] 2019-6-13
 ### Added
 

README.md

@@ -1,12 +1,12 @@
 # react-github-buttons
 
-> React Components for dynamic buttons for github repo's start, fork etc.
+> React Components for dynamic buttons for github repo's start, fork etc.
 
 [![NPM](https://img.shields.io/npm/v/react-github-buttons.svg)](https://www.npmjs.com/package/react-github-buttons) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 ## Features
 
-Fork, GitHub's Star, Fork, Watch etc.(See full list below) buttons with realtime numbers of star, fork etc. as React Components.
+Provies GitHub's Star, Fork, Watch etc.(See full list below) buttons with realtime numbers of star, fork etc. as React Components.
 
 ## Install
 

example/src/App.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
 
-import { Fork, Star } from 'react-github-buttons';
+import { Fork, Star, Watch } 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' />
+        <Watch owner='vaibhavhrt' repo='react-github-buttons' />
       </div>
     )
   }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-github-buttons",
   "version": "0.1.0",
-  "description": "React Components for dynamic buttons for github repo's star, fork etc.",
+  "description": "React Components for dynamic buttons for github repo's star, fork etc.",
   "author": "vaibhavhrt",
   "license": "MIT",
   "repository": "vaibhavhrt/react-github-buttons",

src/index.ts

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

src/lib/githubButton.tsx

@@ -6,14 +6,15 @@ import * as React from "react";
 
 import classes from "../styles.css";
 
-import StarIcon from "./icons/starIcon";
 import ForkIcon from "./icons/forkIcon";
+import StarIcon from "./icons/starIcon";
+import WatchIcon from "./icons/watchIcon";
 
 function getDataForVariant(
   variant: string,
   count: number,
   owner: string,
-  repo: string
+  repo: string,
   ): {
     title: string;
     btnTitle: string;
@@ -35,10 +36,16 @@ function getDataForVariant(
     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`;
+    countUrl = `https://github.com/${owner}/${repo}/network/members`;
     return { title, btnTitle, label, countUrl, Icon: ForkIcon };
+  } else if (variant === "watch") {
+    title = "Watch";
+    btnTitle = "";
+    label = `${count} users are watching this repository`;
+    countUrl = `https://github.com/${owner}/${repo}/watchers`;
+    return { title, btnTitle, label, countUrl, Icon: WatchIcon };
   }
-  throw new Error("Invalid Variant, supply one of [star, fork]");
+  throw new Error("Invalid Variant, supply one of [star, fork, watch]");
 }
 
 export interface IPropTypes {
@@ -56,7 +63,7 @@ export default function GithubButton(props: IPropTypes) {
     <div className={classes.root}>
       <button title={btnTitle} className={classes.button}>
         <Icon />
-        {title}
+        {` ${title}`}
       </button>
       <a
         className={classes.count}
@@ -75,5 +82,5 @@ GithubButton.propTypes = {
   count: PropTypes.node.isRequired,
   owner: PropTypes.string.isRequired,
   repo: PropTypes.string.isRequired,
-  variant: PropTypes.oneOf(["star", "fork"]),
+  variant: PropTypes.oneOf(["star", "fork", "watch"]),
 };

src/lib/icons/forkIcon.tsx

@@ -1,4 +1,3 @@
-/* tslint:disable:max-line-length */
 import * as React from "react";
 import classes from "../../styles.css";
 
@@ -13,6 +12,7 @@ export default function ForkIcon() {
     >
       <path
         fillRule="evenodd"
+        // tslint:disable-next-line:max-line-length
         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>

src/lib/icons/watchIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import classes from "../../styles.css";
+
+export default function StarIcon() {
+  return (
+    <svg
+      className={classes.svgicon}
+      viewBox="0 0 16 16"
+      version="1.1"
+      width="16"
+      height="16"
+    >
+      <path
+        fillRule="evenodd"
+        // tslint:disable-next-line:max-line-length
+        d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"
+      />
+    </svg>
+  );
+}

src/watch.tsx

@@ -0,0 +1,43 @@
+/**
+ * @function Watch
+ */
+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 {
+  watchers_count: number;
+}
+
+export default class Watch extends React.Component<IPropTypes, IState> {
+  static propTypes = {
+    owner: PropTypes.string.isRequired,
+    repo: PropTypes.string.isRequired,
+  };
+
+  constructor(props: IPropTypes) {
+    super(props);
+    this.state = {
+      watchers_count: 0,
+    };
+  }
+
+  componentDidMount() {
+    const { owner, repo } = this.props;
+    fetch(`https://api.github.com/repos/${owner}/${repo}`).then((res) => res.json()).then((res) => {
+      this.setState({ watchers_count: res.watchers_count });
+    });
+  }
+
+  render() {
+    // const { owner, repo } = this.props;
+    const { watchers_count } = this.state;
+    return <GithubButton variant="watch" count={watchers_count} { ...this.props } />;
+  }
+}