Skip to content

Commit

Permalink
Added changes to TLD and user forms
Browse files Browse the repository at this point in the history
@novaisea
novaisea committed Jun 1, 2021
1 parent 4227cce commit fd4ff0b
Showing 4 changed files with 270 additions and 237 deletions.
252 changes: 139 additions & 113 deletions src/components/editApplication.js
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,144 @@
import React from 'react';
import axios from 'axios';
import { withRouter } from "react-router";

import { Upload, Form, Input, Button, Typography } from 'antd';
const { Title } = Typography;
const { TextArea } = Input;

import {Form, Input, Button, Row,Col} from 'antd'
import { Redirect } from 'react-router-dom'
import {status,json} from '../utilities/requestHandlers'
import UserContext from '../contexts/user'
import React from 'react'
const { TextArea } = Input
const formItemLayout = {
labelCol: { xs: { span: 24 }, sm: { span: 6 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
};

const tailFormItemLayout = {
wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
};

class EditApplication extends React.Component {

constructor(props) {
super(props);
this.state = {
selectedFile: null
}

}

componentDidMount(){
this.setState({
applicationID: this.props.match.params.id
})
labelCol: { xs: { span: 24 }, sm: { span: 6 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
}

handleCompanyNameChange=event=>{
this.setState({
companyName: event.target.value
})
}

handleCRNChange=event=>{
this.setState({
crn: event.target.value
})
}

handleAddressChange=event=>{
this.setState({
address: event.target.value
})
}

handleDateFoundedChange=event=>{
this.setState({
dateFunded: event.target.value
})
}

handleImageChange=event=>{
this.setState({
imageURL: event.target.files[0],
loaded: 0,
})
}

onClickHandler = () => {
const data = new FormData()
if(this.state.imageURL){data.append('upload', this.state.imageURL)}
if(this.state.companyName){data.append('companyName', this.state.companyName)}
if(this.state.crn){data.append('crn', this.state.crn)}
if(this.state.address){data.append('address', this.state.address)}
if(this.state.email){data.append('email', this.state.email)}
if(this.state.dateFunded){data.append('dateFunded', this.state.dateFunded)}
axios.put(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${this.state.applicationID}`, data, {
auth: {
username: 'andre',
password: '12345'
},
headers: {
'content-type': 'multipart/form-data'
const tailFormItemLayout = {
wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
}
class EditApplication extends React.Component{
constructor(props){
super(props)
this.state={
imageURL:null,
redirect:null
}
})
.then(res => { // then print response status
console.log(res.statusText)
this.props.history.push('/')
})
}

render(){
return (
<Form {...formItemLayout}>
<Title level={2}> Insert a new application</Title>
<Form.Item name="companyName" label="Company Name">
<Input onChange={this.handleCompanyNameChange}/>
</Form.Item>
<Form.Item name="crn" label="Company Registration Number">
<Input onChange={this.handleCRNChange}/>
</Form.Item>
<Form.Item name="address" label="Address">
<Input onChange={this.handleAddressChange}/>
</Form.Item>
<Form.Item name="email" label="Email">
<Input onChange={this.handleEmailChange}/>
</Form.Item>
<Form.Item name="dateFunded" label="Company Foundation Date">
<Input onChange={this.handleDateFoundedChange}/>
</Form.Item>
<Form.Item label="Image">
<Input type="file" name="file" onChange={this.handleImageChange}/>
</Form.Item>
<Button type="button" onClick={this.onClickHandler}>Submit</Button>
</Form>
);
}
this._onFinish =this._onFinish.bind(this)
this._onCancel =this._onCancel.bind(this)
}
static contextType = UserContext
handleFile =(e)=>{
/**
* @param {object} e event to hanldle (file upload in this case)
* @return {null} nothing return but component state is changes
*/
let files = e.target.files[0]
// console.log(files)
this.setState({upload:e.target.files[0]})
}
_onCancel(values) {
console.log(`Recieved values ${values}`)
this.setState({redirect:'/'})
}
_onFinish(values) {
console.log(values)
const {companyName,crn,address,email,dateFunded}=values
values={companyName:companyName,crn:crn,address:address,email:email,dateFunded:dateFunded}
console.log("Befpre IF -statement ")
console.log(values)
//Change listing_to_update for the one used in the TLD backend
values.id=this.context.Listing_to_update.ID
if (!companyName===true) {
values.companyName=this.context.Listing_to_update.companyName
}
if (!crn===true) {
values.crn=this.context.Listing_to_update.crn
}
if (!address===true) {
values.address=this.context.Listing_to_update.address
}
if (!email===true) {
values.email=this.context.Listing_to_update.email
}
if (!dateFunded===true) {
values.dateFunded=this.context.Listing_to_update.dateFunded
}
console.log("after if statement")
console.log(values)
this.context.updateListing(values)

const formData= new FormData
formData.append('id',values.id)
formData.append('companyName',values.companyName)
formData.append('crn',values.crn)
formData.append('address',values.address)
formData.append('email',values.email)
formData.append('dateFunded',values.dateFunded)
if (this.state.upload) {
formData.append('upload',this.state.upload,this.state.upload.name)
}


fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{
method:"PUT",
body:formData,
headers:{
"Authorization": "Basic " + btoa(this.context.user.username + ":" + this.context.user.password)
}
})
.then(status)
.then(json)
.then(()=>{
this.setState({redirect:`/{this.context.Listing_to_update.id}`})
alert("Successfully updated listing")
})
.catch(console.error())

}
render(){
if (this.state.redirect) {
return <Redirect to={this.state.redirect}/>
}
return(
<>
<Row type="flex" justify="space-around" align="middle">
<Col>
<h1>Updating listing</h1>
</Col>
</Row>
<Form {...formItemLayout} onFinish={this._onFinish}>
<Form.Item name="companyName" label="Name of the Company">
<Input defaultValue={this.context.Listing_to_update.companyName}></Input>
</Form.Item>
<Form.Item name="crn" label="Company Reference Number">
<Input defaultValue={this.context.Listing_to_update.crn}></Input>
</Form.Item>
<Form.Item name="address" label="Address">
<TextArea defaultValue={this.context.Listing_to_update.address}></TextArea>
</Form.Item>
<Form.Item name="email" label="Email">
<TextArea defaultValue={this.context.Listing_to_update.email}></TextArea>
</Form.Item>
<Form.Item name="dateFunded" label="Foundation Date">
<TextArea defaultValue={this.context.Listing_to_update.dateFunded}></TextArea>
</Form.Item>
<Form.Item name="imageURL" label="Image">
<Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Row>
<Col>
<Form.Item >
{/* <Button htmlType="submit" type="danger" onClick={_onFinish}>Update</Button> */}
<Button htmlType="submit" type="danger">Update</Button>
</Form.Item>
</Col>
<Col>
<Form.Item >
<Button type="primary" onClick={this._onCancel}>Cancel</Button>
</Form.Item>
</Col>
</Row>
</Form.Item>

</Form>
</>
)
}
}


export default withRouter(EditApplication);
export default EditApplication
3 changes: 2 additions & 1 deletion src/components/login.js
View file
Original file line number Diff line number Diff line change
@@ -52,10 +52,11 @@ class LoginForm extends React.Component {
console.log(user);
user.password = password; // store in context for future API calls
this.context.login(user);
alert('Hello ' + username + '!')
this.setState({redirect:'/'});
})
.catch(error => {
// TODO: show nicely formatted error message
alert('Wrong username or password!!')
console.log('Login failed');
});
}
229 changes: 125 additions & 104 deletions src/components/newApplication.js
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,130 @@
import React from 'react';
import axios from 'axios';

import { Upload, Form, Input, Button, Typography } from 'antd';
const { Title } = Typography;
const { TextArea } = Input;

import React from 'react'
import UserContext from '../contexts/user'
import { Form, Input, Button,Upload } from 'antd'
import { status, json } from '../utilities/requestHandlers'
import { Redirect } from 'react-router-dom'
const formItemLayout = {
labelCol: { xs: { span: 24 }, sm: { span: 6 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
};

const tailFormItemLayout = {
wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
};

class NewApplication extends React.Component {

constructor(props) {
super(props);
this.state = {
selectedFile: null
}

}
handleCompanyNameChange=event=>{
this.setState({
companyName: event.target.value
})
}

handleCRNChange=event=>{
this.setState({
crn: event.target.value
})
}

handleAddressChange=event=>{
this.setState({
address: event.target.value
})
labelCol: { xs: { span: 24 }, sm: { span: 6 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
}

handleDateFoundedChange=event=>{
this.setState({
dateFunded: event.target.value
})
}

handleImageChange=event=>{
this.setState({
imageURL: event.target.files[0],
loaded: 0,
})
}

onClickHandler = () => {
const data = new FormData()
data.append('upload', this.state.imageURL)
data.append('companyName', this.state.companyName)
data.append('crn', this.state.crn)
data.append('address', this.state.address)
data.append('email', this.state.email)
data.append('dateFunded', this.state.dateFunded)
axios.post("https://animal-hello-3000.codio-box.uk/api/v1/applications", data, {
auth: {
username: 'andre',
password: '12345'
},
headers: {
'content-type': 'multipart/form-data'
const tailFormItemLayout = {
wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
}
const { TextArea } = Input
// Field Rules for input validation in accordance with server-side schema:
const titleRule=[
{required:true,message:'Please type the name of the compnay.',whitespace:false, min:5,max:150}
]
const crnRule=[
{required:true,message:'Please type the company reference number.',whitespace:false, min:8,max:8}
]
const addressRule=[
{required:true,message:'Please enter the address where the company is located.',whitespace:false, min:5,max:32}
]
const emailRule=[
{required:true,message:'Please enter the company email.',whitespace:false, min:5,max:32}
]
const dateFoundedRule=[
{required:true,message:'Please enter the foundation date of the company.',whitespace:false, min:5,max:32}
]
/**
* Form to add new listing:
*/
class NewApplication extends React.Component{
constructor(props){
super(props)
this.state={
companyName:"",
crn:"",
address:"",
email:"",
dateFunded:"",
imageURL:"",
redirect:null
}
})
.then(res => { // then print response status
console.log(res.statusText)
})
}

render(){
return (
<Form {...formItemLayout}>
<Title level={2}> Insert a new application</Title>
<Form.Item name="companyName" label="Company Name">
<Input onChange={this.handleCompanyNameChange}/>
</Form.Item>
<Form.Item name="crn" label="Company Registration Number">
<Input onChange={this.handleCRNChange}/>
</Form.Item>
<Form.Item name="address" label="Address">
<Input onChange={this.handleAddressChange}/>
</Form.Item>
<Form.Item name="email" label="Email">
<Input onChange={this.handleEmailChange}/>
</Form.Item>
<Form.Item name="dateFunded" label="Company Foundation Date">
<Input onChange={this.handleDateFoundedChange}/>
</Form.Item>
<Form.Item label="Image">
<Input type="file" name="file" onChange={this.handleImageChange}/>
</Form.Item>
<Button type="button" onClick={this.onClickHandler}>Submit</Button>
</Form>
);
}

this.handleSubmit =this.handleSubmit.bind(this)
this.handleFile =this.handleFile.bind(this)
}
static contextType = UserContext
handleSubmit =(values)=>{
/**
* @param {Object} values obtained from form fields
*/
// creating form-data object
const formData =new FormData()
const {companyName,crn,address,email,dateFunded}=values
console.log(values)
const username=this.context.user.username
const password=this.context.user.password
console.log(values)
this.setState({companyName:companyName})
this.setState({crn:crn})
this.setState({address:address})
this.setState({email:email})
this.setState({dateFunded:dateFunded})
formData.append('companyName',this.state.companyName)
formData.append('crn',this.state.crn)
formData.append('address',this.state.address)
formData.append('email',this.state.email)
formData.append('dateFunded',this.state.dateFunded)
formData.append('imageURL',this.state.upload,this.state.imageURL.name)
fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{
method:"POST",
body:formData,
headers:{
"Authorization": "Basic " + btoa(username + ":" + password),
}
})
.then(status)
.then(json)
.then(()=>{
alert("Successfully added new listing")
this.setState({redirect:"/"})// change this to all users listings pages
})
.catch(err => {
alert("Error trying to add new listing")
console.log(err)
})
}
handleFile =(e)=>{
/**
* @param {object} e event to hanldle (file upload in this case)
* @return {null} nothing return but component state is changes
*/
let files = e.target.files[0]
console.log(files)
this.setState({upload:e.target.files[0]})
}
render(){
if (this.state.redirect) {
return <Redirect to={this.state.redirect} />
}
return(
<Form {... formItemLayout} onFinish={this.handleSubmit}>
<Form.Item name="companyName" label="Name of the Company" rules={titleRule}>
<Input />
</Form.Item>
<Form.Item name="crn" label="Company Reference Number" rules={crnRule}>
<TextArea showCount={true} maxLength={8}/>
</Form.Item>
<Form.Item name="address" label="Address" rules={addressRule}>
<TextArea showCount={true} maxLength={500}/>
</Form.Item>
<Form.Item name="email" label="Email" rules={emailRule}>
<TextArea showCount={true} maxLength={500}/>
</Form.Item>
<Form.Item name="dateFunded" label="Foundation Date" rules={dateFoundedRule}>
<TextArea showCount={true} maxLength={500}/>
</Form.Item>
<Form.Item name="imageURL" label="Image">
<Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">Add new listing</Button>
</Form.Item>
</Form>
)
}
}


export default NewApplication;
export default NewApplication
23 changes: 4 additions & 19 deletions src/components/register.js
View file
Original file line number Diff line number Diff line change
@@ -62,19 +62,6 @@ const usernameRules = [
})
];

const validateAdminRules = [
{ required: false, message: 'This code is only needed for admins!', whitespace: true },
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('validate_admin') === 'shelter') {
//setFieldValue('role') = 'admin'; //change the default value of role from user to admin
return Promise.resolve();
}
return Promise.reject('Incorrect code');
}
})
]

/**
* Registration form component for app signup.
*/
@@ -100,11 +87,13 @@ class RegistrationForm extends React.Component {
.then(data => {
// TODO: display success message and/or redirect
console.log(data);
alert("User added")
alert("User added!")
this.setState({redirect:"/"})
})
.catch(err => {
// TODO: show nicely formatted error message and clear form
alert("Error adding user");
alert("Error adding user!");
console.log('Register failed');
});
};

@@ -137,10 +126,6 @@ class RegistrationForm extends React.Component {
<Input.Password />
</Form.Item>

<Form.Item name="validate_admin" label="Sign up code" rules={validateAdminRules} >
<Input />
</Form.Item>

<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">
Register

0 comments on commit fd4ff0b

Please sign in to comment.