From 3e7191958d95a87b4973806ca6f9d1f7ad6616ce Mon Sep 17 00:00:00 2001 From: Andre Emiliano Date: Wed, 30 Jun 2021 15:23:51 +0000 Subject: [PATCH] Changed forms to fix problems with Creating and Updating applications --- src/App.js | 8 +- src/components/{home.js => admin.js} | 12 +- src/components/application.js | 71 ++++--- src/components/applicationsForUsers.js | 8 +- src/components/editApplication.js | 244 ++++++++++--------------- src/components/homegrid.js | 5 - src/components/homescreen.js | 32 ++++ src/components/login.js | 2 +- src/components/nav.js | 22 +-- src/components/newApplication.js | 231 +++++++++++------------ 10 files changed, 295 insertions(+), 340 deletions(-) rename src/components/{home.js => admin.js} (83%) create mode 100644 src/components/homescreen.js diff --git a/src/App.js b/src/App.js index 7a7be76..04d8a96 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,8 @@ import Nav from './components/nav'; import Account from './components/account'; import Register from './components/register'; import Login from './components/login'; -import Home from './components/home'; +import Admin from './components/admin'; +import Home from './components/homescreen'; import Application from './components/application'; import ApplicationForUsers from './components/applicationsForUsers'; import NewApplication from './components/newApplication'; @@ -75,6 +76,7 @@ class App extends React.Component { + } exact/> } /> } /> } /> @@ -84,11 +86,11 @@ class App extends React.Component { } /> } /> - } exact /> + }/> - + diff --git a/src/components/home.js b/src/components/admin.js similarity index 83% rename from src/components/home.js rename to src/components/admin.js index 71c04e0..c25fd08 100644 --- a/src/components/home.js +++ b/src/components/admin.js @@ -8,12 +8,12 @@ const { Search } = Input; /** * @function - * @name Home - * Function to show the main page + * @name Admin + * Function to show the admin page * @param {object} props * @returns {object} Page Structure */ -function Home(props) { +function Admin(props) { const [search, setSearch] = useState(undefined); @@ -25,7 +25,7 @@ function Home(props) { * @returns {object} Output from the search */ function searchHandler(value) { - console.log("setting query" + value) + console.log("setting query") setSearch(value) } @@ -35,7 +35,7 @@ function Home(props) { TLD + subTitle="Admins can manage all applications from here."/> { - console.log("updated succesfully"); - console.log(data) - this.setState({redirect:"/"}) - }) - .catch(errorResponse => { - console.log('Update failed'); - alert(`Error: ${JSON.stringify(errorResponse)}`); - }); - }; - }; + edit = (values) =>{ //Edit application + const id = this.props.match.params.id; + console.log('Form data: ', values); + const {confirm, ...data} = values; + fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`, { + method: "PUT", + body: JSON.stringify(data), + headers: { + "Authorization": "Basic " + btoa(this.context.user.username + ":" + this.context.user.password), + "Content-Type": "application/json" + } + }) + .then(status) + .then(json) + .then(data => { + console.log(data); + alert("Application successfully updated and will be reviewed soon!") + }) + .catch(errorResponse => { + console.log(errorResponse) + }) + } /** * @function @@ -119,7 +113,7 @@ render() { //Error Here!! Change the user.role to a valid verification let adminSpace = - if(this.context.user.loggedIn){ //Add user.role so that only admins can change it! + if(this.context.user.role === "admin"){ //Add user.role so that only admins can change it! adminSpace = @@ -131,7 +125,7 @@ render() { { value: 'accepted', label: 'Accepted' }, { value: 'rejected', label: 'Rejected' }, ] - + /** Returns the data about the application */ return(
@@ -148,9 +142,15 @@ render() { Created In: {application.dateCreated} Status: {application.status}
- - + + + + + +
@@ -160,8 +160,7 @@ render() {
); - } - +} } export default withRouter(Application); diff --git a/src/components/applicationsForUsers.js b/src/components/applicationsForUsers.js index 66ba40d..b0180b6 100644 --- a/src/components/applicationsForUsers.js +++ b/src/components/applicationsForUsers.js @@ -31,7 +31,8 @@ class ApplicationForUsers extends React.Component { const id = this.props.match.params.id; // available using withRouter() const username = this.context.user.username const password = this.context.user.password - fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/myapplications/${id}`, { + const userid = this.context.user.ID + fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/myapplications/${userid}`, { method: 'GET', headers: { "Authorization": "Basic " + btoa(username + ":" + password) @@ -40,13 +41,10 @@ class ApplicationForUsers extends React.Component { .then(status) .then(json) .then(application => { - window.$id = id; - const id_user = id; - module.exports ={id_user}; this.setState({application:application}) }) .catch(err => { - console.log(`Fetch error for application ${id}`) + console.log(`Fetch error for application ${userid}`) }); }; diff --git a/src/components/editApplication.js b/src/components/editApplication.js index c02b345..d2dace8 100644 --- a/src/components/editApplication.js +++ b/src/components/editApplication.js @@ -1,149 +1,103 @@ -import {Form, Input, Button, Row, Col, Select} 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 +import React from 'react'; +import { status, json } from '../utilities/requestHandlers'; +import { Form, Input, Button, Typography } from 'antd'; +import UserContext from '../contexts/user'; + +const { Title } = Typography; + +const usernameRules= [ + {required: true, message: "The username field is empty", whitespace:true} +] + 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={ - imageURL:null - } - this._onFinish =this._onFinish.bind(this) - this._onCancel =this._onCancel.bind(this) - } - static contextType = UserContext - -/** - * @param {object} e event to hanldle (file upload in this case) - * @return {null} nothing return but component state is changes -*/ - handleFile =(e)=>{ - 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("Before IF -statement ") - console.log(values) - values.id=this.context.ID - if (!companyName===true) { - values.companyName=this.context.companyName - } - if (!crn===true) { - values.crn=this.context.crn - } - if (!address===true) { - values.address=this.context.address - } - if (!email===true) { - values.email=this.context.email - } - if (!dateFunded===true) { - values.dateFunded=this.context.dateFunded - } - console.log("after if statement") - console.log(values) - this.context.application(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.imageURL) { - formData.append('imageURL',this.state.imageURL) - } - - - 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.id}`}) - alert("Successfully updated application") - }) - .catch(console.error()) - - } - -/** Form to get the input values to edit the application */ - render(){ - return( - <> - - -

Update Application

- - -
- - - - - - - - - - - - - - - - /* Add select for the application status - - - */ - - - - - - - - {/* */} - - - - - - - - - - - -
- - ) - } -} -export default EditApplication \ No newline at end of file + wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } }, +}; + +class EditForm extends React.Component { + + static contextType = UserContext; + + constructor(props) { + super(props); + this.onFinish = this.onFinish.bind(this) + this.state = { + application: {} + } + } + + render() { + + if (!this.context.user.loggedIn) { + return ( + You must login to view this page. + ) + } else { + console.log("hello" + this.state.application.tradeName) + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ); + } + }; + + onFinish = (values) => { + console.log('Form data: ', values); + const {confirm, ...data} = values; + fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${this.state.application.ID}`, { + method: "PUT", + body: JSON.stringify(data), + headers: { + "Authorization": "Basic " + btoa(this.context.user.username + ":" + this.context.user.password), + "Content-Type": "application/json" + } + }) + .then(status) + .then(json) + .then(data => { + console.log(data); + alert("Application successfully updated and will be reviewed soon!") + this.props.history.push('/') + }) + .catch(errorResponse => { + console.log(errorResponse) + alert(errorResponse) + }) + } +}; + +export default EditForm; \ No newline at end of file diff --git a/src/components/homegrid.js b/src/components/homegrid.js index 7fa99e0..2e6ef98 100644 --- a/src/components/homegrid.js +++ b/src/components/homegrid.js @@ -41,11 +41,6 @@ class HomeGrid extends React.Component { }) .catch(err => { console.log("Not found") - console.log(err) - console.log(err.status) - this.context.errorCode = err.status - this.setState({ found: false}) - }); } diff --git a/src/components/homescreen.js b/src/components/homescreen.js new file mode 100644 index 0000000..e5772eb --- /dev/null +++ b/src/components/homescreen.js @@ -0,0 +1,32 @@ +import React, { useState } from 'react'; +import { PageHeader, Input, Button } from 'antd'; +import HomeGrid from './homegrid'; +import { Image } from 'antd' +import Icon from './icon.png'; +import { Redirect, Link } from 'react-router-dom'; + +const { Search } = Input; + +/** + * @function + * @name Home + * Function to show the main page + * @param {object} props + * @returns {object} Page Structure +*/ +function Home() { + return ( +
+
+ TLD +

Trading License Department

+

Here businesses can apply for trading licenses, in order to create or see your applications you must Login!

+

+ + +

+
+ ); +} + +export default Home; diff --git a/src/components/login.js b/src/components/login.js index b6ad002..074158c 100644 --- a/src/components/login.js +++ b/src/components/login.js @@ -61,7 +61,7 @@ class LoginForm extends React.Component { this.context.login(user); alert('Hello ' + username + '!') if (user.role === "admin"){ - this.setState({redirect:'/'}); + this.setState({redirect:'/adminSpace'}); } else{ this.setState({redirect:`/myapplication/${this.context.user.id}`}); diff --git a/src/components/nav.js b/src/components/nav.js index a25992a..0f22a64 100644 --- a/src/components/nav.js +++ b/src/components/nav.js @@ -11,24 +11,22 @@ class Nav extends React.Component { static contextType = UserContext; - //Change the new application section for admins only!! + //Change the Admin space section for admins only!! render() { - const { id_user } = require('./applicationsForUsers.js') - console.log(this.context.user.id) - const applicationID = this.props.ID; - console.log(applicationID) + console.log(this.context.user.role) return ( <>
- - Home - App + + Home Login Register - Messages - Account - Add Application - Logout + Account + My Application + Add Application + Chat + Admin + Logout ) diff --git a/src/components/newApplication.js b/src/components/newApplication.js index 7c6c306..68e9bf6 100644 --- a/src/components/newApplication.js +++ b/src/components/newApplication.js @@ -1,18 +1,15 @@ -import React from 'react' -import UserContext from '../contexts/user' -import { Form, Input, Button, Row,Col, DatePicker } from 'antd' -import { status, json } from '../utilities/requestHandlers' +import React from 'react'; +import { status, json } from '../utilities/requestHandlers'; +import { Form, Input, Button, Typography, DatePicker } from 'antd'; +import UserContext from '../contexts/user'; -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 } }, -} -const { TextArea } = Input -// Field Rules for input validation in accordance with server-side schema: -const titleRule=[ +const { Title } = Typography; + +const usernameRules= [ + {required: true, message: "The username field is empty", whitespace:true} +] + +const nameRule=[ {required:true,message:'Please type the name of the compnay.',whitespace:false, min:5,max:150} ] const crnRule=[ @@ -25,121 +22,101 @@ 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} + {required:true,message:'Please enter the foundation date of the company.'} ] + +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 } }, +}; + /** - * Form to add new application: - */ -class NewApplication extends React.Component{ - - constructor(props){ - super(props) - this.state={ - companyName:"", - crn:"", - address:"", - email:"", - dateFunded:"", - imageURL:"" - } - this.handleSubmit =this.handleSubmit.bind(this) - this.handleFile =this.handleFile.bind(this) - } - static contextType = UserContext - -/** - * @function - * @name handleSubmit - * Function that handles the input of the user and passes that data to the DB - * @param {object} values - Values obtained from form fields - * @returns {object} Redirects user to the main page and creates the application +* Application form component for app submition. */ - handleSubmit =(values)=>{ - // 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.imageURL) - 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(application=>{ - alert("Successfully added new application") - this.setState({application:application}) - this.setState({redirect:"/"})// change this to all users applications pages - }) - .catch(err => { - alert("Error trying to add new application") - console.log(err) - }) - } + +class NewApplication extends React.Component { + + static contextType = UserContext; + + constructor(props) { + super(props); + this.onFinish = this.onFinish.bind(this) + } -/** - * @function - * @name handleFile - * @param {object} e event to hanldle (file upload in this case) - * @return {null} nothing return but component state is changes -*/ - handleFile =(e)=>{ - let files = e.target.files[0] - console.log(files) - this.setState({upload:e.target.files[0]}) - } + state = {redirect: null} -/** Form to get the input values to create the application */ - render(){ - return( - <> - - -

Create New Application

- - -
- - - - -