Feat: connected members page to CMS

components/theme/memberCard.js

@@ -14,36 +14,17 @@ const MemberCard = ({
   profilePic,
 }) => (
   <div className="member-card card">
-    <a href={''}>
-      {profilePic ? (
-        <Image
-          src={profilePic}
-          alt="avatar"
-          width={100}
-          height={100}
-          className="avatar"
-        />
-      ) : githubUsername ? (
-        <Image
-          src={`https://avatars.githubusercontent.com/${githubUsername}`}
-          alt="avatar"
-          width={100}
-          height={100}
-          className="avatar"
-        />
-      ) : (
-        <img
+    <a href={'/@' + username}>
+      <img
           src={
-            githubUsername
-              ? `https://avatars.githubusercontent.com/${githubUsername}`
-              : defaultAvatar
+            profilePic
+                ? `https://api.amfoss.in/${profilePic}`
+                : githubUsername
+                    ? `https://avatars.githubusercontent.com/${githubUsername}`
+                    : defaultAvatar
           }
-          alt="avatar"
-          width={100}
-          height={100}
-          className="avatar"
-        />
-      )}
+          alt={firstName + ' ' + lastName + `'s photo`}
+      />
       <div className={'role-tag ' + tag}>{tag}</div>
       <div>
         {' '}

pages/members/index.js

@@ -8,7 +8,7 @@ import TitleBar from '../../components/theme/titleBar';
 import dataFetch from '../../utils/dataFetch';
 import ReactLoading from 'react-loading';
 import CookieConsent from '../../components/cookieConsent';
-import memebers from '../../utils/members.json';
+// import memebers from '../../utils/members.json';
 
 const query = ` query {
       activeUsers(sort: "username") {
@@ -38,7 +38,7 @@ export default class Index extends React.Component {
     };
   }
 
-  // fetchData = async () => await dataFetch({ query });
+  fetchData = async () => await dataFetch({ query });
 
   goTop = () => {
     window.scrollTo(0, 0);
@@ -65,9 +65,11 @@ export default class Index extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({
-      data: memebers,
-      loaded: true,
+    this.fetchData().then((r) => {
+      this.setState({
+        data: r.data.activeUsers,
+        loaded: true,
+      });
     });
   }