Commit 6ee83f33 authored by David Haynes's avatar David Haynes 🙆

NavBar fully operational without re-renders

- Also debug page populated with formsssssss
parent 3cdb4d0b
Pipeline #3556 passed with stage
in 1 minute and 11 seconds
......@@ -33,11 +33,11 @@ class AuthButton extends React.Component {
<div>
{is_auth ? (
<Button color="info" href="/auth/logout">
Logout
Logout <i className="fas fa-sign-out-alt" />
</Button>
) : (
<Button color="info" href="/auth/login">
Login
Login <i className="fas fa-sign-in-alt" />
</Button>
)}
</div>
......
......@@ -9,6 +9,7 @@ import {
NavbarToggler,
Collapse
} from "reactstrap";
import { AuthButton } from "../";
class NavBar extends React.Component {
constructor(props) {
......@@ -27,7 +28,7 @@ class NavBar extends React.Component {
}
render() {
const { page } = this.props;
const { pathname } = this.props.location;
return (
<Navbar dark color="dark" expand="md">
<Container>
......@@ -45,20 +46,21 @@ class NavBar extends React.Component {
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/dhaynes" active={page == "dhaynes"}>
<NavLink href="#/dhaynes" active={pathname == "/dhaynes"}>
Dhaynes
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/about" active={page == "about"}>
<NavLink href="#/about" active={pathname == "/about"}>
About
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/debug" active={page == "debug"}>
<NavLink href="#/debug" active={pathname == "/debug"}>
Debug
</NavLink>
</NavItem>
<AuthButton />
</Nav>
</Collapse>
</Container>
......
......@@ -6,7 +6,7 @@ import { PageTemplate } from "Components";
const AboutPage = () => {
document.title = "About";
return (
<PageTemplate page={"about"}>
<PageTemplate>
<p>About page</p>
<Card className="shadow-lg p-3 mb-5 bg-white rounded">
<CardBody>
......
import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import { PageTemplate } from "Components";
const SignupSchema = Yup.object().shape({
password: Yup.string()
......@@ -12,9 +13,80 @@ const SignupSchema = Yup.object().shape({
});
const DebugCRUD = () => (
<div>
<h1>Debug CRUD Page</h1>
<PageTemplate>
<div>
<h1>Debug CRUD Page</h1>
<h3>Create</h3>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
<h3>Read</h3>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
<h3>Update</h3>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
<h3>Delete</h3>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema}
......@@ -37,7 +109,7 @@ const DebugCRUD = () => (
)}
/>
</div>
</div>
</PageTemplate>
);
export default DebugCRUD;
......@@ -3,7 +3,7 @@ import React from "react";
import { PageTemplate } from "Components";
const DhaynesPage = () => (
<PageTemplate page={"dhaynes"}>
<PageTemplate>
<h2>DAVID HAYNES</h2>
</PageTemplate>
);
......
import React from "react";
import { PageTemplate, AuthButton } from "Components";
import { PageTemplate } from "Components";
const HomePage = () => (
<PageTemplate page={"home"}>
<p>Hello World! 1</p>
<AuthButton />
<PageTemplate>
<p>Hello World!</p>
</PageTemplate>
);
......
import React from "react";
import { NavBar } from "Components";
import { Container } from "reactstrap";
const PageTemplate = props => (
<div>
<NavBar page={props.page} />
<Container>{props.children}</Container>
</div>
);
const PageTemplate = props => <Container>{props.children}</Container>;
export default PageTemplate;
import React from "react";
import { Route } from "react-router-dom";
import { HomePage, AboutPage, DhaynesPage, DebugCRUD } from "Components";
import { Route, withRouter } from "react-router-dom";
import {
HomePage,
AboutPage,
DhaynesPage,
DebugCRUD,
NavBar
} from "Components";
const NavBarWithRouter = withRouter(props => <NavBar {...props} />);
const Routes = () => (
<div>
<NavBarWithRouter />
<Route path="/" exact component={HomePage} />
<Route path="/dhaynes" component={DhaynesPage} />
<Route path="/about" component={AboutPage} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment