add software icons to detailsExpander

closes #429

src/FilterLists.Services/FilterList/Models/SyntaxSupportedSoftwareDto.cs

@@ -5,6 +5,7 @@ namespace FilterLists.Services.FilterList.Models
     [UsedImplicitly]
     public class SyntaxSupportedSoftwareDto
     {
+        public uint Id { get; set; }
         public string HomeUrl { get; set; }
         public string Name { get; set; }
     }

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/IFilterListDetailsDto.ts

@@ -57,5 +57,6 @@ export interface IMaintainerAdditionalListDto {
 
 export interface ISyntaxSupportedSoftwareDto {
     homeUrl: string;
+    id: number;
     name: string;
 }

src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/InfoCard.tsx

@@ -6,6 +6,7 @@ import { Languages } from "./Languages";
 import { License } from "./License";
 import { PublishedDate } from "./PublishedDate";
 import { RuleCount } from "./RuleCount";
+import { SoftwareIcons } from "../../SoftwareIcons";
 import { Syntax } from "./Syntax";
 import { Tags } from "./Tags";
 import { UpdatedDate } from "./UpdatedDate";
@@ -26,6 +27,7 @@ interface IProps {
 
 export const InfoCard = (props: IProps) => {
     return <div className="col-9">
+               <SoftwareIcons software={props.syntax.supportedSoftware} mdNone={true}/>
                <Tags tags={props.tags}/>
                <Description {...props} url={props.descriptionSourceUrl}/>
                <ul className="list-group list-group-flush">

src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx

@@ -6,7 +6,7 @@ import ReactTable from "react-table"
 import "react-table/react-table.css"
 import "./listsTable.css";
 import * as moment from "moment";
-import { SoftwareIcon } from "./SoftwareIcon";
+import { SoftwareIcons } from "../SoftwareIcons";
 import { getContrast } from "../../../../utils/GetContrast";
 import { DetailsExpander } from "../../components";
 
@@ -54,7 +54,7 @@ export const ListsTable = (props: IProps) => {
                                {props.software.map((s: any, i) => <option value={s.id} key={i}>{s.name}</option>)}
                            </select>,
                        sortable: false,
-                       Cell: (c: any) => c.value.map((s: number, i: any) => <SoftwareIcon id={s} key={i}/>),
+                       Cell: (c: any) => <SoftwareIcons {...c}/>,
                        width: 155,
                        headerClassName: "d-none d-md-block",
                        className: "d-none d-md-block",

src/FilterLists.Web/ClientApp/modules/home/components/softwareIcons/SoftwareIcons.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { ISyntaxSupportedSoftwareDto } from "../detailsExpander/IFilterListDetailsDto";
+import { SoftwareIcon } from "./SoftwareIcon"
+
+interface IProps {
+    software: ISyntaxSupportedSoftwareDto[];
+    mdNone: boolean;
+}
+
+export const SoftwareIcons = (props: IProps) => {
+    return props.software
+               ? <div className={props.mdNone ? "d-md-none" : undefined}>
+                     {props.software.map(
+                         (s: ISyntaxSupportedSoftwareDto, i: any) => <SoftwareIcon id={s.id} key={i}/>)}
+                 </div>
+               : null;
+};

src/FilterLists.Web/ClientApp/modules/home/components/softwareIcons/index.ts

@@ -0,0 +1,5 @@
+import { SoftwareIcons } from "./SoftwareIcons";
+
+export {
+    SoftwareIcons
+    };