From cda369a5f0327c97b6dbeb74bc10ea6ba1ffd268 Mon Sep 17 00:00:00 2001 From: Eli Ribble Date: Tue, 27 Aug 2024 09:39:28 -0700 Subject: [PATCH] Auto pretty everything, add initial auth modal. Sorry this isn't more commits, but, whatever. --- public/index.html | 2 +- src/App.test.tsx | 8 ++--- src/App.tsx | 67 ++++++++++++++++++++---------------------- src/AuthModal.tsx | 41 ++++++++++++++++++++++++++ src/Mailbox.tsx | 2 +- src/index.css | 6 ++-- src/index.tsx | 14 ++++----- src/reportWebVitals.ts | 4 +-- src/setupTests.ts | 2 +- tsconfig.json | 10 ++----- 10 files changed, 94 insertions(+), 62 deletions(-) create mode 100644 src/AuthModal.tsx diff --git a/public/index.html b/public/index.html index aa069f2..e65acb3 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + diff --git a/src/App.test.tsx b/src/App.test.tsx index 2a68616..d76787e 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,8 +1,8 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; +import React from "react"; +import { render, screen } from "@testing-library/react"; +import App from "./App"; -test('renders learn react link', () => { +test("renders learn react link", () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); diff --git a/src/App.tsx b/src/App.tsx index ca1b050..ea2eaa6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,51 +1,48 @@ import "./App.css"; -import 'bootstrap/dist/css/bootstrap.min.css'; +import "bootstrap/dist/css/bootstrap.min.css"; //import MailboxList from "./Mailbox"; import AuthModal from "./AuthModal"; -import React, { useEffect, useState } from "react" - +import React, { useEffect, useState } from "react"; interface IAuth { - password: string; - username: string; + password: string; + username: string; } const App = () => { - const [state, setInternalState] = useState(null) + const [state, setInternalState] = useState(null); - const fetchUserData = () => { - fetch("https://jsonplaceholder.typicode.com/users") - .then(response => { - return response.json() - }) - .then(data => { - //setUsers(data) - }) - } + const fetchUserData = () => { + fetch("https://jsonplaceholder.typicode.com/users") + .then((response) => { + return response.json(); + }) + .then((data) => { + //setUsers(data) + }); + }; - const loadAuth = () => { - const auth = localStorage.getItem("auth") - if (!auth) return; - setInternalState(JSON.parse(auth)) - } + const loadAuth = () => { + const auth = localStorage.getItem("auth"); + if (!auth) return; + setInternalState(JSON.parse(auth)); + }; - const setState = (auth: IAuth) => { - localStorage.setItem("auth", JSON.stringify(auth)) - } + const setState = (auth: IAuth) => { + localStorage.setItem("auth", JSON.stringify(auth)); + }; - useEffect(() => { - loadAuth() - //fetchUserData() - }, []) + useEffect(() => { + loadAuth(); + //fetchUserData() + }, []); - return ( -
- {state ? -

{state.username}

: - } -
- ); -} + return ( +
+ {state ?

{state.username}

: } +
+ ); +}; export default App; diff --git a/src/AuthModal.tsx b/src/AuthModal.tsx new file mode 100644 index 0000000..7ae8d89 --- /dev/null +++ b/src/AuthModal.tsx @@ -0,0 +1,41 @@ +import Button from "react-bootstrap/Button"; +import Form from "react-bootstrap/Form"; +import Modal from "react-bootstrap/Modal"; + +function AuthModal() { + return ( +
+ + + Modal title + + + +
+ + Email address + + + We'll never share your email with anyone else. + + + + + Password + + +
+ + + + + + + +
+ ); +} +export default AuthModal; diff --git a/src/Mailbox.tsx b/src/Mailbox.tsx index 735a6bb..80ff5a8 100644 --- a/src/Mailbox.tsx +++ b/src/Mailbox.tsx @@ -1,4 +1,4 @@ -import ListGroup from 'react-bootstrap/ListGroup'; +import ListGroup from "react-bootstrap/ListGroup"; function Mailbox() { return ( diff --git a/src/index.css b/src/index.css index ec2585e..4a1df4d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/index.tsx b/src/index.tsx index 032464f..4fa2a47 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,16 +1,16 @@ -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') as HTMLElement + document.getElementById("root") as HTMLElement, ); root.render( - + , ); // If you want to start measuring performance in your app, pass a function diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts index 49a2a16..5fa3583 100644 --- a/src/reportWebVitals.ts +++ b/src/reportWebVitals.ts @@ -1,8 +1,8 @@ -import { ReportHandler } from 'web-vitals'; +import { ReportHandler } from "web-vitals"; const reportWebVitals = (onPerfEntry?: ReportHandler) => { 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.ts b/src/setupTests.ts index 8f2609b..1dd407a 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -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"; diff --git a/tsconfig.json b/tsconfig.json index a273b0c..9d379a3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +16,5 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": ["src"] }