Added api and other functions

msmfa · msmfa · commit f32fb6e857a8 · 2020-05-12T22:22:34.000+01:00
diff --git a/.prettierrc b/.prettierrc
@@ -1,10 +1,10 @@
 {
-  "singleQuote": true,
+  "singleQuote": false,
   "jsxSingleQuote": true,
   "semi": false,
   "tabWidth": 2,
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "arrowParens": "always",
   "trailingComma": "none"
-}
+}
diff --git a/example/src/App.js b/example/src/App.js
@@ -1,10 +1,14 @@
-import React from 'react'
+import React from "react"
 
-import { ExampleComponent } from 'github-repo-display-react'
-import 'github-repo-display-react/dist/index.css'
+import { GithubRepoDisplay } from "github-repo-display-react"
+import "github-repo-display-react/dist/index.css"
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
+  return (
+    <div className='repos'>
+      <GithubRepoDisplay userName='msmfa' />
+    </div>
+  )
 }
 
 export default App
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,8 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "axios": "^0.19.2"
   },
   "devDependencies": {
     "microbundle-crl": "^0.13.10",
@@ -45,7 +46,8 @@
     "prettier": "^2.0.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^3.4.1",
+    "axios": "^0.19.2"
   },
   "files": [
     "dist"
diff --git a/src/components/DisplaySortedRepoData.js b/src/components/DisplaySortedRepoData.js
@@ -0,0 +1,38 @@
+import React from "react"
+import { removeDash } from "../helper/removeDash"
+import { sortByMostRecentDate } from "../helper/sortByMostRecentDate"
+import { convertToHours } from "../helper/convertToHours"
+import { arrayToLength } from "../helper/arrayToLength"
+import { getRemainingSeconds } from "../helper/getRemainingSeconds"
+
+export function DisplaySortedRepoData({ repoData, numOfrepos }) {
+  const sortedRepos = sortByMostRecentDate(repoData)
+  const sortedAndReducedRepos = arrayToLength(sortedRepos, numOfrepos)
+
+  return (
+    <div>
+      {sortedAndReducedRepos
+        ? sortedAndReducedRepos.map((repo) => (
+            <ul key={repo.id}>
+              <li>{removeDash(repo.name)}</li>
+              <li>{repo.description}</li>
+              <li>
+                <a
+                  href={repo.html_url}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  Github
+                </a>
+              </li>
+              <li>
+                {convertToHours(
+                  getRemainingSeconds(new Date(repo.updated_at), Date.now())
+                )}
+              </li>
+            </ul>
+          ))
+        : null}
+    </div>
+  )
+}
diff --git a/src/helper/arrayToLength.js b/src/helper/arrayToLength.js
@@ -0,0 +1,3 @@
+export function arrayToLength(array, length) {
+  if (array) return array.splice(0, length)
+}
diff --git a/src/helper/convertToHours.js b/src/helper/convertToHours.js
@@ -0,0 +1,15 @@
+export function convertToHours(seconds) {
+  if (seconds >= 63072000) return `${Math.floor(seconds / 31536000)} years ago`
+  if (seconds >= 31536000) return `${Math.floor(seconds / 31536000)} year ago`
+  if (seconds >= 5184000) return `${Math.floor(seconds / 2592000)} months ago`
+  if (seconds >= 2592000) return `${Math.floor(seconds / 2592000)} month ago`
+  if (seconds >= 1209600) return `${Math.floor(seconds / 604800)} weeks ago`
+  if (seconds >= 604800) return `${Math.floor(seconds / 604800)} week ago`
+  if (seconds >= 172800) return `${Math.floor(seconds / 86400)} days ago`
+  if (seconds >= 86400) return `${Math.floor(seconds / 86400)} day ago`
+  if (seconds >= 7200) return `${Math.floor(seconds / 3600)} hours ago`
+  if (seconds >= 3600) return `${Math.floor(seconds / 3600)} hour ago`
+  if (seconds >= 120) return `${Math.floor(seconds / 60)} minutes ago`
+  if (seconds >= 60) return `${Math.floor(seconds / 60)} minute ago`
+  if (seconds < 60) return `${Math.floor(seconds)} seconds ago`
+}
diff --git a/src/helper/fetchApiData.js b/src/helper/fetchApiData.js
@@ -0,0 +1,8 @@
+import Axios from "axios"
+
+export const fetchApiData = async (username) => {
+  const response = await Axios.get(
+    `https://api.github.com/users/${username}/repos`
+  )
+  return response.data
+}
diff --git a/src/helper/getRemainingSeconds.js b/src/helper/getRemainingSeconds.js
@@ -0,0 +1,3 @@
+export const getRemainingSeconds = (previousDate, currentDate) => {
+  return Math.floor((currentDate - previousDate) / 1000)
+}
diff --git a/src/helper/removeDash.js b/src/helper/removeDash.js
@@ -0,0 +1,3 @@
+export function removeDash(string) {
+  return string.replace(/-/g, " ")
+}
diff --git a/src/helper/sortByMostRecentDate.js b/src/helper/sortByMostRecentDate.js
@@ -0,0 +1,6 @@
+export function sortByMostRecentDate(repos) {
+  if (repos !== undefined)
+    return repos.sort(
+      (a, b) => +new Date(b.updated_at) - +new Date(a.updated_at)
+    )
+}
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,29 @@
-import React from 'react'
-import styles from './styles.module.css'
+import React, { useEffect, useState } from "react"
+import styles from "./styles.module.css"
+import Axios from "Axios"
+import { DisplaySortedRepoData } from "./components/DisplaySortedRepoData"
+const fetchApiData = async (username) => {
+  const response = await Axios.get(
+    `https://api.github.com/users/${username}/repos`
+  )
+  return response.data
+}
+
+function GetRepoData({ userName }) {
+  const [repoData, setRepoData] = useState([])
+
+  useEffect(() => {
+    fetchApiData(userName).then(setRepoData)
+  }, [userName])
+
+  return <DisplaySortedRepoData numOfrepos={3} repoData={repoData} />
+}
 
-export const ExampleComponent = ({ text }) => {
-  return <div className={styles.test}>Example Component: {text}</div>
+export const GithubRepoDisplay = ({ userName }) => {
+  return (
+    <div className={styles.test}>
+      {" "}
+      <GetRepoData userName={userName} />
+    </div>
+  )
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function arrayToLength(array, length) {`
	`2`	`+ if (array) return array.splice(0, length)`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const getRemainingSeconds = (previousDate, currentDate) => {`
	`2`	`+ return Math.floor((currentDate - previousDate) / 1000)`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function removeDash(string) {`
	`2`	`+ return string.replace(/-/g, " ")`
	`3`	`+}`