eliribble
/
drishti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Auto pretty everything, add initial auth modal. 

Sorry this isn't more commits, but, whatever.
This commit is contained in:
Eli Ribble 2024-08-27 09:39:28 -07:00
parent 9033b9862a
commit cda369a5f0
10 changed files with 94 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

8
src/App.test.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from "react";
import { render, screen } from '@testing-library/react'; import { render, screen } from "@testing-library/react";
import App from './App'; import App from "./App";
test('renders learn react link', () => { test("renders learn react link", () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();

67
src/App.tsx
View File

@ -1,51 +1,48 @@
import "./App.css"; import "./App.css";
import 'bootstrap/dist/css/bootstrap.min.css'; import "bootstrap/dist/css/bootstrap.min.css";
//import MailboxList from "./Mailbox"; //import MailboxList from "./Mailbox";
import AuthModal from "./AuthModal"; import AuthModal from "./AuthModal";
import React, { useEffect, useState } from "react" import React, { useEffect, useState } from "react";
interface IAuth { interface IAuth {
password: string; password: string;
username: string; username: string;
} }
const App = () => { const App = () => {
const [state, setInternalState] = useState<IAuth|null>(null) const [state, setInternalState] = useState<IAuth | null>(null);
const fetchUserData = () => { const fetchUserData = () => {
fetch("https://jsonplaceholder.typicode.com/users") fetch("https://jsonplaceholder.typicode.com/users")
.then(response => { .then((response) => {
return response.json() return response.json();
}) })
.then(data => { .then((data) => {
//setUsers(data) //setUsers(data)
}) });
} };
const loadAuth = () => { const loadAuth = () => {
const auth = localStorage.getItem("auth") const auth = localStorage.getItem("auth");
if (!auth) return; if (!auth) return;
setInternalState(JSON.parse(auth)) setInternalState(JSON.parse(auth));
} };
const setState = (auth: IAuth) => { const setState = (auth: IAuth) => {
localStorage.setItem("auth", JSON.stringify(auth)) localStorage.setItem("auth", JSON.stringify(auth));
} };
useEffect(() => { useEffect(() => {
loadAuth() loadAuth();
//fetchUserData() //fetchUserData()
}, []) }, []);
return ( return (
<div className="App"> <div className="App">
{state ? {state ? <p>{state.username}</p> : <AuthModal></AuthModal>}
<p>{state.username}</p> : </div>
<AuthModal></AuthModal>} );
</div> };
);
}
export default App; export default App;

41
src/AuthModal.tsx Normal file
View File

@ -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 (
<div
className="modal show"
style={{ display: "block", position: "initial" }}
>
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close</Button>
<Button variant="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
}
export default AuthModal;

2
src/Mailbox.tsx
View File

@ -1,4 +1,4 @@
import ListGroup from 'react-bootstrap/ListGroup'; import ListGroup from "react-bootstrap/ListGroup";
function Mailbox() { function Mailbox() {
return ( return (

6
src/index.css
View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }

14
src/index.tsx
View File

@ -1,16 +1,16 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import './index.css'; import "./index.css";
import App from './App'; import App from "./App";
import reportWebVitals from './reportWebVitals'; import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById("root") as HTMLElement,
); );
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>,
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function

4
src/reportWebVitals.ts
View File

@ -1,8 +1,8 @@
import { ReportHandler } from 'web-vitals'; import { ReportHandler } from "web-vitals";
const reportWebVitals = (onPerfEntry?: ReportHandler) => { const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) { 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); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);

2
src/setupTests.ts
View File

@ -2,4 +2,4 @@
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import "@testing-library/jest-dom";

10
tsconfig.json
View File

@ -1,11 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
@ -20,7 +16,5 @@
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx"
}, },
"include": [ "include": ["src"]
"src"
]
} }