Favicon update

.gitignore

@@ -1,6 +1,7 @@
 .venv
 .pyenv
 secret_settings.py
+.vscode
 
 node_modules
 

onefit/frontend/src/actions/types.js

@@ -1 +1,3 @@
 export const GET_WORKOUTS = "GET_WORKOUTS";
+export const DELETE_WORKOUT = "DELETE_WORKOUT";
+export const ADD_WORKOUT = "ADD_WORKOUT";

onefit/frontend/src/actions/workouts.js

@@ -1,11 +1,11 @@
 import axios from "axios";
 
-import { GET_WORKOUTS } from "./types";
+import { GET_WORKOUTS, DELETE_WORKOUT, ADD_WORKOUT } from "./types";
 
 // GET WORKOUTS
 export const getWorkouts = () => (dispatch) => {
   axios
-    .get("/api/workouts/")
+    .get(`/api/workouts/`)
     .then((res) => {
       dispatch({
         type: GET_WORKOUTS,
@@ -14,3 +14,29 @@ export const getWorkouts = () => (dispatch) => {
     })
     .catch((err) => console.log(err));
 };
+
+// DELETE WORKOUT
+export const deleteWorkout = (id) => (dispatch) => {
+  axios
+    .delete(`/api/workouts/${id}/`)
+    .then((res) => {
+      dispatch({
+        type: DELETE_WORKOUT,
+        payload: id,
+      });
+    })
+    .catch((err) => console.log(err));
+};
+
+// ADD WORKOUT
+export const addWorkout = (workout) => (dispatch) => {
+  axios
+    .post(`/api/workouts/`, workout)
+    .then((res) => {
+      dispatch({
+        type: ADD_WORKOUT,
+        payload: res.data,
+      });
+    })
+    .catch((err) => console.log(err));
+};

onefit/frontend/src/components/workouts/Form.js

@@ -1,13 +1,74 @@
 import React, { Component } from "react";
+import DateTime from "react-datetime";
+import moment from "moment";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { addWorkout } from "../../actions/workouts";
 
 export class Form extends Component {
+  state = {
+    user_name: "",
+    date: moment(),
+    notes: "",
+  };
+
+  static propTypes = {
+    addWorkout: PropTypes.func.isRequired,
+  };
+
+  onChange = (e) => this.setState({ [e.target.name]: e.target.value });
+
+  onSubmit = (e) => {
+    e.preventDefault();
+    const { user_name, date, notes } = this.state;
+    const workout = { user_name, date, notes };
+    this.props.addWorkout(workout);
+  };
+
   render() {
+    const { user_name, date, notes } = this.state;
     return (
-      <div>
-        <h1>Add Workout Form</h1>
+      <div className="card card-body mt-4 mb-4">
+        <h2>Add Workout</h2>
+        <form onSubmit={this.onSubmit}>
+          <div className="form-group">
+            <label>user_name</label>
+            <input
+              className="form-control"
+              type="text"
+              name="user_name"
+              onChange={this.onChange}
+              value={user_name}
+            />
+          </div>
+          <div className="form-group">
+            <label>Date</label>
+            <DateTime
+              type="datetime"
+              name="date"
+              onChange={this.onChange}
+              defaultValue={date}
+            />
+          </div>
+          <div className="form-group">
+            <label>Notes</label>
+            <textarea
+              className="form-control"
+              type="text"
+              name="notes"
+              onChange={this.onChange}
+              value={notes}
+            />
+          </div>
+          <div className="form-group">
+            <button type="submit" className="btn btn-primary">
+              Submit
+            </button>
+          </div>
+        </form>
       </div>
     );
   }
 }
 
-export default Form;
+export default connect(null, { addWorkout })(Form);

onefit/frontend/src/components/workouts/Workouts.js

@@ -1,11 +1,13 @@
 import React, { Component, Fragment } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { getWorkouts } from "../../actions/workouts";
+import { getWorkouts, deleteWorkout } from "../../actions/workouts";
 
 export class Workouts extends Component {
   static propTypes = {
     workouts: PropTypes.array.isRequired,
+    getWorkouts: PropTypes.func.isRequired,
+    deleteWorkout: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
@@ -20,7 +22,7 @@ export class Workouts extends Component {
           <thead>
             <tr>
               <th>ID</th>
-              <th>date created</th>
+              <th>date</th>
               <th>notes</th>
               <th>username</th>
               <th />
@@ -30,11 +32,17 @@ export class Workouts extends Component {
             {this.props.workouts.map((workout) => (
               <tr key={workout.id}>
                 <td>{workout.id}</td>
-                <td>{workout.date_created}</td>
+                <td>{workout.date}</td>
                 <td>{workout.notes}</td>
                 <td>{workout.user_name}</td>
                 <td>
-                  <button className="btn btn-danger btn-sm">Delete</button>
+                  <button
+                    onClick={this.props.deleteWorkout.bind(this, workout.id)}
+                    className="btn btn-danger btn-sm"
+                  >
+                    {" "}
+                    Delete
+                  </button>
                 </td>
               </tr>
             ))}
@@ -49,4 +57,6 @@ const mapStateToProps = (state) => ({
   workouts: state.workouts.workouts,
 });
 
-export default connect(mapStateToProps, { getWorkouts })(Workouts);
+export default connect(mapStateToProps, { getWorkouts, deleteWorkout })(
+  Workouts
+);

onefit/frontend/src/index.js

@@ -1 +1 @@
-import App from './components/App';
+import App from "./components/App";

onefit/frontend/src/reducers/workouts.js

@@ -1,4 +1,4 @@
-import { GET_WORKOUTS } from "../actions/types.js";
+import { GET_WORKOUTS, DELETE_WORKOUT, ADD_WORKOUT } from "../actions/types.js";
 
 const initialState = {
   workouts: [],
@@ -11,6 +11,18 @@ export default function (state = initialState, action) {
         ...state,
         workouts: action.payload,
       };
+    case DELETE_WORKOUT:
+      return {
+        ...state,
+        workouts: state.workouts.filter(
+          (workout) => workout.id !== action.payload
+        ),
+      };
+    case ADD_WORKOUT:
+      return {
+        ...state,
+        workouts: [...state.workouts, action.payload],
+      };
     default:
       return state;
   }

onefit/frontend/static/frontend/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>