fix(web): ♻ comment some stuff to get web to compile with new api

web/src/components/listInfoDrawer/ListInfoDrawer.tsx

@@ -16,136 +16,139 @@ import React, { useEffect, useState } from "react";
 
 import ButtonGroup from "antd/lib/button/button-group";
 import { Description } from "../Description";
-import { Language } from "../../interfaces/Language";
 import { LanguageCloud } from "../languageCloud";
-import { License } from "../../interfaces/License";
 import { LicenseTag } from "../LicenseTag";
 import { LinkButton } from "../LinkButton";
-import { List } from "../../interfaces/List";
-import { Maintainer } from "../../interfaces/Maintainer";
 import { Maintainers } from "../maintainers";
 import { RouteComponentProps } from "react-router-dom";
-import { Software } from "../../interfaces/Software";
 import { SoftwareCloud } from "../softwareCloud";
 import { SubscribeButtons } from "../SubscribeButtons";
-import { Syntax } from "../../interfaces/Syntax";
 import { SyntaxTag } from "../SyntaxTag";
-import { Tag } from "../../interfaces/Tag";
 import { TagCloud } from "../tagCloud";
+import {
+  useListDetails,
+  useLanguages,
+  useLicenses,
+  useMaintainers,
+  useSoftware,
+  useSyntaxes,
+  useTags,
+} from "../../hooks";
 
 interface Props {
-  list: List;
-  languages: Language[];
-  license: License | undefined;
-  maintainers: Maintainer[];
-  software: Software[];
-  syntax: Syntax | undefined;
-  tags: Tag[];
+  listId: number;
 }
 
 export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
