Merge pull request #115 from iONBain/Issue-105-fetch-contributors-twitter

feat : added twitter link inside card

Author: devvsakib

src/components/Contributors/contributors.jsx

@@ -5,21 +5,37 @@ import "./css/index.css";
 
 function Contribute() {
   const userURL = "https://api.github.com/users/";
-  const url =
-    "https://api.github.com/repos/devvsakib/github-error-solve/contributors";
+  const url = "https://api.github.com/repos/devvsakib/github-error-solve/contributors";
+    
+
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     setLoading(false);
     const fetchUsers = async (url) => {
-      const response = await fetch(url);
-      const users = await response.json();
-      setData(users);
-      setLoading(true);
-    };
-    fetchUsers(url);
+    const response = await fetch(url);
+    const users = await response.json();
+    setData(users);
+    const usersMerged = await Promise.all(users.map(async item => {
+      const result = await getUserObj(item.url)
+      let tempFinData = {
+        ...item,
+        ...result
+      }
+      return tempFinData
+    }))
+    setData(usersMerged)
+    setLoading(true);
+  };
+  const getUserObj = async url => {
+    const response = await fetch(url);
+    let dataOfUser = await response.json();
+    return ({twitter_username:dataOfUser.twitter_username})
+  }
+  fetchUsers(url);
   }, [data.length]);
-
+  
   // fun purpose, but looks better, isn't it?
   const changeColor = () => {
     const colorArray = [
@@ -39,12 +55,12 @@ function Contribute() {
       <section className="flex flex-wrap justify-center">
         {
           // User filtered by CONTRIBUTIONS number, contribute more to jump in first place
-
+          
           loading ? (
             data.map((user) => (
-              <div
-                id="container"
-                className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 md:px-6 border-l-4 rounded-lg bg-dark-secondary flex flex-col mt-8 items-center mx-auto gap-2 px-3 border-[#${changeColor()}] hover:border-primary hover:text-primary`}
+              <div key={user.login}
+              id="container"
+              className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 md:px-6 border-l-4 rounded-lg bg-dark-secondary flex flex-col mt-8 items-center mx-auto gap-2 px-3 border-[#${changeColor()}] hover:border-primary hover:text-primary`}
               >
                 <img className="pfp mb-8 skeleton" src={user.avatar_url} />
                 <h1 className="text-center -mb-10 font-semibold uppercase">
@@ -55,11 +71,11 @@ function Contribute() {
                 </h1>
                 <div className="links text-sm">
                   <a className="spf-link" href={user.html_url}>
-                    Github
-                  </a>
-                  <a className="spf-link" href={user.twiter}>
-                    Twiter
+                    GitHub
                   </a>
+                  {user.twitter_username && <a className="spf-link" href={`https://twitter.com/${user.twitter_username}`}>
+                    Twitter
+                  </a>}
                   {/* spf-link : abbreviation of (specific-link) for css */}
                 </div>
               </div>

src/data/Contributors.json

@@ -2,10 +2,10 @@
 [
 
   { 
-    "twiter": ""
+    "twitter": ""
   },
   { 
-    "twiter": ""
+    "twitter": ""
   }
 
 ]