Fixed skills section

ireneelizabethsabu · Sep 6, 2021 · a3ad002 · a3ad002
1 parent e54b2f6
commit a3ad002
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/Languages/Language.js b/src/components/Languages/Language.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Col, Row } from 'react-bootstrap'
+import { Col, ProgressBar, Row } from 'react-bootstrap'
 import { usePercent } from '../../hooks/usePercent'
 
 const Language = ({ id }) => {
-  const {skills,total} = usePercent(id); 
+  const {skills,total,max} = usePercent(id); 
 
   return (
     <Col>
@@ -13,6 +13,9 @@ const Language = ({ id }) => {
           <Col key={key}>
             <div> {skills[key].lang} {total}</div>
             {/* <img src={`/${skill}.svg`} alt="skill-badge"/> */}
+            <ProgressBar 
+            now={Math.round(skills[key].percent*100/total) }
+            max={max*100/total}/>
           </Col>
         ))}
       </Row>

diff --git a/src/hooks/usePercent.js b/src/hooks/usePercent.js
@@ -5,6 +5,7 @@ import axios from 'axios'
 export const usePercent = (id) => {
     const [total, setTotal] = useState(0)
     const [skills, setSkills] = useState([])
+    const [max,setMax] = useState(0)
 
     useEffect(() => {
         getRepos(id).then(repos => {
@@ -25,8 +26,9 @@ export const usePercent = (id) => {
                 }
             });
             setSkills(languages)
-        }).catch(err => console.log(err));
-    }, [id])
+            setMax(Math.max.apply(Math, skills.map(function(o) { return o.percent; })))
 
-    return {skills,total}
+        }).catch(err => console.log(err));
+    }, [id,skills])
+    return {skills,total,max}
 }