Merge pull request #203 from aesirxio/develop

Format code

.github/workflows/format.yml

@@ -0,0 +1,20 @@
+name: Format
+
+on:
+  pull_request:
+
+jobs:
+  code:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run Prettier
+        run: yarn run format:check

.prettierrc

@@ -1,7 +1,6 @@
 {
   "arrowParens": "always",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,

package.json

@@ -63,7 +63,9 @@
     "prepublishOnly": "yarn microbundle && yarn build:css",
     "microbundle": "microbundle --globals react=React,react-dom=ReactDOM --no-sourcemap --jsx React.createElement --jsxFragment React.Fragment --generateTypes true --no-compress --format modern,cjs,esm",
     "microbundle:watch": "microbundle --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --generateTypes true --no-compress --format modern,cjs,esm -w",
-    "build:css": "sass  --no-source-map --style=compressed ./src/integration/lib/index.scss ./dist/app.css"
+    "build:css": "sass  --no-source-map --style=compressed ./src/integration/lib/index.scss ./dist/app.css",
+    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx}'",
+    "format:write": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "eslintConfig": {
     "extends": [
@@ -104,6 +106,7 @@
     "lodash": "^4.17.21",
     "microbundle": "^0.15.1",
     "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.4",
     "react-scripts": "^5.0.1",
     "sass": "^1.52",
     "serve": "^14.2.0",

src/components/ButtonCancel/index.jsx

@@ -10,10 +10,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { withTranslation } from 'react-i18next';
 
-
 class ButtonCancel extends React.Component {
   render() {
-    const {t}= this.props;
+    const { t } = this.props;
     return (
       <>
         <div>

src/components/ButtonConnect/index.jsx

@@ -6,7 +6,6 @@
 import React from 'react';
 
 const ButtonConnect = ({ onClick, isConnected, disabled = false }) => {
-
   return disabled ? (
     <div>Coming soon!</div>
   ) : (

src/components/ComponentHambuger/index.jsx

@@ -3,8 +3,8 @@
  * @license     GNU General Public License version 3, see LICENSE.
  */
 
-import React from "react";
-import "./index.scss";
+import React from 'react';
+import './index.scss';
 
 class ComponentHambuger extends React.Component {
   constructor(props) {

src/components/Dropdown/index.jsx

@@ -2,4 +2,3 @@
  * @copyright   Copyright (C) 2022 AesirX. All rights reserved.
  * @license     GNU General Public License version 3, see LICENSE.
  */
-

src/components/FormInformation/index.jsx

@@ -3,9 +3,9 @@
  * @license     GNU General Public License version 3, see LICENSE.
  */
 
-import React from "react";
-import { observer } from "mobx-react";
-import { Form } from "react-bootstrap";
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Form } from 'react-bootstrap';
 
 const FormInformation = observer(
   class FormInformation extends React.Component {
@@ -16,7 +16,7 @@ const FormInformation = observer(
     }
 
     render() {
-      const value = this.viewModel ? this.viewModel.value : "Default";
+      const value = this.viewModel ? this.viewModel.value : 'Default';
 
       return (
         <Form.Label className="w-100 ps-2 mb-0">

src/layouts/SettingLayout/index.jsx

@@ -3,55 +3,52 @@
  * @license     GNU General Public License version 3, see LICENSE.
  */
 
-import React, { Suspense } from "react";
+import React, { Suspense } from 'react';
 
-import { Route, Redirect, useLocation } from "react-router-dom";
+import { Route, Redirect, useLocation } from 'react-router-dom';
 import { settingRoutes } from '../../routes/routes';
 
-import Spinner from "../../components/Spinner";
-import Header from "../../components/Header";
-import SbarLeft from "../../components/SbarLeft";
+import Spinner from '../../components/Spinner';
+import Header from '../../components/Header';
+import SbarLeft from '../../components/SbarLeft';
 
-import { isLogin } from "../../auth";
+import { isLogin } from '../../auth';
 
 const SettingLayout = () => {
-  const pathname = useLocation().pathname
+  const pathname = useLocation().pathname;
 
   return isLogin() ? (
-    pathname === '/welcome' ?
+    pathname === '/welcome' ? (
       <div className="container-fluid">
         <div className="row">
           <main>
             <Suspense fallback={<Spinner />}>
               {settingRoutes.map(({ path, exact, main }, i) => {
-                return (
-                  <Route key={i} exact={exact} path={path} component={main} />
-                );
+                return <Route key={i} exact={exact} path={path} component={main} />;
               })}
             </Suspense>
           </main>
         </div>
       </div>
-      :
-    <div className="container-fluid">
-      <div className="row">
-        <main className="p-0">
-          <Header />
-          <div className="main_content vh-100 main_content_dashboard pd-t-80 d-flex">
-            <SbarLeft settingPage />
-            <div className="flex-1 border-start-1 border-gray bg-blue mh-100 overflow-hidden overflow-y-auto position-relative">
-              <Suspense fallback={<Spinner />}>
-                {settingRoutes.map(({ path, exact, main }, i) => {
-                  return (
-                    <Route key={i} exact={exact} path={path} component={main} />
-                  );
-                })}
-              </Suspense>
+    ) : (
+      <div className="container-fluid">
+        <div className="row">
+          <main className="p-0">
+            <Header />
+            <div className="main_content vh-100 main_content_dashboard pd-t-80 d-flex">
+              <SbarLeft settingPage />
+              <div className="flex-1 border-start-1 border-gray bg-blue mh-100 overflow-hidden overflow-y-auto position-relative">
+                <Suspense fallback={<Spinner />}>
+                  {settingRoutes.map(({ path, exact, main }, i) => {
+                    return <Route key={i} exact={exact} path={path} component={main} />;
+                  })}
+                </Suspense>
+              </div>
             </div>
-          </div>
-        </main>
+          </main>
+        </div>
       </div>
-    </div>
+    )
   ) : (
     <Redirect to="/login" />
   );

yarn.lock

@@ -8778,6 +8778,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
+prettier@^2.8.4:
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
+  integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
+
 pretty-bytes@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-3.0.1.tgz#27d0008d778063a0b4811bb35c79f1bd5d5fbccf"