[FIX] Lint errors fixed in app directory

.gitignore

@@ -130,4 +130,4 @@ dist
 .pnp.*
 
 package-lock.json
-cms/package-lock.json
+cms/package-lock.json

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "eslint.workingDirectories": [
+        "./app",
+        "./cms"
+    ]
+}

app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

app/components/animation.js

@@ -5,12 +5,13 @@ function getRandomInt(max) {
   return Math.floor(Math.random() * Math.floor(max));
 }
 
-const Animation = React.memo(() => {
+const Animation = () => {
   console.log('animation rerendered');
   return (
     <span className={styles.track}>
-      {Array.apply(null, { length: 4 }).map(() => (
+      {Array.apply(null, { length: 4 }).map((e, index) => (
         <p
+          key={index}
           className={styles.emojiAnimationContainer}
           style={{
             color: 'red',
@@ -22,8 +23,9 @@ const Animation = React.memo(() => {
           ❤
         </p>
       ))}
-      {Array.apply(null, { length: 4 }).map(() => (
+      {Array.apply(null, { length: 4 }).map((e, index) => (
         <p
+          key={index}
           className={styles.emojiAnimationContainer}
           style={{
             overflow: 'hidden',
@@ -36,6 +38,6 @@ const Animation = React.memo(() => {
       ))}
     </span>
   );
-});
+};
 
-export default Animation;
+export default React.memo(Animation);

app/components/auth/dummy/ui/DummyLoginButton.js

@@ -3,6 +3,7 @@ import { NoUserAvatar } from "../../NoUserAvatar";
 import { Button } from "react-bootstrap";
 import styles from "../styles/DummyLoginButton.module.css";
 import { useDummyAuth } from "../hooks/useDummyAuth";
+import Image from 'next/future/image';
 
 export default function DummyLoginButton() {
   const [isLoginUiOpen, setIsLoginUiOpen] = useState(false);
@@ -17,12 +18,11 @@ export default function DummyLoginButton() {
             onClick={() => setIsLoginUiOpen((prev) => !prev)}
           >
             {user?.image ? (
-              <img
+              <Image
                 src={user.image}
                 alt={user.name}
-                className="rounded-circle"
-                height="42px"
-                width="42px"
+                height={42}
+                width={42}
               />
             ) : (
               <NoUserAvatar name={user?.name} size="42" />
@@ -37,14 +37,11 @@ export default function DummyLoginButton() {
               <div className="d-flex flex-column align-items-center mt-4 mb-3 ml-3 mr-3 border-bottom">
                 <div className="mb-1">
                   {user.image ? (
-                    <img
+                    <Image
                       src={user.image}
                       alt={user.name}
-                      style={{
-                        borderRadius: "50%",
-                      }}
-                      height="64px"
-                      width="64px"
+                      height={64}
+                      width={64}
                     />
                   ) : (
                     <NoUserAvatar size="64" name={user.name} />

app/components/auth/firebase/lib/functions.js

@@ -1,16 +1,16 @@
-import { init, useAuthUser, withAuthUser, withAuthUserSSR, withAuthUserTokenSSR} from 'next-firebase-auth'
+import { init, useAuthUser, withAuthUser, withAuthUserSSR, withAuthUserTokenSSR } from 'next-firebase-auth'
 import { getGoogleCredsFromFile } from './getGoogleCredsFromFile';
 
 
-const initAuthHelper = (function(){
-  let initAuthResult = {success: false, error: new Error('Firebase auth is not yet initialised')};
+const initAuthHelper = (function () {
+  let initAuthResult = { success: false, error: new Error('Firebase auth is not yet initialised') };
   const getInitAuthResult = () => {
     return initAuthResult;
   }
-  const setInitAuthResult = ({success,error}) => {
-    initAuthResult = {success,error};
+  const setInitAuthResult = ({ success, error }) => {
+    initAuthResult = { success, error };
   }
-  return {getInitAuthResult, setInitAuthResult};
+  return { getInitAuthResult, setInitAuthResult };
 })();
 
 export const getInitAuthResult = initAuthHelper.getInitAuthResult;
@@ -50,11 +50,11 @@ export const initAuth = () => {
     // The private key must not be accessible on the client side.
     privateKey: process.env.FIREBASE_PRIVATE_KEY || null,
   }
-  if(typeof window === 'undefined' && process.env.GOOGLE_CREDS_PATH){
+  if (typeof window === 'undefined' && process.env.GOOGLE_CREDS_PATH) {
     // firebase admin has to be initialized using service acccount json file.
     googleCreds = getGoogleCredsFromFile(process.env.GOOGLE_CREDS_PATH);
   }
-  
+
   try {
     init({
       loginAPIEndpoint: '/api/fb/login', // required
@@ -99,84 +99,84 @@ export const initAuth = () => {
         console.error(err)
       },
     });
-    initAuthHelper.setInitAuthResult({error: null, success: true});
+    initAuthHelper.setInitAuthResult({ error: null, success: true });
   } catch (e) {
     console.error(e)
-    initAuthHelper.setInitAuthResult({error: e, success: false});
+    initAuthHelper.setInitAuthResult({ error: e, success: false });
   }
   return initAuthHelper.getInitAuthResult();
 }
 
 export const withFirebaseAuthUser = (options) => (ChildComponent) => {
   const WithFirebaseAuthUserHOC = props => {
-    if(initAuthHelper.getInitAuthResult().success){
-      const Component =  withAuthUser(options)(ChildComponent);
-      return <Component {...props}/>
+    if (initAuthHelper.getInitAuthResult().success) {
+      const Component = withAuthUser(options)(ChildComponent);
+      return <Component {...props} />
     } else {
       console.error(initAuthHelper.getInitAuthResult().error);
       console.error("You must configure firebase auth before using firebase auth. See https://github.com/RocketChat/RC4Community/blob/master/app/components/auth/firebase/README.md");
-      return <ChildComponent {...props} initAuthResult={initAuthHelper.getInitAuthResult()}/> 
+      return <ChildComponent {...props} initAuthResult={initAuthHelper.getInitAuthResult()} />
     }
   }
   WithFirebaseAuthUserHOC.displayName = "WithFirebaseAuthUserHOC";
   return WithFirebaseAuthUserHOC;
 }
 
 export const useFirebaseAuthUser = () => {
-  if(initAuthHelper.getInitAuthResult().success){
-    return useAuthUser();
+  if (initAuthHelper.getInitAuthResult().success) {
+    return useAuthUser;
   } else {
-    return createEmptyAuthUser();
+    return createEmptyAuthUser;
   }
 }
 
-const handleFBNotInitError = async (context,getServerSidePropsFunc) => {
+const handleFBNotInitError = async (context, getServerSidePropsFunc) => {
   console.error(initAuthHelper.getInitAuthResult().error);
   console.error("You must configure firebase auth before using firebase auth. See https://github.com/RocketChat/RC4Community/blob/master/app/components/auth/firebase/README.md");
 
   const AuthUser = createEmptyAuthUser();
   context.AuthUser = AuthUser;
-  
+
   const AuthUserSerialized = AuthUser.serialize();
-  let returnData = {props: {AuthUserSerialized}};
-  
-  if(getServerSidePropsFunc) {  
+  let returnData = { props: { AuthUserSerialized } };
+
+  if (getServerSidePropsFunc) {
     // a getServerSideProps function is passed
     const composedProps = (await getServerSidePropsFunc(context)) || {};
-    if(composedProps){
-      if(composedProps.props){
+    if (composedProps) {
+      if (composedProps.props) {
         returnData = { ...composedProps }
         returnData.props.AuthUserSerialized = AuthUserSerialized
-      } else if(composedProps.notFound || composedProps.redirect) {
+      } else if (composedProps.notFound || composedProps.redirect) {
         // If composedProps returned a 'notFound' or 'redirect' key
         // (as per official doc: https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props)
         // it means it contains a custom dynamic routing logic that should not be overwritten
-        returnData = {...composedProps}
+        returnData = { ...composedProps }
       }
     }
   }
   return returnData;
 }
 
 export const withFirebaseAuthUserSSR = (options) => (getServerSidePropsFunc) => async (context) => {
-  if(initAuthHelper.getInitAuthResult().success){
+  if (initAuthHelper.getInitAuthResult().success) {
     return withAuthUserSSR(options)(getServerSidePropsFunc)(context);
   } else {
     // firebase is uninitialised due to some error
-    return (await handleFBNotInitError(context,getServerSidePropsFunc));
+    return (await handleFBNotInitError(context, getServerSidePropsFunc));
   }
 }
 
 export const withFirebaseAuthUserTokenSSR = (options) => (getServerSidePropsFunc) => async (context) => {
-  if(initAuthHelper.getInitAuthResult().success){
+  if (initAuthHelper.getInitAuthResult().success) {
     return withAuthUserTokenSSR(options)(getServerSidePropsFunc)(context);
   } else {
     // firebase is uninitialised due to some error
-    return (await handleFBNotInitError(context,getServerSidePropsFunc));
+    return (await handleFBNotInitError(context, getServerSidePropsFunc));
   }
 }
 
-export default {
+const firebaseAuthFunctions = {
   getInitAuthResult,
   createEmptyAuthUser,
   initAuth,
@@ -185,3 +185,5 @@ export default {
   withFirebaseAuthUserSSR,
   withFirebaseAuthUserTokenSSR
 };
+
+export default firebaseAuthFunctions;

app/components/auth/firebase/ui/FirebaseAuthMenuButton.js

@@ -3,30 +3,31 @@ import FirebaseAuthUI from "./FirebaseAuthUI";
 import { NoUserAvatar } from "../../NoUserAvatar";
 import styles from "../styles/FirebaseAuthMenuButton.module.css";
 import { useFirebaseAuthUser } from "../lib/functions";
+import Image from "next/future/image";
 
-export default function FirebaseAuthMenuButton({}){
+export default function FirebaseAuthMenuButton({ }) {
     const user = useFirebaseAuthUser();
-    const [isOpen,setOpen] = useState(false);
+    const [isOpen, setOpen] = useState(false);
     return (
         <div className={styles.authDialogWrapper}>
             <div className={styles.avatar}>
                 <button className={styles.avatarButton} onClick={() => setOpen(!isOpen)}>
                     <span className="d-flex align-items-center">
                         {
                             user?.photoURL ?
-                            <img src={user.photoURL}
-                                alt={user.displayName}
-                                className="rounded-circle"
-                                height="42px"
-                                width="42px" />
-                            :
-                            <NoUserAvatar name={user?.displayName} size="42" />
+                                <Image src={user.photoURL}
+                                    alt={user.displayName}
+                                    className="rounded-circle"
+                                    height={42}
+                                    width={42} />
+                                :
+                                <NoUserAvatar name={user?.displayName} size="42" />
                         }
                     </span>
                 </button>
             </div>
-            { isOpen &&
-                <div className={styles.authContainer}><FirebaseAuthUI/></div>
+            {isOpen &&
+                <div className={styles.authContainer}><FirebaseAuthUI /></div>
             }
         </div>
     )