Merge pull request #7 from bdbch/1-branch-hooks

1 branch hooks

Author: bdbch

README.md

@@ -22,15 +22,7 @@ import { useRepos } from "@d2k/react-github";
 function MyComponent() {
   const { repos, loading, error } = useRepos("nat");
 
-  return (
-    <div>
-      {loading && <div>Loading repositories</div>}
-      {error && <div>{err}</div>}
-      {repos &&
-        repos.length > 0 &&
-        repos.map(repo => <div key={repo.id}>{repo.name}</div>)}
-    </div>
-  );
+  // your component
 }
 ```
 
@@ -42,17 +34,30 @@ import { useUser } from "@d2k/react-github";
 function MyComponent() {
   const { user, loading, error } = useUser("nat");
 
-  return (
-    <div>
-      {loading && <div>Loading repositories</div>}
-      {error && <div>{err}</div>}
-      {user && (
-        <div>
-          <h1>{user.login}</h1>
-          <img src={user.avatar_url} />
-        </div>
-      )}
-    </div>
-  );
+  // your component
+}
+```
+
+### Get branches from repo
+
+```js
+import { useBranches } from "@d2k/react-github";
+
+function MyComponent() {
+  const { branches, loading, error } = useBranches("facebook", "react");
+
+  // your component
+}
+```
+
+### Get branch from repo
+
+```js
+import { useBranch } from "@d2k/react-github";
+
+function MyComponent() {
+  const { branch, loading, error } = useBranch("facebook", "react", "master");
+
+  // your component
 }
 ```

docs/components/Branch.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { useBranch } from "../../src";
+
+const Branch = () => {
+  const { branch, loading, error } = useBranch("facebook", "react", "master");
+
+  return (
+    <div>
+      <h1>Branch by repo</h1>
+      {loading && <div>Loading branch from Github</div>}
+      {error && <div>{error}</div>}
+      {branch && (
+        <div>
+          {branch.name} - {branch.commit.sha}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Branch;

docs/components/Branches.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useBranches } from "../../src";
+
+const Branches = () => {
+  const { branches, loading, error } = useBranches("facebook", "react");
+
+  return (
+    <div>
+      <h1>Branches by repo</h1>
+      {loading && <div>Loading branches from Github</div>}
+      {error && <div>{error}</div>}
+      {branches &&
+        branches.length > 0 &&
+        branches.map(branch => (
+          <div key={branch.commit.sha}>
+            <h4>
+              {branch.name} - {branch.commit.sha}
+            </h4>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default Branches;

docs/example.js

@@ -2,6 +2,8 @@ import React from "react";
 import { render } from "react-dom";
 import Repos from "./components/Repos";
 import User from "./components/User";
+import Branches from "./components/Branches";
+import Branch from "./components/Branch";
 
 function App() {
   return (
@@ -10,6 +12,10 @@ function App() {
       <hr />
       <User />
       <hr />
+      <Branches />
+      <hr />
+      <Branch />
+      <hr />
     </div>
   );
 }

package.json

@@ -19,7 +19,7 @@
   ],
   "scripts": {
     "publish": "parcel build docs/index.html",
-    "dev": "parcel docs/index.html",
+    "start": "parcel docs/index.html",
     "release": "np"
   },
   "devDependencies": {

src/index.js

@@ -1,12 +1,22 @@
 import useRepos from './lib/useRepos'
 import useUser from './lib/useUser'
+import {
+  useBranches,
+} from './lib/branch/useBranches'
+import {
+  useBranch
+} from './lib/branch/useBranch'
 
 export {
   useRepos,
   useUser,
+  useBranches,
+  useBranch,
 }
 
 export default {
   useRepos,
   useUser,
+  useBranches,
+  useBranch,
 }

src/lib/branch/useBranch.js

@@ -0,0 +1,35 @@
+import {
+  useState,
+  useEffect
+} from 'react'
+
+export const useBranch = (owner, repo, branchName) => {
+  const [branch, setBranch] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    if (repo && repo.length > 0 && owner && owner.length && branchName && branchName.length > 0) {
+      setLoading(true)
+      setError(null)
+      fetch(`https://api.github.com/repos/${owner}/${repo}/branches/${branchName}`)
+        .then(res => res.json())
+        .then(data => {
+          setLoading(false)
+          setBranch(data)
+          setError(null)
+        })
+        .catch(e => {
+          setLoading(false)
+          setBranch(null)
+          setError(e)
+        })
+    }
+  }, [owner, repo, branchName])
+
+  return {
+    branch,
+    loading,
+    error
+  }
+}

src/lib/branch/useBranches.js

@@ -0,0 +1,35 @@
+import {
+  useState,
+  useEffect
+} from 'react'
+
+export const useBranches = (owner, repo) => {
+  const [branches, setBranches] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    if (repo && repo.length > 0 && owner && owner.length) {
+      setLoading(true)
+      setError(null)
+      fetch(`https://api.github.com/repos/${owner}/${repo}/branches`)
+        .then(res => res.json())
+        .then(data => {
+          setLoading(false)
+          setBranches(data)
+          setError(null)
+        })
+        .catch(e => {
+          setLoading(false)
+          setBranches([])
+          setError(e)
+        })
+    }
+  }, [owner, repo])
+
+  return {
+    branches,
+    loading,
+    error
+  }
+}