te

import React from 'react';

import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';

import { withStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

import './App.css';


import config from './config'

import Login from './components/Login';
import Signup from './components/Signup';
import Projects from './components/Projects';
import Config from './components/Config';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: null,
      showSignUp: false,
    };

    this.loggedIn = this.loggedIn.bind(this);
    this.content = this.content.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
    this.toggleSignupForm = this.toggleSignupForm.bind(this);
  }

  componentDidMount() {
    const token = localStorage.getItem(config.localStorageTokenKey);

    this.handleLogin(token ? {} : null)
  }

  loggedIn() {
    return !!this.state.user;
  }

  handleLogout() {
    localStorage.removeItem(config.localStorageTokenKey);
    return this.setState({ user: null });
  }

  handleLogin(user) {
    return this.setState({ user });
  }

  toggleSignupForm() {
    this.setState({ showSignUp: !this.state.showSignUp });
  }

  content() {
    if (this.loggedIn()) {
      return (
        <Projects
          handleLogout={this.handleLogout}
          user={this.state.user}
          projects={this.state.user.projects}
        />
      )
    }

    if (this.state.showSignUp) {
      return (<Signup onClose={this.toggleSignupForm}/>)
    }

    return (<Login onLogin={this.handleLogin} onShowSignup={this.toggleSignupForm}/>)
  }

  render() {
    const { classes } = this.props;

    return (
      <Container fixed>
        <CssBaseline />

        <Grid container justify="flex-end">
          <Config config={config} />
        </Grid>

        <Grid className={classes.root} justify="center" container spacing={3}>
          <Grid item sm={6}>
            { this.content() }
          </Grid>
        </Grid>
      </Container>
    );
  }
}

const styles = {
  root: {
    marginTop: 40,
  },
};

export default withStyles(styles)(App);





PROJECT ++++++++++=========++++++++++=========++++++++++=========++++++++++=========++++++++++=========++++++++++=========

import React from 'react';

import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import DeleteIcon from '@material-ui/icons/Delete';

import Tasks from './Tasks'

import { withStyles } from '@material-ui/core/styles';

import moment from 'moment';
import { IconButton } from '@material-ui/core';


class Project extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      project: null,
      loading: false
    }
  }

  componentDidMount() {
    this.setState({ project: this.props.project })
  }

  renderRemoveBtn() {
    const { project } = this.state
    const { onRemove } = this.props

    return (
      <IconButton onClick={() => onRemove(project)}>
        <DeleteIcon />
      </IconButton>
    )
  }


  render() {
    const { project } = this.state
    const { classes } = this.props

    if (!project) {
      return null
    }

    return (
      <Card className={classes.root}>
        <CardHeader
          title={project.name}
          subheader={moment(project.created_at).format('MMMM Do YYYY, h:mm:ss a')}
          action={this.renderRemoveBtn()}
        />
        <CardContent>
          <Tasks project={project} />

        </CardContent>
        <CardActions disableSpacing>

        </CardActions>
      </Card>
    );
  }
}

const styles = {
  root: {
    marginTop: 20,
  },
};


export default withStyles(styles)(Project);

PROJECTS============================================++++++++++=========++++++++++=========++++++++++=========++++++++++=========

import React from 'react';

import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Grid from '@material-ui/core/Grid';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import Container from '@material-ui/core/Container';
import RefreshIcon from '@material-ui/icons/Refresh';

import { withStyles } from '@material-ui/core/styles';

import api from '../services/api'
import Project from './Project';
import NewProject from './NewProject'
import config from '../config'

function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

class Projects extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      projects: [],
      snackopen: false,
      snackmsg: '',
      snackerrormsg: ''
    }

    this.refreshProjects = this.refreshProjects.bind(this);
    this.removeProject = this.removeProject.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.showSuccessMsg = this.showSuccessMsg.bind(this);
    this.showErrorMsg = this.showErrorMsg.bind(this);
  }

  componentDidMount() {
    this.refreshProjects()
  }

  showSuccessMsg(message) {
    return this.setState({snackopen: true, snackmsg: message })
  }

  showErrorMsg(message) {
    return this.setState({snackopen: true, snackerrormsg: message })
  }

  refreshProjects() {
    this.setState({ projects: [] })

    return api.get(config.urls.projects).then((response) => {
      this.setState({ projects: response.data })
    }).catch((error) => {
      debugger
      const { detail } = error.response.data;
      this.showErrorMsg(detail)
    })
  }

  removeProject(project) {
    this.setState({snackopen: true})
    return api.delete(`${config.urls.projects}${project.id}`).then((response) => {
      // this.refreshProjects()
      const projects = this.state.projects.filter((item) => item.id !== project.id)

      this.setState({ projects })
      this.showSuccessMsg('Project successfully removed')
    }).catch((error) => {
      const { detail } = error.response.data;

      this.showErrorMsg(detail)
    })
  }

  renderProjects() {
    const { projects } = this.state;

    if (projects.length === 0) {
      return (<Typography variant="overline" display="block" gutterBottom>No projects</Typography>)
    }

    return projects.map((project) => <Project project={project} key={project.id} onRemove={this.removeProject} />)
  }

  handleClose (event, reason) {
    if (reason === 'clickaway') {
      return;
    }

    this.setState({snackopen: false, snackerrormsg: '', snackmsg: ''});
  }

  render() {
    const { snackopen, snackerrormsg, snackmsg } = this.state;

    return (
      <Container>
        <Grid container justify="flex-end">
          <ButtonGroup disableElevation>
            <Button onClick={this.refreshProjects} startIcon={<RefreshIcon />}>
              Refresh
            </Button>
            <Button onClick={this.props.handleLogout}>
              Logout
            </Button>
          </ButtonGroup>
        </Grid>

        { this.renderProjects() }

        <NewProject onCreated={this.refreshProjects} />

        <Snackbar open={snackopen} onClose={this.handleClose} autoHideDuration={3000}>
          <Alert  severity={snackmsg.length > 0 ? 'success' : 'error'}> { snackmsg.length > 0 ? snackmsg : snackerrormsg }</Alert>
        </Snackbar>
      </Container>
    );
  }
}

