Build Cards with metrics

aslaker · Jan 30, 2021 · 051827d · 051827d
1 parent bd55ddc
commit 051827d
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 12 deletions.
diff --git a/.eslintcache b/.eslintcache
@@ -1 +1 @@
-[{"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js":"1","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js":"2","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js":"3"},{"size":362,"mtime":1611800648683,"results":"4","hashOfConfig":"5"},{"size":1087,"mtime":1611937792406,"results":"6","hashOfConfig":"5"},{"size":385,"mtime":1611945364714,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1tbblei",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js",[]]
+[{"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js":"1","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js":"2","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js":"3","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/data/frameworks.js":"4","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx":"5","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/api.js":"6","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/queries.js":"7","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx":"8"},{"size":362,"mtime":1611800648683,"results":"9","hashOfConfig":"10"},{"size":1204,"mtime":1611970362360,"results":"11","hashOfConfig":"10"},{"size":506,"mtime":1611968828468,"results":"12","hashOfConfig":"10"},{"size":677,"mtime":1611969204994,"results":"13","hashOfConfig":"10"},{"size":1876,"mtime":1611982249202,"results":"14","hashOfConfig":"10"},{"size":185,"mtime":1611948808927,"results":"15","hashOfConfig":"10"},{"size":377,"mtime":1611970738525,"results":"16","hashOfConfig":"10"},{"size":620,"mtime":1611981405569,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1tbblei",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/data/frameworks.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx",["34","35"],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/api.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/queries.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx",[],{"ruleId":"36","severity":1,"message":"37","line":9,"column":3,"nodeType":"38","messageId":"39","endLine":9,"endColumn":13},{"ruleId":"36","severity":1,"message":"40","line":13,"column":3,"nodeType":"38","messageId":"39","endLine":13,"endColumn":9},"no-unused-vars","'CardFooter' is defined but never used.","Identifier","unusedVar","'Button' is defined but never used."]
diff --git a/package.json b/package.json
@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "grommet": "^2.16.2",
+    "grommet-icons": "^4.5.0",
+    "numeral": "^2.0.6",
     "polished": "^4.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
+    />
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,27 @@
+import React from "react";
+
+// Grommet
 import { Box } from "grommet";
 
-import axios from "axios";
-import { useQuery } from "react-query";
+// Components
+import FrameworkCard from "./components/FrameworkCard/FrameworkCard";
+
+// Data
+import { frameworks } from "./data/frameworks";
 
 function App() {
-  const { data } = useQuery("choices", async () => {
-    const { data } = await axios.get(".netlify/functions/get-choices");
-    return data;
-  });
   return (
-    <Box background="brand" fill>
-      <p>{JSON.stringify(data)}</p>
+    <Box
+      background="brand"
+      direction="row"
+      justify="center"
+      align="center"
+      gap="medium"
+      fill
+    >
+      {frameworks.map((framework) => (
+        <FrameworkCard {...framework} />
+      ))}
     </Box>
   );
 }

diff --git a/src/api/queries.js b/src/api/queries.js
@@ -0,0 +1,18 @@
+import { useQuery } from "react-query";
+
+import { githubAPI } from "./api";
+
+const DEFAULT_REFETCH_INTERVAL = 1000 * 15;
+
+export const useRepo = ({ name, repoUrl }) => {
+  return useQuery(
+    ["github", name],
+    async () => {
+      const { data } = await githubAPI.get(repoUrl);
+      return data;
+    },
+    {
+      refetchInterval: DEFAULT_REFETCH_INTERVAL,
+    }
+  );
+};
diff --git a/src/components/FrameworkCard/FrameworkCard.jsx b/src/components/FrameworkCard/FrameworkCard.jsx
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+import * as numeral from "numeral";
+
+// Grommet
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  Heading,
+  Box,
+  Image,
+  Button,
+} from "grommet";
+import { Star, View, Archive } from "grommet-icons";
+
+// Components
+import GithubMetric from "./GithubMetric/GithubMetric";
+
+// Queries
+import { useRepo } from "../../api/queries";
+
+const FrameworkCard = ({ display, name, imgSrc, repoUrl }) => {
+  const { data } = useRepo({ name, repoUrl });
+  const [cardData, setCardData] = useState({
+    subscribers_count: 0,
+    stargazers_count: 0,
+    open_issues_count: 0,
+  });
+
+  useEffect(() => {
+    if (data) {
+      const { subscribers_count, stargazers_count, open_issues_count } = data;
+      setCardData({
+        stargazers_count,
+        subscribers_count,
+        open_issues_count,
+      });
+    }
+  }, [data]);
+
+  return (
+    <Card height="medium" width="medium" background="light-1">
+      <CardHeader pad="medium" justify="between" gap="10px">
+        <Heading level="2">{display}</Heading>
+        <Box height="xsmall" width="xsmall">
+          <Image fit="cover" src={imgSrc} />
+        </Box>
+      </CardHeader>
+      <CardBody pad="medium" direction="row" align="center">
+        <GithubMetric title="Number of Github stars">
+          <Star />{" "}
+          <span>{numeral(cardData.stargazers_count).format("Oa")}</span>
+        </GithubMetric>
+        <GithubMetric title="Number of people watching the repo">
+          <View />{" "}
+          <span>{numeral(cardData.subscribers_count).format("Oa")}</span>
+        </GithubMetric>
+        <GithubMetric title="Number of open issues and pull requests">
+          <Archive />{" "}
+          <span>{numeral(cardData.open_issues_count).format("Oa")}</span>
+        </GithubMetric>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default FrameworkCard;
diff --git a/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx b/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Box } from "grommet";
+
+const GithubMetric = ({ children, title }) => {
+  return (
+    <Box
+      width="small"
+      height="xsmall"
+      direction="column"
+      justify="center"
+      align="center"
+      gap="small"
+      title={title}
+      border={[
+        {
+          color: "border",
+          size: "small",
+          style: "solid",
+          side: "right",
+        },
+        {
+          color: "border",
+          size: "small",
+          style: "solid",
+          side: "left",
+        },
+      ]}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default GithubMetric;
diff --git a/src/data/frameworks.js b/src/data/frameworks.js
@@ -0,0 +1,26 @@
+export const frameworks = [
+  {
+    name: "angular",
+    display: "Angular",
+    imgSrc: "https://angular.io/assets/images/logos/angular/angular.svg",
+    repoUrl: "/repos/angular/angular",
+  },
+  {
+    name: "react",
+    display: "React",
+    imgSrc: "https://angular.io/assets/images/logos/angular/angular.svg",
+    repoUrl: "/repos/facebook/react",
+  },
+  {
+    name: "vue",
+    display: "Vue",
+    imgSrc: "https://angular.io/assets/images/logos/angular/angular.svg",
+    repoUrl: "/repos/vuejs/vue",
+  },
+  {
+    name: "ember",
+    display: "Ember",
+    imgSrc: "https://angular.io/assets/images/logos/angular/angular.svg",
+    repoUrl: "/repos/emberjs/ember.js",
+  },
+];
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { Grommet } from "grommet";
-import { createGlobalStyle } from "styled-components";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
+import { createGlobalStyle } from "styled-components";
+
+// Grommet
+import { Grommet } from "grommet";
+
+// Components
+import App from "./App";
 
 const queryClient = new QueryClient();
 
@@ -35,6 +40,7 @@ ReactDOM.render(
       <Grommet theme={theme} full>
         <GlobalStyle />
         <App />
+        <ReactQueryDevtools />
       </Grommet>
     </QueryClientProvider>
   </React.StrictMode>,

diff --git a/yarn.lock b/yarn.lock
@@ -7659,6 +7659,11 @@ num2fraction@^1.2.2:
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
+numeral@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
+  integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
+
 nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[{"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js":"1","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js":"2","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js":"3"},{"size":362,"mtime":1611800648683,"results":"4","hashOfConfig":"5"},{"size":1087,"mtime":1611937792406,"results":"6","hashOfConfig":"5"},{"size":385,"mtime":1611945364714,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1tbblei",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js",[]]
		[{"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js":"1","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js":"2","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js":"3","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/data/frameworks.js":"4","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx":"5","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/api.js":"6","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/queries.js":"7","/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx":"8"},{"size":362,"mtime":1611800648683,"results":"9","hashOfConfig":"10"},{"size":1204,"mtime":1611970362360,"results":"11","hashOfConfig":"10"},{"size":506,"mtime":1611968828468,"results":"12","hashOfConfig":"10"},{"size":677,"mtime":1611969204994,"results":"13","hashOfConfig":"10"},{"size":1876,"mtime":1611982249202,"results":"14","hashOfConfig":"10"},{"size":185,"mtime":1611948808927,"results":"15","hashOfConfig":"10"},{"size":377,"mtime":1611970738525,"results":"16","hashOfConfig":"10"},{"size":620,"mtime":1611981405569,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1tbblei",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/index.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/App.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/data/frameworks.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx",["34","35"],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/api.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/api/queries.js",[],"/Users/adamslaker/projects/software/launchpad-lab/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx",[],{"ruleId":"36","severity":1,"message":"37","line":9,"column":3,"nodeType":"38","messageId":"39","endLine":9,"endColumn":13},{"ruleId":"36","severity":1,"message":"40","line":13,"column":3,"nodeType":"38","messageId":"39","endLine":13,"endColumn":9},"no-unused-vars","'CardFooter' is defined but never used.","Identifier","unusedVar","'Button' is defined but never used."]