feat: add standard style workflow (#29)

Abdel-Monaam-Aouini · Mar 23, 2023 · 2db6832 · 2db6832
1 parent ed99e86
commit 2db6832
Show file tree

Hide file tree

Showing 22 changed files with 4,131 additions and 472 deletions.
diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml
@@ -15,6 +15,17 @@ permissions:
   pull-requests: write
 
 jobs:
+  style:
+    name: JavaScript Standard Style
+    runs-on: ubuntu-latest
+    environment: testing
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: npm ci
+      - name: style
+        run: npm run style
   test_server:
     name: Server
     runs-on: ubuntu-latest

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -18,6 +18,17 @@ permissions:
   pull-requests: write
 
 jobs:
+  style:
+    name: JavaScript Standard Style
+    runs-on: ubuntu-latest
+    environment: testing
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: npm ci
+      - name: style
+        run: npm run style
   test_server:
     name: Server
     runs-on: ubuntu-latest

diff --git a/client/src/ApolloProvider.jsx b/client/src/ApolloProvider.jsx
@@ -1,21 +1,21 @@
-import React from "react";
-import App from "./App";
-import ApolloClient from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import { createHttpLink } from "apollo-link-http";
-import { ApolloProvider } from "@apollo/react-hooks";
+import React from 'react'
+import App from './App'
+import ApolloClient from 'apollo-client'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { createHttpLink } from 'apollo-link-http'
+import { ApolloProvider } from '@apollo/react-hooks'
 
 const httpLink = createHttpLink({
-  uri: process.env.REACT_APP_HTTP_LINK,
-});
+  uri: process.env.REACT_APP_HTTP_LINK
+})
 
 const client = new ApolloClient({
   link: httpLink,
-  cache: new InMemoryCache(),
-});
+  cache: new InMemoryCache()
+})
 
 export default (
   <ApolloProvider client={client}>
     <App />
   </ApolloProvider>
-);
+)
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,23 +1,23 @@
-import { BrowserRouter as Router, Route } from "react-router-dom";
-import "semantic-ui-css/semantic.min.css";
-import { Container } from "semantic-ui-react";
-import { AuthProvider } from "./context/auth";
-import { Home, Login, MenuBar, Register } from "./pages";
-import AuthRoute from "./utilites/AuthRoute";
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+import 'semantic-ui-css/semantic.min.css'
+import { Container } from 'semantic-ui-react'
+import { AuthProvider } from './context/auth'
+import { Home, Login, MenuBar, Register } from './pages'
+import AuthRoute from './utilites/AuthRoute'
 
-function App() {
+function App () {
   return (
     <AuthProvider>
       <Router>
         <Container>
           <MenuBar />
-          <Route exact path="/" component={Home} />
-          <AuthRoute exact path="/login" component={Login} />
-          <AuthRoute exact path="/register" component={Register} />
+          <Route exact path='/' component={Home} />
+          <AuthRoute exact path='/login' component={Login} />
+          <AuthRoute exact path='/register' component={Register} />
         </Container>
       </Router>
     </AuthProvider>
-  );
+  )
 }
 
-export default App;
+export default App
diff --git a/client/src/__tests__/demo.spec.js b/client/src/__tests__/demo.spec.js
@@ -1,12 +1,12 @@
-import { beforeEach, describe, it } from "vitest";
+import { beforeEach, describe, it } from 'vitest'
 
-describe("demo", () => {
+describe('demo', () => {
   beforeEach(async (context) => {
     // extend context
-    context.foo = "bar";
-  });
+    context.foo = 'bar'
+  })
 
-  it("should work", ({ foo }) => {
-    console.log(foo); // 'bar'
-  });
-});
+  it('should work', ({ foo }) => {
+    console.log(foo) // 'bar'
+  })
+})
diff --git a/client/src/context/auth.jsx b/client/src/context/auth.jsx
@@ -1,58 +1,58 @@
-import React, { createContext, useReducer } from "react";
-import jwtDecode from "jwt-decode";
+import React, { createContext, useReducer } from 'react'
+import jwtDecode from 'jwt-decode'
 
 const initialState = {
-  user: null,
-};
+  user: null
+}
 
-if (localStorage.getItem("AUTH_TOKEN")) {
-  const decodeToken = jwtDecode(localStorage.getItem("AUTH_TOKEN"));
+if (window.localStorage.getItem('AUTH_TOKEN')) {
+  const decodeToken = jwtDecode(window.localStorage.getItem('AUTH_TOKEN'))
   if (decodeToken.exp * 1000 < Date.now()) {
-    localStorage.removeItem("AUTH_TOKEN");
+    window.localStorage.removeItem('AUTH_TOKEN')
   } else {
-    initialState.user = decodeToken;
+    initialState.user = decodeToken
   }
 }
 
 const AuthContext = createContext({
   user: null,
   login: (userLogin) => {},
-  logout: () => {},
-});
+  logout: () => {}
+})
 
