Fix several linting and typescript compile errors

.eslintrc.json

@@ -4,6 +4,7 @@
     "browser": true
   },
   "plugins": [
+    "@typescript-eslint",
     "jane"
   ],
   "settings": {
@@ -14,7 +15,8 @@
   "extends": [
     "plugin:jane/recommended",
     "plugin:jane/react",
-    "plugin:jane/typescript"
+    "plugin:jane/typescript",
+    "plugin:@typescript-eslint/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

package.json

@@ -74,6 +74,7 @@
     "@storybook/react": "^5.3.19",
     "@types/jest": "^26.0.8",
     "@types/node-fetch": "^2.5.7",
+    "@typescript-eslint/eslint-plugin": "^3.9.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "cssnano": "^4.1.10",

src/api_tests/api.spec.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import fetch from 'node-fetch';
 
 import {

src/components/icon.tsx

@@ -85,7 +85,7 @@ const icons = {
     <polygon points="12 2.29 14.18 9 21.23 9 15.53 13.15 17.71 19.85 12 15.71 6.29 19.85 8.47 13.15 2.77 9 9.82 9 12 2.29" />
   ),
   starOutline: (
-<path d="M12,7.15l.75,2.31.34,1h3.53l-2,1.43-.89.64.34,1,.75,2.32-2-1.44L12,13.85l-.88.64-2,1.44.75-2.32.34-1-.89-.64-2-1.43h3.53l.34-1L12,7.15m0-4.86L9.82,9h-7l5.7,4.15-2.18,6.7L12,15.71l5.71,4.14-2.18-6.7L21.23,9h-7L12,2.29Z"/>
+    <path d="M12,7.15l.75,2.31.34,1h3.53l-2,1.43-.89.64.34,1,.75,2.32-2-1.44L12,13.85l-.88.64-2,1.44.75-2.32.34-1-.89-.64-2-1.43h3.53l.34-1L12,7.15m0-4.86L9.82,9h-7l5.7,4.15-2.18,6.7L12,15.71l5.71,4.14-2.18-6.7L21.23,9h-7L12,2.29Z" />
   ),
   more: (
     <>
@@ -137,13 +137,12 @@ const icons = {
 };
 
 interface IconProps {
-  name: keyof typeof icons
+  name: keyof typeof icons;
   size?: string | number;
 }
 
 export function Icon({
   name,
-  style = '',
   size = '20px',
   ...props
 }: IconProps & React.SVGProps<SVGSVGElement>) {

src/components/main.tsx

@@ -339,7 +339,7 @@ class Main extends Component<any, MainState> {
                 <li className="list-inline-item-action">
                   <span
                     className="pointer"
-                    onClick={linkEvent(this, this.handleEditClick)}
+                    onClick={this.handleEditClick}
                     data-tippy-content={i18n.t('edit')}
                   >
                     <Icon name="edit" />
@@ -628,11 +628,11 @@ class Main extends Component<any, MainState> {
     }));
   }
 
-  handleEditClick(i: Main) {
+  handleEditClick = () => {
     this.setState({
       showEditSite: true,
     });
-  }
+  };
 
   handleEditCancel() {
     this.setState({
@@ -716,6 +716,7 @@ class Main extends Component<any, MainState> {
         this.props.history.push('/setup');
       } else {
         console.log('data.site is missing', data.site);
+        console.log({ siteData: data.site });
         this.setState(
           {
             siteRes: {

src/components/post-listing.tsx

@@ -248,7 +248,7 @@ class BasePostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  getImage(thumbnail: boolean = false) {
+  getImage(thumbnail = false) {
     let post = this.props.post;
     if (isImage(post.url)) {
       if (post.url.includes('pictrs')) {
@@ -322,7 +322,7 @@ class BasePostListing extends Component<PostListingProps, PostListingState> {
         return (
           <div className="embed-responsive embed-responsive-16by9">
             <video
-              playsinline
+              playsInline
               muted
               loop
               controls

src/components/post.tsx

@@ -97,7 +97,6 @@ export class Post extends Component<any, PostState> {
         number_of_communities: undefined,
         enable_create_communities: undefined,
         enable_downvotes: undefined,
-        enable_create_communities: undefined,
         open_registration: undefined,
         enable_nsfw: undefined,
       },
@@ -105,14 +104,13 @@ export class Post extends Component<any, PostState> {
     },
   };
 
-  state = this.emptyState
+  state = this.emptyState;
 
   // constructor(props: any, context: any) {
   //   super(props, context);
 
   //   this.state = this.emptyState;
 
-
   // }
 
   componentWillUnmount() {
@@ -400,7 +398,7 @@ export class Post extends Component<any, PostState> {
     return tree;
   }
 
-  setDepth(node: CommentNodeI, i: number = 0): void {
+  setDepth(node: CommentNodeI, i = 0): void {
     for (let child of node.children) {
       child.comment.depth = i;
       this.setDepth(child, i + 1);

src/components/reports.tsx

@@ -466,7 +466,7 @@ export class BaseReports extends Component<any, ReportsState> {
       community_id,
       post_id,
       id,
-    } = this.state.currentRemoveDialog;
+    } = this.state.currentRemoveDialog as CommentReport;
 
     const form: CommentForm = {
       content: comment_text,
@@ -493,13 +493,8 @@ export class BaseReports extends Component<any, ReportsState> {
   handleRemovePostSubmit() {
     event.preventDefault();
 
-    const {
-      post_name,
-      community_id,
-      creator_id,
-      post_id,
-      id,
-    } = this.state.currentRemoveDialog;
+    const { post_name, community_id, creator_id, post_id, id } = this.state
+      .currentRemoveDialog as PostReport;
 
     let form: PostForm = {
       name: post_name,

src/components/sidebar.tsx

@@ -183,7 +183,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   <li className="list-inline-item-action">
                     <span
                       className="pointer"
-                      onClick={linkEvent(this, this.handleEditClick)}
+                      onClick={this.handleEditClick}
                       data-tippy-content={i18n.t('edit')}
                     >
                       <Icon name="edit" />
@@ -212,25 +212,26 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   )}
                 </>
               )}
-              {this.canAdmin || this.canSitemod && (
-                <li className="list-inline-item">
-                  {!this.props.community.removed ? (
-                    <span
-                      className="pointer"
-                      onClick={linkEvent(this, this.handleModRemoveShow)}
-                    >
-                      {i18n.t('remove')}
-                    </span>
-                  ) : (
-                    <span
-                      className="pointer"
-                      onClick={linkEvent(this, this.handleModRemoveSubmit)}
-                    >
-                      {i18n.t('restore')}
-                    </span>
-                  )}
-                </li>
-              )}
+              {this.canAdmin ||
+                (this.canSitemod && (
+                  <li className="list-inline-item">
+                    {!this.props.community.removed ? (
+                      <span
+                        className="pointer"
+                        onClick={linkEvent(this, this.handleModRemoveShow)}
+                      >
+                        {i18n.t('remove')}
+                      </span>
+                    ) : (
+                      <span
+                        className="pointer"
+                        onClick={linkEvent(this, this.handleModRemoveSubmit)}
+                      >
+                        {i18n.t('restore')}
+                      </span>
+                    )}
+                  </li>
+                ))}
             </ul>
             {this.state.showRemoveDialog && (
               <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
@@ -244,7 +245,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     className="form-control mr-2"
                     placeholder={i18n.t('optional')}
                     value={this.state.removeReason}
-                    onInput={linkEvent(this, this.handleModRemoveReasonChange)}
+                    onInput={this.handleModRemoveReasonChange}
                   />
                 </div>
                 {/* TODO hold off on expires for now */}
@@ -306,20 +307,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  handleEditClick(i: Sidebar) {
-    i.state.showEdit = true;
-    i.setState(i.state);
-  }
+  handleEditClick = () => {
+    this.setState({ showEdit: true });
+  };
 
-  handleEditCommunity() {
-    this.state.showEdit = false;
-    this.setState(this.state);
-  }
+  handleEditCommunity = () => {
+    this.setState({ showEdit: false });
+  };
 
-  handleEditCancel() {
-    this.state.showEdit = false;
-    this.setState(this.state);
-  }
+  handleEditCancel = () => {
+    this.setState({ showEdit: false });
+  };
 
   handleDeleteClick(i: Sidebar) {
     event.preventDefault();
@@ -378,22 +376,21 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  handleModRemoveShow(i: Sidebar) {
-    i.state.showRemoveDialog = true;
-    i.setState(i.state);
-  }
+  handleModRemoveShow = () => {
+    // i.state.showRemoveDialog = true;
+    this.setState({ showRemoveDialog: true });
+  };
 
-  handleModRemoveReasonChange(i: Sidebar, event: any) {
-    i.state.removeReason = event.target.value;
-    i.setState(i.state);
-  }
+  handleModRemoveReasonChange = (event: any) => {
+    this.setState({ removeReason: event.target.value });
+  };
 
   handleModRemoveExpiresChange(i: Sidebar, event: any) {
     i.state.removeExpires = event.target.value;
     i.setState(i.state);
   }
 
-  handleModRemoveSubmit(i: Sidebar) {
+  handleModRemoveSubmit = (i: Sidebar) => {
     event.preventDefault();
     let deleteForm: CommunityFormI = {
       name: i.props.community.name,
@@ -408,7 +405,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     };
     WebSocketService.Instance.editCommunity(deleteForm);
 
-    i.state.showRemoveDialog = false;
-    i.setState(i.state);
-  }
+    this.setState({ showRemoveDialog: false });
+  };
 }

src/interfaces.ts

@@ -855,7 +855,7 @@ export interface GetSiteResponse {
   sitemods: Array<UserView>;
   banned: Array<UserView>;
   online: number;
-  version: string;
+  version?: string;
   my_user?: User;
 }
 

src/theme.tsx

@@ -8,7 +8,7 @@ import { useThemeSystem } from './components/ThemeSystemProvider';
 
 const { dark, bulma, tailwind, ...remainingThemes } = allThemes;
 
-export const variants = {
+export const variants: any = {
   buttons: {
     primary: {
       color: 'background',
@@ -89,7 +89,7 @@ const defaultTheme: ThemeProviderProps<Theme> = {
       bg: 'primary',
       '&:hover': {
         bg: 'primary',
-      }
+      },
     },
     secondary: {
       ...variants.buttons.secondary,

tsconfig.json

@@ -22,5 +22,9 @@
   },
   "include": [
     "src", "public/assets"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts"
   ]
 }

yarn.lock

@@ -2711,6 +2711,18 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@typescript-eslint/[email protected]^3.9.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.9.0.tgz#0fe529b33d63c9a94f7503ca2bb12c84b9477ff3"
+  integrity sha512-UD6b4p0/hSe1xdTvRCENSx7iQ+KR6ourlZFfYuPC7FlXEzdHuLPrEmuxZ23b2zW96KJX9Z3w05GE/wNOiEzrVg==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "3.9.0"
+    debug "^4.1.1"
+    functional-red-black-tree "^1.0.1"
+    regexpp "^3.0.0"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
 "@typescript-eslint/[email protected]":
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.7.1.tgz#ab036caaed4c870d22531d41f9352f3147364d61"
@@ -2722,6 +2734,17 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
+"@typescript-eslint/[email protected]":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.9.0.tgz#3171d8ddba0bf02a8c2034188593630914fcf5ee"
+  integrity sha512-/vSHUDYizSOhrOJdjYxPNGfb4a3ibO8zd4nUKo/QBFOmxosT3cVUV7KIg8Dwi6TXlr667G7YPqFK9+VSZOorNA==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/types" "3.9.0"
+    "@typescript-eslint/typescript-estree" "3.9.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
 "@typescript-eslint/[email protected]^2.5.0":
   version "2.34.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
@@ -2748,6 +2771,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.7.1.tgz#90375606b2fd73c1224fe9e397ee151e28fa1e0c"
   integrity sha512-PZe8twm5Z4b61jt7GAQDor6KiMhgPgf4XmUb9zdrwTbgtC/Sj29gXP1dws9yEn4+aJeyXrjsD9XN7AWFhmnUfg==
 
+"@typescript-eslint/[email protected]":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.9.0.tgz#be9d0aa451e1bf3ce99f2e6920659e5b2e6bfe18"
+  integrity sha512-rb6LDr+dk9RVVXO/NJE8dT1pGlso3voNdEIN8ugm4CWM5w5GimbThCMiMl4da1t5u3YwPWEwOnKAULCZgBtBHg==
+
 "@typescript-eslint/[email protected]":
   version "2.34.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
@@ -2775,6 +2803,20 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@typescript-eslint/[email protected]":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.9.0.tgz#c6abbb50fa0d715cab46fef67ca6378bf2eaca13"
+  integrity sha512-N+158NKgN4rOmWVfvKOMoMFV5n8XxAliaKkArm/sOypzQ0bUL8MSnOEBW3VFIeffb/K5ce/cAV0yYhR7U4ALAA==
+  dependencies:
+    "@typescript-eslint/types" "3.9.0"
+    "@typescript-eslint/visitor-keys" "3.9.0"
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
 "@typescript-eslint/[email protected]":
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.7.1.tgz#b90191e74efdee656be8c5a30f428ed16dda46d1"
@@ -2782,6 +2824,13 @@
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+"@typescript-eslint/[email protected]":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.9.0.tgz#44de8e1b1df67adaf3b94d6b60b80f8faebc8dd3"
+  integrity sha512-O1qeoGqDbu0EZUC/MZ6F1WHTIzcBVhGqDj3LhTnj65WUA548RXVxUHbYhAW9bZWfb2rnX9QsbbP5nmeJ5Z4+ng==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 "@vue/[email protected]":
   version "3.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0-rc.5.tgz#dd4f1816fcae34a81bc60e584f97993cad284d54"