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
6345f07a
Commit
6345f07a
authored
Feb 13, 2019
by
David Haynes
🙆
Browse files
Scaffolding for NewGoLink form
- formik + yup validation piped into masonstrap
parent
17a510da
Pipeline
#3879
failed with stage
in 1 minute and 23 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
go/go_ahead/src/Components/Molecules/MasonstrappedFormInput.jsx
0 → 100644
View file @
6345f07a
import
React
from
"
react
"
;
import
{
Input
,
FormFeedback
}
from
"
reactstrap
"
;
/**
* https://codebrains.io/build-react-forms-validation-formik-reactstrap/
*/
const
MasonstrappedFormInput
=
({
field
,
form
:
{
touched
,
errors
},
...
props
})
=>
(
<
div
>
<
Input
invalid
=
{
!!
(
touched
[
field
.
name
]
&&
errors
[
field
.
name
])
}
{
...
field
}
{
...
props
}
/>
{
touched
[
field
.
name
]
&&
errors
[
field
.
name
]
&&
(
<
FormFeedback
>
{
errors
[
field
.
name
]
}
</
FormFeedback
>
)
}
</
div
>
);
export
default
MasonstrappedFormInput
;
go/go_ahead/src/Components/Molecules/NewGoLinkValidator.js
View file @
6345f07a
import
*
as
Yup
from
"
yup
"
;
var
today
=
new
Date
();
var
tomorrow
=
new
Date
();
tomorrow
.
setDate
(
today
.
getDate
()
+
1
);
const
NewGoLinkValidator
=
Yup
.
object
().
shape
({
destination
:
Yup
.
string
()
.
url
()
.
max
(
1000
,
"
Too Long!
"
),
short
:
Yup
.
string
()
.
required
(
"
Required
"
)
.
max
(
20
,
"
Too Long!
"
),
expires
:
Yup
.
date
()
.
nullable
()
.
min
(
new
Date
())
targetURL
:
Yup
.
string
()
.
required
(
"
You must supply a target URL!
"
)
.
url
(
"
Not a valid URL!
"
)
.
max
(
1000
,
"
URL is too long!
"
)
});
export
default
NewGoLinkValidator
;
go/go_ahead/src/Components/Organisms/NewGoLinkForm.jsx
View file @
6345f07a
import
React
,
{
useState
}
from
"
react
"
;
import
NewGoLinkValidator
from
"
../Molecules/NewGoLinkValidator
"
;
import
{
Formik
,
Field
,
Form
,
ErrorMessage
}
from
"
formik
"
;
import
{
Formik
,
Field
,
Form
}
from
"
formik
"
;
import
{
GetCSRFToken
}
from
"
../../Utils/GetCSRFToken
"
;
import
{
SingleDatePicker
}
from
"
react-dates
"
;
import
moment
from
"
moment
"
;
import
{
FormGroup
,
Button
,
Label
,
FormText
}
from
"
reactstrap
"
;
import
MasonstrappedFormInput
from
"
../Molecules/MasonstrappedFormInput
"
;
const
NewGoLinkForm
=
props
=>
{
const
[
focused
,
setFocused
]
=
useState
(
false
);
var
today
=
new
Date
();
var
tomorrow
=
new
Date
();
tomorrow
.
setDate
(
today
.
getDate
()
+
1
);
return
<
div
/>;
return
(
<
Formik
//
initialValues
=
{
{
// shortcode: "",
targetURL
:
""
// willExpire: false,
// expires: moment(tomorrow)
}
}
//
validationSchema
=
{
NewGoLinkValidator
}
//
onSubmit
=
{
({
targetURL
},
{
setSubmitting
})
=>
{
console
.
log
(
"
submitting..
"
);
console
.
log
(
targetURL
);
setSubmitting
(
false
);
}
}
//
render
=
{
({
values
,
isSubmitting
,
setFieldValue
,
errors
,
touched
,
handleBlur
,
handleChange
})
=>
(
<
Form
>
<
FormGroup
>
<
Label
for
=
"targetURL"
>
Target URL
</
Label
>
<
Field
name
=
"targetURL"
type
=
"text"
placeholder
=
"https://longwebsitelink.com"
component
=
{
MasonstrappedFormInput
}
/>
<
FormText
>
Example help text that remains unchanged.
</
FormText
>
</
FormGroup
>
<
Button
type
=
"submit"
disabled
=
{
isSubmitting
}
outline
color
=
"primary"
>
Submit
</
Button
>
</
Form
>
)
}
/>
);
};
export
default
NewGoLinkForm
;
go/go_ahead/src/Components/Pages/NewGolinkPage.jsx
View file @
6345f07a
...
...
@@ -5,7 +5,7 @@ import NewGolinkForm from "../Organisms/NewGoLinkForm";
const
NewGoLinkPage
=
props
=>
{
return
(
<
AuthedPageTemplate
>
<
h2
className
=
"mt-4"
>
Create a new Go link
</
h2
>
<
h2
className
=
"mt-4
font-weight-light
"
>
Create a new Go link
</
h2
>
<
p
className
=
"text-muted"
>
A Go link is composed of the original "target" URL, and the shortcode to
be used in the Go link.
...
...
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