yaml contributors

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

package.json

@@ -8,6 +8,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "js-yaml": "^4.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-scripts": "3.4.3",
@@ -36,6 +37,8 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0"
+    "@types/js-yaml": "^4.0.4",
+    "gh-pages": "^3.1.0",
+    "raw.macro": "^0.4.2"
   }
 }

src/components/Dashboard.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
-import contributors from "./contributors.json";
 import ContributorCard from "./Contributor";
+import useContributors from './useContributors';
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     root: {
       width: "100%",
@@ -21,11 +21,15 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function Dashboard() {
   const classes = useStyles();
+  const contributors = useContributors();
+  if (!contributors) {
+      return null;
+  }
 
   return (
     <List className={classes.root}>
       {contributors.map((contributor) => (
-        <ListItem className={classes.listItem}>
+        <ListItem key={Math.random()} className={classes.listItem}>
           <ContributorCard {...contributor} />
         </ListItem>
       ))}