+  const list = useListDetails(props.listId);
+  const languages = useLanguages();
+  const licenses = useLicenses();
+  const maintainers = useMaintainers();
+  const software = useSoftware();
+  const syntaxes = useSyntaxes();
+  const tags = useTags();
   const [originalTitle] = useState<string>(document.title);
   useEffect(() => {
     const updateTitle = () =>
-      (document.title = props.list.name + " | " + originalTitle);
+      (document.title = list?.name + " | " + originalTitle);
     updateTitle();
     return () => {
       document.title = originalTitle;
     };
-  }, [props.list, originalTitle]);
-  return (
+  }, [list, originalTitle, list?.name]);
+  return list ? (
     <Drawer
       visible={true}
       width={350}
       placement={"right"}
       mask={false}
-      title={props.list.name}
+      title={list.name}
       destroyOnClose={true}
       onClose={() => props.history.push("/")}
     >
-      <Description description={props.list.description} />
-      <LanguageCloud languages={props.languages} showLabel={true} />
-      <TagCloud tags={props.tags} showLabel={true} />
-      {props.license && (
+      <Description description={list.description} />
+      <LanguageCloud languages={languages} showLabel={true} />
+      <TagCloud tags={tags} showLabel={true} />
+      {/* {list.license && (
         <LicenseTag
-          name={props.license.name}
-          url={props.license.url}
+          name={list.license.name}
+          url={list.license.url}
           showLabel={true}
         />
       )}
-      {props.syntax && (
+      {list.syntax && (
         <SyntaxTag
-          name={props.syntax.name}
-          definitionUrl={props.syntax.url}
+          name={list.syntax.name}
+          definitionUrl={list.syntax.url}
           showLabel={true}
         />
-      )}
-      <SoftwareCloud software={props.software} showLabel={true} />
-      <Maintainers maintainers={props.maintainers} />
+      )} */}
+      <SoftwareCloud software={software} showLabel={true} />
+      <Maintainers maintainers={maintainers} />
       <Divider />
       <ButtonGroup style={{ display: "inherit" }}>
-        <SubscribeButtons
-          name={props.list.name}
-          viewUrl={props.list.viewUrl}
-          viewUrlMirrors={props.list.viewUrlMirrors}
+        {/* <SubscribeButtons
+          name={list.name}
+          viewUrl={list.viewUrl}
+          viewUrlMirrors={list.viewUrlMirrors}
         />
         <LinkButton
-          url={props.list.viewUrl}
+          url={list.viewUrl}
           text="View"
-          title={`View ${props.list.name} in its raw format`}
+          title={`View ${list.name} in its raw format`}
           icon={<SearchOutlined />}
-        />
+        /> */}
         <LinkButton
-          url={props.list.homeUrl}
+          url={list.homeUrl}
           text="Home"
-          title={`View ${props.list.name}'s homepage.`}
+          title={`View ${list.name}'s homepage.`}
           icon={<HomeOutlined />}
         />
         <LinkButton
-          url={props.list.policyUrl}
+          url={list.policyUrl}
           text="Policy"
-          title={`View the types of rules that ${props.list.name} includes.`}
+          title={`View the types of rules that ${list.name} includes.`}
           icon={<FileExclamationOutlined />}
         />
-        {props.list.emailAddress && (
+        {list.emailAddress && (
           <LinkButton
-            url={`mailto:${props.list.emailAddress}`}
+            url={`mailto:${list.emailAddress}`}
             text="Email"
-            title={`Email ${props.list.name}.`}
+            title={`Email ${list.name}.`}
             icon={<MailOutlined />}
           />
         )}
         <LinkButton
-          url={props.list.issuesUrl}
+          url={list.issuesUrl}
           text="GitHub Issues"
-          title={`View the GitHub Issues for ${props.list.name}.`}
+          title={`View the GitHub Issues for ${list.name}.`}
           icon={<GithubOutlined />}
         />
         <LinkButton
-          url={props.list.submissionUrl}
+          url={list.submissionUrl}
           text="Submit a Rule"
-          title={`Submit a new rule to be included in ${props.list.name}.`}
+          title={`Submit a new rule to be included in ${list.name}.`}
           icon={<FormOutlined />}
         />
         <LinkButton
-          url={props.list.forumUrl}
+          url={list.forumUrl}
           text="Forum"
-          title={`View the forum for ${props.list.name}.`}
+          title={`View the forum for ${list.name}.`}
           icon={<TeamOutlined />}
         />
         <LinkButton
-          url={props.list.chatUrl}
+          url={list.chatUrl}
           text="Chat"
-          title={`Enter the chat room for ${props.list.name}.`}
+          title={`Enter the chat room for ${list.name}.`}
           icon={<MessageOutlined />}
         />
         <LinkButton
-          url={props.list.donateUrl}
+          url={list.donateUrl}
           text="Donate"
-          title={`Donate to the maintainer of ${props.list.name}.`}
+          title={`Donate to the maintainer of ${list.name}.`}
           icon={<DollarOutlined />}
         />
       </ButtonGroup>
     </Drawer>
-  );
+  ) : null;
 };

web/src/components/listsTable/ListDrawer.tsx

@@ -6,66 +6,18 @@ import {
   StaticContext,
 } from "react-router";
 
-import { Language } from "../../interfaces/Language";
-import { License } from "../../interfaces/License";
 import { List } from "../../interfaces/List";
-import { Maintainer } from "../../interfaces/Maintainer";
-import { Software } from "../../interfaces/Software";
-import { Syntax } from "../../interfaces/Syntax";
-import { Tag } from "../../interfaces/Tag";
 import { ListInfoDrawer } from "../listInfoDrawer";
 
 interface Props {
   lists: List[];
-  languages: Language[];
-  licenses: License[];
-  maintainers: Maintainer[];
-  software: Software[];
-  syntaxes: Syntax[];
-  tags: Tag[];
 }
 
 export const ListDrawer = (props: Props) => {
   const renderDrawer = (rp: RouteComponentProps<any, StaticContext, any>) => {
     const list = props.lists.find((l) => l.slug === rp.match.params.listSlug);
     return list ? (
-      <ListInfoDrawer
-        list={list as List}
-        languages={
-          list.languageIso6391s &&
-          props.languages.filter((l: Language) =>
-            list.languageIso6391s.includes(l.id)
-          )
-        }
-        license={
-          list.licenseId
-            ? props.licenses.find((l: License) => list.licenseId === l.id)
-            : props.licenses.find((l: License) => l.id === 5)
-        }
-        maintainers={
-          list.maintainerIds &&
-          props.maintainers.filter((m: Maintainer) =>
-            list.maintainerIds.includes(m.id)
-          )
-        }
-        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}
-      />
+      <ListInfoDrawer listId={list.id} {...rp} />
     ) : props.lists && props.lists.length ? (
       <Redirect to={{ pathname: "/" }} />
     ) : null;

web/src/components/listsTable/ListsTable.tsx

@@ -125,14 +125,11 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
           filterIcon={searchDescriptionColumn.filterIcon}
           onFilter={searchDescriptionColumn.onFilter}
           render={(description: string, list: List) => (
-            <Description
-              description={description}
-              descriptionSourceUrl={list.descriptionSourceUrl}
-            />
+            <Description description={description} />
           )}
         />
       )}
-      {tablePageSize.isNarrowWindow ? null : (
+      {/* {tablePageSize.isNarrowWindow ? null : (
         <Table.Column<List>
           title="Software"
           key="Software"
@@ -181,8 +178,8 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             ) : null
           }
         />
-      )}
-      {tablePageSize.isNarrowWindow ? null : (
+      )} */}
+      {/* {tablePageSize.isNarrowWindow ? null : (
         <Table.Column<List>
           title="Syntax"
           key="Syntax"
@@ -221,8 +218,8 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             ) : null;
           }}
         />
-      )}
-      {tablePageSize.isNarrowWindow ? null : (
+      )} */}
+      {/* {tablePageSize.isNarrowWindow ? null : (
         <Table.Column<List>
           title="Languages"
           key="Languages"
@@ -263,7 +260,7 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             ) : null
           }
         />
-      )}
+      )} */}
       {tablePageSize.isNarrowWindow ? null : (
         <Table.Column<List>
           title="Tags"

web/src/components/listsTable/ListsTableHoc.tsx

@@ -33,7 +33,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
         tags={tags}
         {...props}
       />
-      <ListDrawer
+      {/* <ListDrawer
         lists={lists}
         languages={languages}
         licenses={licenses}
@@ -41,7 +41,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
         software={software}
         syntaxes={syntaxes}
         tags={tags}
-      />
+      /> */}
     </>
   );
 };