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 { ...@@ -33,11 +33,11 @@ class AuthButton extends React.Component {
<div> <div>
{is_auth ? ( {is_auth ? (
<Button color="info" href="/auth/logout"> <Button color="info" href="/auth/logout">
Logout Logout <i className="fas fa-sign-out-alt" />
</Button> </Button>
) : ( ) : (
<Button color="info" href="/auth/login"> <Button color="info" href="/auth/login">
Login Login <i className="fas fa-sign-in-alt" />
</Button> </Button>
)} )}
</div> </div>
......
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
NavbarToggler, NavbarToggler,
Collapse Collapse
} from "reactstrap"; } from "reactstrap";
import { AuthButton } from "../";
class NavBar extends React.Component { class NavBar extends React.Component {
constructor(props) { constructor(props) {
...@@ -27,7 +28,7 @@ class NavBar extends React.Component { ...@@ -27,7 +28,7 @@ class NavBar extends React.Component {
} }
render() { render() {
const { page } = this.props; const { pathname } = this.props.location;
return ( return (
<Navbar dark color="dark" expand="md"> <Navbar dark color="dark" expand="md">
<Container> <Container>
...@@ -45,20 +46,21 @@ class NavBar extends React.Component { ...@@ -45,20 +46,21 @@ class NavBar extends React.Component {
<Collapse isOpen={!this.state.collapsed} navbar> <Collapse isOpen={!this.state.collapsed} navbar>
<Nav className="ml-auto" navbar> <Nav className="ml-auto" navbar>
<NavItem> <NavItem>
<NavLink href="#/dhaynes" active={page == "dhaynes"}> <NavLink href="#/dhaynes" active={pathname == "/dhaynes"}>
Dhaynes Dhaynes
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink href="#/about" active={page == "about"}> <NavLink href="#/about" active={pathname == "/about"}>
About About
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink href="#/debug" active={page == "debug"}> <NavLink href="#/debug" active={pathname == "/debug"}>
Debug Debug
</NavLink> </NavLink>
</NavItem> </NavItem>
<AuthButton />
</Nav> </Nav>
</Collapse> </Collapse>
</Container> </Container>
......
...@@ -6,7 +6,7 @@ import { PageTemplate } from "Components"; ...@@ -6,7 +6,7 @@ import { PageTemplate } from "Components";
const AboutPage = () => { const AboutPage = () => {
document.title = "About"; document.title = "About";
return ( return (
<PageTemplate page={"about"}> <PageTemplate>
<p>About page</p> <p>About page</p>
<Card className="shadow-lg p-3 mb-5 bg-white rounded"> <Card className="shadow-lg p-3 mb-5 bg-white rounded">
<CardBody> <CardBody>
......
import React from "react"; import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik"; import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
import { PageTemplate } from "Components";
const SignupSchema = Yup.object().shape({ const SignupSchema = Yup.object().shape({
password: Yup.string() password: Yup.string()
...@@ -12,9 +13,80 @@ const SignupSchema = Yup.object().shape({ ...@@ -12,9 +13,80 @@ const SignupSchema = Yup.object().shape({
}); });
const DebugCRUD = () => ( const DebugCRUD = () => (
<div> <PageTemplate>
<h1>Debug CRUD Page</h1>
<div> <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 <Formik
initialValues={{ email: "", password: "" }} initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema} validationSchema={SignupSchema}
...@@ -37,7 +109,7 @@ const DebugCRUD = () => ( ...@@ -37,7 +109,7 @@ const DebugCRUD = () => (
)} )}
/> />
</div> </div>
</div> </PageTemplate>
); );
export default DebugCRUD; export default DebugCRUD;
...@@ -3,7 +3,7 @@ import React from "react"; ...@@ -3,7 +3,7 @@ import React from "react";
import { PageTemplate } from "Components"; import { PageTemplate } from "Components";
const DhaynesPage = () => ( const DhaynesPage = () => (
<PageTemplate page={"dhaynes"}> <PageTemplate>
<h2>DAVID HAYNES</h2> <h2>DAVID HAYNES</h2>
</PageTemplate> </PageTemplate>
); );
......
import React from "react"; import React from "react";
import { PageTemplate } from "Components";
import { PageTemplate, AuthButton } from "Components";
const HomePage = () => ( const HomePage = () => (
<PageTemplate page={"home"}> <PageTemplate>
<p>Hello World! 1</p> <p>Hello World!</p>
<AuthButton />
</PageTemplate> </PageTemplate>
); );
......
import React from "react"; import React from "react";
import { NavBar } from "Components";
import { Container } from "reactstrap"; import { Container } from "reactstrap";
const PageTemplate = props => ( const PageTemplate = props => <Container>{props.children}</Container>;
<div>
<NavBar page={props.page} />
<Container>{props.children}</Container>
</div>
);
export default PageTemplate; export default PageTemplate;
import React from "react"; import React from "react";
import { Route } from "react-router-dom"; import { Route, withRouter } from "react-router-dom";
import { HomePage, AboutPage, DhaynesPage, DebugCRUD } from "Components"; import {
HomePage,
AboutPage,
DhaynesPage,
DebugCRUD,
NavBar
} from "Components";
const NavBarWithRouter = withRouter(props => <NavBar {...props} />);
const Routes = () => ( const Routes = () => (
<div> <div>
<NavBarWithRouter />
<Route path="/" exact component={HomePage} /> <Route path="/" exact component={HomePage} />
<Route path="/dhaynes" component={DhaynesPage} /> <Route path="/dhaynes" component={DhaynesPage} />
<Route path="/about" component={AboutPage} /> <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