Setup husky and lint-staged

Frontend/.eslintignore

@@ -0,0 +1,7 @@
+# node node_modules
+/node_modules/*
+
+#build artefacts
+dist/*
+build/*
+coverage/*

Frontend/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        node: true,
+    },
+    extends: ["plugin:react/recommended", "airbnb", "prettier"],
+    overrides: [],
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+    },
+    plugins: ["react", "prettier"],
+    rules: {
+        "prettier/prettier": ["error"],
+        "no-unused-vars": "warn",
+        "react/no-unescaped-entities": 0,
+        "jsx-a11y/anchor-is-valid": 0,
+        "react/button-has-type": 0,
+        "react/self-closing-comp": "warn",
+        "import/newline-after-import": "warn",
+        "import/order": "warn",
+        "no-console": "warn"
+    }
+}

Frontend/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd Frontend
+yarn lint-staged
+

Frontend/.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# include other rules here eg. unit tests

Frontend/.prettierignore

@@ -0,0 +1,5 @@
+#!include:../.gitignore
+node_modules/
+
+# html files
+*.html

Frontend/.prettierrc.json

@@ -0,0 +1,25 @@
+{
+  "printWidth": 100,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": false,
+  "arrowParens": "always",
+  "requirePragma": true,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": {
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ".*rc",
+      "options": {
+        "singleQuote": false,
+        "parser": "json"
+      }
+    }
+  ]
+}

Frontend/lint-staged.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    '*.{js,jsx}': ['yarn lint'],
+    '*.{js,json,css,jsx}': ['yarn format'],
+  }

Frontend/package.json

@@ -1,21 +1,41 @@
 {
-  "name": "oscsa",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.2"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.1.0",
-    "vite": "^3.1.0"
-  }
+    "name": "oscsa",
+    "private": true,
+    "version": "0.0.0",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "lint": "eslint --fix",
+        "lint:fix": "eslint --fix */**/*.{jsx,js,tsx} --color",
+        "lint:check": "eslint */**/*.{jsx,js,tsx} --color",
+        "prettier": "prettier .",
+        "format": "prettier --write",
+        "format:fix": "yarn prettier -- --write",
+        "format:check": "yarn prettier -- --check",
+        "prepare": "cd .. && husky install Frontend/.husky",
+        "lint-staged": "lint-staged --config lint-staged.config.js"
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.4.2"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.17",
+        "@types/react-dom": "^18.0.6",
+        "@vitejs/plugin-react": "^2.1.0",
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
+        "husky": "^8.0.1",
+        "lint-staged": "^13.0.3",
+        "prettier": "^2.7.1",
+        "vite": "^3.1.0"
+    }
 }

Frontend/src/App.jsx

@@ -1,8 +1,9 @@
-import "./GlobalStyles.css";
-import Layout from "./utils/Routing";
+import React from "react"
+import "./GlobalStyles.css"
+import Layout from "./utils/Routing"
 
 function App() {
-  return <Layout />;
+    return <Layout />
 }
 
-export default App;
+export default App

Frontend/src/GlobalStyles.css

@@ -1,6 +1,6 @@
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Poppins', sans-serif;
-}
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+}

Frontend/src/main.jsx

@@ -1,12 +1,12 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import { BrowserRouter } from "react-router-dom";
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
+import App from "./App"
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>
-);
+    <React.StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </React.StrictMode>,
+)

Frontend/src/pages/landing-page/LandingPage.jsx

@@ -1,19 +1,19 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import "./landingpage.css";
+import React from "react"
+import { Link } from "react-router-dom"
+import "./landingpage.css"
 
 function LandingPage() {
-  return (
-    <div className="landing-page">
-      <h1>
-        <Link to="/login">Go to Login Page</Link>
-      </h1>
+    return (
+        <div className="landing-page">
+            <h1>
+                <Link to="/login">Go to Login Page</Link>
+            </h1>
 
-      <h1>
-        <Link to="/signup">Go to Sign Up Page</Link>
-      </h1>
-    </div>
-  );
+            <h1>
+                <Link to="/signup">Go to Sign Up Page</Link>
+            </h1>
+        </div>
+    )
 }
 
-export default LandingPage;
+export default LandingPage

Frontend/src/pages/landing-page/landingpage.css

@@ -15,4 +15,4 @@
 
 .landing-page a:hover {
     text-decoration: underline;
-}
+}

Frontend/src/pages/login/Login.jsx

@@ -1,58 +1,59 @@
-import React from "react";
-import "./login.css";
-import { Link } from "react-router-dom";
+import React from "react"
+import "./login.css"
+import { Link } from "react-router-dom"
+
 function Login() {
-  return (
-    <div>
-      <section className="container forms">
-        <div className="form login">
-          <div className="form-content">
-            <header>Login to MOOCs</header>
+    return (
+        <div>
+            <section className="container forms">
+                <div className="form login">
+                    <div className="form-content">
+                        <header>Login to MOOCs</header>
 
-            <div className="media-options">
-              <a href="#" className="field google">
-                <img
-                  src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png"
-                  alt=""
-                  className="google-img"
-                />
-                <span>Login with Google</span>
-              </a>
-            </div>
-            <div className="line"></div>
+                        <div className="media-options">
+                            <a href="#" className="field google">
+                                <img
+                                    src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png"
+                                    alt=""
+                                    className="google-img"
+                                />
+                                <span>Login with Google</span>
+                            </a>
+                        </div>
+                        <div className="line" />
 
-            <form action="#">
-              <div className="field input-field">
-                <input type="email" placeholder="Email" className="input" />
-              </div>
+                        <form action="#">
+                            <div className="field input-field">
+                                <input type="email" placeholder="Email" className="input" />
+                            </div>
 
-              <div className="field input-field">
-                <input
-                  type="password"
-                  placeholder="Password"
-                  className="password"
-                />
-                <i className="bx bx-hide eye-icon"></i>
-              </div>
+                            <div className="field input-field">
+                                <input
+                                    type="password"
+                                    placeholder="Password"
+                                    className="password"
+                                />
+                                <i className="bx bx-hide eye-icon" />
+                            </div>
 
-              <div className="field button-field">
-                <button>Login</button>
-              </div>
-            </form>
+                            <div className="field button-field">
+                                <button>Login</button>
+                            </div>
+                        </form>
 
-            <div className="form-link">
-              <span>
-                Don't have an account?{" "}
-                <Link to="/signup" className="link signup-link">
-                  Sign Up
-                </Link>
-              </span>
-            </div>
-          </div>
+                        <div className="form-link">
+                            <span>
+                                Don't have an account?{" "}
+                                <Link to="/signup" className="link signup-link">
+                                    Sign Up
+                                </Link>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </section>
         </div>
-      </section>
-    </div>
-  );
+    )
 }
 
-export default Login;
+export default Login

Frontend/src/pages/login/login.css

@@ -1,6 +1,5 @@
 /* Google Fonts - Poppins */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
-
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
 
 .container {
     height: 100vh;
@@ -17,7 +16,7 @@
     width: 80%;
     padding: 30px;
     border-radius: 6px;
-    background: #FFF;
+    background: #fff;
 }
 
 .form.signup {
@@ -129,12 +128,12 @@ form {
 }
 
 .line::before {
-    content: 'Or';
+    content: "Or";
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #FFF;
+    background-color: #fff;
     color: #8b8b8b;
     padding: 0 15px;
 }
@@ -177,7 +176,7 @@ img.google-img {
 }
 
 a.google {
-    border: 1px solid #CACACA;
+    border: 1px solid #cacaca;
 }
 
 a.google span {
@@ -190,5 +189,4 @@ a.google span {
     .form {
         padding: 20px 10px;
     }
-
-}
+}