Merge pull request #331 from ArslanYM/feat/addingAPI

feat: connected to api

web/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

web/src/App.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { Home, Contributors, Guide, ProjectList } from "./pages";
 import MasterLayout from "./layouts";
+import { IssueList } from "./pages/Issues/IssueList";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/Docs" element={<Guide />} />
           <Route path="/projects" element={<ProjectList />} />
+          <Route path="/issues" element={<IssueList />} />
         </Routes>
       </MasterLayout>
     </BrowserRouter>

web/src/pages/Issues/IssueList.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const IssueList = () => {
+  return (
+    <div>IssueList</div>
+  )
+}

web/src/pages/Issues/ListOfOrgs/ProjectCard.jsx

@@ -1,6 +1,8 @@
-import React from "react";
 import PropTypes from 'prop-types';
 import Placeholder from "../../../assets/img-placeholder.jpg"
+import axios from 'axios';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const ProjectCard = ({
   projectLink,
@@ -9,6 +11,24 @@ const ProjectCard = ({
   description,
   tags: propsTags,
 }) => {
+
+
+  const [issues, setIssues] = useState(null);
+
+  async function getIssues() {
+    const getLastTwoHeaders = (link) => link.split('/').slice(-2);
+    const lastTwoHeaders = getLastTwoHeaders(projectLink);
+    var orgName = lastTwoHeaders[0];
+    var projectName = lastTwoHeaders[1];
+    const response = await axios.get(`https://issuefinder.onrender.com/api/goodfirstissues/${orgName}/${projectName}`);
+    setIssues(response.data.issues);
+  }
+
+  //console.log(issues);
+  //at this point if you click on find issues for any project, it will log its good first issues ( need to fix the ./listoforgs to specify link exactly to a project.)
+
+
+
   const tags = propsTags.map((tag, key) => (
     <span
       key={key}
@@ -25,7 +45,7 @@ const ProjectCard = ({
           rel="preload"
           loading="lazy"
           className="h-28 overflow-hidden object-scale-down mx-auto w-full rounded-t-lg"
-          src= {logoLink}
+          src={logoLink}
           alt=""
           onError={(e) => {
             e.target.className = "bg-white h-28 overflow-hidden object-scale-down mx-auto w-full rounded-t-lg"
@@ -35,33 +55,36 @@ const ProjectCard = ({
       </a>
       <div className="grid grid-cols-1 h-full p-5">
         <a href={projectLink}>
-        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{name}</h5>
+          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{name}</h5>
         </a>
         <p className="mb-3 font-normal text-gray-400">{description}</p>
         <div className="mb-3">{tags}</div>
         <div>
-          <a
-            target="_blank"
-            rel="noreferrer"
-            className="issue-btn inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-gray-900 rounded-lg hover:bg-gray-600 focus:ring-4 focus:outline-none focus:ring-blue-300 "
-          >
-            Find Issues
-            <svg
-              className="w-3.5 h-3.5 ml-2"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 14 10"
+          <button onClick={getIssues}>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="issue-btn inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-gray-900 rounded-lg hover:bg-gray-600 focus:ring-4 focus:outline-none focus:ring-blue-300 "
             >
-              <path
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M1 5h12m0 0L9 1m4 4L9 9"
-              />
-            </svg>
-          </a>
+              Find Issues
+              <svg
+                className="w-3.5 h-3.5 ml-2"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 14 10"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M1 5h12m0 0L9 1m4 4L9 9"
+                />
+              </svg>
+            </a>
+          </button>
+
         </div>
       </div>
     </div>
@@ -71,7 +94,7 @@ const ProjectCard = ({
 export default ProjectCard;
 
 ProjectCard.propTypes = {
-  projectLink: PropTypes.string.isRequired,
+  projectLink: PropTypes.string,
   logoLink: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,