Commit eac06503 authored by David Haynes's avatar David Haynes 🙆
Browse files

Complete final pass on debug components

- add favicon as well

Closes #188
parent bdb603ea
Pipeline #3820 passed with stage
in 2 minutes and 7 seconds
...@@ -22,3 +22,6 @@ mysqlclient = "*" ...@@ -22,3 +22,6 @@ mysqlclient = "*"
[requires] [requires]
python_version = "3.7" python_version = "3.7"
[pipenv]
allow_prereleases = true
import React from "react"; import React from "react";
import * as Yup from "yup"; import * as Yup from "yup";
import { Formik, Field, Form as FormikForm, ErrorMessage } from "formik"; import { Formik, Field, Form, ErrorMessage } from "formik";
import { GetCSRFToken } from "../../Utils"; import { GetCSRFToken } from "../../Utils";
import { SingleDatePicker } from "react-dates"; import { SingleDatePicker } from "react-dates";
import moment from "moment"; import moment from "moment";
import { Form, FormGroup, Button, Card, CardBody, CardTitle } from "reactstrap"; import { FormGroup, Button, Card, CardBody, CardTitle } from "reactstrap";
const DebugCreateYup = Yup.object().shape({ const DebugCreateYup = Yup.object().shape({
destination: Yup.string() destination: Yup.string()
...@@ -33,18 +33,17 @@ class DebugCreate extends React.Component { ...@@ -33,18 +33,17 @@ class DebugCreate extends React.Component {
<CardTitle>Create</CardTitle> <CardTitle>Create</CardTitle>
<Formik <Formik
initialValues={{ initialValues={{
destination: "",
short: "", short: "",
destination: "",
expires: moment(new Date()) expires: moment(new Date())
}} }}
validationSchema={DebugCreateYup} validationSchema={DebugCreateYup}
onSubmit={(values, { setSubmitting }) => { onSubmit={({ destination, short, expires }, { setSubmitting }) => {
const newValues = { const newValues = {
destination: values.destination, destination: destination,
short: values.short, short: short,
date_expires: values.expires.format() date_expires: expires.format()
}; };
console.log(newValues);
fetch("/api/golinks/", { fetch("/api/golinks/", {
method: "post", method: "post",
headers: { headers: {
...@@ -58,7 +57,6 @@ class DebugCreate extends React.Component { ...@@ -58,7 +57,6 @@ class DebugCreate extends React.Component {
}} }}
render={({ values, isSubmitting, setFieldValue }) => ( render={({ values, isSubmitting, setFieldValue }) => (
<Form> <Form>
<FormikForm>
<FormGroup> <FormGroup>
{"Destination: "} {"Destination: "}
<Field <Field
...@@ -80,9 +78,7 @@ class DebugCreate extends React.Component { ...@@ -80,9 +78,7 @@ class DebugCreate extends React.Component {
date={values["expires"]} // momentPropTypes.momentObj or null date={values["expires"]} // momentPropTypes.momentObj or null
onDateChange={date => setFieldValue("expires", date)} // PropTypes.func.isRequired onDateChange={date => setFieldValue("expires", date)} // PropTypes.func.isRequired
focused={this.state.focused} // PropTypes.bool focused={this.state.focused} // PropTypes.bool
onFocusChange={({ focused }) => onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
this.setState({ focused })
} // PropTypes.func.isRequired
id="expires" // PropTypes.string.isRequired, id="expires" // PropTypes.string.isRequired,
/> />
<ErrorMessage name="expires" /> <ErrorMessage name="expires" />
...@@ -95,7 +91,6 @@ class DebugCreate extends React.Component { ...@@ -95,7 +91,6 @@ class DebugCreate extends React.Component {
> >
Submit Submit
</Button> </Button>
</FormikForm>
</Form> </Form>
)} )}
/> />
......
...@@ -2,6 +2,7 @@ import React from "react"; ...@@ -2,6 +2,7 @@ import React from "react";
import * as Yup from "yup"; import * as Yup from "yup";
import { GetCSRFToken } from "../../Utils"; import { GetCSRFToken } from "../../Utils";
import { Formik, Field, Form, ErrorMessage } from "formik"; import { Formik, Field, Form, ErrorMessage } from "formik";
import { Button, Card, CardBody, CardTitle, FormGroup } from "reactstrap";
const DebugDeleteYup = Yup.object().shape({ const DebugDeleteYup = Yup.object().shape({
short: Yup.string() short: Yup.string()
...@@ -11,6 +12,10 @@ const DebugDeleteYup = Yup.object().shape({ ...@@ -11,6 +12,10 @@ const DebugDeleteYup = Yup.object().shape({
const DebugDelete = () => ( const DebugDelete = () => (
<div> <div>
<Card>
<CardBody>
<CardTitle>Delete</CardTitle>
<Formik <Formik
initialValues={{ short: "" }} initialValues={{ short: "" }}
validationSchema={DebugDeleteYup} validationSchema={DebugDeleteYup}
...@@ -28,16 +33,25 @@ const DebugDelete = () => ( ...@@ -28,16 +33,25 @@ const DebugDelete = () => (
}} }}
render={({ isSubmitting }) => ( render={({ isSubmitting }) => (
<Form> <Form>
<FormGroup>
{"Short: "} {"Short: "}
<Field name="short" /> <Field className="form-control" name="short" />
<ErrorMessage name="short" /> <ErrorMessage name="short" />
<br /> </FormGroup>
<button type="submit" disabled={isSubmitting}>
<Button
type="submit"
disabled={isSubmitting}
outline
color="primary"
>
Submit Submit
</button> </Button>
</Form> </Form>
)} )}
/> />
</CardBody>
</Card>
</div> </div>
); );
......
import React from "react"; import React from "react";
import { GetAllGoLinks } from "../../Utils"; import { GetAllGoLinks } from "../../Utils";
import { Button } from "reactstrap"; import { Button, Card, CardBody, CardTitle, Table } from "reactstrap";
class DebugRead extends React.Component { class DebugRead extends React.Component {
constructor(props) { constructor(props) {
...@@ -30,15 +30,42 @@ class DebugRead extends React.Component { ...@@ -30,15 +30,42 @@ class DebugRead extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Button onClick={this.refreshGoLinks} color="primary"> <Card>
<CardBody>
<CardTitle className="d-flex">
Read{" "}
<Button
className="ml-auto"
onClick={this.refreshGoLinks}
outline
color="primary"
>
Refresh Refresh
</Button>{" "} </Button>
</CardTitle>
<Table>
<thead>
<tr>
<th>short</th>
<th>destination</th>
<th>expires</th>
</tr>
</thead>
<tbody>
{this.state.GoLinks.map(golink => ( {this.state.GoLinks.map(golink => (
<li key={golink.short}> <tr key={golink.short}>
<a href={`/${golink.short}`}> /{golink.short}</a> |{" "} <td>
{golink.destination} <a href={`/${golink.short}`}> /{golink.short}</a>
</li> </td>
<td>{golink.destination}</td>
<td>{golink.date_expires}</td>
</tr>
))} ))}
</tbody>
</Table>
</CardBody>
</Card>
</div> </div>
); );
} }
......
...@@ -2,6 +2,9 @@ import React from "react"; ...@@ -2,6 +2,9 @@ import React from "react";
import * as Yup from "yup"; import * as Yup from "yup";
import { Formik, Field, Form, ErrorMessage } from "formik"; import { Formik, Field, Form, ErrorMessage } from "formik";
import { GetCSRFToken } from "../../Utils"; import { GetCSRFToken } from "../../Utils";
import { FormGroup, Button, Card, CardBody, CardTitle } from "reactstrap";
import { SingleDatePicker } from "react-dates";
import moment from "moment";
const DebugUpdateYup = Yup.object().shape({ const DebugUpdateYup = Yup.object().shape({
destination: Yup.string() destination: Yup.string()
...@@ -12,31 +15,43 @@ const DebugUpdateYup = Yup.object().shape({ ...@@ -12,31 +15,43 @@ const DebugUpdateYup = Yup.object().shape({
.max(20, "Too Long!"), .max(20, "Too Long!"),
newshort: Yup.string() newshort: Yup.string()
.required("Required") .required("Required")
.max(20, "Too Long!") .max(20, "Too Long!"),
// expires: Yup.date() expires: Yup.date()
// .nullable() .nullable()
// .min(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)) .min(new Date())
}); });
const DebugUpdate = () => ( class DebugUpdate extends React.Component {
constructor(props) {
super(props);
this.state = {
focused: false
};
}
render() {
return (
<div> <div>
<Card>
<CardBody>
<CardTitle>Update</CardTitle>
<Formik <Formik
initialValues={{ initialValues={{
oldshort: "", oldshort: "",
newshort: "", newshort: "",
newdestination: "", newdestination: "",
expires: new Date() expires: moment(new Date())
}} }}
validationSchema={DebugUpdateYup} validationSchema={DebugUpdateYup}
onSubmit={( onSubmit={(
{ newshort, oldshort, expires, destination }, { newshort, destination, expires },
{ setSubmitting } { setSubmitting }
) => { ) => {
const updateURL = "/api/golinks/" + oldshort + "/"; const updateURL = "/api/golinks/" + oldshort + "/";
const payload = { const payload = {
short: newshort, short: newshort,
destination: destination, destination: destination,
expires: expires expires: expires.format()
}; };
fetch(updateURL, { fetch(updateURL, {
method: "put", method: "put",
...@@ -49,33 +64,59 @@ const DebugUpdate = () => ( ...@@ -49,33 +64,59 @@ const DebugUpdate = () => (
.then(response => console.log(response)) .then(response => console.log(response))
.then(setSubmitting(false)); .then(setSubmitting(false));
}} }}
render={({ isSubmitting }) => ( render={({ values, isSubmitting, setFieldValue }) => (
<Form> <Form>
<FormGroup>
{"Old Short: "} {"Old Short: "}
<Field name="oldshort" /> <Field className="form-control" name="oldshort" />
<ErrorMessage name="oldshort" /> <ErrorMessage name="oldshort" />
<br /> </FormGroup>
<FormGroup>
{"New Destination: "} {"New Destination: "}
<Field name="destination" placeholder="https://longwebsitelink.com" /> <Field
className="form-control"
name="destination"
placeholder="https://longwebsitelink.com"
/>
<ErrorMessage name="destination" component="div" /> <ErrorMessage name="destination" component="div" />
<br /> </FormGroup>
<FormGroup>
{"New Short: "} {"New Short: "}
<Field name="newshort" /> <Field className="form-control" name="newshort" />
<ErrorMessage name="newshort" /> <ErrorMessage name="newshort" />
<br /> </FormGroup>
{"New Expires: "} <FormGroup>
<Field type="select" name="expires" placeholder="leave blank" /> {"Expires: "}
<ErrorMessage name="expires" />
<br /> <br />
<button type="submit" disabled={isSubmitting}> <SingleDatePicker
date={values["expires"]} // momentPropTypes.momentObj or null
onDateChange={date => setFieldValue("expires", date)} // PropTypes.func.isRequired
focused={this.state.focused} // PropTypes.bool
onFocusChange={({ focused }) =>
this.setState({ focused })
} // PropTypes.func.isRequired
id="expires" // PropTypes.string.isRequired,
/>
<ErrorMessage name="expires" />
</FormGroup>
<Button
type="submit"
disabled={isSubmitting}
outline
color="primary"
>
Submit Submit
</button> </Button>
</Form> </Form>
)} )}
/> />
</CardBody>
</Card>
</div> </div>
); );
}
}
export default DebugUpdate; export default DebugUpdate;
...@@ -16,16 +16,21 @@ class DebugCRUD extends React.Component { ...@@ -16,16 +16,21 @@ class DebugCRUD extends React.Component {
render() { render() {
return ( return (
<AuthedPageTemplate> <AuthedPageTemplate>
<div className="my-3">
<DebugCreate /> <DebugCreate />
</div>
<h3>Read</h3> <div className="my-3">
<DebugRead /> <DebugRead />
</div>
<h3>Update</h3> <div className="my-3">
<DebugUpdate /> <DebugUpdate />
</div>
<h3>Delete</h3> <div className="my-3">
<DebugDelete /> <DebugDelete />
</div>
</AuthedPageTemplate> </AuthedPageTemplate>
); );
} }
......
...@@ -10,6 +10,76 @@ ...@@ -10,6 +10,76 @@
<meta name="theme-color" content="#006633" /> <meta name="theme-color" content="#006633" />
<meta name="description" content="University-branded URL shortening" /> <meta name="description" content="University-branded URL shortening" />
<title>SRCT Go 3</title> <title>SRCT Go 3</title>
<link
rel="apple-touch-icon"
sizes="57x57"
href="static/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="static/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="static/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="static/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="static/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="static/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="static/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="static/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="static/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="static/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="static/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="static/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="static/favicon-16x16.png"
/>
<link rel="manifest" href="static/manifest.json" />
</head> </head>
<body> <body>
......
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