Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
go
Commits
6ee83f33
Commit
6ee83f33
authored
Dec 29, 2018
by
David Haynes
🙆
Browse files
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
Changes
8
Pipelines
1
Show whitespace changes
Inline
Side-by-side
go/go_ahead/src/Components/Molecules/AuthButton.jsx
View file @
6ee83f33
...
...
@@ -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
>
...
...
go/go_ahead/src/Components/Organisms/NavBar.jsx
View file @
6ee83f33
...
...
@@ -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
{
pa
g
e
}
=
this
.
props
;
const
{
pa
thnam
e
}
=
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
=
{
pa
g
e
==
"
dhaynes
"
}
>
<
NavLink
href
=
"#/dhaynes"
active
=
{
pa
thnam
e
==
"
/
dhaynes
"
}
>
Dhaynes
</
NavLink
>
</
NavItem
>
<
NavItem
>
<
NavLink
href
=
"#/about"
active
=
{
pa
g
e
==
"
about
"
}
>
<
NavLink
href
=
"#/about"
active
=
{
pa
thnam
e
==
"
/
about
"
}
>
About
</
NavLink
>
</
NavItem
>
<
NavItem
>
<
NavLink
href
=
"#/debug"
active
=
{
pa
g
e
==
"
debug
"
}
>
<
NavLink
href
=
"#/debug"
active
=
{
pa
thnam
e
==
"
/
debug
"
}
>
Debug
</
NavLink
>
</
NavItem
>
<
AuthButton
/>
</
Nav
>
</
Collapse
>
</
Container
>
...
...
go/go_ahead/src/Components/Pages/AboutPage.jsx
View file @
6ee83f33
...
...
@@ -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
>
...
...
go/go_ahead/src/Components/Pages/DebugCRUD.jsx
View file @
6ee83f33
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
=
()
=>
(
<
PageTemplate
>
<
div
>
<
h1
>
Debug CRUD Page
</
h1
>
<
div
>
<
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
;
go/go_ahead/src/Components/Pages/DhaynesPage.jsx
View file @
6ee83f33
...
...
@@ -3,7 +3,7 @@ import React from "react";
import
{
PageTemplate
}
from
"
Components
"
;
const
DhaynesPage
=
()
=>
(
<
PageTemplate
page
=
{
"
dhaynes
"
}
>
<
PageTemplate
>
<
h2
>
DAVID HAYNES
</
h2
>
</
PageTemplate
>
);
...
...
go/go_ahead/src/Components/Pages/HomePage.jsx
View file @
6ee83f33
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
>
);
...
...
go/go_ahead/src/Components/Templates/PageTemplate.jsx
View file @
6ee83f33
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
;
go/go_ahead/src/Utils/Routes.jsx
View file @
6ee83f33
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
}
/>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment