From 6b027c79872bbd43b1459a9b61eb11afabf2f077 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sun, 30 Aug 2020 13:43:35 -0500
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E2=9C=A8=20re-enable=20syntax=20c?=
 =?UTF-8?q?olumn=20(less=20sorter/filter)=20w/new=20SyntaxCloud=20comp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/listsTable/ListsTable.tsx  | 74 ++++++++++---------
 .../syntaxCloud/SyntaxCloud.module.css        |  7 ++
 .../components/syntaxCloud/SyntaxCloud.tsx    | 22 ++++++
 web/src/components/syntaxCloud/index.ts       |  3 +
 4 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 web/src/components/syntaxCloud/SyntaxCloud.module.css
 create mode 100644 web/src/components/syntaxCloud/SyntaxCloud.tsx
 create mode 100644 web/src/components/syntaxCloud/index.ts

diff --git a/web/src/components/listsTable/ListsTable.tsx b/web/src/components/listsTable/ListsTable.tsx
index 20ac84ae5..cdb9b393a 100644
--- a/web/src/components/listsTable/ListsTable.tsx
+++ b/web/src/components/listsTable/ListsTable.tsx
@@ -13,6 +13,7 @@ import { useSearchColumnFilter, useTablePageSizer } from "../../hooks";
 import { Description } from "../Description";
 import { Language } from "../../interfaces/Language";
 import { LanguageCloud } from "../languageCloud";
+import { SyntaxCloud } from "../syntaxCloud";
 import { License } from "../../interfaces/License";
 import { LicenseTag } from "../LicenseTag";
 import { List } from "../../interfaces/List";
@@ -22,7 +23,6 @@ import { MaintainerCloud } from "../maintainerCloud";
 import { RouteComponentProps } from "react-router";
 import { Software } from "../../interfaces/Software";
 import { Syntax } from "../../interfaces/Syntax";
-import { SyntaxTag } from "../SyntaxTag";
 import { TagCloud } from "../tagCloud";
 import { Tag as TagInterface } from "../../interfaces/Tag";
 import { arraySorter } from "./arraySorter";
@@ -184,46 +184,50 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
           }
         />
       )}
-      {/* {tablePageSize.isNarrowWindow ? null : (
+      {tablePageSize.isNarrowWindow ? null : (
         <Table.Column<List>
-          title="Syntax"
-          key="Syntax"
-          dataIndex={nameof<List>("syntaxId")}
-          sorter={(a, b) => {
-            const syntaxA = syntaxes.find((s) => s.id === a.syntaxId);
-            const syntaxB = syntaxes.find((s) => s.id === b.syntaxId);
-            return syntaxA
-              ? syntaxB
-                ? syntaxA.name.localeCompare(syntaxB.name)
-                : -1
-              : 1;
-          }}
+          title="Syntaxes"
+          key="Syntaxes"
+          dataIndex={nameof<List>("syntaxIds")}
+          // sorter={(a, b) => {
+          //   const syntaxA = syntaxes.find((s) => s.id === a.syntaxIds);
+          //   const syntaxB = syntaxes.find((s) => s.id === b.syntaxIds);
+          //   return syntaxA
+          //     ? syntaxB
+          //       ? syntaxA.name.localeCompare(syntaxB.name)
+          //       : -1
+          //     : 1;
+          // }}
           width={254}
           className={styles.nogrow}
-          filters={syntaxes.map((s) => ({
-            text: (
-              <>
-                <SyntaxTag name={s.name} showLabel={false} />(
-                {
-                  visibleLists.filter((l) => l.syntaxId && l.syntaxId === s.id)
-                    .length
-                }
-                )
-              </>
-            ),
-            value: s.id.toString(),
-          }))}
+          // filters={syntaxes.map((s) => ({
+          //   text: (
+          //     <>
+          //       <SyntaxTag name={s.name} showLabel={false} />(
+          //       {
+          //         visibleLists.filter(
+          //           (l) => l.syntaxIds && l.syntaxIds === s.id
+          //         ).length
+          //       }
+          //       )
+          //     </>
+          //   ),
+          //   value: s.id.toString(),
+          // }))}
           onFilter={(value, record) =>
-            record.syntaxId ? record.syntaxId.toString() === value : false
+            record.syntaxIds ? record.syntaxIds.toString() === value : false
+          }
+          render={(syntaxIds: number[]) =>
+            syntaxIds ? (
+              <SyntaxCloud
+                syntaxes={syntaxes.filter((s: Syntax) =>
+                  syntaxIds.includes(s.id)
+                )}
+              />
+            ) : null
           }
-          render={(syntaxId: number) => {
-            const syntax = syntaxes.find((s) => s.id === syntaxId);
-            return syntax ? (
-              <SyntaxTag name={syntax.name} definitionUrl={syntax.url} />
-            ) : null;
-          }}
         />
-      )} */}
+      )}
       {tablePageSize.isNarrowWindow ? null : (
         <Table.Column<List>
           title="Languages"
diff --git a/web/src/components/syntaxCloud/SyntaxCloud.module.css b/web/src/components/syntaxCloud/SyntaxCloud.module.css
new file mode 100644
index 000000000..879bc4070
--- /dev/null
+++ b/web/src/components/syntaxCloud/SyntaxCloud.module.css
@@ -0,0 +1,7 @@
+.grow {
+  /* allow for 2nd row's tags' bottom border to not be chopped in AllListsTable */
+  max-height: none !important;
+
+  /* leave vertical gap between rows of tags */
+  line-height: 28px;
+}
diff --git a/web/src/components/syntaxCloud/SyntaxCloud.tsx b/web/src/components/syntaxCloud/SyntaxCloud.tsx
new file mode 100644
index 000000000..aac8f8f97
--- /dev/null
+++ b/web/src/components/syntaxCloud/SyntaxCloud.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import { Syntax } from "../../interfaces/Syntax";
+import { SyntaxTag } from "../SyntaxTag";
+import styles from "./SyntaxCloud.module.css";
+
+interface Props {
+  syntaxes: Syntax[];
+  showLabel?: boolean;
+}
+
+export const SyntaxCloud = (props: Props) =>
+  props.syntaxes && props.syntaxes.length ? (
+    <div className={styles.grow}>
+      {props.showLabel && (
+        <h3>{`Syntax${props.syntaxes.length > 1 ? "es" : ""}:`}</h3>
+      )}
+      {props.syntaxes.map((s: Syntax, i: number) => (
+        <SyntaxTag name={s.name} definitionUrl={s.url} />
+      ))}
+    </div>
+  ) : null;
diff --git a/web/src/components/syntaxCloud/index.ts b/web/src/components/syntaxCloud/index.ts
new file mode 100644
index 000000000..1c799b549
--- /dev/null
+++ b/web/src/components/syntaxCloud/index.ts
@@ -0,0 +1,3 @@
+import { SyntaxCloud } from "./SyntaxCloud";
+
+export { SyntaxCloud };