Feat Linter & Prettier setup | Dependency Changes

.eslintrc.cjs

@@ -8,9 +8,14 @@ module.exports = {
     ecmaFeatures: {
       jsx: true
     },
-    ecmaVersion: 2017,
+    ecmaVersion: 2020,
     sourceType: "module"
   },
   plugins: ["react"],
-  rules: {}
+  rules: {},
+  settings: {
+    react: {
+      version: "detect"
+    }
+  }
 };

CONTRIBUTING.md

@@ -51,8 +51,6 @@ This will setup your project along with firebase emulator in a docker environmen
 
 ---
 
-
-
 ## Firebase Setup
 
 1. Sign in to https://console.firebase.google.com/.

README.md

@@ -54,8 +54,8 @@ First of all make sure that your are using version 14 of node. If the problem st
 
 This problem generally arises when you have not setuped/started the Firebase emulators.
 
-1. [Setup firebase emulator](https://github.com/scorelab/Codelabz/blob/master/CONTRIBUTING.md#firebase-setup). 
-2. [Start the Emulators]( https://github.com/scorelab/Codelabz/blob/master/CONTRIBUTING.md#run-firebase-emulator)
+1. [Setup firebase emulator](https://github.com/scorelab/Codelabz/blob/master/CONTRIBUTING.md#firebase-setup).
+2. [Start the Emulators](https://github.com/scorelab/Codelabz/blob/master/CONTRIBUTING.md#run-firebase-emulator)
 3. Run the app using `npm run dev`.
 
 > 📝**NOTE** : Remember to start the emulators before running the app.

cypress/e2e/components/editor/editor.cy.js

@@ -76,7 +76,7 @@ describe("Editor Test | CodeLabz", () => {
     cy.get("[data-testId=stepsPanel]>div").eq(0).contains("Test step1");
   });
 
-  it("Collapsing of sidebar", function (){
+  it("Collapsing of sidebar", function () {
     cy.get("[data-testid=tutorial-steps-list]").should("exist");
     cy.get("[data-testid=tutorial-collapse-button]").click();
     cy.get("[data-testid=tutorial-steps-list]").should("not.exist");
@@ -91,18 +91,24 @@ describe("Editor Test | CodeLabz", () => {
   });
 
   it("should support rich text", function () {
-    cy.get('.ql-editor').type("{selectall}{backspace}");
-    cy.get('.ql-editor').type("{ctrl}b").type("bold").type("{ctrl}b").type("{enter}");
+    cy.get(".ql-editor").type("{selectall}{backspace}");
+    cy.get(".ql-editor")
+      .type("{ctrl}b")
+      .type("bold")
+      .type("{ctrl}b")
+      .type("{enter}");
     cy.get(".ql-italic").click();
-    cy.get('.ql-editor').type("italic");
+    cy.get(".ql-editor").type("italic");
     cy.get(".ql-italic").click();
-    cy.get('.ql-editor').type("{rightarrow}{enter}");
-    cy.get('.ql-editor').type("{ctrl}u").type("underlined").type("{ctrl}u");
+    cy.get(".ql-editor").type("{rightarrow}{enter}");
+    cy.get(".ql-editor").type("{ctrl}u").type("underlined").type("{ctrl}u");
     cy.get("[data-testId=previewMode]").click();
     cy.fixture("editor").then(editorTestData => {
-      cy.get("[data-testid=tutorial-content]").should("have.html", editorTestData.expectedRichTextHTML);
-    })
-
+      cy.get("[data-testid=tutorial-content]").should(
+        "have.html",
+        editorTestData.expectedRichTextHTML
+      );
+    });
   });
 
   it("Should add new step", function () {
@@ -114,12 +120,18 @@ describe("Editor Test | CodeLabz", () => {
     cy.wait(1000);
     cy.get("[data-testid=stepsPanel]>div").eq(2).contains("Test step2");
   });
-
-  it("Change active step by clicking on it", function (){
-    cy.get('[data-testid=stepsPanel]>div').eq(2).click();
-    cy.get('[data-testId=stepsPanel]>div').eq(2).find('.Mui-active').should('exist');
-    cy.get('[data-testid=stepsPanel]>div').eq(0).click();
-    cy.get('[data-testId=stepsPanel]>div').eq(0).find('.Mui-active').should('exist');
+
+  it("Change active step by clicking on it", function () {
+    cy.get("[data-testid=stepsPanel]>div").eq(2).click();
+    cy.get("[data-testId=stepsPanel]>div")
+      .eq(2)
+      .find(".Mui-active")
+      .should("exist");
+    cy.get("[data-testid=stepsPanel]>div").eq(0).click();
+    cy.get("[data-testId=stepsPanel]>div")
+      .eq(0)
+      .find(".Mui-active")
+      .should("exist");
   });
 
   it("should switch between tutorial steps", function () {

cypress/fixtures/editor.json

@@ -1,3 +1,3 @@
 {
-    "expectedRichTextHTML": "<div><p><strong>bold</strong><br><em>italic</em><br><u>underlined</u></p></div>"
-}
+  "expectedRichTextHTML": "<div><p><strong>bold</strong><br><em>italic</em><br><u>underlined</u></p></div>"
+}

functions/cloud_functions/onCreateFunctions.js

@@ -86,7 +86,7 @@ exports.createOrganizationHandler = async (snapshot, context) => {
         uid: user_uid,
         org_handle,
         permissions: [3]
-      })
+      });
 
     await Promise.all([registerOrgHandle, setOrgMetrics, setOrgUsers]);
     return console.log(

package.json

@@ -4,8 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
     "format": "prettier --write .",
+    "format:fix": "prettier --write . --fix",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
@@ -94,6 +96,7 @@
     "@vitejs/plugin-react-swc": "^3.0.0",
     "common-tags": "^1.8.2",
     "cypress": "^12.3.0",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "husky": "^8.0.0",
     "less": "^4.1.3",

src/App.jsx

@@ -6,21 +6,21 @@ import { useDispatch, useSelector } from "react-redux";
 import { getProfileData } from "./store/actions";
 
 const App = () => {
-	const firebase = useFirebase();
-	const firestore = useFirestore();
-	const dispatch = useDispatch();
-	const organizations = useSelector(
-		({
-			firebase: {
-				profile: { organizations },
-			},
-		}) => organizations
-	);
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  const dispatch = useDispatch();
+  const organizations = useSelector(
+    ({
+      firebase: {
+        profile: { organizations }
+      }
+    }) => organizations
+  );
 
-	useEffect(() => {
-		getProfileData(organizations)(firebase, firestore, dispatch);
-	}, [organizations, firebase, dispatch]);
-	return <Routes />;
+  useEffect(() => {
+    getProfileData(organizations)(firebase, firestore, dispatch);
+  }, [organizations, firebase, dispatch]);
+  return <Routes />;
 };
 
-export default App;
+export default App;

src/auth/index.js

@@ -25,7 +25,7 @@ const UserIsAuthenticated = connectedRouterRedirect({
   allowRedirectBack: false,
   redirectPath: (state, ownProps) =>
     locationHelper.getRedirectQueryParam(ownProps) || "/login",
-  authenticatingSelector: ({ firebase: { auth, profile, isInitializing } }) => {
+  authenticatingSelector: ({ firebase: { auth, isInitializing } }) => {
     return !isLoaded(auth) || isInitializing === true;
   },
   authenticatedSelector: ({ firebase: { auth } }) =>

src/components/AuthPage/Login/index.jsx

@@ -197,12 +197,14 @@ const Login = ({
                 />
               </FormGroup>
             </Grid>
-            <Grid style={{fontFamily:"Arial, sans-serif",fontSize:"1.5vh"}}> 
+            <Grid
+              style={{ fontFamily: "Arial, sans-serif", fontSize: "1.5vh" }}
+            >
               <Link
                 data-testId="forgotPassoword"
                 to="/forgotpassword"
                 className="login-form-forgot"
-                style={{ float: "right"}}
+                style={{ float: "right" }}
               >
                 Forgot password
               </Link>