From aaf77aa9f60295c29ee92d373a789be5a47610e8 Mon Sep 17 00:00:00 2001
From: shanejonas <jonas.shane@gmail.com>
Date: Sun, 31 Mar 2019 23:43:41 -0700
Subject: [PATCH] fix: add tags

fixes #37
---
 package-lock.json            |  5 +++
 package.json                 |  1 +
 src/Methods/Methods.test.tsx | 59 ++++++++++++++++++++++++++++++++++++
 src/Methods/Methods.tsx      |  9 ++++++
 src/Tags/Tags.test.tsx       | 19 ++++++++++++
 src/Tags/Tags.tsx            | 31 +++++++++++++++++++
 tslint.json                  |  1 +
 7 files changed, 125 insertions(+)
 create mode 100644 src/Tags/Tags.test.tsx
 create mode 100644 src/Tags/Tags.tsx

diff --git a/package-lock.json b/package-lock.json
index a4e72a5..23f1837 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2152,6 +2152,11 @@
         }
       }
     },
+    "hash-color-material": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/hash-color-material/-/hash-color-material-1.1.3.tgz",
+      "integrity": "sha512-SkyBUHHWqaLI5+wUWvEcvy0i4bvf/lrr7xauh6LB7Z/gkD8dYoQpemNA42Zy3KZ970GuuUYL+txRn1B+Xgaf0g=="
+    },
     "hoist-non-react-statics": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
diff --git a/package.json b/package.json
index 41d5f2f..25c28ac 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@open-rpc/meta-schema": "^1.1.0",
+    "hash-color-material": "^1.1.3",
     "json-schema": "^0.2.3",
     "lodash": "^4.17.11",
     "react": "^16.8.4",
diff --git a/src/Methods/Methods.test.tsx b/src/Methods/Methods.test.tsx
index 52299b7..a64dec7 100644
--- a/src/Methods/Methods.test.tsx
+++ b/src/Methods/Methods.test.tsx
@@ -124,3 +124,62 @@ it("renders schema methods result", () => {
   expect(div.innerHTML.includes("id")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it("renders schema methods tags", () => {
+  const div = document.createElement("div");
+  const schema = {
+    methods: [
+      {
+        name: "foobar",
+        result: {
+          schema: {
+            properties: {
+              id: {
+                format: "int64",
+                type: "integer",
+              },
+              name: {
+                type: "string",
+              },
+              tag: {
+                type: "string",
+              },
+            },
+            required: [
+              "id",
+            ],
+          },
+        },
+        tags: ["tag3", "tag4"],
+      },
+      {
+        result: {
+          schema: {
+            properties: {
+              id: {
+                format: "int64",
+                type: "integer",
+              },
+              name: {
+                type: "string",
+              },
+              tag: {
+                type: "string",
+              },
+            },
+            required: [
+              "id",
+            ],
+          },
+        },
+        tags: ["salad", "mytag"],
+      },
+    ],
+  };
+  ReactDOM.render(<Methods schema={schema as any}/>, div);
+  expect(div.innerHTML.includes("tag3")).toBe(true);
+  expect(div.innerHTML.includes("tag4")).toBe(true);
+  expect(div.innerHTML.includes("salad")).toBe(true);
+  expect(div.innerHTML.includes("mytag")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/Methods/Methods.tsx b/src/Methods/Methods.tsx
index 0690946..f893c49 100644
--- a/src/Methods/Methods.tsx
+++ b/src/Methods/Methods.tsx
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { withStyles, Theme, WithStyles } from "@material-ui/core/styles";
 import ExpansionPanel from "@material-ui/core/ExpansionPanel";
 import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import _ from "lodash";
 import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@@ -12,6 +13,8 @@ import ExamplePairings from "../ExamplePairings/ExamplePairings";
 import Errors from "../Errors/Errors";
 import { types } from "@open-rpc/meta-schema";
 import Links from "../Links/Links";
+import { Chip } from "@material-ui/core";
+import Tags from "../Tags/Tags";
 
 const styles = (theme: Theme) => ({
   heading: {
@@ -54,6 +57,12 @@ class Methods extends Component<IProps> {
               <Typography key={method.name} className={classes.heading}>{method.name}</Typography>
               <Typography key={method.summary} className={classes.secondaryHeading}>{method.summary}</Typography>
             </ExpansionPanelSummary>
+
+            {method.tags && method.tags.length > 0 &&
+              <ExpansionPanelDetails key="tags">
+                <Tags tags={method.tags as any} />
+              </ExpansionPanelDetails>
+            }
             {method.description &&
               <ExpansionPanelDetails key="description">
                 <ReactMarkdown source={method.description} />
diff --git a/src/Tags/Tags.test.tsx b/src/Tags/Tags.test.tsx
new file mode 100644
index 0000000..5b82267
--- /dev/null
+++ b/src/Tags/Tags.test.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Tags from "./Tags";
+
+it("renders empty with empty tags", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<Tags tags={[]} />, div);
+  expect(div.innerHTML).toBe("");
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders schema tags", () => {
+  const div = document.createElement("div");
+  const tags = ["salad", "mytag"];
+  ReactDOM.render(<Tags tags={tags} />, div);
+  expect(div.innerHTML.includes("salad")).toBe(true);
+  expect(div.innerHTML.includes("mytag")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/Tags/Tags.tsx b/src/Tags/Tags.tsx
new file mode 100644
index 0000000..c8d9c0b
--- /dev/null
+++ b/src/Tags/Tags.tsx
@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { types } from "@open-rpc/meta-schema";
+import { Chip } from "@material-ui/core";
+const hashColor = require("hash-color-material");
+
+interface IProps {
+  tags?: string[];
+}
+
+export default class Tags extends Component<IProps> {
+  public render() {
+    const { tags } = this.props;
+    if (!tags || tags.length === 0) {
+      return null;
+    }
+    return (
+      <>
+        {
+          tags.map((tag: any, k: number) => {
+            return (
+              <Chip
+                key={tag}
+                label={tag}
+                style={{ backgroundColor: hashColor.getColorFromString(tag, false) }} />
+            );
+          })
+        }
+      </>
+    );
+  }
+}
diff --git a/tslint.json b/tslint.json
index d63b111..7c0122b 100644
--- a/tslint.json
+++ b/tslint.json
@@ -4,6 +4,7 @@
   ],
   "rules": {
     "ordered-imports": false,
+    "no-var-requires": false,
     "no-console": [true, "log"],
     "indent": [true, "spaces", 2]
   }