code stuff

allen-munsch · May 23, 2023 · May 23, 2023 · May 23, 2023 · May 23, 2023 · May 23, 2023
commit 0d5a4d7cdf72f1be53db9ea2e3ad8ba4985de346
diff --git a/{{cookiecutter.project_slug}}/frontend/.eslintrc.js b/{{cookiecutter.project_slug}}/frontend/.eslintrc.js
@@ -21,8 +21,9 @@ let rules = {
 };
 
 module.exports = {
-  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier'],
-  parser: '@babel/eslint-parser',
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  // parser: '@babel/eslint-parser',
   rules,
   env: {
     browser: true,
@@ -31,7 +32,7 @@ module.exports = {
     jest: true,
     es6: true,
   },
-  plugins: ['react', 'react-hooks', 'jsx-a11y'],
+  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'jsx-a11y'],
   settings: {
     ecmascript: 6,
     jsx: true,

diff --git a/{{cookiecutter.project_slug}}/frontend/src/AppRoutes.tsx b/{{cookiecutter.project_slug}}/frontend/src/AppRoutes.tsx
@@ -1,16 +1,16 @@
-import { Route, Routes } from 'react-router-dom'
-import { Box, styled } from '@mui/system'
-import React, { useEffect } from 'react'
-import { useNavigate } from 'react-router'
-import { Admin } from './admin'
-import { Home, Login, SignUp } from './views'
-import { logout } from './utils'
+import { Route, Routes } from 'react-router-dom';
+import { Box, styled } from '@mui/system';
+import React, { ReactNode, useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { Admin } from './admin';
+import { Home, Login, SignUp } from './views';
+import { logout } from './utils';
 
-const AppContainer = styled(Box)(({ theme }) => ({
+const AppContainer = styled(Box)(() => ({
   textAlign: 'center'
-}))
+}));
 
-const Header = styled('header')(({ theme }) => ({
+const Header = styled('header')(() => ({
   backgroundColor: '#282c34',
   minHeight: '100vh',
   display: 'flex',
@@ -19,26 +19,26 @@ const Header = styled('header')(({ theme }) => ({
   justifyContent: 'center',
   fontSize: 'calc(10px + 2vmin)',
   color: 'white'
-}))
+}));
 
 const LogoutComponent = () => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   useEffect(() => {
-    logout()
-    navigate('/')
-  }, [])
+    logout();
+    navigate('/');
+  }, []);
 
-  return <></>
-}
+  return <></>;
+};
 
-const App = ({ children }: any) => {
+const App = ({ children }: { children: ReactNode }) => {
   return (
     <AppContainer>
       <Header>{children}</Header>
     </AppContainer>
-  )
-}
+  );
+};
 
 export const AppRoutes = () => {
   return (
@@ -79,5 +79,5 @@ export const AppRoutes = () => {
         />
       </Route>
     </Routes>
-  )
-}
+  );
+};
diff --git a/{{cookiecutter.project_slug}}/frontend/src/__tests__/home.test.tsx b/{{cookiecutter.project_slug}}/frontend/src/__tests__/home.test.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { Home } from '../views/Home'
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Home } from '../views/Home';
 
 it('Home renders correctly', () => {
-  const home = render(<Home />)
-  expect(home.getByText('Admin Dashboard')).toBeInTheDocument()
-  expect(home.getByText('Protected Route')).toBeInTheDocument()
-  expect(home.getByText('Login')).toBeInTheDocument()
-  expect(home.getByText('Sign Up')).toBeInTheDocument()
-})
+  const home = render(<Home />);
+  expect(home.getByText('Admin Dashboard')).toBeInTheDocument();
+  expect(home.getByText('Protected Route')).toBeInTheDocument();
+  expect(home.getByText('Login')).toBeInTheDocument();
+  expect(home.getByText('Sign Up')).toBeInTheDocument();
+});
diff --git a/{{cookiecutter.project_slug}}/frontend/src/__tests__/login.test.tsx b/{{cookiecutter.project_slug}}/frontend/src/__tests__/login.test.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { Login } from '../views'
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Login } from '../views';
 
 it('Login renders correctly', () => {
-  const login = render(<Login />)
-  expect(login.getByText('Email')).toBeInTheDocument()
-  expect(login.getByText('Password')).toBeInTheDocument()
-  expect(login.getByText('Login')).toBeInTheDocument()
-})
+  const login = render(<Login />);
+  expect(login.getByText('Email')).toBeInTheDocument();
+  expect(login.getByText('Password')).toBeInTheDocument();
+  expect(login.getByText('Login')).toBeInTheDocument();
+});
diff --git a/{{cookiecutter.project_slug}}/frontend/src/admin/Admin.tsx b/{{cookiecutter.project_slug}}/frontend/src/admin/Admin.tsx
@@ -1,23 +1,23 @@
-import React, { FC } from 'react'
-import { fetchUtils, Admin as ReactAdmin, Resource } from 'react-admin'
-import simpleRestProvider from 'ra-data-simple-rest'
-import authProvider from './authProvider'
+import React, { FC } from 'react';
+import { fetchUtils, Admin as ReactAdmin, Resource } from 'react-admin';
+import simpleRestProvider from 'ra-data-simple-rest';
+import authProvider from './authProvider';
 
-import { UserList, UserEdit, UserCreate } from './Users'
+import { UserList, UserEdit, UserCreate } from './Users';
 
