Merge Spring things

package.json → client/package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.19.2",
     "date-fns": "^2.12.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

client/src/api/TaskAPI.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Task from '../components/Task';
+
+const API_URL = 'http://localhost:8080';
+const HEADERS =  {
+    'Accept' : 'application/json',
+    'Content-Type' : 'application/json;charset=UTF-8'
+};
+
+class TaskAPI {
+
+    async getAllTasks(removeTask) {
+        const responseJson = await (await fetch(`${API_URL}/tasks`)).json();
+        var taskComponents = [];
+        for (let [key, taskData] of Object.entries(responseJson)) {
+            taskComponents[key] = 
+                <Task
+                    key={taskData.id}
+                    number={taskData.id} 
+                    removeTask={removeTask}
+                    title={taskData.title}
+                    subTasks={taskData.subTasks}
+                    dueDate={taskData.dueDate}/>
+        }
+        return taskComponents;
+    }
+
+    // TODO: Add a username to the params
+    async postTask(taskJson) {
+        const postOptions = {
+            method: 'POST',
+            headers: HEADERS,          
+            body: JSON.stringify(taskJson)
+        };
+        const response = await fetch(`${API_URL}/addtask`, postOptions);
+        console.log(`POST: ${response.status}`);
+        const responseJson = await response.json();
+        return responseJson;
+    }
+
+    async deleteTask(id) {
+        const deleteOptions = {
+            method: 'DELETE'
+        };
+        await fetch(`${API_URL}/delete/${id}`, deleteOptions)
+            .then(response => {
+                console.log(`DELETE: ${response.status}`);
+            });
+    }
+}
+
+export default new TaskAPI();

src/components/AddTaskDialog/AddTaskDialog.js → client/src/components/AddTaskDialog.js

@@ -10,7 +10,9 @@ import DateFnsUtils from '@date-io/date-fns';
 import EventNoteIcon from '@material-ui/icons/EventNote';
 import IconButton from '@material-ui/core/IconButton';
 import Box from '@material-ui/core/Box';
