nomanHasan

import React, { Component } from 'react';
import * as TodoActions from '../actions/todoActions'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'
import { PropTypes } from 'prop-types'
import TodoTable from '../components/todoTable';



export class TodoContainer extends Component {

nomanHasan

import React, {Component} from 'react';

import {Button, Icon, Label, Menu, Table} from 'semantic-ui-react'
import TodoRow from './todoRow'
import EditTodo from './editTodo'


// TodoTable is a Stateless component

const TodoTable = (props) => {

nomanHasan

import React, {Component} from 'react';

import {Button, Table} from 'semantic-ui-react'

// The Todo Row component is a simple stateless component, It simply takes the props 
// and maps the specific events to the methods of parent component 

const TodoRow = (props) => {
    return (

nomanHasan

import React, {Component} from 'react';

import {Button, Icon, Label, Menu, Table} from 'semantic-ui-react'
import {Input} from 'semantic-ui-react'

//Import moment library for React Datepicker

import moment from 'moment';

import DatePicker from 'react-datepicker';

nomanHasan

//Import the Todo API 

import { TodoApi } from "../../api/todoApi";


// These are the action type constants. Ordered by CRUD order. 
// There is a pattern of Action, Action_Success, Action_Error action types for the Async actions. 

nomanHasan

import { createStore, applyMiddleware } from 'redux'

//Redux Thunk need to be added as a middleware

import thunkMiddleware from 'redux-thunk'

// Redux logging middleware
import { createLogger } from 'redux-logger'

// Import the root reducer

nomanHasan

import {combineReducers} from 'redux'
import {TodoListReducer} from '../todos/reducers/todoReducer'


//One root reducer for the whole app. This is done so that the app will have one single reducer to manage lots of other resources.
// And also communication between the reducers will be easier to maintain.
 
const rootReducer = combineReducers({
    todos: TodoListReducer
})

nomanHasan

import {HttpClient} from './httpClient' 

// This is the API. The backend root URL can be set from here.

const API = 'http://localhost:3000/api'

//Setting the todos URI

const TODO_API = `${API}/todos`

nomanHasan

import axios from 'axios' 


//Create a Http Client using Axios. Further modifications in this layer can be done later like Authorization.

const post = (url = '', data = '', config = {}) => {
    return axios.post(url, data, config)
}

const get = (url) => {

nomanHasan

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'

// The Todo Container Component

import TodoContainer from './todos/containers/todoContainer'


// The Routing Component providing all the routing Configuration