From 38217a7101b50e7aa0a0d543cad737a011d5fac0 Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 28 Aug 2023 11:40:36 -0400 Subject: refactor: setup and run eslint+prettier --- src/App.js | 79 +++++++++-------- src/CustomThemeProvider.js | 33 +++---- src/components/NavBar/index.js | 196 +++++++++++++++++++++++------------------ src/hooks/useLoginState.js | 16 ++-- src/index.js | 14 +-- src/pages/Login/index.js | 36 ++++---- src/pages/Users/index.js | 7 +- src/reportWebVitals.js | 4 +- src/setupTests.js | 2 +- 9 files changed, 206 insertions(+), 181 deletions(-) (limited to 'src') diff --git a/src/App.js b/src/App.js index 9d9ee58..21ebbf3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,80 +1,81 @@ -import './App.css'; -import { RouterProvider, createBrowserRouter, Navigate } from 'react-router-dom'; -import Login from './pages/Login'; -import Surveys from './pages/Surveys'; -import NewSurvey from './pages/NewSurvey'; -import SurveyResults from './pages/SurveyResults'; -import SurveyAssignees from './pages/SurveyAssignees'; -import Users from './pages/Users'; -import NavBar from './components/NavBar'; -import useLoginState from './hooks/useLoginState'; -import CssBaseline from '@mui/material/CssBaseline'; -import CustomThemeProvider from './CustomThemeProvider'; +import "./App.css"; +import { + RouterProvider, + createBrowserRouter, + Navigate, +} from "react-router-dom"; +import Login from "./pages/Login"; +import Surveys from "./pages/Surveys"; +import NewSurvey from "./pages/NewSurvey"; +import SurveyResults from "./pages/SurveyResults"; +import SurveyAssignees from "./pages/SurveyAssignees"; +import Users from "./pages/Users"; +import NavBar from "./components/NavBar"; +import useLoginState from "./hooks/useLoginState"; +import CssBaseline from "@mui/material/CssBaseline"; +import CustomThemeProvider from "./CustomThemeProvider"; function routes({ login, logout, isLoggedIn }) { - function withNavBar(component) { const navbarLinks = [ - { label: 'Surveys', link: '/surveys' }, - { label: 'New Survey', link: '/surveys/new' }, - { label: 'Users', link: '/users' }, + { label: "Surveys", link: "/surveys" }, + { label: "New Survey", link: "/surveys/new" }, + { label: "Users", link: "/users" }, ]; - return (<> - - {component} - ); + return ( + <> + + {component} + + ); } if (!isLoggedIn) { - return ([ + return [ { - path: '*', - element: , + path: "*", + element: , }, - ]); + ]; } else { - return ([ + return [ { - path: '/', - element: , + path: "/", + element: , }, { - path: '/surveys', + path: "/surveys", element: withNavBar(), }, { - path: '/surveys/new', + path: "/surveys/new", element: withNavBar(), }, { - path: '/surveys/:surveyId/results', + path: "/surveys/:surveyId/results", element: withNavBar(), }, { - path: '/surveys/:surveyId/assignees', + path: "/surveys/:surveyId/assignees", element: withNavBar(), }, { - path: '/users', + path: "/users", element: withNavBar(), }, - ]); + ]; } - } export default function App() { const { login, logout, isLoggedIn } = useLoginState(); - const currentRoutes = routes({isLoggedIn, logout, login}); + const currentRoutes = routes({ isLoggedIn, logout, login }); return ( <> - + ); } - diff --git a/src/CustomThemeProvider.js b/src/CustomThemeProvider.js index f3f4a26..c4234b6 100644 --- a/src/CustomThemeProvider.js +++ b/src/CustomThemeProvider.js @@ -1,45 +1,40 @@ -import {ThemeProvider} from '@mui/material'; -import {createTheme} from '@mui/material'; +import { ThemeProvider } from "@mui/material"; +import { createTheme } from "@mui/material"; -export default function CustomThemeProvider({children}) { - console.log('theme', theme); - return - { children } - ; +export default function CustomThemeProvider({ children }) { + console.log("theme", theme); + return {children}; } const themeOptions = { palette: { - mode: 'light', + mode: "light", primary: { - main: '#0b0b14', + main: "#0b0b14", }, secondary: { - main: '#9c27b0', + main: "#9c27b0", }, }, overrides: { MuiAppBar: { colorInherit: { - backgroundColor: '#689f38', - color: '#fff', + backgroundColor: "#689f38", + color: "#fff", }, }, MuiButton: { root: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', + background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", border: 0, borderRadius: 3, - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - color: 'white', + boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)", + color: "white", height: 48, - padding: '0 30px', + padding: "0 30px", }, }, }, }; - const theme = createTheme(themeOptions); - - diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js index 0bbc550..83ae7e9 100644 --- a/src/components/NavBar/index.js +++ b/src/components/NavBar/index.js @@ -1,7 +1,18 @@ -import {useState} from 'react'; -import { Link } from 'react-router-dom'; -import {AppBar, Box, Button, Drawer, IconButton, List, ListItem, ListItemButton, ListItemText, Toolbar} from '@mui/material'; -import {Menu} from '@mui/icons-material'; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { + AppBar, + Box, + Button, + Drawer, + IconButton, + List, + ListItem, + ListItemButton, + ListItemText, + Toolbar, +} from "@mui/material"; +import { Menu } from "@mui/icons-material"; export default function NavBar({ isLoggedIn, pages, logout }) { const drawerWidth = 200; @@ -12,89 +23,106 @@ export default function NavBar({ isLoggedIn, pages, logout }) { setMobileOpen(!mobileOpen); }; - return isLoggedIn && - - - - - - - - {pages.map(p => - p.hidden || - - - - )} - - - - - + return ( + isLoggedIn && ( + + + + + + + + {pages.map( + (p) => + p.hidden || ( + + + + ), + )} + + + + - - + - - - {pages.map(({label, link, hidden}) => ( - hidden ?
: - - - - + + + {pages.map(({ label, link, hidden }) => + hidden ? ( +
+ ) : ( + + - - - - - ))} - - - - - - - - + + + + + + ), + )} + + + + + + + + + - ; + ) + ); } diff --git a/src/hooks/useLoginState.js b/src/hooks/useLoginState.js index b7c7221..94301ef 100644 --- a/src/hooks/useLoginState.js +++ b/src/hooks/useLoginState.js @@ -1,10 +1,8 @@ -import {useState} from 'react'; +import { useState } from "react"; export default function useLoginState() { const [userInfo, setUserInfoState] = useState( - localStorage.userInfo ? - JSON.parse(localStorage.userInfo) : - {} + localStorage.userInfo ? JSON.parse(localStorage.userInfo) : {}, ); function setUserInfo(userInfo) { @@ -16,18 +14,18 @@ export default function useLoginState() { console.log(`logging in: ${username}, ${password}`); // const userInfo = await api.login() const userInfo = { - username + username, }; - console.log('Login success'); + console.log("Login success"); setUserInfo(userInfo); return userInfo; - } + } function logout() { setUserInfo({}); } const isLoggedIn = !!userInfo?.username; - - return {userInfo, isLoggedIn, login, logout}; + + return { userInfo, isLoggedIn, login, logout }; } diff --git a/src/index.js b/src/index.js index d563c0f..902eb7c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,14 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + , ); // If you want to start measuring performance in your app, pass a function diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js index 1735d8e..6d16936 100644 --- a/src/pages/Login/index.js +++ b/src/pages/Login/index.js @@ -1,20 +1,19 @@ -import React, { useState } from 'react'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import Button from '@mui/material/Button'; -import {Stack} from '@mui/system'; +import React, { useState } from "react"; +import Box from "@mui/material/Box"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import { Stack } from "@mui/system"; export default function Login({ login }) { - const [user, setUser] = useState(''); - const [password, setPassword] = useState(''); + const [user, setUser] = useState(""); + const [password, setPassword] = useState(""); const [loginFailed, setLoginFailed] = useState(false); const getApiKey = () => { login(user, password) - .then(ok => { + .then((ok) => { setLoginFailed(!ok); - } - ) + }) .catch(console.error); }; @@ -22,26 +21,26 @@ export default function Login({ login }) { :not(style)': { m: 1 }, + "& > :not(style)": { m: 1 }, flexGrow: 1, }} noValidate autoComplete="off" > - +

Repeated Surveyer

Login

setUser(e.target.value.trim())} + onChange={(e) => setUser(e.target.value.trim())} /> setPassword(e.target.value)} + onChange={(e) => setPassword(e.target.value)} /> {loginFailed && Login Failed} @@ -49,4 +48,3 @@ export default function Login({ login }) { ); } - diff --git a/src/pages/Users/index.js b/src/pages/Users/index.js index 43afe5d..1cc20ce 100644 --- a/src/pages/Users/index.js +++ b/src/pages/Users/index.js @@ -1,3 +1,8 @@ export default function Users() { - return <>Users; + return ( + <> + Users +
foo
+ + ); } diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js index 5253d3a..9ecd33f 100644 --- a/src/reportWebVitals.js +++ b/src/reportWebVitals.js @@ -1,6 +1,6 @@ -const reportWebVitals = onPerfEntry => { +const reportWebVitals = (onPerfEntry) => { if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); diff --git a/src/setupTests.js b/src/setupTests.js index 8f2609b..1dd407a 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -2,4 +2,4 @@ // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; +import "@testing-library/jest-dom"; -- cgit v1.2.3