convert star to class component and fetch actual data from github api

Author: vaibhavhrt

example/src/App.js

@@ -6,7 +6,7 @@ export default class App extends Component {
   render () {
     return (
       <div>
-        <Star repo={'vaibhavhrt/react-github-buttons'} />
+        <Star owner='vaibhavhrt' repo='react-github-buttons' />
       </div>
     )
   }

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

src/star/star.tsx

@@ -1,29 +1,60 @@
 /**
  * @function Star
  */
+import * as PropTypes from "prop-types";
 import * as React from "react";
+
 import classes from "../styles.css";
 import StarSvg from "./starIcon";
 
-export interface IPropTypes { repo: string; }
+export interface IPropTypes {
+  owner: string;
+  repo: string;
+}
+
+export interface IState {
+  stargazers_count: number;
+}
+
+export default class Star extends React.Component<IPropTypes, IState> {
+  static propTypes = {
+    owner: PropTypes.string.isRequired,
+    repo: PropTypes.string.isRequired,
+  };
+
+  constructor(props: IPropTypes) {
+    super(props);
+    this.state = {
+      stargazers_count: 0,
+    };
+  }
+
+  componentDidMount() {
+    const { owner, repo } = this.props;
+    fetch(`https://api.github.com/repos/${owner}/${repo}`).then((res) => res.json()).then((res) => {
+      this.setState({ stargazers_count: res.stargazers_count });
+    });
+  }
 
-export default function Star(props: IPropTypes) {
-  const { repo } = props;
-  return (
-    <div className={classes.root}>
-      <button title={`Star ${repo}`} className={classes.button}>
-        <StarSvg />
-        Star
-      </button>
-      <a
-        className={classes.count}
-        href={`https://github.com/${repo}/stargazers`}
-        aria-label={`${1} user starred this repository`}
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        {1}
-      </a>
-  </div>
-  );
+  render() {
+    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>
+    );
+  }
 }

tslint.json

@@ -3,6 +3,7 @@
     "tslint:recommended"
   ],
   "rules": {
-    "quotemark": [true, "double", "jsx-double"]
+    "quotemark": [true, "double", "jsx-double"],
+    "member-access": [true, "no-public"]
   }
 }