const styles = {
  root: {
    marginTop: 20,
  },
  addProjectBtn: {
    marginTop: 20,
  }
};


export default withStyles(styles)(Projects);

++++++++++=========++++++++++=========++++++++++=========++++++++++=========++++++++++=========++++++++++=========


TASK


import React from 'react';

import DeleteIcon from '@material-ui/icons/Delete';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import IconButton from '@material-ui/core/IconButton';
import EditIcon from '@material-ui/icons/Edit';
import AddIcon from '@material-ui/icons/Add';
import TextField from '@material-ui/core/TextField';

import { withStyles } from '@material-ui/core/styles';

import api from '../services/api'
import config from '../config';

class Tasks extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      project: null,
      tasks: [],
      newTask: {
        name: {
          value: '',
          error: null
        }
      }
    }

    this.addTask = this.addTask.bind(this)
    this.removeTask = this.removeTask.bind(this)
    this.editTask = this.editTask.bind(this)
    this.renderList = this.renderList.bind(this)
    this.updateNewTaskName = this.updateNewTaskName.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }

  componentDidMount() {
    this.setState({ project: this.props.project }, this.refreshTasks)
  }

  addTask() {

    const params = {
      project: this.state.project.url,
      name: this.state.newTask.name.value,
    }


    return api.post(config.urls.tasks, params).then((resp) => {
      this.refreshTasks()

      this.setState({
        newTask: {
          name: {
            value: '',
            error: null
          }
        }
      })
    }).catch((error) => {
      this.setState({
        newTask: {
          ...this.state.newTask,
          name: {
            ...this.state.newTask.name,
            error: error.response.data.name
          }
        }
      })

    })
  }

  refreshTasks() {
    return api.get(config.urls.tasks, { params: { project: this.state.project.id }}).then((tasks) => {
      this.setState({ tasks: tasks.data })
    })
  }

  removeTask(task) {
    return api.delete(`${config.urls.tasks}${task.id}`).then(response => {
      const tasks = this.state.tasks.filter((item) => item.id !== task.id)
      this.setState({ tasks })
    })
  }

  editTask(task) {
    const t = this.state.tasks.find((item) => item.id === task.id)

    t.edit = !t.edit

    if (t.edit === false) {
      return api.put(`${config.urls.tasks}${task.id}/`, task).then((resp) => {
        this.refreshTasks()
      })
    }

    this.setState({ tasks: this.state.tasks })
  }

  updateTaskName(task, newName) {
    task.name = newName
    this.setState({ tasks: this.state.tasks })
  }

  onSubmit(event) {
    event.preventDefault();
    this.addTask();
  }

  renderList() {
    const { newTask: { name } } = this.state
    return (<List component="nav" aria-label="main mailbox folders">
      {this.state.tasks.map((task) => (
        <ListItem button key={task.id}>
          { task.edit && <TextField label="Name" size="small" value={task.name} onChange={(event) => this.updateTaskName(task, event.target.value)} />}
          { !task.edit && <ListItemText primary={task.name} />}
          <ListItemSecondaryAction>
            <IconButton edge="end" aria-label="delete" color="primary" onClick={() => this.editTask(task)}>
              <EditIcon />
            </IconButton>
            <IconButton edge="end" aria-label="delete" color="secondary" onClick={() => this.removeTask(task)}>
              <DeleteIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
      ))}
      <ListItem button>
        <form onSubmit={this.onSubmit}>
          <TextField
            label="Name"
            size="small"
            value={name.value}
            error={!!name.error}
            helperText={name.error}
            onChange={this.updateNewTaskName}
          />

          <ListItemSecondaryAction>
            <IconButton type="submit" edge="end" aria-label="delete" color="primary">
              <AddIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </form>


      </ListItem>
    </List>)
  }

  updateNewTaskName(event) {
    const newName = event.target.value;
    return this.setState({
      newTask: {
        ...this.state.newTask,
        name: {
          value: newName,
          error: null
        }
      }
    })
  }

  render() {

    return (
      <div>
        {this.renderList()}
      </div>
    )
  }
}

const styles = {
  root: {
    marginTop: 20,
  },
};


export default withStyles(styles)(Tasks);