removing organisation form

ireneelizabethsabu · Sep 5, 2021 · bcb8901 · bcb8901
1 parent a62cf8f
commit bcb8901
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 35 deletions.
diff --git a/src/api/index.js b/src/api/index.js
@@ -31,27 +31,31 @@ const getOrgs = async (nam) => {
   }
 };
 
-const getRepos = async (nam) => {
-  let repo = [];
-  try {
-    const repos = await axios.get(
-      "https://api.github.com/users/" + nam + "/repos"
-    );
-    repos.data.map(async (ele) => {
-      if (!ele.fork) {
-        const lang = await axios.get(ele.languages_url);
-        repo.push({
-          name: ele.full_name,
-          lang: lang.data,
-          stargazer_count: ele.stargazers_count,
-        });
-      }
-    });
+const sortByStar = (a,b) => {
+    if(a.stargazer_count > b.stargazer_count)
+        return -1;
+    else if(a.stargazer_count === b.stargazer_count)
+        return 0;
+    else return 1;
+}
 
-    return repo;
-  } catch (err) {
-    console.log("Repos API call not complete");
-  }
+const getRepos = async (nam) => {
+    let repo=[];
+    try{
+        const repos= await axios.get("https://api.github.com/users/"+nam+"/repos");
+        repos.data.map(async (ele)=>{
+            const lang = await axios.get(ele.languages_url);
+            repo.push({
+                name:ele.full_name,
+                lang: lang.data,
+                stargazer_count:ele.stargazers_count
+            });
+        })
+        return repo.sort(sortByStar);
+    }
+    catch(err){
+      console.log("Repos API call not complete");  
+    }
 };
 
 export { getUsers, getRepos, getOrgs };
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
diff --git a/src/components/CV/cv.js b/src/components/CV/cv.js
@@ -1,11 +1,25 @@
+import React,{useState,useEffect} from "react";
+import { useParams } from "react-router-dom";
+import { getUsers } from "../../api";
 import Header from "../Header/header";
 import Language from "../Languages/Language";
+import Organisation from '../Organisation/Organisation'
 
 const CV=() => {
+    const [data, setData] = useState(null)
+    const {id} = useParams();
+
+    useEffect(() => {
+        getUsers(id).then(res => {
+            setData(res.data)
+        }).catch(err => console.log(err))
+    }, [id])
+
     return(
         <>
-        <Header/>
-        <Language/>
+            <Header data={data}/>
+            <Language/>
+            <Organisation/>
         </>
     )
 }

diff --git a/src/components/Header/header.js b/src/components/Header/header.js
@@ -7,24 +7,24 @@ import {ReactComponent as Twitter} from '../../assets/twitter.svg'
 import {ReactComponent as Location} from '../../assets/location.svg'
 import {ReactComponent as Github} from '../../assets/github.svg'
 
-const Header = () => {
-    const showimage = 'https://source.unsplash.com/user/c_v_r'
-
+const Header = ({data}) => {
+    const showimage = data;
+    console.log(data)
     return (
-        <Jumbotron className="px-5">
+        data && <Jumbotron className="px-5">
             <Row >
-                {showimage && <span className="mx-3">
-                    <Image src={showimage} width="180px" height="171px" roundedCircle />
+                {data && <span className="mx-3">
+                    <Image src={data.avatar_url || ''} width="180px" height="171px" roundedCircle />
                 </span> }
                 <Col >
                     <div className={`${showimage === null ? 'text-center' : '' }
-                    font_xxl mx-1 `}>NAME IN CAPITALS</div>
+                    font_xxl mx-1 `}>{data.name || data.login}</div>
                     <Col className={`${showimage === null ? 'justify-content-center' : '' }
-                    d-flex pt-2 `}>
-                        <span className="mx-1"><Twitter/></span>
-                        <span className="mx-1"><Github/></span>
-                        <span className="mx-1"><Link/></span>
-                        <span className="mx-1"><Location/> Some place </span>
+                    d-flex pt-2 px-0`}>
+                        {data.twitter_username && <span className="mx-1"><Twitter/>{data.twitter_username}</span>}
+                        <a href={data.html_url || '#'}><span className="mx-1"><Github/></span></a>
+                        {data.blog && <a href={`https://${data.blog || `#`}`}><span className="mx-1"><Link/></span></a>}
+                        {data.location && <span className="mx-1"><Location/> {data.location} </span>}
                     </Col>
                 </Col>
             </Row>

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import {Button, Form,Row,Col, Container} from 'react-bootstrap';
 import './Home.css';
-import { useHistory } from "react-router";
+import { useHistory } from "react-router-dom";
 
 export const Home = () => {
     const [id,setId]=useState('');

diff --git a/src/components/Organisation/Organisation.js b/src/components/Organisation/Organisation.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { Col} from "react-bootstrap";
+
+const Organisation = () => {
+  const org = [];
+
+  return (
+    <Col>
+      <div className="font_m mb-3">
+        ORGANISATIONS{" "}
+      </div>
+      <Col className="my-4">
+            {org && (org.map((element,index) => 
+                <Col key={index}>
+                    <div className="font_m">{element.org}</div>
+                </Col>
+            ))}
+        </Col>
+    </Col>
+  );
+};
+
+export default Organisation;