add software icons to table

src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx

@@ -6,11 +6,13 @@ import { useTablePageSizer } from '../../hooks';
 import { Language } from '../../interfaces/Language';
 import { License } from '../../interfaces/License';
 import { List } from '../../interfaces/List';
+import { Software } from '../../interfaces/Software';
 import { Tag } from '../../interfaces/Tag';
 import { nameof } from '../../utils';
 import { Description } from '../Description';
 import { LanguageCloud } from '../languageCloud';
 import { ListInfoButton } from '../ListInfoButton';
+import { SoftwareCloud } from '../softwareCloud';
 import { TagCloud } from '../tagCloud';
 import { arraySorter } from './arraySorter';
 import styles from './ListsTable.module.css';
@@ -19,6 +21,7 @@ interface Props {
     lists: List[];
     languages: Language[];
     licenses: License[];
+    software: Software[];
     tags: Tag[];
 };
 
@@ -59,8 +62,9 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
                 : <Table.Column<List>
                     title="Software"
                     dataIndex={nameof<List>("syntaxId")}
+                    width={160}
                     className={styles.nogrow}
-                    render={(text: string) => <div>{text}</div>} />}
+                    render={(syntaxId: number) => syntaxId ? <SoftwareCloud software={props.software.filter((s: Software) => s.syntaxIds.includes(syntaxId))} /> : null} />}
             {tablePageSize.isNarrowWindow
                 ? null
                 : <Table.Column<List>

src/FilterLists.Web.V2/src/components/listsTable/ListsTableHoc.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { useLanguages, useLicenses, useLists, useTags } from '../../hooks';
+import { useLanguages, useLicenses, useLists, useSoftware, useTags } from '../../hooks';
 import { ListDrawer } from './ListDrawer';
 import { ListsTable } from './ListsTable';
 
@@ -9,10 +9,11 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
   const lists = useLists();
   const languages = useLanguages();
   const licenses = useLicenses();
+  const software = useSoftware();
   const tags = useTags();
   return (
     <>
-      <ListsTable lists={lists} languages={languages} licenses={licenses} tags={tags} {...props} />
+      <ListsTable lists={lists} languages={languages} licenses={licenses} software={software} tags={tags} {...props} />
       <ListDrawer lists={lists} languages={languages} licenses={licenses} tags={tags} />
     </>
   );

src/FilterLists.Web.V2/src/components/softwareCloud/SoftwareCloud.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Software } from '../../interfaces/Software';
+import { SoftwareIcon } from './SoftwareIcon';
+
+interface Props {
+  software: Software[];
+};
+
+export const SoftwareCloud = (props: Props) =>
+  props.software && props.software.length
+    ? <div>
+      {props.software.map((s: Software, i: number) =>
+        s.homeUrl
+          ? <a key={i} href={s.homeUrl} target="_blank" rel="noopener noreferrer">
+            <SoftwareIcon id={s.id} />
+          </a>
+          : <SoftwareIcon key={i} id={s.id} />)}
+    </div>
+    : null;

src/FilterLists.Web.V2/src/components/softwareCloud/index.ts

@@ -0,0 +1,3 @@
+import { SoftwareCloud } from './SoftwareCloud';
+
+export { SoftwareCloud };

src/FilterLists.Web.V2/src/components/softwareIcon/index.ts

@@ -1,3 +0,0 @@
-import { SoftwareIcon } from './SoftwareIcon';
-
-export { SoftwareIcon };

src/FilterLists.Web.V2/src/hooks/index.ts

@@ -1,7 +1,8 @@
 import { useLanguages } from './useLanguages';
 import { useLicenses } from './useLicenses';
 import { useLists } from './useLists';
+import { useSoftware } from './useSoftware';
 import { useTablePageSizer } from './useTablePageSizer';
 import { useTags } from './useTags';
 
-export { useLanguages, useLicenses, useLists, useTablePageSizer, useTags };
+export { useLanguages, useLicenses, useLists, useSoftware, useTablePageSizer, useTags };

src/FilterLists.Web.V2/src/hooks/useSoftware.tsx

@@ -0,0 +1,4 @@
+import { Software } from '../interfaces/Software';
+import { useApiData } from './useApiData';
+
+export const useSoftware = () => useApiData<Software[]>("/api/v1/software") || [];

src/FilterLists.Web.V2/src/interfaces/Software.ts

@@ -0,0 +1,7 @@
+export interface Software {
+    id: number;
+    homeUrl: string;
+    isAbpSubscribable: boolean;
+    name: string;
+    syntaxIds: number[];
+};