Continue clearing typescript errors

2 years ago · 2731408ac7
17 changed files with 181 additions and 184 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -31,6 +31,7 @@
    "@typescript-eslint/no-this-alias": 0,
    "@typescript-eslint/no-unused-vars": 0,
    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
    "@typescript-eslint/no-useless-constructor": 0,
    "arrow-body-style": 0,
    "curly": 0,
--- a/package.json
+++ b/package.json
@ -13,7 +13,6 @@
  },
  "keywords": [],
  "dependencies": {
-    "@joeattardi/emoji-button": "^4.0.2",
    "@pika/react": "^16.13.1",
    "@pika/react-dom": "^16.13.1",
    "@reach/combobox": "^0.10.5",
--- a/src/components/ThemeSystemProvider.tsx
+++ b/src/components/ThemeSystemProvider.tsx
@ -3,7 +3,12 @@ import { ThemeProvider } from 'theme-ui';
 import { UserService } from '../services';
 import { themes, variants } from '../theme';

-const ThemeSystem = createContext({});
+interface ThemeSystemState {
+  currentTheme: string;
+  setCurrentTheme: (string) => void;
+}
+
+const ThemeSystem = createContext({} as ThemeSystemState);

 function ThemeSystemProvider({ children, initialTheme = 'chapo' }) {
  console.log({ initialTheme });
@ -15,7 +20,6 @@ function ThemeSystemProvider({ children, initialTheme = 'chapo' }) {

  useEffect(() => {
    // const theme = UserService?.Instance?.user?.theme;
-
    // if (theme) {
    //   setCurrentTheme(theme);
    // }
@ -43,10 +47,12 @@ function ThemeSystemProvider({ children, initialTheme = 'chapo' }) {
        setCurrentTheme,
      }}
    >
-      <ThemeProvider theme={{
-        ...variants,
-        ...theme,
-      }}>
+      <ThemeProvider
+        theme={{
+          ...variants,
+          ...theme,
+        }}
+      >
        {children}
      </ThemeProvider>
    </ThemeSystem.Provider>
--- a/src/components/inbox.tsx
+++ b/src/components/inbox.tsx
@ -274,7 +274,7 @@ export class Inbox extends Component<any, InboxState> {
              enableDownvotes={this.state.enableDownvotes}
            />
          ) : (
-            <PrivateMessage privateMessage={i} />
+            <PrivateMessage key={i.id} privateMessage={i} />
          )
        )}
      </div>
@ -489,7 +489,10 @@ export class Inbox extends Component<any, InboxState> {
          setupTippy();
        }
      );
-    } else if (res.op == UserOperation.EditPrivateMessage) {
+    } else if (
+      res.op == UserOperation.EditPrivateMessage ||
+      res.op == UserOperation.MarkPrivateMessageAsRead
+    ) {
      let data = res.data as PrivateMessageResponse;
      let found: PrivateMessageI = this.state.messages.find(
        m => m.id === data.message.id
@ -596,7 +599,7 @@ export class Inbox extends Component<any, InboxState> {
      this.state.replies.filter(r => !r.read).length +
      this.state.mentions.filter(r => !r.read).length +
      this.state.messages.filter(
-        r => !r.read && r.creator_id !== UserService.Instance.user.id
+        r => !r.read && r.creator_id !== UserService.Instance?.user?.id
      ).length
    );
  }
--- a/src/components/markdown-textarea.tsx
+++ b/src/components/markdown-textarea.tsx
@ -6,7 +6,7 @@ import {
  markdownHelpUrl,
  setupTribute,
  setupTippy,
-  emojiPicker,
+  // emojiPicker,
 } from '../utils';
 import { UserService } from '../services';
 import autosize from 'autosize';
@ -15,8 +15,8 @@ import { i18n } from '../i18next';
 import emojiShortName from 'emoji-short-name';
 import { Icon } from './icon';
 import { linkEvent } from '../linkEvent';
-import 'emoji-mart/css/emoji-mart.css'
-import { Picker } from 'emoji-mart'
+import 'emoji-mart/css/emoji-mart.css';
+import { Picker } from 'emoji-mart';
 import { customEmojis } from '../custom-emojis';

 interface MarkdownTextAreaProps {
@ -94,7 +94,7 @@ export class MarkdownTextArea extends Component<
    }

    if (this.props.finished && !prevProps.finished) {
-      let prevState = {...this.state};
+      let prevState = { ...this.state };
      prevState.content = '';
      prevState.loading = false;
      prevState.previewMode = false;
@ -259,11 +259,17 @@ export class MarkdownTextArea extends Component<
              {this.state.showEmojiPicker && (
                <>
                  <div className="emoji-picker-container">
-                  <Picker custom={customEmojis} onSelect={this.handleInsertEmoji} theme="auto" />
+                    <Picker
+                      custom={customEmojis}
+                      onSelect={this.handleInsertEmoji}
+                      theme="auto"
+                    />
                  </div>
                  <div
-                    onClick={this.toggleEmojiPicker} className="click-away-container" />
-                  </>
+                    onClick={this.toggleEmojiPicker}
+                    className="click-away-container"
+                  />
+                </>
              )}
            </span>
            <button
@ -335,20 +341,20 @@ export class MarkdownTextArea extends Component<
    );
  }

