fix eslint errors

next.config.js

@@ -7,4 +7,8 @@ module.exports = {
 
     return config
   },
+  images: {
+    // used for default avatar. TODO: find new 1 and self host
+    domains: ['encrypted-tbn0.gstatic.com', 'firebasestorage.googleapis.com'],
+  },
 }

src/components/Avatar/Avatar.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+// import Image from 'next/image'
 import { withFirebase } from '~/components/firebase'
 
 const DEFAULT_AVATAR =
@@ -21,7 +22,12 @@ const Avatar = ({ userId, refresh, firebase }) => {
 
   return (
     <figure className="Avatar image">
-      <img className="is-rounded" src={avatarUrl} alt="User Avatar" />
+      <img
+        className="is-rounded"
+        src={avatarUrl}
+        alt="User Avatar"
+        // layout="fill"
+      />
     </figure>
   )
 }

src/components/Comment/Comment.jsx

@@ -22,8 +22,8 @@ const Comment = ({ content, authorId, userbase, createdAt, user }) => {
       <article className="media">
         <div className="media-left">
           <figure className="image is-48x48">
-            <Link className="image" href={`/shy/${authorId}`}>
-              <a>
+            <Link className="image" href={`/shy/${authorId}`} passHref>
+              <a href="wow">
                 <Avatar userId={authorId} />
               </a>
             </Link>

src/components/Post/Post.jsx

@@ -28,12 +28,12 @@ const Post = ({
   const timePosted = formatDistanceToNowStrict(createdAt)
   const userRoute = uid === userId ? '/me' : `/shy/${userId}`
   const author = (
-    <a>
+    <>
       <strong className="is-capitalized has-text-grey-darker">
         {userFullName}
       </strong>
       <small className="has-text-grey-dark"> @{username}</small>
-    </a>
+    </>
   )
 
   return (
@@ -42,7 +42,13 @@ const Post = ({
         <div className="media-content">
           <div className="content">
             <p>
-              {userId ? <Link href={userRoute}>{author}</Link> : author}
+              {userId ? (
+                <Link href={userRoute} passHref>
+                  <a href="wow">{author}</a>
+                </Link>
+              ) : (
+                author
+              )}
               <small className="has-text-grey-light"> {timePosted} ago</small>
               <br />
               {content}
@@ -53,7 +59,7 @@ const Post = ({
               <div className="field has-addons">
                 {!hideCommentIcon && (
                   <p className="control">
-                    <Link href={`/post/${postId}`}>
+                    <Link href={`/post/${postId}`} passHref>
                       <button
                         type="button"
                         className="button is-small is-text has-text-primary"

src/components/TopNav/TopNav.jsx

@@ -3,9 +3,8 @@ import cn from 'classnames'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import Image from 'next/image'
-import { connect, useDispatch } from 'react-redux'
+import { connect } from 'react-redux'
 
-import { signIn, signOut, setInfo } from '~/redux/actions/user'
 import { withFirebase } from '~/components/firebase'
 import iconImage from '~/assets/icon.png'
 import logoImage from '~/assets/logo.png'
@@ -16,7 +15,6 @@ const TopNav = ({ user, firebase }) => {
   const [isNavbarOpened, setIsNavbarOpened] = useState(false)
   const nodeRef = useRef()
   const router = useRouter()
-  const dispatch = useDispatch()
 
   const closeNavbarAndGo = (path) => () => {
     setIsNavbarOpened(false)
@@ -45,22 +43,6 @@ const TopNav = ({ user, firebase }) => {
     }
   }, [isNavbarOpened])
 
-  // useEffect(() => {
-  //   if (!firebase) return
-
-  //   const unsubscribe = firebase.auth.onAuthStateChanged(async (authUser) => {
-  //     if (authUser) {
-  //       dispatch(signIn(authUser))
-  //       const userInfo = await firebase.doUserInfoGet(authUser.uid)
-  //       dispatch(setInfo(userInfo.data()))
-  //     } else {
-  //       dispatch(signOut())
-  //     }
-  //   })
-
-  //   return () => unsubscribe()
-  // }, [firebase])
-
   return (
     <nav
       ref={nodeRef}
@@ -70,8 +52,8 @@ const TopNav = ({ user, firebase }) => {
     >
       <div className="navbar-brand">
         <div className={cn(styles.navbarItem, 'navbar-item')}>
-          <Link href="/">
-            <a>
+          <Link href="/" passHref>
+            <a href="wow">
               <Image
                 src={iconImage}
                 alt="ShyApp Icon"

src/components/shared/InputForm.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 import Avatar from '~/components/Avatar/Avatar'
 
-import styles from './InputForm.module.scss'
+// import styles from './InputForm.module.scss'
 
 const InputForm = ({
   className = '',
@@ -19,8 +19,8 @@ const InputForm = ({
 }) => (
   <div className={`InputForm box ${className}`}>
     <form className="field is-grouped">
-      <Link className="image" href="/me">
-        <a>
+      <Link className="image" href="/me" passHref>
+        <a href="wow">
           <Avatar userId={user.auth.uid} />
         </a>
       </Link>

src/pages/_app.js

@@ -8,11 +8,12 @@ import { Footer, TopNav } from '~/components'
 import Firebase, { FirebaseContext, withFirebase } from '~/components/firebase'
 import { wrapper } from '~/redux/store'
 import { signIn, signOut, setInfo } from '~/redux/actions/user'
-import { compose } from '~/utils'
+import { compose, noop } from '~/utils'
 
 const AuthListener = ({ children, firebase, dispatch }) => {
   useEffect(() => {
-    if (!firebase) return
+    if (!firebase) return noop
+
     const unsubscribe = firebase.auth.onAuthStateChanged(async (authUser) => {
       if (authUser) {
         dispatch(signIn(authUser))
@@ -23,7 +24,7 @@ const AuthListener = ({ children, firebase, dispatch }) => {
       }
     })
 
-    return () => unsubscribe()
+    return unsubscribe
   })
 
   return children
@@ -34,7 +35,7 @@ const AuthListenerWrapper = compose(
   withFirebase
 )(AuthListener)
 
-function MyApp({ Component, pageProps, ...rest }) {
+function MyApp({ Component, pageProps }) {
   const [firebase, setFirebase] = useState(null)
 
   useEffect(() => {

src/pages/me.js

@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic'
 
 const DynamicComponentWithNoSSR = dynamic(
-  () => import('~/views/Profile/Profile.jsx'),
+  () => import('~/views/Profile/Profile'),
   {
     ssr: false,
   }

src/pages/post/[postId].js

@@ -2,7 +2,7 @@
 import dynamic from 'next/dynamic'
 
 const DynamicComponentWithNoSSR = dynamic(
-  () => import('~/views/PostDiscussion/PostDiscussion.jsx'),
+  () => import('~/views/PostDiscussion/PostDiscussion'),
   {
     ssr: false,
   }

src/pages/shy/[userId].js

@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic'
 
 const DynamicComponentWithNoSSR = dynamic(
-  () => import('~/views/Profile/Profile.jsx'),
+  () => import('~/views/Profile/Profile'),
   {
     ssr: false,
   }

src/utils/index.js

@@ -2,6 +2,8 @@ export const logger = (...args) => {
   console.log(...args)
 }
 
+export const noop = () => undefined
+
 export const throttle = (callback, limit) => {
   let waiting = false
   return (...args) => {