🚨 Add eslint and stylelint and format

frontend/src/App.module.css

@@ -1,7 +1,4 @@
-.App {
-}
-
 .logo {
   width: 100px;
   pointer-events: none;
-}
+}

frontend/src/App.tsx

@@ -1,20 +1,18 @@
-import {ApolloProvider} from "@apollo/client";
-import React from 'react'
+import { ApolloProvider } from "@apollo/client";
+import React from "react";
 
-import logo from './assets/brick.svg';
-import styles from './App.module.css'
-import {Register} from "./features/Register";
+import styles from "./App.module.css";
+import logo from "./assets/brick.svg";
 import client from "./client";
+import { Register } from "./features/Register";
 
-function App() {
-  return (
-      <ApolloProvider client={client}>
+const App: React.FC = () => (
+  <ApolloProvider client={client}>
     <div className={styles.app}>
-        <img src={logo} className={styles.logo} alt="logo" />
-        <Register />
+      <img src={logo} className={styles.logo} alt="logo" />
+      <Register />
     </div>
-      </ApolloProvider>
-  )
-}
+  </ApolloProvider>
+);
 
-export default App
+export default App;

frontend/src/client.ts

@@ -1,8 +1,8 @@
-import {ApolloClient,InMemoryCache} from "@apollo/client";
+import { ApolloClient, InMemoryCache } from "@apollo/client";
 
 const client = new ApolloClient({
-  uri: 'http://localhost:8000/graphql/',  // FIXME: env
-  cache: new InMemoryCache()
+  uri: "http://localhost:8000/graphql/", // FIXME: env
+  cache: new InMemoryCache(),
 });
 
-export default client;
+export default client;

frontend/src/features/Register.tsx

@@ -1,17 +1,21 @@
 import React from "react";
 
-import {Product, useAllProductsQuery} from '../types';
+import { Product, useAllProductsQuery } from "../types";
 
 export const Register: React.FC = () => {
-  const { data, error, loading } = useAllProductsQuery({variables:{active: true}});
-  if(error) {
-    console.log('🔥', error)
+  const { data, error, loading } = useAllProductsQuery({ variables: { active: true } });
+  if (error) {
+    console.log("🔥", error);
     return null;
   }
-  if(loading) {
-    return <div>...</div>
+  if (loading) {
+    return <div>...</div>;
   }
-  return (<div>{data?.allProducts.map((product: Product) => {
-    return <div key={product.id}>{product.name}</div>
-  })} </div>)
-};
+  return (
+    <div>
+      {data?.allProducts.map((product: Product) => {
+        return <div key={product.id}>{product.name}</div>;
+      })}{" "}
+    </div>
+  );
+};

frontend/src/main.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById("root")
+);

frontend/src/types.ts

@@ -1,10 +1,10 @@
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
+import { gql } from "@apollo/client";
+import * as Apollo from "@apollo/client";
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
-const defaultOptions =  {}
+const defaultOptions = {};
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string;
@@ -15,46 +15,46 @@ export type Scalars = {
 };
 
 export type Product = {
-  __typename?: 'Product';
-  id: Scalars['ID'];
-  name: Scalars['String'];
-  salePriceExt: Scalars['Float'];
-  salePriceInt: Scalars['Float'];
+  __typename?: "Product";
+  id: Scalars["ID"];
+  name: Scalars["String"];
+  salePriceExt: Scalars["Float"];
+  salePriceInt: Scalars["Float"];
 };
 
 export type ProductFilter = {
-  active?: Maybe<Scalars['Boolean']>;
-  id?: Maybe<Scalars['ID']>;
+  active?: Maybe<Scalars["Boolean"]>;
+  id?: Maybe<Scalars["ID"]>;
 };
 
 export type Query = {
-  __typename?: 'Query';
+  __typename?: "Query";
   allProducts: Array<Product>;
 };
 
-
 export type QueryAllProductsArgs = {
   filters?: Maybe<ProductFilter>;
 };
 
 export type AllProductsQueryVariables = Exact<{
-  active: Scalars['Boolean'];
+  active: Scalars["Boolean"];
 }>;
 
-
-export type AllProductsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number }> };
-
+export type AllProductsQuery = {
+  __typename?: "Query";
+  allProducts: Array<{ __typename?: "Product"; id: string; name: string; salePriceExt: number; salePriceInt: number }>;
+};
 
 export const AllProductsDocument = gql`
-    query allProducts($active: Boolean!) {
-  allProducts(filters: {active: $active}) {
-    id
-    name
-    salePriceExt
-    salePriceInt
+  query allProducts($active: Boolean!) {
+    allProducts(filters: { active: $active }) {
+      id
+      name
+      salePriceExt
+      salePriceInt
+    }
   }
-}
-    `;
+`;
 
 /**
  * __useAllProductsQuery__
@@ -73,13 +73,15 @@ export const AllProductsDocument = gql`
  * });
  */
 export function useAllProductsQuery(baseOptions: Apollo.QueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
-      }
-export function useAllProductsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+}
+export function useAllProductsLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<AllProductsQuery, AllProductsQueryVariables>
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+}
 export type AllProductsQueryHookResult = ReturnType<typeof useAllProductsQuery>;
 export type AllProductsLazyQueryHookResult = ReturnType<typeof useAllProductsLazyQuery>;
-export type AllProductsQueryResult = Apollo.QueryResult<AllProductsQuery, AllProductsQueryVariables>;
+export type AllProductsQueryResult = Apollo.QueryResult<AllProductsQuery, AllProductsQueryVariables>;

frontend/src/typings.d.ts

@@ -1,5 +1,5 @@
 declare module "*.svg" {
-  const content: any;
+  const content: unknown;
   export default content;
 }
-declare module "*.module.css";
+declare module "*.module.css";