PHP Classes

File: resources/js/components/pages/projects/ProjectCreate.js

Recommend this page to a friend!
  Classes of Maniruzzaman Akash   Laravel React Task Management   resources/js/components/pages/projects/ProjectCreate.js   Download  
File: resources/js/components/pages/projects/ProjectCreate.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel React Task Management
Application to manage tasks
Author: By
Last change:
Date: 1 year ago
Size: 3,535 bytes
 

Contents

Class file image Download
import React from "react"; import { Card, Button, Badge, Spinner, Form } from "react-bootstrap"; import { Link, withRouter } from "react-router-dom"; import Axios from "axios"; import { PUBLIC_URL } from "../../../constants"; import { storeNewProject } from "../../../services/ProjectService"; class ProjectCreate extends React.Component { state = { isLoading: false, name: "", description: "", errors: {}, }; componentDidMount() {} changeInput = (e) => { this.setState({ [e.target.name]: e.target.value, }); }; submitForm = async (e) => { e.preventDefault(); const { history } = this.props; this.setState({ isLoading: true }); const postBody = { name: this.state.name, description: this.state.description, }; const response = await storeNewProject(postBody); if (response.success) { this.setState({ name: "", description: "", isLoading: false, }); history.push(`${PUBLIC_URL}projects`); } else { console.log("response.errors", response.errors); this.setState({ errors: response.errors, isLoading: false, }); } }; render() { return ( <> <div className="header-part"> <div className="float-left"> <h2>New Project</h2> </div> <div className="float-right"> <Link to={`${PUBLIC_URL}projects`} className="btn btn-info"> See All Projects </Link> </div> <div className="clearfix"></div> </div> <Card> <Card.Body> <Form onSubmit={this.submitForm}> <Form.Group controlId="name"> <Form.Label>Project Name</Form.Label> <Form.Control type="text" placeholder="Enter Project Name" value={this.state.name} name="name" onChange={(e) => this.changeInput(e)} /> </Form.Group> {this.state.errors && this.state.errors.name && ( <p className="text-danger">{this.state.errors.name[0]}</p> )} <Form.Group controlId="description"> <Form.Label>Project Description</Form.Label> <Form.Control type="text" placeholder="Enter Project Description" as="textarea" rows="5" name="description" value={this.state.description} onChange={(e) => this.changeInput(e)} /> </Form.Group> {this.state.errors && this.state.errors.description && ( <p className="text-danger"> {this.state.errors.description[0]} </p> )} {this.state.isLoading && ( <Button variant="primary" type="button" disabled> <Spinner animation="border" role="status"> <span className="sr-only">Loading...</span> </Spinner>{" "} Saving... </Button> )} {!this.state.isLoading && ( <Button variant="primary" type="submit"> Save Project </Button> )} </Form> </Card.Body> </Card> </> ); } } export default withRouter(ProjectCreate);