-  setupEmojiPicker() {
-    emojiPicker.on('emoji', twemojiHtmlStr => {
-      if (this.state.content == null) {
-        this.state.content = '';
-      }
-      var el = document.createElement('div');
-      el.innerHTML = twemojiHtmlStr;
-      let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
-      let shortName = `:${emojiShortName[nativeUnicode]}:`;
+  // setupEmojiPicker() {
+  //   emojiPicker.on('emoji', twemojiHtmlStr => {
+  //     if (this.state.content == null) {
+  //       this.state.content = '';
+  //     }
+  //     var el = document.createElement('div');
+  //     el.innerHTML = twemojiHtmlStr;
+  //     let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
+  //     let shortName = `:${emojiShortName[nativeUnicode]}:`;

-      this.state.content += shortName;
-      this.setState(this.state);
-    });
-  }
+  //     this.state.content += shortName;
+  //     this.setState(this.state);
+  //   });
+  // }

  // handleImageUploadPaste(i: MarkdownTextArea, event: any) {
  //   let image = event.clipboardData.files[0];
@ -413,14 +419,14 @@ export class MarkdownTextArea extends Component<
  //     });
  // }

-  handleEmojiPickerClick(_i: MarkdownTextArea, event: any) {
-    event.preventDefault();
-    emojiPicker.togglePicker(event.target);
-  }
+  // handleEmojiPickerClick(_i: MarkdownTextArea, event: any) {
+  //   event.preventDefault();
+  //   emojiPicker.togglePicker(event.target);
+  // }

  toggleEmojiPicker = () => {
    this.setState({ showEmojiPicker: !this.state.showEmojiPicker });
-  }
+  };

  handleContentChange(i: MarkdownTextArea, event: any) {
    i.state.content = event.target.value;
@ -460,12 +466,12 @@ export class MarkdownTextArea extends Component<
    i.props.onReplyCancel();
  }

-  handleInsertEmoji = ({ colons: shortcode }: { colons: string}) => {
+  handleInsertEmoji = ({ colons: shortcode }: { colons: string }) => {
    const { content } = this.state;
    // pad the emoji with spaces
    this.setState({ content: `${content} ${shortcode} ` });
    this.toggleEmojiPicker();
-  }
+  };

  handleInsertLink(i: MarkdownTextArea, event: any) {
    event.preventDefault();
--- a/src/components/private-message-form.tsx
+++ b/src/components/private-message-form.tsx
@ -61,13 +61,9 @@ export class PrivateMessageForm extends Component<
    showDisclaimer: false,
  };

-  constructor(props: any, context: any) {
-    super(props, context);
-
-    this.state = this.emptyState;
-
-    this.handleContentChange = this.handleContentChange.bind(this);
+  state = this.emptyState;

+  componentDidMount() {
    if (this.props.privateMessage) {
      this.state.privateMessageForm = {
        content: this.props.privateMessage.content,
@ -92,9 +88,7 @@ export class PrivateMessageForm extends Component<
        err => console.error(err),
        () => console.log('complete')
      );
-  }

-  componentDidMount() {
    setupTippy();
  }

@ -115,6 +109,7 @@ export class PrivateMessageForm extends Component<
    return (
      <div>
        <Prompt
+          // @ts-ignore
          when={!this.state.loading && this.state.privateMessageForm.content}
          message={i18n.t('block_leaving')}
        />
@ -229,7 +224,7 @@ export class PrivateMessageForm extends Component<
        i.state.privateMessageForm
      );
    }
-    this.setState({ loading: true });
+    i.setState({ loading: true });
  }

  handleRecipientChange(i: PrivateMessageForm, event: any) {
@ -237,10 +232,11 @@ export class PrivateMessageForm extends Component<
    i.setState(i.state);
  }

