Auto pretty everything, add initial auth modal.
Sorry this isn't more commits, but, whatever.
This commit is contained in:
parent
9033b9862a
commit
cda369a5f0
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -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(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
|
|
|
|||
67
src/App.tsx
67
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<IAuth|null>(null)
|
||||
const [state, setInternalState] = useState<IAuth | null>(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 (
|
||||
<div className="App">
|
||||
{state ?
|
||||
<p>{state.username}</p> :
|
||||
<AuthModal></AuthModal>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="App">
|
||||
{state ? <p>{state.username}</p> : <AuthModal></AuthModal>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import ListGroup from 'react-bootstrap/ListGroup';
|
||||
import ListGroup from "react-bootstrap/ListGroup";
|
||||
|
||||
function Mailbox() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue