title: How do i fix it?
body: <pre><code>src\components\Messages\Messages.tsx
    Line 180:114:  Parsing error: ',' expected
  
  ERROR in src/components/Messages/Messages.tsx:14:23
  
  TS7016: Could not find a declaration file for module 'dompurify'. 'C:/Users/tommi/Downloads/React-Discord-Clone-master/React-Discord-Clone-master/node_modules/dompurify/dist/purify.cjs.js' implicitly has an 'any' type.
    Try `npm install @types/dompurify` if it exists or add a new declaration (.d.ts) file containing `declare module 'dompurify';`
      12 | } from '@material-ui/core';
      13 | import moment from 'moment';
    &gt; 14 | import DOMPurify from 'dompurify';
         |                       ^^^^^^^^^^^
      15 | //import Code from 'react-code-prettify';
      16 | import UserInfo from '../UserInfo/UserInfo';
      17 | import { StoreState } from '../../reducers';
  </code></pre>
  <p>ERROR in src/components/Messages/Messages.tsx:180:115
  TS1005: ',' expected.
  178 |                           secondary={
  179 |                             </p>
  <blockquote>
  <p>180 |                               &lt;div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(formatCode((message.msg))}}&gt;
  |                                                                                                                   ^
  181 |                             
  182 |                           }
  183 |                           className=&quot;message-text&quot;</p>
  </blockquote>
  <p><strong>But, code is this</strong></p>
  <pre class="lang-c prettyprint-override"><code>import React, { useEffect, useState } from 'react';
  import { useSelector } from 'react-redux';
  import {
    List,
    ListItem,
    ListItemAvatar,
    Avatar,
    ListItemText,
    Fade,
    Popover,
    CircularProgress
  } from '@material-ui/core';
  import moment from 'moment';
  import DOMPurify from 'dompurify';
  //import Code from 'react-code-prettify';
  import UserInfo from '../UserInfo/UserInfo';
  import { StoreState } from '../../reducers';
  
  interface MessageList {
    from: string;
    to?: string;
    msg: string;
    date: Date;
  }
  
  declare var PR: any;
  
  export default function Messages() {
    // Get States from Redux Store
    const chatStore = useSelector((state: StoreState) =&gt; state.chat);
    const { activeServer, activeChannel, activeView, activePMUser } = chatStore;
  
    // Local states
    const [userInfoVisible, setUserInfoVisible] = useState(false);
    const [messageIndex, setMessageIndex] = useState(12);
    const [loadMessages, setLoadMessages] = useState(false);
    const [userName, setUserName] = useState('');
    const [anchorEl, setAnchorEl] = useState(null);
  
    // ref to message container (for keeping scroll to bottom of chat)
    let messageContainerBottomRef = document.getElementById('messagesContainerBottom');
    let messageContainerRef = document.getElementById('messagesContainer');
  
    // Get message list from channel or from specific user
    let messages: MessageList[] = [];
    let messagesLength = 0;
    if (activeView === 'servers') {
      messages = chatStore.servers[activeServer]['channels'][activeChannel];
      messagesLength = messages.length;
    } else {
      messages = chatStore.privateMessages[activePMUser];
      // If no messages need to make empty array
      if (messages === undefined) {
        messages = [];
      }
      messagesLength = messages.length;
    }
  
    // Scroll to bottom of container if were not loading new messages
    useEffect(() =&gt; {
      if (messageContainerBottomRef &amp;&amp; messageContainerRef) {
        if (loadMessages) {
          messageContainerRef.scroll(0, 60);
        } else {
          messageContainerBottomRef.scrollIntoView({ block: 'end', behavior: 'smooth' });
        }
      }
    }, [loadMessages, messages, messageContainerRef, messageContainerBottomRef]);
  
    // Checks is message is a code block
    const isTextCodeBlock = (message: string) =&gt; {
      if (message.startsWith('```') &amp;&amp; message.endsWith('```')) return true;
      else return false;
    };
  
    // Handles to load more messages when scroll at top
    const handleScrollTop = (e: any) =&gt; {
      const element = e.target;
      if (element.scrollTop &gt; 60) {
        setLoadMessages(false);
      }
      if (element.scrollTop === 0) {
        if (messagesLength &gt; messageIndex) {
          setTimeout(() =&gt; {
            setLoadMessages(true);
            if (messageIndex + 12 &gt; messagesLength) {
              setMessageIndex(messagesLength);
            } else {
              setMessageIndex(messageIndex + 12);
            }
          }, 400);
        }
      }
    };
  
    // Formats the code block
    const formatCode = (message: string) =&gt; {
      return message.split('```')[1];
    };
  
    // Handles clicks for setting anchor to User Info (To private message)
    const handleUserClick = (e: any, userName: string) =&gt; {
      setUserName(userName);
      setUserInfoVisible(true);
      setAnchorEl(e.currentTarget);
    };
  
    // Closes popup of User Info
    const handlePopoverClose = () =&gt; {
      setUserInfoVisible(false);
      setAnchorEl(null);
    };
  
    // Load pretty print on every render change
    useEffect(() =&gt; {
      PR.prettyPrint();
    });
  
    return (
      &lt;React.Fragment&gt;
        {messages.length === 0 &amp;&amp; (
          &lt;div style={{ height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}&gt;
            &lt;div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexWrap: 'wrap',
                textAlign: 'center',
                padding: '1em',
                fontFamily: 'roboto'
              }}
            &gt;
              &lt;CircularProgress /&gt;{' '}
              &lt;div style={{ marginTop: '1em', flexBasis: '100%', color: 'white' }}&gt;
                {' '}
                The server just woke up! Hold on for 5 seconds, while he munches a quick byte!{' '}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )}
        &lt;div
          id=&quot;messagesContainer&quot;
          className=&quot;messages-container&quot;
          onScroll={e =&gt; handleScrollTop(e)}
          ref={element =&gt; (messageContainerRef = element)}
        &gt;
          {messagesLength &gt;= messageIndex ? (
            &lt;div className=&quot;progress-container&quot;&gt;
              &lt;CircularProgress color=&quot;primary&quot; /&gt;
            &lt;/div&gt;
          ) : null}
          &lt;List&gt;
            {messages !== null
              ? messages.slice(messagesLength - messageIndex, messagesLength).map((message, i) =&gt; {
                  // Filter for null messages (dummy message on backend should fix...)
                  return (
                    &lt;Fade in={true} timeout={500}&gt;
                      &lt;ListItem className=&quot;message&quot; key={i}&gt;
                        &lt;ListItemAvatar className=&quot;message-user-icon&quot;&gt;
                          &lt;Avatar&gt;
                            &lt;img
                              onClick={e =&gt; handleUserClick(e, message.from)}
                              src={process.env.PUBLIC_URL + '/user.png'}
                              alt=&quot;user icon&quot;
                              height=&quot;48&quot;
                            /&gt;
                          &lt;/Avatar&gt;
                        &lt;/ListItemAvatar&gt;
                        {isTextCodeBlock(message.msg) ? (
                          &lt;ListItemText
                            primary={
                              &lt;div className=&quot;message-user&quot; onClick={e =&gt; handleUserClick(e, message.from)}&gt;
                                {message.from.toLowerCase()}
                                &lt;div className=&quot;message-date&quot;&gt;{` - ${moment(message.date).format('LLL')}`}&lt;/div&gt;
                              &lt;/div&gt;
                            }
                            secondary={
                              &lt;pre className=&quot;prettyprint&quot;&gt;
                                &lt;div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(formatCode((message.msg))}}&gt;&lt;/div&gt;
                              &lt;/pre&gt;
                            }
                            className=&quot;message-text&quot;
                          /&gt;
                        ) : (
                          &lt;ListItemText
                            primary={
                              &lt;div className=&quot;message-user&quot; onClick={e =&gt; handleUserClick(e, message.from)}&gt;
                                {message.from.toLowerCase()}
                                &lt;div className=&quot;message-date&quot;&gt;{` - ${moment(message.date).format('LLL')}`}&lt;/div&gt;
                              &lt;/div&gt;
                            }
                            secondary={message.msg}
                            className=&quot;message-text&quot;
                          /&gt;
                        )}
                      &lt;/ListItem&gt;
                    &lt;/Fade&gt;
                  );
                })
              : null}
          &lt;/List&gt;
          &lt;div ref={element =&gt; (messageContainerBottomRef = element)} id=&quot;messagesContainerBottom&quot;&gt;&lt;/div&gt;
          &lt;Popover
            id=&quot;user-info&quot;
            open={userInfoVisible}
            anchorEl={anchorEl}
            onClose={handlePopoverClose}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'right'
            }}
          &gt;
            &lt;UserInfo userName={userName} setUserInfoVisible={setUserInfoVisible} /&gt;
          &lt;/Popover&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>