-const httpClient = (url: any, options: any) => {
+const httpClient = (url: string, options: RequestInit = {}) => {
   if (!options) {
-    options = {}
+    options = {};
   }
   if (!options.headers) {
-    options.headers = new Headers({ Accept: 'application/json' })
+    options.headers = new Headers({ Accept: 'application/json' });
   }
-  const token = localStorage.getItem('token')
-  options.headers.set('Authorization', `Bearer ${token}`)
-  return fetchUtils.fetchJson(url, options)
-}
+  const token = localStorage.getItem('token');
+  options.headers.set('Authorization', `Bearer ${token}`);
+  return fetchUtils.fetchJson(url, options);
+};
 
-const dataProvider = simpleRestProvider('api/v1', httpClient)
+const dataProvider = simpleRestProvider('api/v1', httpClient);
 
 export const Admin: FC = () => {
   return (
@@ -33,5 +33,5 @@ export const Admin: FC = () => {
         ) : null
       ]}
     </ReactAdmin>
-  )
-}
+  );
+};
diff --git a/{{cookiecutter.project_slug}}/frontend/src/admin/Users/UserCreate.tsx b/{{cookiecutter.project_slug}}/frontend/src/admin/Users/UserCreate.tsx
@@ -1,11 +1,11 @@
-import React, { FC } from 'react'
+import React, { FC } from 'react';
 import {
   Create,
   SimpleForm,
   TextInput,
   PasswordInput,
   BooleanInput
-} from 'react-admin'
+} from 'react-admin';
 
 export const UserCreate: FC = (props) => (
   <Create {...props}>
@@ -18,4 +18,4 @@ export const UserCreate: FC = (props) => (
       <BooleanInput source='is_active' />
     </SimpleForm>
   </Create>
-)
+);
diff --git a/{{cookiecutter.project_slug}}/frontend/src/admin/Users/UserEdit.tsx b/{{cookiecutter.project_slug}}/frontend/src/admin/Users/UserEdit.tsx
@@ -1,11 +1,11 @@
-import React, { FC } from 'react'
+import React, { FC } from 'react';
 import {
   Edit,
   SimpleForm,
   TextInput,
   PasswordInput,
   BooleanInput
-} from 'react-admin'
+} from 'react-admin';
 
 export const UserEdit: FC = (props) => (
   <Edit {...props}>
@@ -19,4 +19,4 @@ export const UserEdit: FC = (props) => (
       <BooleanInput source='is_superuser' />
     </SimpleForm>
   </Edit>
-)
+);
diff --git a/{{cookiecutter.project_slug}}/frontend/src/admin/Users/UserList.tsx b/{{cookiecutter.project_slug}}/frontend/src/admin/Users/UserList.tsx
@@ -1,13 +1,13 @@
 // in src/users.js
-import React, { FC } from 'react'
+import React, { FC } from 'react';
 import {
   List,
   Datagrid,
   TextField,
   BooleanField,
   EmailField,
   EditButton
-} from 'react-admin'
+} from 'react-admin';
 
 export const UserList: FC = (props) => (
   <List {...props}>
@@ -21,4 +21,4 @@ export const UserList: FC = (props) => (
       <EditButton />
     </Datagrid>
   </List>
-)
+);
diff --git a/{{cookiecutter.project_slug}}/frontend/src/config/index.tsx b/{{cookiecutter.project_slug}}/frontend/src/config/index.tsx
@@ -1,3 +1,2 @@
-export const BASE_URL: string = 'http://localhost:{{cookiecutter.port}}'
-export const BACKEND_URL: string =
-  'http://localhost:{{cookiecutter.port}}/api/v1'
+export const BASE_URL = 'http://localhost:{{cookiecutter.port}}';
+export const BACKEND_URL = 'http://localhost:{{cookiecutter.port}}/api/v1';
diff --git a/{{cookiecutter.project_slug}}/frontend/src/index.tsx b/{{cookiecutter.project_slug}}/frontend/src/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { BrowserRouter as Router } from 'react-router-dom'
-import './index.css'
-import { AppRoutes } from './AppRoutes'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import './index.css';
+import { AppRoutes } from './AppRoutes';
 
 ReactDOM.render(
   <Router>
     <AppRoutes />
   </Router>,
   document.getElementById('root')
-)
+);
diff --git a/{{cookiecutter.project_slug}}/frontend/src/views/Home.tsx b/{{cookiecutter.project_slug}}/frontend/src/views/Home.tsx
@@ -1,24 +1,24 @@
-import React, { FC, useState } from 'react'
-import { getMessage } from '../utils/api'
-import { isAuthenticated } from '../utils/auth'
-import { styled } from '@mui/system'
+import React, { FC, useState } from 'react';
+import { getMessage } from '../utils/api';
+import { isAuthenticated } from '../utils/auth';
+import { styled } from '@mui/system';
 
 const Link = styled('a')({
   color: '#61dafb'
-})
+});
 
 export const Home: FC = () => {
-  const [message, setMessage] = useState<string>('')
-  const [error, setError] = useState<string>('')
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>('');
 
   const queryBackend = async () => {
     try {
-      const message = await getMessage()
-      setMessage(message)
+      const message = await getMessage();
+      setMessage(message);
     } catch (err) {
-      setError(String(err))
+      setError(String(err));
     }
-  }
+  };
 
   return (
     <>
@@ -48,5 +48,5 @@ export const Home: FC = () => {
         </>
       )}
     </>
-  )
-}
+  );
+};