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

Merge branch '188-crud-debug-page' into 'go-three'

Resolve "CRUD Debug Page"

Closes #188

See merge request !131
parents b1c61f3c eac06503
Pipeline #3821 passed with stage
in 1 minute and 17 seconds
......@@ -2,7 +2,6 @@
......@@ -14,7 +13,122 @@ htmlcov/
# Byte-compiled / optimized / DLL files
# C extensions
# Distribution / packaging
# PyInstaller
# Usually these files are written by a python script from a template
# before PyInstaller builds the exe, so as to inject date/other infos into it.
# Installer logs
# Unit test / coverage reports
# Translations
# Django stuff:
# Flask stuff:
# Scrapy stuff:
# Sphinx documentation
# PyBuilder
# Jupyter Notebook
# IPython
# pyenv
# celery beat schedule file
# SageMath parsed files
# Environments
# Spyder project settings
# Rope project settings
# mkdocs documentation
# mypy
# Pyre type checker
......@@ -8,7 +8,30 @@ in an open source repo.
You will need to be a member before making any contributions. Join the slack #go channel and ask nicely.
You will need to be **a member** before making any contributions. Join the slack #go channel and ask.
### Issues
Issues can be opened on gitlab and must adhere to the provided template:
# Summary
Here you should include two to three sentences explaining the thought process
about the current issue. Maybe a picture? Some details that could best help someone,
especially someone new, understand the goal of the issue and how they should best
approach the problem.
## Helpful Links
Here you should include a bullet point list of links to documentation, stack overflow,
whatever, that could help guide someone on what it is they are trying to do.
Essentially, a list of links to point them in the right direction.
Issues will be closed if they do not adhere to the standard.
You can claim issues by asking in the #go channel whether you can work on it. The project manager will then assign them to you in gitlab.
### Branches
......@@ -17,34 +40,39 @@ add, modify, or remove features/bugs from Go. Our list of tasks can be found on
the issues page.
If you decide to take on an issue for Go you will need to work in a branch off
of the current development branch (ie. `2.3-dev` with 2.3 being the version in
of the current development branch (ie. `go-three`).
This can be done with the following chain of `git` commands within `go/`:
git pull
git checkout 2.3-dev
git checkout -B ##-shortdescription
Replace `##` with the issue number that you are working on, and replace
`shortdescription` with a few words (<=4) that in brief describe what the branch
`short-description` with a few words that in brief describe what the branch
git pull
git checkout go-three
git checkout -B ##-short-description
**Example Workflow:**
git pull
git checkout 2.3-dev
git checkout -B 102-readmeUpdates
git checkout go-three
git checkout -B 102-readme-updates
If you are working on something that does not have an issue please open a new
issue before creating your branch.
Once you've written commits in a branch you will need to push your commits to gitlab.
git push origin ##-branchname
`origin` is gitlab.
### Commits & Their Messages
It is important to commit more often than not such that if we run into issues we
......@@ -54,7 +82,7 @@ Commit messages should follow the format:
#### Title -
Should fill in the blank:
Should fill in the blank (Don't actually write "This commit", just the part that comes after!):
This commit ______
......@@ -74,19 +102,13 @@ They don't have to be super serious (see any of my commits) though just a tad bi
Example commit description:
- mostly talk about how great SRCT (and :dhaynes:) is
- plus a short blurb on how we can ban you
- Composed a short blurb on how banning works
- Composed a description of SRCT
[Example full commit](
### Merging to the current development branch
Once you've finished work in a branch you will need to push your commits to gitlab.
git push origin ##-branchname
`Origin` is gitlab.
Open a [merge request](
to start the process of getting your code into the repo. Your code wil be reviewed
by another member before being merged. Your code must pass our tests and include
......@@ -14,3 +14,9 @@ ADD . /go/
# Install pip dependecies
RUN pip install pipenv
RUN pipenv install --system --deploy
RUN curl -sL | bash -
RUN apt-get install -y nodejs
RUN apt-get install -y build-essential
RUN npm install -g yarn
\ No newline at end of file
......@@ -22,3 +22,6 @@ mysqlclient = "*"
python_version = "3.7"
allow_prereleases = true
......@@ -32,19 +32,19 @@
"django": {
"hashes": [
"index": "pypi",
"version": "==2.0.9"
"version": "==2.0.10"
"django-cas-client": {
"hashes": [
"index": "pypi",
"version": "==1.4.0"
"version": "==1.5.0"
"django-crispy-forms": {
"hashes": [
......@@ -100,10 +100,10 @@
"pytz": {
"hashes": [
"version": "==2018.7"
"version": "==2018.9"
"redis": {
"hashes": [
......@@ -9,64 +9,97 @@ term maintenance. Additionally, since the core of the project is fairly simple,
2.0 functioned as a good introduction to open source development for new
Go 3.0 is currently in production with the goal of modernizing the project with new functionality.
A project of [GMU SRCT](
## Architecture of the project
### `go_back`
`go_back` is the API backend of the project. It is built with the Django REST
Framework (python). It supports all CRUD (Create, Read, Update, Delete)
operations on Go links as well as RegisteredUser account management.
### `go_ahead`
### `go_ahead` | The react app
`go_ahead` is the ReactJS frontend of the project. It is built with the React
`go_ahead` is the react.js frontend of the project. It is built with the React
JavaScript framework to allow for rapid development and experimentation. There
is also a lot of interactivty that the framework allows that we can leverage
for a smooth user experience.
## Getting started with contributing
There's a workflow involved with getting started contributing but once you do
it once or twice it'll seem a lot less daunting.
1. Running `go_ahead` | React / Webpack
You'll need node installed.
npm install -g yarn
yarn dev
This starts a foreground process that will rebuild the React site whenever
there is a change.
2. Running `go_back` | Docker
### `go_back` | The django API
You'll need Docker and docker-compose installed.
In another terminal tab from the `yarn` one:
docker-compose up
3. Misc. | Actually coding
All JS changes will require a refresh (Webpack rebuilds the app in the background).
All Python changes will require a refresh.
To pull in python dependecies and work in a contained environment we use `pipenv`.
pipenv install
pipenv shell
4) Deployment of changes
See me.
`go_back` is the API backend of the project. It is built with the Django REST
Framework (python). It supports all CRUD (Create, Read, Update, Delete)
operations on Go links as well as account management.
## How to get up and running
As always, the first step is to get the project running on your local machine.
Consult the [docker documentation]( for instructions on how to install Docker CE and the [docker-compose documentation]( on how to install Docker Compose.
docker-compose build
docker-compose up
Navigate to []( after the compose process has finished running to access the app.
## How to contribute to the project
1. Go to [the issues page]( and look at what needs to be done, and have a cursory choice of something.
1. Review [](
1. Review the documentation for individual components:
1. [`go_ahead` documentation](
1. [`go_back` documentation](
1. Get to the #go channel in SRCT Slack and ask for assistance.
## Other
- Make sure to ask any questions you have in the #go channel in SRCT Slack
- Go 3 logo was created by <a href="">Andres Villogas</a>
- Don't worry if nothing makes sense, we all start there.
- This project was made possible through the collective contributions of multiple Mason SRCT members:
<a href="">Go 2.2</a>:
<br />
<a href="">David Haynes</a>,
<a href="">Mark Stenglein</a>,
<a href="">
Andres Villogas
,<a href="">Eyad Hasan</a>,
<a href="">Zach Osman</a>,
<a href="">Leo Grandinetti</a>,
<a href="">Grady Moran</a>,
<a href="">Zach Knox</a>,
<a href="">Michael Bailey</a>,
<a href="">Michel Rouly</a>,
<a href="">Nicholas Anderson</a>,
<a href="">Kevin Mckigney</a>, and
<a href="">Daniel Bond</a>.<br />
<a href="">Go 2.1</a>:
<br />
<a href="">David Haynes</a>,
<a href="">Zach Osman</a>,
<a href="">Robert Hitt</a>,
<a href="">Nicholas Anderson</a>,
<a href="">Zach Knox</a>,
<a href="">Michael Bailey</a>,
<a href="">Mattias Duffy</a>,
<a href="">Eyad Hasan</a>, and
<a href="">Danny Kim</a>.<br />
<a href="">Go 2.0</a>:
<br />
<a href="">David Haynes</a>,
<a href="">Matthew Rodgers</a>,
<a href="">Nicholas Anderson</a>, and
<a href="">Daniel Bond</a>.<br />
Go 1.0:
<br />
<a href="">Michel Rouly</a>,
<a href="">Chris Reffett</a>,
<a href="">Nicholas Anderson</a>, and
<a href="">Akshay Karthik</a>.
<br />
#! /bin/bash
until nc -z db 3306; do
echo "waiting for database to start..."
sleep 1
GO_SECRET_KEY=$(dd if=/dev/urandom count=100 | tr -dc "A-Za-z0-9" | fold -w 60 | head -n1 2>/dev/null)
yarn build
python go/ makemigrations
python go/ makemigrations go_back
python go/ makemigrations go_ahead
python go/ migrate
python go/ runserver
\ No newline at end of file
# go_ahead
# go_ahead | The react app
Words on how to code in React.
[React is a JavaScript library for building user interfaces.]( The focus of the library is on component design and implementation.
I'll be the first one to admit that it is very daunting to jump into a React project if you are unfamiliar with the library, javascript, and general modern web developemnt trends. To help with that learning curve I have two suggested resources:
1. [A re-introduction to JavaScript]( | A great start to reviewing JS and how you can translate knowledge from other languages into it.
1. [React Main Concepts]( | A step by step walkthrough of React, component architecture, and how you can best utilize the React API.
## React project structure
Take a chance to review the layout of the app:
├── App.jsx | The entry point for our React app.
├── Components
│   ├── Molecules | All reusable components that are individual.
│   │   └── index.js
│   ├── Organisms | Containers for molecule components.
│   │   └── index.js
│   ├── Pages | Containers for organisms.
│   │   └── index.js
│   ├── Templates | Containers for pages.
│   │   └── index.js
│   └── index.js
└── Utils | Misc. standalone JS functions.
└── index.js
## Dev work
Since we will need to rebuild our app on a regular basis as we edit the javascript we need to start a process that watches the code and rebuilds the app.
You'll need [node installed](
npm install -g yarn
yarn dev
This starts a foreground process that will rebuild the React site whenever
there is a change.
Make sure you are running this alongside the docker-compose process so that you can visit the site at [](
All react errors are printed to the webpack console stdout.
Make sure to check your web browser's JS console as well!
......@@ -7,6 +7,10 @@ import { Routes } from "Utils";
import "masonstrap/build/css/masonstrap.min.css";
import "masonstrap/build/js/masonstrap.min.js";
// Other
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
<Routes />
......@@ -27,17 +27,21 @@ class AuthButton extends React.Component {
render() {
const { is_auth, error } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
return (
<Button outline color="accent">
Error: {error.message}
} else {
return (
{is_auth ? (
<Button color="info" href="/auth/logout">
<Button outline color="accent" href="/auth/logout">
Logout <i className="fas fa-sign-out-alt" />
) : (
<Button color="info" href="/auth/login">
<Button outline color="accent" href="/auth/login">
Login <i className="fas fa-sign-in-alt" />
import React from "react";
import * as Yup from "yup";
import { Formik, Field, Form, ErrorMessage } from "formik";
import { GetCSRFToken } from "../../Utils";
import { SingleDatePicker } from "react-dates";
import moment from "moment";
import { FormGroup, Button, Card, CardBody, CardTitle } from "reactstrap";
const DebugCreateYup = Yup.object().shape({
destination: Yup.string()
.max(1000, "Too Long!"),
short: Yup.string()
.max(20, "Too Long!"),
.min(new Date())
class DebugCreate extends React.Component {
constructor(props) {
this.state = {
focused: false
render() {
return (
short: "",
destination: "",
expires: moment(new Date())
onSubmit={({ destination, short, expires }, { setSubmitting }) => {
const newValues = {
destination: destination,
short: short,
date_expires: expires.format()
fetch("/api/golinks/", {
method: "post",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": GetCSRFToken()
body: JSON.stringify(newValues)
.then(response => console.log(response))
render={({ values, isSubmitting, setFieldValue }) => (
{"Destination: "}
<ErrorMessage name="destination" component="div" />