RocketChat · samad-yar-khan · Mar 25, 2022 · Mar 27, 2022 · Mar 27, 2022 · Mar 27, 2022
diff --git a/app/components/github/contributorslist.js b/app/components/github/contributorslist.js
@@ -1,8 +1,14 @@
-import Image from 'next/image';
+import Image from "next/image";
 
 const ContributorsList = (props) => {
-
-  let contributors = props.data.contributors.Contributors;
+  let contributors = [];
+  if (
+    props.data &&
+    props.data.contributors &&
+    Array.isArray(props.data.contributors.Contributors)
+  ) {
+    contributors = props.data.contributors.Contributors;
+  }
 
   return (
     <div className="container">

diff --git a/app/components/github/githubissueslist.js b/app/components/github/githubissueslist.js
@@ -1,8 +1,8 @@
-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 { 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";
 
 const GithubIssue = ({ issue }) => {
   return (
@@ -17,12 +17,14 @@ const GithubIssue = ({ issue }) => {
           </span>
           {issue.state}
         </Col>
-        <Col xs="auto" className={`${styles.numbers}`}>#{issue.number}</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']}
+          {issue.reactions["+1"]}
         </Col>
         <Col xs="auto" className={`me-2 ${styles.numbers}`}>
           <span className="me-2">
@@ -36,10 +38,17 @@ const GithubIssue = ({ issue }) => {
 };
 
 const GithubIssuesList = (props) => {
-  const data =
-    props.data.issues.Issues.length > 10
-      ? props.data.issues.Issues.slice(0, 10)
-      : props.data.issues.Issues;
+  let data = [];
+  if (
+    props.data &&
+    props.data.issues &&
+    Array.isArray(props.data.issues.Issues)
+  ) {
+    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`}

diff --git a/app/components/github/githubpullreqeusts.js b/app/components/github/githubpullreqeusts.js
@@ -1,7 +1,7 @@
 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';
+import PullsIcon from "../../public/svg/pull";
 
 const GithubPullReqeust = ({ pull }) => {
   return (
@@ -41,10 +41,13 @@ const GithubPullReqeust = ({ pull }) => {
   );
 };
 const GithubPullRequestsList = (props) => {
-  const data =
-    props.data.pulls.pulls.length > 6
-      ? props.data.pulls.pulls.slice(0, 6)
-      : props.data.pulls.pulls;
+  let data = [];
+  if (props.data && props.data.pulls && Array.isArray(props.data.pulls.pulls)) {
+    data =
+      props.data.pulls.pulls.length > 6
+        ? props.data.pulls.pulls.slice(0, 6)
+        : props.data.pulls.pulls;
+  }
 
   return (
     <div

diff --git a/app/components/github/githubrepo.js b/app/components/github/githubrepo.js
@@ -1,59 +1,59 @@
-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';
+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}) => {
+const GithubRepo = ({ data }) => {
   return (
-
     <div
-    className={`${styles.container} d-flex flex-wrap justify-content-center`}
+      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 && (
+        <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>)
+                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>
+          )}
+          <Row className={`${styles.md_container} p-1`}>
+            <span>{data.description}</span>
+          </Row>
+        </Col>
+      )}
     </div>
   );
 };

diff --git a/app/components/gitlab/gitlabIssuesList.js b/app/components/gitlab/gitlabIssuesList.js
@@ -0,0 +1,66 @@
+import { Col, NavLink, Row } from "react-bootstrap";
+import LikeIcon from "../../public/svg/like";
+import DislikeIcon from "../../public/svg/dislike";
+import IssueIcon from "../../public/svg/issue";
+import styles from "../../styles/GitlabIssuesList.module.css";
+
+const GitLabIssue = ({ issue }) => {
+  return (
+    <Col className={`${styles.column} py-2 px-3 m-2 rounded`}>
+      <Row className={`${styles.item_container}`}>
+        <NavLink href={issue.web_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.iid}
+        </Col>
+        <Col xs="auto" className={`me-3 ${styles.numbers}`}>
+          <span className="me-2">
+            <LikeIcon />
+          </span>
+          {issue.upvotes}
+        </Col>
+        <Col xs="auto" className={`me-2 ${styles.numbers}`}>
+          <span className="me-2">
+            <DislikeIcon />
+          </span>
+          {issue.downvotes}
+        </Col>
+      </Row>
+    </Col>
+  );
+};
+
+const GitLabIssuesList = (props) => {
+  let data = [];
+  if (
+    props.data &&
+    props.data.issues &&
+    Array.isArray(props.data.issues.issues)
+  ) {
+    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) => <GitLabIssue key={issue.id} issue={issue} />)
+      ) : (
+        <p className="text-danger"> ERROR </p>
+      )}
+    </div>
+  );
+};
+
+export default GitLabIssuesList;
diff --git a/app/components/gitlab/gitlabMembersList.js b/app/components/gitlab/gitlabMembersList.js
@@ -0,0 +1,30 @@
+import Image from "next/image";
+
+const MembersList = (props) => {
+  let contributors = [];
+  if (
+    props.data &&
+    props.data.members &&
+    Array.isArray(props.data.members.members)
+  ) {
+    contributors = props.data.members.members;
+  }
+
+  return (
+    <div className="container">
+      {Array.isArray(contributors) &&
+        contributors.map((contributor) => (
+          <a href={contributor.web_url} key={contributor.id}>
+            <Image
+              className="rounded-circle"
+              src={contributor.avatar_url}
+              width={40}
+              height={40}
+            />
+          </a>
+        ))}
+    </div>
+  );
+};
+
+export default MembersList;
diff --git a/app/components/gitlab/gitlabMergeRequestList.js b/app/components/gitlab/gitlabMergeRequestList.js
@@ -0,0 +1,76 @@
+import { Col, NavLink, Row } from "react-bootstrap";
+import styles from "../../styles/GitlabMergeList.module.css";
+import Image from "next/image";
+import PullsIcon from "../../public/svg/pull";
+
+const GitlabMergeReqeust = ({ mergeRequest }) => {
+  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={mergeRequest.author.web_url}>
+            <Image
+              className="rounded-circle"
+              src={mergeRequest.author.avatar_url}
+              width={40}
+              height={40}
+            />
+          </a>
+        </Col>
+        <Col xs="auto" className={`${styles.username}`}>
+          <a href={mergeRequest.author.web_url}>
+            <span>{mergeRequest.author.name}</span>
+            <span>{" | "}</span>
+            <span>{`@${mergeRequest.author.username}`}</span>
+          </a>
+        </Col>
+      </Row>
+      <Row className={`${styles.item_container}`}>
+        <NavLink href={mergeRequest.web_url}>{mergeRequest.title}</NavLink>
+      </Row>
+      <Row className="d-flex align-items-center">
+        <Col xs="auto" className={`${styles.numbers}`}>
+          <span className="me-2">
+            <PullsIcon />
+          </span>
+          {mergeRequest.state}
+        </Col>
+        <Col xs="auto" className={`${styles.numbers}`}>
+          #{mergeRequest.iid}
+        </Col>
+      </Row>
+    </Col>
+  );
+};
+const GitlabMergeRequestsList = (props) => {
+  let data = [];
+  if (
+    props.data &&
+    props.data.merges &&
+    Array.isArray(props.data.merges.merges)
+  ) {
+    data =
+      props.data.merges.merges.length > 6
+        ? props.data.merges.merges.slice(0, 6)
+        : props.data.merges.merges;
+  }
+
+  return (
+    <div
+      className={`${styles.container} d-flex flex-wrap justify-content-center`}
+    >
+      {Array.isArray(data) ? (
+        data.map((mergeRequest) => (
+          <GitlabMergeReqeust
+            key={mergeRequest.id}
+            mergeRequest={mergeRequest}
+          />
+        ))
+      ) : (
+        <p className="text-danger"> ERROR </p>
+      )}
+    </div>
+  );
+};
+
+export default GitlabMergeRequestsList;