Add icons to table

aslaker · Feb 1, 2021 · c780a2f · c780a2f
1 parent 9be78a1
commit c780a2f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/.eslintcache b/.eslintcache
@@ -1 +1 @@
-[{"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js":"1","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js":"2","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js":"3","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx":"4","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx":"5","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx":"6","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx":"7","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js":"8","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js":"9","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js":"10","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js":"11"},{"size":1308,"mtime":1612221472069,"results":"12","hashOfConfig":"13"},{"size":709,"mtime":1612203210121,"results":"14","hashOfConfig":"13"},{"size":185,"mtime":1612197978124,"results":"15","hashOfConfig":"13"},{"size":373,"mtime":1612197978124,"results":"16","hashOfConfig":"13"},{"size":2204,"mtime":1612201173535,"results":"17","hashOfConfig":"13"},{"size":1292,"mtime":1612216154539,"results":"18","hashOfConfig":"13"},{"size":515,"mtime":1612197978125,"results":"19","hashOfConfig":"13"},{"size":377,"mtime":1612205055876,"results":"20","hashOfConfig":"13"},{"size":145,"mtime":1612220717672,"results":"21","hashOfConfig":"13"},{"size":362,"mtime":1612197978125,"results":"22","hashOfConfig":"13"},{"size":1204,"mtime":1612197978125,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1iexp21",{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js",[]]
+[{"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js":"1","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js":"2","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js":"3","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx":"4","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx":"5","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx":"6","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx":"7","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js":"8","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js":"9","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js":"10","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js":"11"},{"size":1308,"mtime":1612221472069,"results":"12","hashOfConfig":"13"},{"size":712,"mtime":1612223166264,"results":"14","hashOfConfig":"13"},{"size":185,"mtime":1612197978124,"results":"15","hashOfConfig":"13"},{"size":373,"mtime":1612197978124,"results":"16","hashOfConfig":"13"},{"size":2204,"mtime":1612201173535,"results":"17","hashOfConfig":"13"},{"size":1793,"mtime":1612223592021,"results":"18","hashOfConfig":"13"},{"size":515,"mtime":1612197978125,"results":"19","hashOfConfig":"13"},{"size":377,"mtime":1612205055876,"results":"20","hashOfConfig":"13"},{"size":145,"mtime":1612220717672,"results":"21","hashOfConfig":"13"},{"size":362,"mtime":1612197978125,"results":"22","hashOfConfig":"13"},{"size":1204,"mtime":1612197978125,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1iexp21",{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js",[]]
diff --git a/src/components/FrameworkDetails/FrameworkDetails.jsx b/src/components/FrameworkDetails/FrameworkDetails.jsx
@@ -9,13 +9,23 @@ import { Wrapper } from "./FrameworkDetails.styles";
 import { frameworks } from '../../data/frameworks'
 
 const columns = [
-  { title: "Name", field: "name" },
+  { title: "Framework", field: "name", render: rowData => {
+    const selectedFramework = frameworks.find(framework => framework.name === rowData.name)
+    debugger
+    return <img width="50px" height="50px" src={selectedFramework.imgSrc} alt={rowData.name}/>
+  } },
   { title: "Stars", field: "stargazers_count" },
   { title: "Watching", field: "subscribers_count" },
   { title: "Open Issues", field: "open_issues_count" },
   { title: "Forks", field: "forks" },
-  { title: "Created", field: "created_at" },
-  { title: "Last Updated", field: "updated_at" },
+  { title: "Created", field: "created_at", render: rowData => {
+    const { created_at } = rowData;
+    return new Intl.DateTimeFormat('en-US').format(new Date(created_at))
+  } },
+  { title: "Last Updated", field: "updated_at", render: rowData => {
+    const { updated_at } = rowData;
+    return new Intl.DateTimeFormat('en-US').format(new Date(updated_at))
+  } },
 ];
 
 const FrameworkDetails = () => {

diff --git a/src/data/frameworks.js b/src/data/frameworks.js
@@ -3,7 +3,7 @@ export const frameworks = [
     name: "angular.js",
     display: "AngularJS",
     imgSrc: "https://angular.io/assets/images/logos/angular/angular.svg",
-    repoUrl: "/repos/angular/angular",
+    repoUrl: "/repos/angular/angular.js",
   },
   {
     name: "react",
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[{"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js":"1","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js":"2","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js":"3","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx":"4","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx":"5","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx":"6","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx":"7","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js":"8","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js":"9","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js":"10","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js":"11"},{"size":1308,"mtime":1612221472069,"results":"12","hashOfConfig":"13"},{"size":709,"mtime":1612203210121,"results":"14","hashOfConfig":"13"},{"size":185,"mtime":1612197978124,"results":"15","hashOfConfig":"13"},{"size":373,"mtime":1612197978124,"results":"16","hashOfConfig":"13"},{"size":2204,"mtime":1612201173535,"results":"17","hashOfConfig":"13"},{"size":1292,"mtime":1612216154539,"results":"18","hashOfConfig":"13"},{"size":515,"mtime":1612197978125,"results":"19","hashOfConfig":"13"},{"size":377,"mtime":1612205055876,"results":"20","hashOfConfig":"13"},{"size":145,"mtime":1612220717672,"results":"21","hashOfConfig":"13"},{"size":362,"mtime":1612197978125,"results":"22","hashOfConfig":"13"},{"size":1204,"mtime":1612197978125,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1iexp21",{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js",[]]
		[{"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js":"1","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js":"2","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js":"3","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx":"4","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx":"5","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx":"6","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx":"7","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js":"8","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js":"9","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js":"10","/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js":"11"},{"size":1308,"mtime":1612221472069,"results":"12","hashOfConfig":"13"},{"size":712,"mtime":1612223166264,"results":"14","hashOfConfig":"13"},{"size":185,"mtime":1612197978124,"results":"15","hashOfConfig":"13"},{"size":373,"mtime":1612197978124,"results":"16","hashOfConfig":"13"},{"size":2204,"mtime":1612201173535,"results":"17","hashOfConfig":"13"},{"size":1793,"mtime":1612223592021,"results":"18","hashOfConfig":"13"},{"size":515,"mtime":1612197978125,"results":"19","hashOfConfig":"13"},{"size":377,"mtime":1612205055876,"results":"20","hashOfConfig":"13"},{"size":145,"mtime":1612220717672,"results":"21","hashOfConfig":"13"},{"size":362,"mtime":1612197978125,"results":"22","hashOfConfig":"13"},{"size":1204,"mtime":1612197978125,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1iexp21",{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/App.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/data/frameworks.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/api.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/GithubMetric/GithubMetric.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkCard/FrameworkCard.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/errors/ErrorBoundary.jsx",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/api/queries.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/components/FrameworkDetails/FrameworkDetails.styles.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/reportWebVitals.js",[],"/Users/adamslaker/projects/netlify/framework-picker-dashboard/src/index.js",[]]