Spring Boot Todos App

 Spring Boot Todos App

import React, { useEffect, useState } from "react";

import { Link } from "react-router-dom";

const axios = require("axios").default;

const Todo = () => {

  const APIURL = "http://127.0.0.1:8080/jpa";

  let id = "id";

  const todoobj = {

    id: 11005,

    username: "dinesh",

    description: "Learn Spring Boot ",

    targetDate: "2020-10-05T10:03:31.432+0000",

    done: false,

  };

  const todoPage = {

    "currentPage": 1,

    "totalPages": 10,

    "totalItems": 10,

    "sortField": "description",

    "sortDirection": "desc",

    "recordPerPage": 10,

    "todosList": [todoobj]

  }

  const [todoP, setTodoP] = useState(todoPage);

  const [todos, setTodos] = useState([todoobj]);

  const [direction, setDirection] = useState();

  const [sortField, setSortField] = useState("id");

  useEffect(() => {

    fetchTodos();

  }, []); // << super important array

  const fetchTodos = () => {

    // let direction = todoP.direction;

    //console.log("Hello 2"+todoP.sortField);

    //  let sortField = todoP.sortField;

    let recordPerPage = todoP.recordPerPage;

    let currentPageNo = todoP.currentPage;

    /*

        "currentPage": 4,

        "totalPages": 5,

        "totalItems": 10,

        "sortField": "description",

        "sortDirection": "desc",

        "recordPerPage": 2,

    */

    fetch(

      `${APIURL}/users/dinesh/todos/v2/${currentPageNo}/${recordPerPage}?sortField=${sortField}&sortDirection=${direction}`

    )

      .then((response) => response.json())

      .then((data) => {

        setTodoP(data)

        setTodos(data.todosList);

        // setDirection(data.sortDirection);

        console.log(data.sortDirection + " " + direction);

        console.log(todoP);

      });

    console.log("fetched");

  }

  const fetchDataSorted = (event) => {

    event.preventDefault();

    let name = event.target.getAttribute('name')

    let value = event.target.getAttribute('value')

    setSortField(value);

    setTodoP((preValue) => {

      console.log(preValue);

      return {

        ...preValue, //Spread Operator 

        [name]: value,

      };

    }

    )

    console.log("Hello" + todoP.sortField);

    //  setDirection((direction=="desc"?"asc":"desc"));

    fetchTodos();

  }

  const handleEdit = (event) => {

    let id = event.target.value;

    console.log("value:" + id);

  }

  const handleDelete = (event) => {

    deleteAPI(event);

    fetchTodos();

  }

  const deleteAPI = (event) => {

    let id = event.target.value;

    let username = "dinesh"

    let URI = `${APIURL}/users/${username}/todos/${id}`;

    console.log(URI);

    axios.delete(URI)

      .then((res) => { console.log(res) })

      .catch((err) => { console.log(err) })

  }

  return (

    <>

      <div class="container">

        <h2>Todos</h2>

        <p>

          My Todos List

        </p>

        <table class="table">

          <thead>

            <tr>

              <th onClick={fetchDataSorted} name="sortField" value="id">ID</th>

              <th onClick={fetchDataSorted} name="sortField" value="username">Username</th>

              <th onClick={fetchDataSorted} name="sortField" value="description">Description</th>

              <th onClick={fetchDataSorted} name="sortField" value="targetDate">Targetate</th>

              <th >Is Done</th>

              <th >Edit</th>

              <th >Delete</th>

            </tr>

          </thead>

          <tbody>

            {todos.map((mytodo) => (

              <tr>

                <td>{mytodo.id}</td>

                <td>{mytodo.username}</td>

                <td>{mytodo.description}</td>

                <td>{mytodo.targetDate}</td>

                <td>{mytodo.done}</td>

                <td><button type="button" className="btn btn-warning" value={mytodo.id} onClick={handleEdit}>Edit</button></td>

                <td><button type="button" className="btn btn-danger" value={mytodo.id} onClick={handleDelete}>Delete</button></td>

              </tr>

            ))}

          </tbody>

        </table>

        <hr />

        <button type="button" className="btn btn-warning" value="Add Todos"> <Link to="/AddTodos">Add Todos </Link></button>

      </div>

    </>

  );

};

export default Todo;

Add Todo

import React, { useState } from 'react'

import { useForm } from "react-hook-form";

import TutorialService from '../../services/TutorialService';

import "./AddTodos.css"

import { useHistory } from "react-router-dom";

const AddTodos = () => {

    const { register, handleSubmit, watch, errors } = useForm();

    const [submitted, setSubmitted] = useState(false);

    let history = useHistory();

    const onSubmit = data => {

        console.log(data)

        data.username = "dinesh";

        TutorialService.create(data)

            .then(response => {

                console.log(response);

                setSubmitted(true);

            })

            .catch(e => {

                console.log(e);

            });

        history.push('/todo')

    };

    console.log(watch("example")); // watch input value by passing the name of it

    const newAddTodo = () => {

        //  setTutorial(initialTutorialState);

        setSubmitted(false);

    };

    return (

        /* "handleSubmit" will validate your inputs before invoking "onSubmit" */

        <div className="container">

            <div className="row">

                <div className="col-md-3"></div>

                <div className="col-md-6">

                    {(submitted) ?

                        <h3>  Data Submitted Successfully</h3> : ""

                    }

                    <h2>Add Todos</h2>

                    <form className="form-group" onSubmit={handleSubmit(onSubmit)}>

                        <label>Description</label> <input type="text" className="form-control" name="description" defaultValue="test" ref={register({ required: true, maxLength: 30 })} />

                        {errors.desciption && <p className="errorP">*This field is required</p>}

                        <label>Target Date</label> <input type="date" className="form-control" name="targetDate" ref={register({ required: true })} />

                        {errors.targetdate && <p className="errorP">*This field is required</p>}

                        <input type="submit" className="btn btn-success" />

                    </form>

                </div>

                <div className="col-md-3"></div>

            </div>

        </div>

    )

}

export default AddTodos

HTTP

import http from "../http-common";

  const create = data => {

    return http.post(`/users/${data.username}/todos`, data);

  };

API Call

import axios from "axios";

export default axios.create({

  baseURL: "http://localhost:8080/jpa",

  headers: {

    "Content-type": "application/json"

  }

});