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

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 = "*"
[requires]
python_version = "3.7"
[pipenv]
allow_prereleases = true
import React from "react";
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 { SingleDatePicker } from "react-dates";
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({
destination: Yup.string()
......@@ -33,18 +33,17 @@ class DebugCreate extends React.Component {
<CardTitle>Create</CardTitle>
<Formik
initialValues={{
destination: "",
short: "",
destination: "",
expires: moment(new Date())
}}
validationSchema={DebugCreateYup}
onSubmit={(values, { setSubmitting }) => {
onSubmit={({ destination, short, expires }, { setSubmitting }) => {
const newValues = {
destination: values.destination,
short: values.short,
date_expires: values.expires.format()
destination: destination,
short: short,
date_expires: expires.format()
};
console.log(newValues);
fetch("/api/golinks/", {
method: "post",
headers: {
......@@ -58,44 +57,40 @@ class DebugCreate extends React.Component {
}}
render={({ values, isSubmitting, setFieldValue }) => (
<Form>
<FormikForm>
<FormGroup>
{"Destination: "}
<Field
className="form-control"
name="destination"
placeholder="https://longwebsitelink.com"
/>
<ErrorMessage name="destination" component="div" />
</FormGroup>
<FormGroup>
{"Short: "}
<Field className="form-control" name="short" />
<ErrorMessage name="short" />
</FormGroup>
<FormGroup>
{"Expires: "}
<br />
<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
</Button>
</FormikForm>
<FormGroup>
{"Destination: "}
<Field
className="form-control"
name="destination"
placeholder="https://longwebsitelink.com"
/>
<ErrorMessage name="destination" component="div" />
</FormGroup>
<FormGroup>
{"Short: "}
<Field className="form-control" name="short" />
<ErrorMessage name="short" />
</FormGroup>
<FormGroup>
{"Expires: "}
<br />
<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
</Button>
</Form>
)}
/>
......
......@@ -2,6 +2,7 @@ import React from "react";
import * as Yup from "yup";
import { GetCSRFToken } from "../../Utils";
import { Formik, Field, Form, ErrorMessage } from "formik";
import { Button, Card, CardBody, CardTitle, FormGroup } from "reactstrap";
const DebugDeleteYup = Yup.object().shape({
short: Yup.string()
......@@ -11,33 +12,46 @@ const DebugDeleteYup = Yup.object().shape({
const DebugDelete = () => (
<div>
<Formik
initialValues={{ short: "" }}
validationSchema={DebugDeleteYup}
onSubmit={(values, { setSubmitting }) => {
const deleteURL = "/api/golinks/" + values.short;
fetch(deleteURL, {
method: "delete",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": GetCSRFToken()
}
})
.then(response => console.log(response))
.then(setSubmitting(false));
}}
render={({ isSubmitting }) => (
<Form>
{"Short: "}
<Field name="short" />
<ErrorMessage name="short" />
<br />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
<Card>
<CardBody>
<CardTitle>Delete</CardTitle>
<Formik
initialValues={{ short: "" }}
validationSchema={DebugDeleteYup}
onSubmit={(values, { setSubmitting }) => {
const deleteURL = "/api/golinks/" + values.short;
fetch(deleteURL, {
method: "delete",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": GetCSRFToken()
}
})
.then(response => console.log(response))
.then(setSubmitting(false));
}}
render={({ isSubmitting }) => (
<Form>
<FormGroup>
{"Short: "}
<Field className="form-control" name="short" />
<ErrorMessage name="short" />
</FormGroup>
<Button
type="submit"
disabled={isSubmitting}
outline
color="primary"
>
Submit
</Button>
</Form>
)}
/>
</CardBody>
</Card>
</div>
);
......
import React from "react";
import { GetAllGoLinks } from "../../Utils";
import { Button } from "reactstrap";
import { Button, Card, CardBody, CardTitle, Table } from "reactstrap";
class DebugRead extends React.Component {
constructor(props) {
......@@ -30,15 +30,42 @@ class DebugRead extends React.Component {
render() {
return (
<div>
<Button onClick={this.refreshGoLinks} color="primary">
Refresh
</Button>{" "}
{this.state.GoLinks.map(golink => (
<li key={golink.short}>
<a href={`/${golink.short}`}> /{golink.short}</a> |{" "}
{golink.destination}
</li>
))}
<Card>
<CardBody>
<CardTitle className="d-flex">
Read{" "}
<Button
className="ml-auto"
onClick={this.refreshGoLinks}
outline
color="primary"
>
Refresh
</Button>
</CardTitle>
<Table>
<thead>
<tr>
<th>short</th>
<th>destination</th>
<th>expires</th>
</tr>
</thead>
<tbody>
{this.state.GoLinks.map(golink => (
<tr key={golink.short}>
<td>
<a href={`/${golink.short}`}> /{golink.short}</a>
</td>
<td>{golink.destination}</td>
<td>{golink.date_expires}</td>
</tr>
))}
</tbody>
</Table>
</CardBody>
</Card>
</div>
);
}
......
......@@ -2,6 +2,9 @@ import React from "react";
import * as Yup from "yup";
import { Formik, Field, Form, ErrorMessage } from "formik";
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({
destination: Yup.string()
......@@ -12,70 +15,108 @@ const DebugUpdateYup = Yup.object().shape({
.max(20, "Too Long!"),
newshort: Yup.string()
.required("Required")
.max(20, "Too Long!")
// expires: Yup.date()
// .nullable()
// .min(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))
.max(20, "Too Long!"),
expires: Yup.date()
.nullable()
.min(new Date())
});
const DebugUpdate = () => (
<div>
<Formik
initialValues={{
oldshort: "",
newshort: "",
newdestination: "",
expires: new Date()
}}
validationSchema={DebugUpdateYup}
onSubmit={(
{ newshort, oldshort, expires, destination },
{ setSubmitting }
) => {
const updateURL = "/api/golinks/" + oldshort + "/";
const payload = {
short: newshort,
destination: destination,
expires: expires
};
fetch(updateURL, {
method: "put",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": GetCSRFToken()
},
body: JSON.stringify(payload)
})
.then(response => console.log(response))
.then(setSubmitting(false));
}}
render={({ isSubmitting }) => (
<Form>
{"Old Short: "}
<Field name="oldshort" />
<ErrorMessage name="oldshort" />
<br />
class DebugUpdate extends React.Component {
constructor(props) {
super(props);
this.state = {
focused: false
};
}
render() {
return (
<div>
<Card>
<CardBody>
<CardTitle>Update</CardTitle>
<Formik
initialValues={{
oldshort: "",
newshort: "",
newdestination: "",
expires: moment(new Date())
}}
validationSchema={DebugUpdateYup}
onSubmit={(
{ newshort, destination, expires },
{ setSubmitting }
) => {
const updateURL = "/api/golinks/" + oldshort + "/";
const payload = {
short: newshort,
destination: destination,
expires: expires.format()
};
fetch(updateURL, {
method: "put",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": GetCSRFToken()
},
body: JSON.stringify(payload)
})
.then(response => console.log(response))
.then(setSubmitting(false));
}}
render={({ values, isSubmitting, setFieldValue }) => (
<Form>
<FormGroup>
{"Old Short: "}
<Field className="form-control" name="oldshort" />
<ErrorMessage name="oldshort" />
</FormGroup>
{"New Destination: "}
<Field name="destination" placeholder="https://longwebsitelink.com" />
<ErrorMessage name="destination" component="div" />
<br />
<FormGroup>
{"New Destination: "}
<Field
className="form-control"
name="destination"
placeholder="https://longwebsitelink.com"
/>
<ErrorMessage name="destination" component="div" />
</FormGroup>
{"New Short: "}
<Field name="newshort" />
<ErrorMessage name="newshort" />
<br />
<FormGroup>
{"New Short: "}
<Field className="form-control" name="newshort" />
<ErrorMessage name="newshort" />
</FormGroup>
{"New Expires: "}
<Field type="select" name="expires" placeholder="leave blank" />
<ErrorMessage name="expires" />
<br />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
</div>
);
<FormGroup>
{"Expires: "}
<br />
<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
</Button>
</Form>
)}
/>
</CardBody>
</Card>
</div>
);
}
}
export default DebugUpdate;
......@@ -16,16 +16,21 @@ class DebugCRUD extends React.Component {
render() {
return (
<AuthedPageTemplate>
<DebugCreate />
<div className="my-3">
<DebugCreate />
</div>
<h3>Read</h3>
<DebugRead />
<div className="my-3">
<DebugRead />
</div>
<h3>Update</h3>
<DebugUpdate />
<div className="my-3">
<DebugUpdate />
</div>
<h3>Delete</h3>
<DebugDelete />
<div className="my-3">
<DebugDelete />
</div>
</AuthedPageTemplate>
);
}
......
......@@ -10,6 +10,76 @@
<meta name="theme-color" content="#006633" />
<meta name="description" content="University-branded URL shortening" />
<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>
<body>
......
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file
{
"name": "App",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
\ No newline at end of file
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