Add GitHub Component Kit

closes #90
RocketChat · Mar 26, 2022 · 0930180 · 0930180
1 parent 2a31cab
commit 0930180
Show file tree

Hide file tree

Showing 33 changed files with 1,252 additions and 222 deletions.
diff --git a/app/components/github/contributorslist.js b/app/components/github/contributorslist.js
@@ -1,6 +1,9 @@
 import Image from 'next/image';
 
-const ContributorsList = ({ contributors }) => {
+const ContributorsList = (props) => {
+
+  let contributors = props.data.contributors.Contributors;
+
   return (
     <div className="container">
       {Array.isArray(contributors) &&

diff --git a/app/components/github/githubissue.js b/app/components/github/githubissue.js
diff --git a/app/components/github/githubissueslist.js b/app/components/github/githubissueslist.js
@@ -1,25 +1,54 @@
-import { useEffect, useState } from 'react';
+import { Col, NavLink, Row } from 'react-bootstrap';
+import LikeIcon from '../../public/svg/like';
+import CommentIcon from '../../public/svg/comment';
+import IssueIcon from '../../public/svg/issue';
 import styles from '../../styles/GithubIssuesList.module.css';
-import GithubIssue from './githubissue';
 
-const GithubIssuesList = ({ issues, noOfIssues = 6 }) => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    if (Array.isArray(issues)) {
-      setData(issues.splice(0, noOfIssues));
-    } else {
-      setData(issues);
-    }
-  }, [issues]);
+const GithubIssue = ({ issue }) => {
+  return (
+    <Col className={`${styles.column} py-2 px-3 m-2 rounded`}>
+      <Row className={`${styles.item_container}`}>
+        <NavLink href={issue.html_url}>{issue.title}</NavLink>
+      </Row>
+      <Row className="d-flex align-items-center">
+        <Col xs="auto" className={`${styles.numbers}`}>
+          <span className="me-2">
+            <IssueIcon />
+          </span>
+          {issue.state}
+        </Col>
+        <Col xs="auto" className={`${styles.numbers}`}>#{issue.number}</Col>
+        <Col xs="auto" className={`me-3 ${styles.numbers}`}>
+          <span className="me-2">
+            <LikeIcon />
+          </span>
+          {issue.reactions['+1']}
+        </Col>
+        <Col xs="auto" className={`me-2 ${styles.numbers}`}>
+          <span className="me-2">
+            <CommentIcon />
+          </span>
+          {issue.comments}
+        </Col>
+      </Row>
+    </Col>
+  );
+};
 
+const GithubIssuesList = (props) => {
+  const data =
+    props.data.issues.Issues.length > 10
+      ? props.data.issues.Issues.slice(0, 10)
+      : props.data.issues.Issues;
   return (
     <div
       className={`${styles.container} d-flex flex-wrap justify-content-center`}
     >
-      {Array.isArray(data) ? data.map((issue) => (
-        <GithubIssue key={issue.id} issue={issue} />
-      )): <p className='text-danger'>{issues}, ERROR :( </p>}
+      {Array.isArray(data) ? (
+        data.map((issue) => <GithubIssue key={issue.id} issue={issue} />)
+      ) : (
+        <p className="text-danger"> ERROR </p>
+      )}
     </div>
   );
 };

diff --git a/app/components/github/githubpullreqeusts.js b/app/components/github/githubpullreqeusts.js
@@ -0,0 +1,62 @@
+import { Col, NavLink, Row } from "react-bootstrap";
+import styles from "../../styles/GithubPullRequest.module.css";
+import Image from "next/image";
+import PullsIcon from '../../public/svg/pull';
+
+const GithubPullReqeust = ({ pull }) => {
+  return (
+    <Col className={`${styles.column} py-2 px-3 m-2 rounded`}>
+      <Row className="d-flex align-items-center">
+        <Col xs="auto" className={`${styles.numbers}`}>
+          <a href={pull.user.html_url}>
+            <Image
+              className="rounded-circle"
+              src={pull.user.avatar_url}
+              width={40}
+              height={40}
+            />
+          </a>
+        </Col>
+        <Col xs="auto" className={`${styles.username}`}>
+          <a href={pull.user.html_url}>
+            <span>{pull.user.login}</span>
+          </a>
+        </Col>
+      </Row>
+      <Row className={`${styles.item_container}`}>
+        <NavLink href={pull.html_url}>{pull.title}</NavLink>
+      </Row>
+      <Row className="d-flex align-items-center">
+        <Col xs="auto" className={`${styles.numbers}`}>
+          <span className="me-2">
+            <PullsIcon />
+          </span>
+          {pull.state}
+        </Col>
+        <Col xs="auto" className={`${styles.numbers}`}>
+          #{pull.number}
+        </Col>
+      </Row>
+    </Col>
+  );
+};
+const GithubPullRequestsList = (props) => {
+  const data =
+    props.data.pulls.pulls.length > 6
+      ? props.data.pulls.pulls.slice(0, 6)
+      : props.data.pulls.pulls;
+
+  return (
+    <div
+      className={`${styles.container} d-flex flex-wrap justify-content-center`}
+    >
+      {Array.isArray(data) ? (
+        data.map((pull) => <GithubPullReqeust key={pull.id} pull={pull} />)
+      ) : (
+        <p className="text-danger"> ERROR </p>
+      )}
+    </div>
+  );
+};
+
+export default GithubPullRequestsList;
diff --git a/app/components/github/githubrepo.js b/app/components/github/githubrepo.js
@@ -0,0 +1,61 @@
+import { Col, NavLink, Row , Badge } from 'react-bootstrap';
+import IssueIcon from '../../public/svg/issue';
+import StarIcon from '../../public/svg/star';
+import ForkIcon from '../../public/svg/forks';
+import styles from '../../styles/GithubRepo.module.css';
+
+const GithubRepo = ({data}) => {
+  return (
+
+    <div
+    className={`${styles.container} d-flex flex-wrap justify-content-center`}
+    >
+      <Col className={`${styles.column} py-2 px-3 m-2 rounded`}>
+        <Row className={`${styles.item_container}`}>
+          <NavLink href={data.html_url}>{data.full_name}</NavLink>
+        </Row>
+        <Row className="d-flex align-items-center">
+          <Col xs="auto" className={`${styles.numbers}`}>
+            <span className="me-2">
+              <IssueIcon />
+            </span>
+            {data.open_issues_count}
+          </Col>
+          <Col xs="auto" className={`me-1 ${styles.numbers}`}>
+            <span className="me-2">
+              <StarIcon />
+            </span>
+            {data.stargazers_count}
+          </Col>
+          <Col xs="auto" className={`me-2 ${styles.numbers}`}>
+            <span className="me-2">
+              <ForkIcon />
+            </span>
+            {data.forks_count}
+          </Col>
+        </Row>
+        {
+          (Array.isArray(data.topics) && (data.topics.length > 0 )) && 
+          (
+            <Row className={`${styles.md_container} p-1 d-flex align-items-center justify-content-start`}>
+              {data.topics.map((topic) => {
+                return (<Col xs="auto" className={`m-0 px-1`}>
+                <Badge pill bg="light" text="dark">
+                  {topic}
+                </Badge>
+              </Col>)
+              })}
+            </Row>
+          )
+        }
+        <Row className={`${styles.md_container} p-1`}>
+          <span>
+              {data.description}
+          </span>
+        </Row>
+      </Col>
+    </div>
+  );
+};
+
+export default GithubRepo;
diff --git a/app/components/github/index.js b/app/components/github/index.js
@@ -1,3 +1,17 @@
-export { default as ContributorsList } from './contributorslist'
-export { default as GithubIssue } from './githubissue'
-export { default as GithubIssuesList } from './githubissueslist'
+import GithubIssuesList from "./githubissueslist";
+import ContributorsList from "./contributorslist";
+import GithubPullRequestsList from "./githubpullreqeusts";
+import GithubRepo from "./githubrepo";
+
+const Github = (props) => {
+  if(props.type === 'issues'){
+    return (<GithubIssuesList data={props.githubData}/>);
+  }else if(props.type === 'pulls'){
+    return(<GithubPullRequestsList data={props.githubData}/>)
+  }else if(props.type === 'contributors'){
+    return (<ContributorsList data={props.githubData}/>);
+  }
+  return (<GithubRepo data={props.githubData.repositoryData}/>);
+};
+
+export default Github;
diff --git a/app/components/mdpreview.js b/app/components/mdpreview.js
diff --git a/app/lib/github.js b/app/lib/github.js
@@ -1,32 +1,26 @@
-import { fetchAPI } from './api';
+import { fetchAPI } from "./api";
 
-export const getIssues = async (owner, repo) => {
-  let issues = [
-    {
-      id: 1,
-      title:
-        'An error occurred, you can still visit our issues clicking this link',
-      html_url: `https://github.com/${owner}/${repo}/issues`,
-      reactions: { '+1': 0 },
-      comments: 0,
-      body: '',
-      state: 'open',
-      number: 1,
-    },
-  ];
-  const res = await fetchAPI('/ghissues');
-  console.log(res);
-  if (Array.isArray(res) && Array.isArray(res[0].Issues)) {
-    issues = res[0].Issues;
+export const githubKitData = async (owner, name, needed) => {
+  try {
+    const res = await fetchAPI("/github-repositories");
+    let neededRepository = new Object();
+    res.forEach((repo) => {
+      if (repo.owner === owner && repo.name === name) {
+        neededRepository["id"] = repo.id;
+        neededRepository["name"] = repo.name;
+        neededRepository["owner"] = repo.owner;
+        neededRepository["repositoryData"] = repo.repositoryData;
+        if(Array.isArray(needed)){
+          needed.forEach((neededData) => {
+            neededRepository[neededData] = repo[neededData];
+          });
+        }else if(typeof myVariable !== 'undefined'){
+          neededRepository[needed] = repo[needed];
+        } 
+      }
+    });
+    return neededRepository;
+  } catch (error) {
+    console.log(error);
   }
-  return issues;
-};
-
-export const getContributors = async () => {
-  let contributors = [];
-  const res = await fetchAPI('/ghcontributors');
-  if (Array.isArray(res) && Array.isArray(res[0].Contributors)) {
-    contributors = res[0].Contributors;
-  }
-  return contributors;
 };