add Syntax to drawer

src/FilterLists.Web.V2/src/components/LicenseTag.tsx

@@ -18,12 +18,7 @@ export const LicenseTag = (props: Props) =>
     </>
     : null;
 
-interface TagContentsProps {
-  name: string;
-  descriptionUrl: string;
-};
-
-const TagContents = (props: TagContentsProps) =>
+const TagContents = (props: Props) =>
   props.descriptionUrl
     ? <a href={props.descriptionUrl}
       target="_blank"

src/FilterLists.Web.V2/src/components/ListInfoDrawer.tsx

@@ -7,6 +7,7 @@ import { Language } from '../interfaces/Language';
 import { License } from '../interfaces/License';
 import { List } from '../interfaces/List';
 import { Software } from '../interfaces/Software';
+import { Syntax } from '../interfaces/Syntax';
 import { Tag } from '../interfaces/Tag';
 import { Description } from './Description';
 import { LanguageCloud } from './languageCloud';
@@ -15,13 +16,15 @@ import { LinkButton } from './LinkButton';
 import { PublishedDate } from './PublishedDate';
 import { SoftwareCloud } from './softwareCloud';
 import { SubscribeButtons } from './SubscribeButtons';
+import { SyntaxTag } from './SyntaxTag';
 import { TagCloud } from './tagCloud';
 
 interface Props {
   list: List;
   languages: Language[];
-  license: License;
+  license: License | undefined;
   software: Software[];
+  syntax: Syntax | undefined;
   tags: Tag[];
 };
 
@@ -50,9 +53,14 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
       <TagCloud
         tags={props.tags}
         showLabel={true} />
-      <LicenseTag
-        name={props.license && props.license.name}
-        descriptionUrl={props.license && props.license.descriptionUrl} />
+      {props.license &&
+        <LicenseTag
+          name={props.license.name}
+          descriptionUrl={props.license.descriptionUrl} />}
+      {props.syntax &&
+        <SyntaxTag
+          name={props.syntax.name}
+          definitionUrl={props.syntax.definitionUrl} />}
       <SoftwareCloud
         software={props.software}
         showLabel={true} />

src/FilterLists.Web.V2/src/components/SyntaxTag.tsx

@@ -0,0 +1,30 @@
+import { Tag } from 'antd';
+import * as React from 'react';
+
+interface Props {
+  name: string;
+  definitionUrl: string;
+};
+
+export const SyntaxTag = (props: Props) =>
+  props.name
+    ? <>
+      <h3>Syntax:</h3>
+      <Tag>
+        <TagContents
+          name={props.name}
+          definitionUrl={props.definitionUrl} />
+      </Tag>
+    </>
+    : null;
+
+const TagContents = (props: Props) =>
+  props.definitionUrl
+    ? <a href={props.definitionUrl}
+      target="_blank"
+      rel="noopener noreferrer">
+      {props.name}
+    </a>
+    : <>
+      {props.name}
+    </>;

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

@@ -5,6 +5,7 @@ import { Language } from '../../interfaces/Language';
 import { License } from '../../interfaces/License';
 import { List } from '../../interfaces/List';
 import { Software } from '../../interfaces/Software';
+import { Syntax } from '../../interfaces/Syntax';
 import { Tag } from '../../interfaces/Tag';
 import { ListInfoDrawer } from '../ListInfoDrawer';
 
@@ -13,6 +14,7 @@ interface Props {
     languages: Language[];
     licenses: License[];
     software: Software[];
+    syntaxes: Syntax[];
     tags: Tag[];
 };
 
@@ -23,8 +25,9 @@ export const ListDrawer = (props: Props) => {
             ? <ListInfoDrawer
                 list={list as List}
                 languages={list.languageIds && props.languages.filter((l: Language) => list.languageIds.includes(l.id))}
-                license={(list.licenseId ? props.licenses.find((l: License) => list.licenseId === l.id) : props.licenses.find((l: License) => l.id === 5)) as License}
+                license={list.licenseId ? props.licenses.find((l: License) => list.licenseId === l.id) : props.licenses.find((l: License) => l.id === 5)}
                 software={list.syntaxId ? props.software.filter((s: Software) => s.syntaxIds.includes(list.syntaxId)) : []}
+                syntax={list.syntaxId ? props.syntaxes.find(s => s.id === list.syntaxId) : undefined}
                 tags={list.tagIds && props.tags.filter((t: Tag) => list.tagIds.includes(t.id))}
                 {...rp} />
             : (props.lists && props.lists.length && <Redirect to={{ pathname: "/", }} />) || null;

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, useSoftware, useTags } from '../../hooks';
+import { useLanguages, useLicenses, useLists, useSoftware, useSyntaxes, useTags } from '../../hooks';
 import { ListDrawer } from './ListDrawer';
 import { ListsTable } from './ListsTable';
 
@@ -10,6 +10,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
   const languages = useLanguages();
   const licenses = useLicenses();
   const software = useSoftware();
+  const syntaxes = useSyntaxes();
   const tags = useTags();
   return (
     <>
@@ -25,6 +26,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
         languages={languages}
         licenses={licenses}
         software={software}
+        syntaxes={syntaxes}
         tags={tags} />
     </>
   );

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

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

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

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

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

@@ -0,0 +1,7 @@
+export interface Syntax {
+    id: number;
+    definitionUrl: string;
+    filterListIds: number[];
+    name: string;
+    softwareIds: number[];
+};