From a79d2686f73254dd4030489bf755f5f72fbe8f54 Mon Sep 17 00:00:00 2001 From: Andre Emiliano Date: Thu, 17 Jun 2021 10:35:22 +0000 Subject: [PATCH] Changed forms and other small changes --- public/index.html | 2 +- src/components/.newApplication.js.swp | Bin 0 -> 16384 bytes src/components/application.js | 23 +++---- src/components/applicationcard.js | 1 - src/components/applicationicon.js | 90 -------------------------- src/components/editApplication.js | 52 ++++++++------- src/components/homegrid.js | 18 ++++-- src/components/newApplication.js | 37 ++++++----- src/utilities/requestHandlers.js | 2 +- 9 files changed, 74 insertions(+), 151 deletions(-) create mode 100644 src/components/.newApplication.js.swp delete mode 100644 src/components/applicationicon.js diff --git a/public/index.html b/public/index.html index f5b5090..288f0bb 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Dog Shelter + Trading License Department diff --git a/src/components/.newApplication.js.swp b/src/components/.newApplication.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..99d899560b819b894adec64701fd318508a76f8c GIT binary patch literal 16384 zcmeHOONb;%8BW({@6!h;%Od=nbLi^c?9A?&ot+`6YVGNr#*x{Xp?i8f41;E8Mpb1` zR%V(JIo)MZ>UvOC5WI*WdJq)!B0K0w*#*TFbUg@ypa+FLh>M`;Nj;vb;0541Z~}P!?I;I44+Ow9U=H}#+cfR3z;A(9fZM+Q@D;!XZUC2o4*_R@e`0Lp`24;I%G|vj(IHQF zJqlK}Ir(%qqdg)qj#*Fd2W(%b-INQzKkn)3hQ^YUL}}>h#&91YLmGdC4{F=3rmu!L7C|UED;_3e3C>7iDWDlgjkN}5pL6vQ(dRg ztBNKr*to+E8l&DSW!=lh8XY%AFkzmbfB;*!^yz|SKnzax_z3r8X3sk|yidAAKzq!zl4T zrLG?7HtFXa?z^PZQ?w%@rz15Boe{&kZp+lz;T(6Hyahw6H#B4prUSPp*_4~xiM+Ah zkCM@|j&Np+ju^W1Z2ijRt*d&K)n{^W=7&PW+_o$y^hZvxG-N>#EuC6kUN+Ues->N1 z-%M{>PV8H^R`65ao8t3EHKdkR^lhRDrfO#%%?;T0=EZp<8(?YqW|6p{#6D2RLzxY@ z2IkGws*;bW$3~7H%v4b+N0f#UB(R8?@_AY{mIq{WlW?X6-j6Gd>t;?kzJ#HityQIG z(lxBVQq`{h3A>VhwNX^5Xsf?9!)p}E^|JHdqYFYE8#tywCAlpfTCQEKLfwPha)OlA zriRQDr7`!Elt>e7UzpP7&BD%0E6-{a^Wl&hMb=D>!m%IT|D-0k0d0+(7DKUU)EMt& z4a~HSwIQEi)RSIsBY*2ub|BqV!Z5kvA7$YsH0e<0(QDqIv4G@`|8nm5v#wD~IDQCs z)lZ_4Y7J`>3%qL4n057A>CVU(aQ3DX9M>x+jP zt17|V@iDz+Vx@MiNFl|6q{He}y%L_nIoP_Md$npnkY?nGncY|Kg^9})*-Y_Bi$0K6 z8SYG;l2$Fwy~?TaG{%l2PNFzhRheXxx*{r)Cz>0;LDQv~E2RXhh7aVVuA-Xj=u}-j zMbmQR7nS84v3}Z`9Mv0|)MApbPo`K5JzFFxGe&S)@TvCvm4IQ%C+rOvR^uUqalmP+ zC50qq6!ledZtdp0u{ZPuQ=2cl?*yC~H1b3Hv@vq_?NcYGxRfiWr=nXn#k|clV7=@2 zDo5TSsUf=SZdK{~>o6aC+8eTj)peG8tRTV$gn4%@N8Z@INFq16GuEzP}47ZQHyiLnAHHeR@%#~-V%xBQx)X2Mmj|`+Ez987> zqBD*laZl|vGv9JtcL(}7DH~QZFK~8PaHx#UN;ASpm){V?$J|c@l-$hswdg}R^m#CY zd+Im}$y@GTG@94Svf0McAi3!*%bTW^3P13L&$uN$1LNW&YLlPvT3tzokR2p#x(dKpaX2utSd6tBvw;r&Wb{!! zHDTq!Gp~UluTJX3)YEG^(*+p;#%CQ#Uj4~N;280{<;jr`qrG)RBm|^J2xLkKSX^Y` zKn#16)62`#x@@&0O(vWQXQ*gKDc(jED3Qf=O5|y`H&I2a$j6i#MkB?4lfxT^8gi+Ls2qk0 z3|BFSDdzcx`XBQ%^E`{nHX6x{8XJ+C)Fl>*Fu)| EA4F1o_W%F@ literal 0 HcmV?d00001 diff --git a/src/components/application.js b/src/components/application.js index 2086539..d23ace2 100644 --- a/src/components/application.js +++ b/src/components/application.js @@ -1,10 +1,10 @@ import React from 'react'; import { withRouter } from 'react-router'; -import { Image, Row, Col, Typography, Space, Button } from 'antd' -import ApplicationIcon from './applicationicon'; +import { Image, Row, Col, Typography, Space, Button } from 'antd'; import { status, json } from '../utilities/requestHandlers'; import UserContext from '../contexts/user'; +import {useContext} from 'react'; const { Title, Paragraph } = Typography; @@ -22,8 +22,15 @@ class Application extends React.Component { componentDidMount() { const id = this.props.match.params.id; // available using withRouter() - - fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`) + const username = this.context.user.username + const password = this.context.user.password + const url = "https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}" + fetch(url, { + method: "GET", + headers: { + "Authorization": "Basic " + btoa(username + ":" + password) + }, + }) .then(status) .then(json) .then(application => { @@ -60,19 +67,13 @@ class Application extends React.Component { //Error Here!! Change the user.role to a valid verification let adminSpace = - if(this.context.user.loggedIn){ if(this.context.user.loggedIn){ adminSpace = - } } - if (!application) { - return

Loading applications...

- } - return( //add {adminSpace} here
@@ -84,7 +85,7 @@ class Application extends React.Component { Company Registration Number: {application.crn} Address: {application.address} Email: {application.email} - Funded in: {application.dateFunded} + Founded in: {application.dateFunded} Created In: {application.dateCreated} Status: {application.status} diff --git a/src/components/applicationcard.js b/src/components/applicationcard.js index 944528c..e40bf22 100644 --- a/src/components/applicationcard.js +++ b/src/components/applicationcard.js @@ -1,6 +1,5 @@ import React from 'react'; import { Card } from 'antd'; -import ApplicationIcon from './applicationicon'; import NavImage from './navimage'; import {Link} from "react-router-dom"; diff --git a/src/components/applicationicon.js b/src/components/applicationicon.js deleted file mode 100644 index 09f9905..0000000 --- a/src/components/applicationicon.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; - -import LikeOutlined from '@ant-design/icons/LikeOutlined'; -import LikeFilled from '@ant-design/icons/LikeFilled'; - -import { status, json } from '../utilities/requestHandlers'; - -/** - * @typedef {"filled" | "outlined"} theme - * @typedef {"like"} iconType - */ - -/** - * Determine the icon to be displayed - * - * @param {theme} theme - design of icon - * @param {iconType} iconType - icon to show - * @returns {Object} - the correct Ant Design icon component - */ -function getIcon (theme, iconType) { - let Icon; - - if (theme === 'filled') { - Icon = LikeFilled - } else if (theme === 'outlined') { - Icon = LikeOutlined - } - return Icon; -} - -class ApplicationIcon extends React.Component { - constructor(props){ - super(props); - this.state = { - selected: props.selected, - count: 0 - }; - this.onClick = this.onClick.bind(this); - } - - onClick(){ - if (this.props.viewOnly) { - console.log('This icon is view only: preventing update'); - return; - } - //reverse the selected state with every click - this.setState({selected: !this.state.selected}); - } - - componentDidMount() { - if (!this.props.countLink) return; // prevent fetch on parent mount - fetch(this.props.countLink) - .then(status) - .then(json) - .then(count => { - this.setState({count:count}) - }) - .catch(err => { - console.log(`${this.props.type} icon error for application ${this.props.id}`) - }); - } - - componentDidUpdate(prevProps, prevState){ - if (prevState.selected !== this.state.selected) { - //run the handler passed in by the parent component - this.props.handleToggle(this.state.selected); - } - } - - render(){ - const theme = this.state.selected ? 'filled' : 'outlined'; - const iconType = this.props.type; - const Icon = getIcon(theme, iconType); - - //return a span that contains the desired icon - //and a space then the counter - //if the icon is clicked we will run onClick handler - - return ( - - - {this.state.count} - - ); - } -} - -export default ApplicationIcon; diff --git a/src/components/editApplication.js b/src/components/editApplication.js index f881180..af8b668 100644 --- a/src/components/editApplication.js +++ b/src/components/editApplication.js @@ -1,4 +1,4 @@ -import {Form, Input, Button, Row,Col} from 'antd' +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' @@ -15,8 +15,7 @@ class EditApplication extends React.Component{ constructor(props){ super(props) this.state={ - imageURL:null, - redirect:null + imageURL:null } this._onFinish =this._onFinish.bind(this) this._onCancel =this._onCancel.bind(this) @@ -41,26 +40,25 @@ class EditApplication extends React.Component{ 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 + values.id=this.context.ID if (!companyName===true) { - values.companyName=this.context.Listing_to_update.companyName + values.companyName=this.context.companyName } if (!crn===true) { - values.crn=this.context.Listing_to_update.crn + values.crn=this.context.crn } if (!address===true) { - values.address=this.context.Listing_to_update.address + values.address=this.context.address } if (!email===true) { - values.email=this.context.Listing_to_update.email + values.email=this.context.email } if (!dateFunded===true) { - values.dateFunded=this.context.Listing_to_update.dateFunded + values.dateFunded=this.context.dateFunded } console.log("after if statement") console.log(values) - this.context.updateListing(values) + this.context.application(values) const formData= new FormData formData.append('id',values.id) @@ -69,8 +67,8 @@ class EditApplication extends React.Component{ 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) + if (this.state.imageURL) { + formData.append('imageURL',this.state.imageURL) } @@ -84,40 +82,44 @@ class EditApplication extends React.Component{ .then(status) .then(json) .then(()=>{ - this.setState({redirect:`/{this.context.Listing_to_update.id}`}) - alert("Successfully updated listing") + this.setState({redirect:`/{this.context.id}`}) + alert("Successfully updated application") }) .catch(console.error()) } render(){ - if (this.state.redirect) { - return - } return( <> -

Updating listing

+

Update Application
- + - + - + - + - + - + /* Add select for the application status + + + */ + diff --git a/src/components/homegrid.js b/src/components/homegrid.js index 74f7bf2..1207ce5 100644 --- a/src/components/homegrid.js +++ b/src/components/homegrid.js @@ -3,8 +3,12 @@ import { Col, Row } from 'antd'; import ApplicationCard from './applicationcard'; import { status, json } from '../utilities/requestHandlers'; import { withRouter } from 'react-router-dom'; +import UserContext from '../contexts/user'; +import {useContext} from 'react'; class HomeGrid extends React.Component { + + static contextType = UserContext; constructor(props) { super(props); @@ -13,11 +17,18 @@ class HomeGrid extends React.Component { } } + componentDidMount() { + const username = this.context.user.username + const password = this.context.user.password let url = "https://animal-hello-3000.codio-box.uk/api/v1/applications" if (this.props.query) {url = `https://animal-hello-3000.codio-box.uk/api/v1/applications?query=${this.props.query}`} - console.log(url) - fetch(url) + fetch(url, { + method: "GET", + headers: { + "Authorization": "Basic " + btoa(username + ":" + password) + }, + }) .then(status) .then(json) .then(data => { @@ -32,9 +43,6 @@ class HomeGrid extends React.Component { render() { if (!this.state.applications.length) { - if(!this.state.found){ - return

No applications were found. Refresh the page or check your connection!

- } return

Loading applications...

} const applicationList = this.state.applications.map(application => { diff --git a/src/components/newApplication.js b/src/components/newApplication.js index 4eb5f45..e059413 100644 --- a/src/components/newApplication.js +++ b/src/components/newApplication.js @@ -1,6 +1,6 @@ import React from 'react' import UserContext from '../contexts/user' -import { Form, Input, Button,Upload } from 'antd' +import { Form, Input, Button, Upload, Row,Col, DatePicker } from 'antd' import { status, json } from '../utilities/requestHandlers' import { Redirect } from 'react-router-dom' const formItemLayout = { @@ -25,10 +25,10 @@ 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} + {required:true,message:'Please enter the foundation date of the company.',whitespace:false} ] /** - * Form to add new listing: + * Form to add new application: */ class NewApplication extends React.Component{ constructor(props){ @@ -39,8 +39,7 @@ class NewApplication extends React.Component{ address:"", email:"", dateFunded:"", - imageURL:"", - redirect:null + imageURL:"" } this.handleSubmit =this.handleSubmit.bind(this) this.handleFile =this.handleFile.bind(this) @@ -67,7 +66,7 @@ class NewApplication extends React.Component{ 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) + formData.append('imageURL',this.state.imageURL) fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{ method:"POST", body:formData, @@ -78,11 +77,11 @@ class NewApplication extends React.Component{ .then(status) .then(json) .then(()=>{ - alert("Successfully added new listing") - this.setState({redirect:"/"})// change this to all users listings pages + alert("Successfully added new application") + this.setState({redirect:"/"})// change this to all users applications pages }) .catch(err => { - alert("Error trying to add new listing") + alert("Error trying to add new application") console.log(err) }) } @@ -96,10 +95,13 @@ class NewApplication extends React.Component{ this.setState({upload:e.target.files[0]}) } render(){ - if (this.state.redirect) { - return - } return( + <> + + +

Create New Application

+ + @@ -113,16 +115,17 @@ class NewApplication extends React.Component{