-function authReducer(state, action) {
+function authReducer (state, action) {
   switch (action.type) {
-    case "LOGIN":
-      return { ...state, user: action.payload };
-    case "LOGOUT":
-      return { ...state, user: null };
+    case 'LOGIN':
+      return { ...state, user: action.payload }
+    case 'LOGOUT':
+      return { ...state, user: null }
     default:
-      return state;
+      return state
   }
 }
 
-function AuthProvider(props) {
-  const [state, dispatch] = useReducer(authReducer, initialState);
+function AuthProvider (props) {
+  const [state, dispatch] = useReducer(authReducer, initialState)
 
-  function login(userLogin) {
-    localStorage.setItem("AUTH_TOKEN", userLogin.token);
+  function login (userLogin) {
+    window.localStorage.setItem('AUTH_TOKEN', userLogin.token)
     dispatch({
-      type: "LOGIN",
-      payload: userLogin,
-    });
+      type: 'LOGIN',
+      payload: userLogin
+    })
   }
 
-  function logout() {
-    localStorage.removeItem("AUTH_TOKEN");
-    dispatch({ type: "LOGOUT" });
+  function logout () {
+    window.localStorage.removeItem('AUTH_TOKEN')
+    dispatch({ type: 'LOGOUT' })
   }
 
   return (
     <AuthContext.Provider
       value={{ user: state.user, login, logout }}
       {...props}
-    ></AuthContext.Provider>
-  );
+    />
+  )
 }
 
-export { AuthContext, AuthProvider };
+export { AuthContext, AuthProvider }
diff --git a/client/src/index.js b/client/src/index.js
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
-import ApolloProvider from "./ApolloProvider";
+import ReactDOM from 'react-dom'
+import ApolloProvider from './ApolloProvider'
 
-ReactDOM.render(ApolloProvider, document.getElementById("root"));
+ReactDOM.render(ApolloProvider, document.getElementById('root'))
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
@@ -1,36 +1,37 @@
-import React from "react";
-import { useQuery, gql } from "@apollo/client";
-import { Grid } from "semantic-ui-react";
-import PostCard from "./PostCard";
+import React from 'react'
+import { useQuery, gql } from '@apollo/client'
+import { Grid } from 'semantic-ui-react'
+import PostCard from './PostCard'
 
-function Home() {
+function Home () {
   const {
     loading,
-    data,
-  } = useQuery(FETCH_POSTS_QUERY);
-
-  console.log(data);
+    data
+  } = useQuery(FETCH_POSTS_QUERY)
 
+  console.log(data)
 
   return (
     <Grid columns={3} divided>
       <Grid.Row>
         <h1>Recent Posts</h1>
       </Grid.Row>
       <Grid.Row>
-        {loading ? (
-          <h1>loading posts ...</h1>
-        ) : (
-          data &&
+        {loading
+          ? (
+            <h1>loading posts ...</h1>
+            )
+          : (
+              data &&
           data.getPosts?.map((post) => (
             <Grid.Column key={post.id}>
               <PostCard post={post} />
             </Grid.Column>
           ))
-        )}
+            )}
       </Grid.Row>
     </Grid>
-  );
+  )
 }
 
 const FETCH_POSTS_QUERY = gql`
@@ -42,5 +43,5 @@ const FETCH_POSTS_QUERY = gql`
       createdAt
     }
   }
-`;
-export default Home;
+`
+export default Home
diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
@@ -1,70 +1,70 @@
-import React, { useContext, useState } from "react";
-import { Button, Form } from "semantic-ui-react";
-import { useMutation, gql } from "@apollo/client";
-import { useForm } from "../utilites/hooks";
-import { AuthContext } from "../context/auth";
+import React, { useContext, useState } from 'react'
+import { Button, Form } from 'semantic-ui-react'
+import { useMutation, gql } from '@apollo/client'
+import { useForm } from '../utilites/hooks'
+import { AuthContext } from '../context/auth'
 
-function Login(props) {
-  const context = useContext(AuthContext);
-  const [errors, setErrors] = useState("");
+function Login (props) {
+  const context = useContext(AuthContext)
+  const [errors, setErrors] = useState('')
 
   const { onSubmit, onChange, values } = useForm(loginUserCallback, {
-    username: "",
-    password: "",
-  });
+    username: '',
+    password: ''
+  })
 
   const [loginUser, { loading }] = useMutation(LOGIN_USER, {
-    update(_, { data: { login: loginUser } }) {
-      context.login(loginUser);
-      props.history.push("/");
+    update (_, { data: { login: loginUser } }) {
+      context.login(loginUser)
+      props.history.push('/')
     },
-    onError(err) {
-      setErrors(err.graphQLErrors[0].extensions.exception.errors);
+    onError (err) {
+      setErrors(err.graphQLErrors[0].extensions.exception.errors)
     },
-    variables: values,
-  });
+    variables: values
+  })
 
-  function loginUserCallback() {
-    loginUser();
+  function loginUserCallback () {
+    loginUser()
   }
 
   return (
     <div>
-      <Form onSubmit={onSubmit} noValidate className={loading ? "loading" : ""}>
+      <Form onSubmit={onSubmit} noValidate className={loading ? 'loading' : ''}>
         <h1>Login</h1>
         <Form.Input
-          type="text"
-          label="Username"
-          placeholder="Username.."
-          name="username"
+          type='text'
+          label='Username'
+          placeholder='Username..'
+          name='username'
           value={values.username}
           onChange={onChange}
-          error={errors.username ? true : false}
+          error={!!errors.username}
         />
         <Form.Input
-          type="password"
-          label="Password"
-          placeholder="Password.."
-          name="password"
+          type='password'
+          label='Password'
+          placeholder='Password..'
+          name='password'
           value={values.password}
           onChange={onChange}
-          error={errors.password ? true : false}
+          error={!!errors.password}
         />
-        <Button type="submit" primary>
+        <Button type='submit' primary>
           Login
         </Button>
       </Form>
       {Object.values(errors).length > 0 && (
-        <div className="ui error message">
-          <ul className="ui list">
+        <div className='ui error message'>
+          <ul className='ui list'>
             {Object.values(errors).map((value) => (
               <li key={value}>{value}</li>
             ))}
           </ul>
         </div>
       )}
     </div>
-  );
+  )
 }
 
 const LOGIN_USER = gql`
@@ -76,6 +76,6 @@ const LOGIN_USER = gql`
       token
     }
   }
-`;
+`
 
-export default Login;
+export default Login