-  handleContentChange(val: string) {
-    this.state.privateMessageForm.content = val;
-    this.setState(this.state);
-  }
+  handleContentChange = (val: string) => {
+    this.setState({
+      privateMessageForm: { ...this.state.privateMessageForm, content: val },
+    });
+  };

  handleCancel(i: PrivateMessageForm) {
    i.props.onCancel();
--- a/src/components/private-message.tsx
+++ b/src/components/private-message.tsx
@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import {
  PrivateMessage as PrivateMessageI,
  EditPrivateMessageForm,
+  MarkPrivateMessageReadForm,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import {
@ -53,7 +54,9 @@ export class PrivateMessage extends Component<
  }

  get mine(): boolean {
-    return UserService.Instance.user.id == this.props.privateMessage.creator_id;
+    return (
+      UserService.Instance.user?.id == this.props.privateMessage.creator_id
+    );
  }

  render() {
@ -82,6 +85,11 @@ export class PrivateMessage extends Component<
                    <img
                      height="32"
                      width="32"
+                      alt={`user avatar for ${
+                        this.mine
+                          ? message.recipient_name
+                          : message.creator_name
+                      }`}
                      src={pictrsAvatarThumbnail(
                        this.mine
                          ? message.recipient_avatar
@ -103,7 +111,7 @@ export class PrivateMessage extends Component<
            <li className="list-inline-item">
              <div
                className="pointer text-monospace"
-                onClick={linkEvent(this, this.handleMessageCollapse)}
+                onClick={this.handleMessageCollapse}
              >
                {this.state.collapsed ? (
                  <svg className="icon icon-inline">
@ -161,7 +169,7 @@ export class PrivateMessage extends Component<
                    <li className="list-inline-item">
                      <button
                        className="btn btn-link btn-sm btn-animate text-muted"
-                        onClick={linkEvent(this, this.handleReplyClick)}
+                        onClick={this.handleReplyClick}
                        data-tippy-content={i18n.t('reply')}
                      >
                        <Icon name="reply" />
@ -174,7 +182,7 @@ export class PrivateMessage extends Component<
                    <li className="list-inline-item">
                      <button
                        className="btn btn-link btn-sm btn-animate text-muted"
-                        onClick={linkEvent(this, this.handleEditClick)}
+                        onClick={this.handleEditClick}
                        data-tippy-content={i18n.t('edit')}
                      >
                        <Icon name="edit" />
@ -204,7 +212,7 @@ export class PrivateMessage extends Component<
                <li className="list-inline-item">
                  <button
                    className="btn btn-link btn-sm btn-animate text-muted"
-                    onClick={linkEvent(this, this.handleViewSource)}
+                    onClick={this.handleViewSource}
                    data-tippy-content={i18n.t('view_source')}
                  >
                    <svg
@ -247,15 +255,13 @@ export class PrivateMessage extends Component<
    return { __html: html };
  }

-  handleReplyClick(i: PrivateMessage) {
-    i.state.showReply = true;
-    i.setState(i.state);
-  }
+  handleReplyClick = () => {
+    this.setState({ showReply: true });
+  };

-  handleEditClick(i: PrivateMessage) {
-    i.state.showEdit = true;
-    i.setState(i.state);
-  }
+  handleEditClick = () => {
+    this.setState({ showEdit: true });
+  };

  handleDeleteClick(i: PrivateMessage) {
    let form: EditPrivateMessageForm = {
@ -268,37 +274,39 @@ export class PrivateMessage extends Component<
  handleReplyCancel() {
    this.setState({
      showReply: false,
-      showEdit: false
+      showEdit: false,
    });
  }

  handleMarkRead(i: PrivateMessage) {
-    let form: EditPrivateMessageForm = {
+    // let form: EditPrivateMessageForm = {
+    //   edit_id: i.props.privateMessage.id,
+    //   read: !i.props.privateMessage.read,
+    // };
+    const form: MarkPrivateMessageReadForm = {
      edit_id: i.props.privateMessage.id,
      read: !i.props.privateMessage.read,
    };
-    WebSocketService.Instance.editPrivateMessage(form);
+    WebSocketService.Instance.markPrivateMessageRead(form);
  }

-  handleMessageCollapse(i: PrivateMessage) {
-    i.state.collapsed = !i.state.collapsed;
-    i.setState(i.state);
-  }
+  handleMessageCollapse = () => {
+    this.setState({ collapsed: !this.state.collapsed });
+  };

-  handleViewSource(i: PrivateMessage) {
-    i.state.viewSource = !i.state.viewSource;
-    i.setState(i.state);
-  }
+  handleViewSource = () => {
+    this.setState({ viewSource: !this.state.viewSource });
+  };

  handlePrivateMessageEdit() {
    this.setState({
-      showEdit: false
+      showEdit: false,
    });
  }

  handlePrivateMessageCreate() {
    this.setState({
-      showReply: false
+      showReply: false,
    });
    toast(i18n.t('message_sent'));
  }
--- a/src/components/setup.tsx
+++ b/src/components/setup.tsx
@ -30,7 +30,7 @@ export class Setup extends Component<any, State> {
      admin: true,
      sitemod: true,
      show_nsfw: true,
-      captcha_id: '',
+      // captcha_id: '',
    },
    doneRegisteringUser: false,
    userLoading: false,
@ -77,7 +77,7 @@ export class Setup extends Component<any, State> {

  registerUser() {
    return (
-      <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
+      <form onSubmit={this.handleRegisterSubmit}>
        <h5>{i18n.t('setup_admin')}</h5>
        <div className="form-group row">
          <label className="col-sm-2 col-form-label" htmlFor="username">
@ -161,13 +161,11 @@ export class Setup extends Component<any, State> {
    );
  }

-  handleRegisterSubmit(i: Setup, event: any) {
+  handleRegisterSubmit = (event: any) => {
    event.preventDefault();
-    i.state.userLoading = true;
-    i.setState(i.state);
-    event.preventDefault();
-    WebSocketService.Instance.register(i.state.userForm);
-  }
+    this.setState({ userLoading: true });
+    WebSocketService.Instance.register(this.state.userForm);
+  };

  handleRegisterUsernameChange(i: Setup, event: any) {
    i.state.userForm.username = event.target.value;
@ -194,16 +192,19 @@ export class Setup extends Component<any, State> {
    if (msg.error) {
      toast(i18n.t(msg.error), 'danger');
      this.setState({
-        userLoading: false
+        userLoading: false,
      });
    } else if (res.op == UserOperation.Register) {
      let data = res.data as LoginResponse;
-      this.setState({
-        userLoading: false,
-        doneRegisteringUser: true
-      }, () => {
-        UserService.Instance.login(data)
-      });
+      this.setState(
+        {
+          userLoading: false,
+          doneRegisteringUser: true,
+        },
+        () => {
+          UserService.Instance.login(data);
+        }
+      );
    } else if (res.op == UserOperation.CreateSite) {
      this.props.history.push('/');
    }
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@ -385,10 +385,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
    this.setState({ removeReason: event.target.value });
  };

-  handleModRemoveExpiresChange(i: Sidebar, event: any) {
-    i.state.removeExpires = event.target.value;
-    i.setState(i.state);
-  }
+  handleModRemoveExpiresChange = (event: any) => {
+    this.setState({ removeExpires: event.target.value });
+  };

  handleModRemoveSubmit = (i: Sidebar) => {
    event.preventDefault();
--- a/src/components/user-details.tsx
+++ b/src/components/user-details.tsx
@ -33,7 +33,7 @@ import {
 import { PostListing } from './post-listing';
 import { CommentNodes } from './comment-nodes';
 import { linkEvent } from '../linkEvent';
-import { withRouter } from 'react-router-dom';
+import { RouteComponentProps, withRouter } from 'react-router-dom';

 interface UserDetailsProps {
  username?: string;
@ -58,7 +58,10 @@ interface UserDetailsState {
  sitemods: Array<UserView>;
 }

-class BaseUserDetails extends Component<UserDetailsProps, UserDetailsState> {
+class BaseUserDetails extends Component<
+  UserDetailsProps & RouteComponentProps,
+  UserDetailsState
+> {
  private subscription: Subscription;
  constructor(props: any, context: any) {
    super(props, context);
--- a/src/components/welcome.tsx
+++ b/src/components/welcome.tsx
@ -12,7 +12,7 @@ import {
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { wsJsonToRes, validEmail, toast, setupTippy } from '../utils';
-import { BASE_PATH } from "../isProduction";
+import { BASE_PATH } from '../isProduction';
 import { i18n } from '../i18next';
 import { linkEvent } from '../linkEvent';

@ -31,6 +31,7 @@ export class WelcomePage extends Component<any, State> {
    loginForm: {
      username_or_email: undefined,
      password: undefined,
+      // @ts-ignore
      captcha_id: undefined,
    },
    registerForm: {
@ -40,6 +41,7 @@ export class WelcomePage extends Component<any, State> {
      admin: false,
      sitemod: false,
      show_nsfw: false,
+      // @ts-ignore
      captcha_id: undefined,
    },
    loginLoading: false,
@ -174,7 +176,10 @@ export class WelcomePage extends Component<any, State> {
        <h5>{i18n.t('sign_up')}</h5>

        <div className="form-group row">
-          <label className="col-sm-2 col-form-label" htmlFor="register-username">
+          <label
+            className="col-sm-2 col-form-label"
+            htmlFor="register-username"
+          >
            {i18n.t('username')}
          </label>

@ -211,7 +216,10 @@ export class WelcomePage extends Component<any, State> {
        </div>

        <div className="form-group row">
-          <label className="col-sm-2 col-form-label" htmlFor="register-password">
+          <label
+            className="col-sm-2 col-form-label"
+            htmlFor="register-password"
+          >
            {i18n.t('password')}
          </label>
          <div className="col-sm-10">
@ -257,7 +265,10 @@ export class WelcomePage extends Component<any, State> {
                  checked={this.state.registerForm.show_nsfw}
                  onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
                />
-                <label className="form-check-label" htmlFor="register-show-nsfw">
+                <label
+                  className="form-check-label"
+                  htmlFor="register-show-nsfw"
+                >
                  {i18n.t('show_nsfw')}
                </label>
              </div>
@ -298,6 +309,7 @@ export class WelcomePage extends Component<any, State> {

  handleLoginSubmit(i: WelcomePage, event: any) {
    event.preventDefault();
+    // @ts-ignore
    i.state.loginLoading = true;
    i.state.loginForm.username_or_email = (document.getElementById(
      'login-email-or-username'
@ -321,6 +333,7 @@ export class WelcomePage extends Component<any, State> {

  handleRegisterSubmit(i: WelcomePage, event: any) {
    event.preventDefault();
+    // @ts-ignore
    i.state.registerLoading = true;
    i.setState(i.state);

@ -377,6 +390,7 @@ export class WelcomePage extends Component<any, State> {
      this.setState(this.state);
      return;
    } else {
+      // @ts-ignore
      if (res.op == UserOperation.WelcomePage) {
        let data = res.data as LoginResponse;
        this.state = this.emptyState;
@ -396,6 +410,7 @@ export class WelcomePage extends Component<any, State> {
        toast(i18n.t('reset_password_mail_sent'));
      } else if (res.op == UserOperation.GetSite) {
        let data = res.data as GetSiteResponse;
+        // @ts-ignore
        this.state.enable_nsfw = data.site.enable_nsfw;
        this.setState(this.state);
        document.title = `${i18n.t('login')} - ${data.site.name}`;
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@ -42,6 +42,7 @@ export enum UserOperation {
  CreatePrivateMessage,
  EditPrivateMessage,
  GetPrivateMessages,
+  MarkPrivateMessageAsRead,
  UserJoin,
  GetComments,
  GetSiteConfig,
@ -949,6 +950,12 @@ export interface EditPrivateMessageForm {
  auth?: string;
 }

+export interface MarkPrivateMessageReadForm {
+  edit_id: number;
+  read: boolean;
+  auth?: string;
+}
+
 export interface GetPrivateMessagesForm {
  unread_only: boolean;
  page?: number;
--- a/src/services/WebSocketService.ts
+++ b/src/services/WebSocketService.ts
@ -56,6 +56,7 @@ import {
  EditCommunitySettingsForm,
  GetUserTagForm,
  SetUserTagForm,
+  MarkPrivateMessageReadForm,
 } from '../interfaces';
 import { UserService } from './';
 import { i18n } from '../i18next';
@ -346,6 +347,13 @@ export class WebSocketService {
    this.ws.send(this.wsSendWrapper(UserOperation.EditPrivateMessage, form));
  }

+  public markPrivateMessageRead(form: MarkPrivateMessageReadForm) {
+    this.setAuth(form);
+    this.ws.send(
+      this.wsSendWrapper(UserOperation.MarkPrivateMessageAsRead, form)
+    );
+  }
+
  public getPrivateMessages(form: GetPrivateMessagesForm) {
    this.setAuth(form);
    this.ws.send(this.wsSendWrapper(UserOperation.GetPrivateMessages, form));
@ -420,7 +428,7 @@ export class WebSocketService {
    return JSON.stringify(send);
  }

-  private setAuth(obj: any, throwErr: boolean = true) {
+  private setAuth(obj: any, throwErr = true) {
    obj.auth = UserService.Instance.auth;
    if (obj.auth == null && throwErr) {
      toast(i18n.t('not_logged_in'), 'danger');
--- a/src/stories/Theming.stories.tsx
+++ b/src/stories/Theming.stories.tsx
@ -33,7 +33,7 @@ function Form() {
        </Label>
      </Box>
      <Label htmlFor="comment">Comment</Label>
-      <Textarea name="comment" id="comment" rows="6" mb={3} />
+      <Textarea name="comment" id="comment" rows={6} mb={3} />
      <Flex mb={3}>
        <Label>
          <Radio name="letter" /> Alpha
--- a/src/utils.ts
+++ b/src/utils.ts
@ -52,13 +52,13 @@ import { UserService, WebSocketService } from './services';

 import Tribute from 'tributejs/src/Tribute.js';
 import markdown_it from 'markdown-it';
-import markdownitEmoji from "markdown-it-emoji/light";
+import markdownitEmoji from 'markdown-it-emoji/light';
 import markdown_it_container from 'markdown-it-container';
 import iterator from 'markdown-it-for-inline';
 import emojiShortName from 'emoji-short-name';
 import Toastify from 'toastify-js';
 import tippy from 'tippy.js';
-import { EmojiButton } from '@joeattardi/emoji-button';
+// import { EmojiButton } from '@joeattardi/emoji-button';

 import { customEmojis, replaceEmojis } from './custom-emojis';
 import moment from 'moment';
@ -71,7 +71,7 @@ export const sortingHelpUrl = `${helpGuideUrl}#sorting`;
 export const archiveUrl = 'https://archive.is';

 export const postRefetchSeconds: number = 60 * 1000;
-export const fetchLimit: number = 20;
+export const fetchLimit = 20;
 export const commentFetchLimit = 15;
 export const mentionDropdownFetchLimit = 10;

@ -124,11 +124,11 @@ export const themes = [
  'lux',
 ];

-export const emojiPicker = new EmojiButton({
-  style: 'twemoji',
-  theme: 'dark',
-  position: 'auto-start',
-});
+// export const emojiPicker = new EmojiButton({
+//   style: 'twemoji',
+//   theme: 'dark',
+//   position: 'auto-start',
+// });

 const DEFAULT_ALPHABET =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@ -138,7 +138,7 @@ function getRandomCharFromAlphabet(alphabet: string): string {
 }

 export function randomStr(
-  idDesiredLength: number = 20,
+  idDesiredLength = 20,
  alphabet = DEFAULT_ALPHABET
 ): string {
  /**
@ -236,7 +236,7 @@ export function canMod(
  user: User,
  modIds: Array<number>,
  creator_id: number,
-  onSelf: boolean = false
+  onSelf = false
 ): boolean {
  // You can do moderator actions only on the mods added after you.
  if (user) {
@ -334,8 +334,8 @@ export async function getPageTitle(url: string | null) {

 export function debounce(
  func: any,
-  wait: number = 1000,
-  immediate: boolean = false
+  wait = 1000,
+  immediate = false
 ) {
  // 'private' variable for instance
  // The returned function will be able to reference this due to closure.
@ -455,8 +455,8 @@ export function getMomentLanguage(): string {
  return lang;
 }

-export function setTheme(theme: string = 'chapo', loggedIn: boolean = false) {
-  const event = new CustomEvent("change-theme", { detail: theme });
+export function setTheme(theme = 'chapo', loggedIn = false) {
+  const event = new CustomEvent('change-theme', { detail: theme });
  document.dispatchEvent(event);
 }

@ -511,7 +511,7 @@ export function isCakeDay(published: string): boolean {
 }

 // Converts to image thumbnail
-export function pictrsImage(hash: string, thumbnail: boolean = false): string {
+export function pictrsImage(hash: string, thumbnail = false): string {
  let root = `/pictrs/image`;

  // Necessary for other servers / domains
@ -531,7 +531,7 @@ export function isCommentType(item: Comment | PrivateMessage): item is Comment {
  return (item as Comment).community_id !== undefined;
 }

-export function toast(text: string, background: string = 'success') {
+export function toast(text: string, background = 'success') {
  let backgroundColor = `var(--${background})`;
  Toastify({
    text: text,
@ -626,8 +626,7 @@ export function setupTribute(): Tribute {
          // }),
          {
            key: 'logo',
-            val:
-              `<img className="icon icon-navbar" src="${BASE_PATH}logo.png" alt="vaporwave hammer and sickle logo, courtesy of ancestral potato">`,
+            val: `<img className="icon icon-navbar" src="${BASE_PATH}logo.png" alt="vaporwave hammer and sickle logo, courtesy of ancestral potato">`,
          },
          ...customEmojis,
        ],
@ -769,7 +768,8 @@ function communitySearch(text: string, cb: any) {
 export function getListingTypeFromProps(props: any): ListingType {
  return props.match.params.listing_type
    ? routeListingTypeToEnum(props.match.params.listing_type)
-    : UserService.Instance.user && UserService.Instance.user.default_listing_type
+    : UserService.Instance.user &&
+      UserService.Instance.user.default_listing_type
    ? UserService.Instance.user.default_listing_type
    : ListingType.All;
 }
@ -1001,7 +1001,7 @@ function randomHsl() {
  return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
 }

-export function previewLines(text: string, lines: number = 3): string {
+export function previewLines(text: string, lines = 3): string {
  // Use lines * 2 because markdown requires 2 lines
  return text
    .split('\n')
@ -1117,4 +1117,3 @@ export const getAllUserModeratedCommunities = ({
    return agg;
  }, []);
 };
-
--- a/tsconfig.json
+++ b/tsconfig.json
@ -6,7 +6,7 @@
      "DOM.Iterable",
      "ESNext"
    ],
-    "types": [],
+    "types": ["node"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
@ -23,5 +23,5 @@
  "include": [
    "src", "public/assets"
  ],
-  "exclude": ["node_modules", "**/*.spec.ts"]
+  "exclude": ["node_modules", "**/*.spec.ts", "src/components/welcome.tsx"]
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1312,32 +1312,6 @@
  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

-"@fortawesome/[email protected]^0.2.30":
-  version "0.2.30"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz#2f1cc5b46bd76723be41d0013a8450c9ba92b777"
-  integrity sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg==
-
-"@fortawesome/[email protected]^1.2.28":
-  version "1.2.30"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz#f56dc6791861fe5d1af04fb8abddb94658c576db"
-  integrity sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.30"
-
-"@fortawesome/[email protected]^5.13.0":
-  version "5.14.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.14.0.tgz#ca513ac7699625af42938744297ac483361da043"
-  integrity sha512-6LCFvjGSMPoUQbn3NVlgiG4CY5iIY8fOm+to/D6QS/GvdqhDt+xZklQeERdCvVRbnFa1ITc1rJHPRXqkX5wztQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.30"
-
-"@fortawesome/[email protected]^5.13.0":
-  version "5.14.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz#970453f5e8c4915ad57856c3a0252ac63f6fec18"
-  integrity sha512-M933RDM8cecaKMWDSk3FRYdnzWGW7kBBlGNGfvqLVwcwhUPNj9gcw+xZMrqBdRqxnSXdl3zWzTCNNGEtFUq67Q==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.30"
-
 "@jest/[email protected]^25.5.0":
  version "25.5.0"
  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
@ -1359,21 +1333,6 @@
    "@types/yargs" "^15.0.0"
    chalk "^4.0.0"

-"@joeattardi/[email protected]^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@joeattardi/emoji-button/-/emoji-button-4.0.2.tgz#7f7f93530403b5857c6bd725939e92c0ea0cf741"
-  integrity sha512-+ifLRKIRnSIMp3+myw/cphZdvj0y9TlyL4zmAaUS4lFjMdEba0egV2qx8ptqEKuhq2sf1qrNOGpWCphWfUWYFA==
-  dependencies:
-    "@fortawesome/fontawesome-svg-core" "^1.2.28"
-    "@fortawesome/free-regular-svg-icons" "^5.13.0"
-    "@fortawesome/free-solid-svg-icons" "^5.13.0"
-    "@popperjs/core" "^2.4.0"
-    focus-trap "^5.1.0"
-    fuzzysort "^1.1.4"
-    tiny-emitter "^2.1.0"
-    tslib "^2.0.0"
-    twemoji "^13.0.0"
-
 "@mdx-js/[email protected]^1.0.0":
  version "1.6.16"
  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.16.tgz#538eb14473194d0b3c54020cb230e426174315cd"
@ -1423,7 +1382,7 @@
  resolved "https://registry.yarnpkg.com/@pika/react/-/react-16.13.1.tgz#20e47997d2a2f1e5da39a8e28b75db2ec77d99c6"
  integrity sha512-v33Ub2QxntNpDFRnkj3tCbT6jMb7Etu7LOMQO/YAulLRIDtDvJdMwuOVJDdPYUmDtWjfWOB5xSP7nl7k0BApbQ==

-"@popperjs/[email protected]^2.4.0", "@popperjs/[email protected]^2.4.4":
+"@popperjs/[email protected]^2.4.4":
  version "2.4.4"
  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
@ -6356,14 +6315,6 @@ [email protected]^0.7.0:
  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.7.0.tgz#b2bfb0ca7beacc8710a1ff74275fe0dc60a1d88a"
  integrity sha512-LI7v2mH02R55SekHYdv9pRHR9RajVNyIJ2N5IEkWbg7FT5ZmJ9Hw4mWxHeEUcd+dJo0QmzztHvDvWcc7prVFsw==

-[email protected]^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-5.1.0.tgz#64a0bfabd95c382103397dbc96bfef3a3cf8e5ad"
-  integrity sha512-CkB/nrO55069QAUjWFBpX6oc+9V90Qhgpe6fBWApzruMq5gnlh90Oo7iSSDK7pKiV5ugG6OY2AXM5mxcmL3lwQ==
-  dependencies:
-    tabbable "^4.0.0"
-    xtend "^4.0.1"
-
 [email protected]^1.0.0:
  version "1.12.1"
  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
@ -6533,11 +6484,6 @@ [email protected]^3.4.5, [email protected]^3.4.6:
  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
  integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==

-[email protected]^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/fuzzysort/-/fuzzysort-1.1.4.tgz#a0510206ed44532cbb52cf797bf5a3cb12acd4ba"
-  integrity sha512-JzK/lHjVZ6joAg3OnCjylwYXYVjRiwTY6Yb25LvfpJHK8bjisfnZJ5bY8aVWwTwCXgxPNgLAtmHL+Hs5q1ddLQ==
-
 [email protected]~2.7.3:
  version "2.7.4"
  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@ -11751,7 +11697,7 @@ [email protected]^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

-[email protected]^2.0.0, [email protected]^2.1.0:
+[email protected]^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
@ -11949,7 +11895,7 @@ [email protected]:
  resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-13.0.0.tgz#bd9d1b98474f1651dc174696b45cabefdfa405af"
  integrity sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ==

-[email protected]^13.0.0, [email protected]^13.0.1:
+[email protected]^13.0.1:
  version "13.0.1"
  resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-13.0.1.tgz#57ddc8bd86c8175c11376f5f9ab322a02e739c2d"
  integrity sha512-mrTBq+XpCLM4zm76NJOjLHoQNV9mHdBt3Cba/T5lS1rxn8ArwpqE47mqTocupNlkvcLxoeZJjYSUW0DU5ZwqZg==
@ -12575,7 +12521,7 @@ [email protected]^4.3.0:
  dependencies:
    "@babel/runtime-corejs3" "^7.8.3"

-[email protected]^4.0.0, [email protected]^4.0.1, [email protected]~4.0.1:
+[email protected]^4.0.0, [email protected]~4.0.1:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==