+import Task from './Task';
 import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import TaskService from '../api/TaskAPI';
 
 class AddTaskDialog extends React.Component {
     constructor(props) {
@@ -30,7 +32,40 @@ class AddTaskDialog extends React.Component {
         event.preventDefault();
         var dueDate;
         this.state.showDatePicker ? dueDate = this.state.selectedDate : dueDate = null;
-        this.props.addTask(this.state.title, this.state.subTasks, dueDate);
+        // Create JSON to POST
+        var taskJson = {
+            title: this.state.title,
+            subTasks: Object.values(this.state.subTasks),
+            dueDate: dueDate
+        };
+        TaskService.postTask(taskJson)
+            .then((taskId) => {
+                // if we succesfully POSTed a task, lets grab its ID and render it
+                var task = this.createTask(taskId, this.state.title, this.state.subTasks, dueDate);
+                this.props.addTask(task);
+            })
+            .catch((error) => console.log(error));
+    }
+
+    // Create a Task component and return it
+    createTask = (id, title, subTasks, dueDate) => {
+        if (dueDate !== null) {
+            const formattedDueDate = `${dueDate.toLocaleString('default', {month: 'long'})} ${dueDate.getDate()}`;
+            return (<Task
+                        key={id}
+                        number={id} 
+                        removeTask={this.props.removeTask}
+                        title={title}
+                        subTasks={subTasks}
+                        dueDate={formattedDueDate}/>)
+        } else {
+            return (<Task 
+                        key={id}
+                        number={id}
+                        removeTask={this.props.removeTask}
+                        title={title}
+                        subTasks={subTasks}/>)
+        }
     }
 
     // Handles changes to title and subtask the fields 
@@ -61,7 +96,6 @@ class AddTaskDialog extends React.Component {
         this.setState({
             subTaskFields: [
                 ...this.state.subTaskFields,
-                // Clean these attributes maybe lol
                 <TextField
                     key={this.state.subTaskFields.length}
                     name={`${this.state.subTaskFields.length}`}

src/components/App/App.js → client/src/components/App.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import Home from '../Home/Home';
-import Tasks from '../Tasks/Tasks';
-import Login from '../Login/Login';
-import SignUp from '../SignUp/SignUp';
+import Home from './Home';
+import Tasks from './Tasks';
+import Login from './Login';
+import SignUp from './SignUp';
 import { Route, Switch } from 'react-router-dom';
 
 function App() {

src/components/Home/Home.js → client/src/components/Home.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import logo from '../../images/logo.svg';
+import logo from '../images/logo.svg';
 import './Home.css';
 
 export default function Home() {

src/components/SignUp/SignUp.js → client/src/components/SignUp.js

@@ -7,7 +7,6 @@ import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
 import Link from '@material-ui/core/Link';
-import Login from '../Login/Login';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 const useStyles = makeStyles(theme => ({

src/components/Task/Task.js → client/src/components/Task.js

@@ -60,7 +60,6 @@ class Task extends React.Component {
             {this.props.title}
           </Typography>
           <List>
-            {/* Maybe don't use Object.keys() here.... */}
             {Object.keys(this.props.subTasks).map((index) => { 
               return (
                 <ListItem 

src/components/Tasks/Tasks.js → client/src/components/Tasks.js

@@ -2,9 +2,9 @@ import React from 'react';
 import AddIcon from '@material-ui/icons/Add';
 import Fab from '@material-ui/core/Fab';
 import Box from '@material-ui/core/Box';
-import Task from '../Task/Task';
-import AddTaskDialog from '../AddTaskDialog/AddTaskDialog';
+import AddTaskDialog from './AddTaskDialog';
 import Typography from '@material-ui/core/Typography';
+import TaskAPI from '../api/TaskAPI';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
@@ -45,43 +45,32 @@ class Tasks extends React.Component {
             showDialog: false
         }
         this.removeTask = this.removeTask.bind(this);
+
     }
 
-    // Create a Task component and add it to the list of tasks
-    addTask(title, subTasks, dueDate) {
-        if (dueDate !== null) {
-            const formattedDueDate = `${dueDate.toLocaleString('default', {month: 'long'})} ${dueDate.getDate()}`;
-            this.setState({
-                tasks: [
-                    ...this.state.tasks,
-                    <Task 
-                        key={this.state.tasks.length} 
-                        number={this.state.tasks.length}
-                        removeTask={this.removeTask}
-                        title={title}
-                        subTasks={subTasks}
-                        dueDate={formattedDueDate}
-                    />
-                ]
+    componentDidMount() {
+        TaskAPI.getAllTasks(this.removeTask.bind(this))
+            .then(taskComponents => {
+                this.setState({
+                    tasks: taskComponents
+                })
             });
-        } else {
-            this.setState({
-                tasks: [
-                    ...this.state.tasks,
-                    <Task 
-                        key={this.state.tasks.length} 
-                        number={this.state.tasks.length}
-                        removeTask={this.removeTask}
-                        title={title}
-                        subTasks={subTasks}
-                    />
-                ]
-            });
-        }
+    }
+
+    // Add a newly created task to the rendered list
+    addTask(task) {
+        this.setState({
+            tasks: [
+                ...this.state.tasks,
+                task
+            ]
+        });
         this.hideDialog();
     }
 
     removeTask(key) {
+        console.log(`Attempting to delete Task id = ${key}`);
+        TaskAPI.deleteTask(key);
         this.setState({
             tasks:
                 this.state.tasks.filter(task => task.props.number !== key)
@@ -120,8 +109,12 @@ class Tasks extends React.Component {
             >
                 <AddIcon />
             </Fab>
-            {/* Bind hideDialog to this Tasks reference, otherwise the close button on the dialog will be NPE */}
-            {this.state.showDialog ? <AddTaskDialog addTask={this.addTask.bind(this)} hideDialog={this.hideDialog.bind(this)} /> : null}
+            {/* TODO: Once POSTing is working, change the key to be the backend id of the task */}
+            {this.state.showDialog ? <AddTaskDialog 
+                                        addTask={this.addTask.bind(this)} 
+                                        removeTask={this.removeTask.bind(this)}
+                                        hideDialog={this.hideDialog.bind(this)} /> 
+                                    : null}
         </div>
         )
     }

src/index.js → client/src/index.js

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import './index.css';
 import { BrowserRouter } from 'react-router-dom';
-import App from './components/App/App';
-import Appbar from './components/Appbar/Appbar';
+import App from './components/App';
+import Appbar from './components/Appbar';
 
 ReactDOM.render(
   <BrowserRouter>

server/.gitignore

@@ -0,0 +1,31 @@
+HELP.md
+target/
+!.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**
+!**/src/test/**
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+
+### VS Code ###
+.vscode/