From 9d4b5f9976fc4acb148f3c4cab935d49796e44d8 Mon Sep 17 00:00:00 2001
From: Andre Emiliano <novaisea@coventry.ac.uk>
Date: Thu, 13 May 2021 15:47:40 +0000
Subject: [PATCH] Changed the items in the menu and added minor changes to the
 code

---
 package-lock.json          |  17 ++++++
 package.json               |   1 +
 src/App.js                 |   6 ++
 src/components/editDog.js  | 114 +++++++++++++++++++++++++++++++++++++
 src/components/home.js     |  15 +++--
 src/components/homegrid.js |  27 ++++++---
 src/components/messages.js |  11 ++++
 src/components/nav.js      |  44 ++++----------
 src/components/newDog.js   | 105 ++++++++++++++++++++++++++++++++++
 9 files changed, 296 insertions(+), 44 deletions(-)
 create mode 100644 src/components/editDog.js
 create mode 100644 src/components/messages.js
 create mode 100644 src/components/newDog.js

diff --git a/package-lock.json b/package-lock.json
index 887a629..ff4e0ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "antd": "^4.7.3",
+        "axios": "^0.21.1",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-router-dom": "^5.2.0",
@@ -3327,6 +3328,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -22838,6 +22847,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.0.2.tgz",
       "integrity": "sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
diff --git a/package.json b/package.json
index cff7a70..31864fe 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.7.3",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
diff --git a/src/App.js b/src/App.js
index ad88094..d05b286 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,9 @@ import Register from './components/register';
 import Login from './components/login';
 import Home from './components/home';
 import Dog from './components/dog';
+import NewDog from './components/newDog';
+import EditDog from './components/editDog';
+import Messages from './components/messages';
 import Uploader from './components/upload';
 
 import UserContext from './contexts/user';
@@ -74,6 +77,9 @@ class App extends React.Component {
               <Route path="/login" children={<Login />} />
               <Route path="/upload" children={<Uploader />} />
               <Route path="/dog/:id"  children={<Dog />} />
+							<Route path="/newdog" children={<NewDog />} />
+							<Route path="/edit/:id" component={EditDog} />
+							<Route path="/messages" children={<Messages />} />
               <Route path="/" children={<Home />} exact />
             </Switch>
           </Content>
diff --git a/src/components/editDog.js b/src/components/editDog.js
new file mode 100644
index 0000000..a38930d
--- /dev/null
+++ b/src/components/editDog.js
@@ -0,0 +1,114 @@
+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;
+
+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 EditDog extends React.Component {
+  
+  constructor(props) {
+      super(props);
+      this.state = {
+        selectedFile: null
+      }
+
+  }
+  
+  componentDidMount(){
+    this.setState({
+      dogID: this.props.match.params.id
+    })
+  }
+  
+  handleBreedChange=event=>{
+    this.setState({
+      breed: event.target.value
+    })
+  }
+  
+  handleAgeChange=event=>{
+    this.setState({
+      age: event.target.value
+    })
+  }
+  
+  handleSizeChange=event=>{
+    this.setState({
+      size: event.target.value
+    })
+  }
+  
+  handleDescriptionChange=event=>{
+    this.setState({
+      description: event.target.value
+    })
+  }
+  
+  handleImageChange=event=>{
+    this.setState({
+      selectedFile: event.target.files[0],
+      loaded: 0,
+    })
+  }
+  
+  onClickHandler = () => {
+    const data = new FormData() 
+    if(this.state.selectedFile){data.append('upload', this.state.selectedFile)}
+    if(this.state.breed){data.append('breed', this.state.breed)}
+    if(this.state.age){data.append('age', this.state.age)}
+    if(this.state.size){data.append('size', this.state.size)}
+    if(this.state.description){data.append('description', this.state.description)}
+    axios.put(`https://animal-hello-3000.codio-box.uk/api/v1/dogs/${this.state.dogID}`, data, { 
+      auth: {
+              username: 'daniel',
+              password: 'abc'
+        },
+      headers: {
+            'content-type': 'multipart/form-data'
+        }
+      })
+      .then(res => { // then print response status
+        console.log(res.statusText)
+        this.props.history.push('/')
+      })
+  }
+  
+  render(){
+    return ( 
+      <Form {...formItemLayout}>
+        <Title level={2}> Edit dog</Title>
+        <Form.Item name="breed" label="Breed">
+          <Input onChange={this.handleBreedChange}/>
+        </Form.Item>
+        <Form.Item name="age" label="Age">
+          <Input onChange={this.handleAgeChange}/>
+        </Form.Item>
+        <Form.Item name="size" label="Size">
+          <Input onChange={this.handleSizeChange}/>
+        </Form.Item>
+        <Form.Item name="description" label="Description">
+          <TextArea rows={3} onChange={this.handleDescriptionChange}/>
+        </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>
+    ); 
+  }
+
+}
+
+
+export default withRouter(EditDog);
\ No newline at end of file
diff --git a/src/components/home.js b/src/components/home.js
index 4fc36eb..c026eee 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { PageHeader, Input } from 'antd';
 import HomeGrid from './homegrid';
 
@@ -6,19 +6,26 @@ const { Search } = Input;
 
 function Home(props) {
 
+	const [search, setSearch] = useState(undefined);
+  
+  function searchHandler(value) {
+    console.log("setting query")
+    setSearch(value)
+  }
+	
   return (
       <div className="site-layout-content">
         <div style={{ padding: '2% 20%' }}>
-          <Search placeholder="input search text"
+          <Search placeholder="Search dogs"
             allowClear
             enterButton="Search"
             size="large"
-            onSearch={String}/>
+            onSearch={searchHandler}/>
           <PageHeader className="site-page-header"
             title="Dog Shelter"
             subTitle="Welcome to the website where you will find your new friend!"/>
         </div>  
-        <HomeGrid />
+        <HomeGrid key={search} query={search}/>
       </div>
   );
 }
diff --git a/src/components/homegrid.js b/src/components/homegrid.js
index 85ad6f2..2d3aeaa 100644
--- a/src/components/homegrid.js
+++ b/src/components/homegrid.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Col, Row } from 'antd';
 import DogCard from './dogcard';
 import { status, json } from '../utilities/requestHandlers';
+import { withRouter } from 'react-router-dom';
 
 class HomeGrid extends React.Component {
 
@@ -11,22 +12,32 @@ class HomeGrid extends React.Component {
       dogs: []
     }
   }
-
-  componentDidMount() {
-    fetch('https://animal-hello-3000.codio-box.uk/api/v1/dogs')
+	
+	componentDidMount() {
+    let url = "https://animal-hello-3000.codio-box.uk/api/v1/dogs"
+    if (this.props.query) {url = `https://animal-hello-3000.codio-box.uk/api/v1/dogs?query=${this.props.query}`}
+    console.log(url)
+    fetch(url)
     .then(status)
     .then(json)
     .then(data => {
       this.setState({ dogs: data })
     })
-    .catch(err => console.log("Error fetching dogs"));
+    .catch(err => {
+        console.log("Error fetching dogs")
+        this.setState({ found: false})
+        
+    });
   }
 
   render() {
     if (!this.state.dogs.length) {
-      return <h3>Loading dogs...</h3>
+      if(!this.state.found){
+        return <h3>No dogs were found. Refresh the page or check your connection!</h3>
+      }
+      return <h4>Loading dogs...</h4>
     }
-    const cardList = this.state.dogs.map(dog => {
+    const dogList = this.state.dogs.map(dog => {
       return (
         <div style={{padding:"10px"}} key={dog.ID}>
           <Col span={6}>
@@ -37,10 +48,10 @@ class HomeGrid extends React.Component {
     });
     return (
       <Row type="flex" justify="space-around">
-        {cardList}
+        {dogList}
       </Row>
     );
   }
 }
 
-export default HomeGrid;
+export default withRouter(HomeGrid);
diff --git a/src/components/messages.js b/src/components/messages.js
new file mode 100644
index 0000000..22d56ea
--- /dev/null
+++ b/src/components/messages.js
@@ -0,0 +1,11 @@
+import React from 'react'; 
+
+function Messages(props) {
+  return ( 
+    <>
+      <p>This is where the messages page is displayed</p> 
+    </>
+  ); 
+}
+
+export default Messages;
\ No newline at end of file
diff --git a/src/components/nav.js b/src/components/nav.js
index 24d5e65..500c1ba 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -6,39 +6,19 @@ import UserContext from '../contexts/user';
 
 function Nav(props) {
   const context = useContext(UserContext);
-  const loggedIn = context.user.loggedIn;
-  console.log(context);
-  let LoginNav;
-  if (!loggedIn) {
-    LoginNav = (
-      <>
-      <Menu.Item key="2">
-        <Link to="/register">Register</Link>
-      </Menu.Item>
-      <Menu.Item key="3">
-        <Link to="/login">Login</Link>
-      </Menu.Item>
-      </>
-    )
-  } else {
-    LoginNav = (
-      <>
-      <Menu.Item key="2"><Link to="/account">Account</Link></Menu.Item>
-      <Menu.Item key="3" onClick={context.logout}>
-        <Link to="/">Logout</Link>
-      </Menu.Item>
-      </>
-    )
-  }
   return (
-    <>
-    <div className="logo" />
-    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
-      <Menu.Item key="1"><Link to="/">Home</Link></Menu.Item>
-      {LoginNav}
-      <Menu.Item key="4"><Link to="/upload">Upload</Link></Menu.Item>
-    </Menu>
-    </>
+        <>
+          <div className="logo" />
+          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
+            <Menu.Item key="1"><Link to="/">Home</Link></Menu.Item>
+            <Menu.Item key="2" disabled={context.user.loggedIn}><Link to="/login">Login</Link></Menu.Item>
+            <Menu.Item key="3" disabled={context.user.loggedIn}><Link to="/register">Register</Link></Menu.Item>
+            <Menu.Item key="4" disabled={!context.user.loggedIn}><Link to="/messages">Messages</Link></Menu.Item> 
+            <Menu.Item key="5" disabled={!context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
+            <Menu.Item key="6" disabled={context.user.role!=='admin'}><Link to="/newdog">Add Dog</Link></Menu.Item>
+            <Menu.Item key="7" disabled={!context.user.loggedIn} onClick={context.logout}> <Link to="/">Logout</Link></Menu.Item>
+          </Menu>
+        </>
   );
 }
 
diff --git a/src/components/newDog.js b/src/components/newDog.js
new file mode 100644
index 0000000..fd1966e
--- /dev/null
+++ b/src/components/newDog.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import axios from 'axios';
+
+import { Upload, Form, Input, Button, Typography } from 'antd';
+const { Title } = Typography;
+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 NewDog extends React.Component {
+  
+  constructor(props) {
+      super(props);
+      this.state = {
+        selectedFile: null
+      }
+
+  }
+  handleBreedChange=event=>{
+    this.setState({
+      breed: event.target.value
+    })
+  }
+  
+  handleAgeChange=event=>{
+    this.setState({
+      age: event.target.value
+    })
+  }
+  
+  handleSizeChange=event=>{
+    this.setState({
+      size: event.target.value
+    })
+  }
+  
+  handleDescriptionChange=event=>{
+    this.setState({
+      description: event.target.value
+    })
+  }
+  
+  handleImageChange=event=>{
+    this.setState({
+      selectedFile: event.target.files[0],
+      loaded: 0,
+    })
+  }
+  
+  onClickHandler = () => {
+    const data = new FormData() 
+    data.append('upload', this.state.selectedFile)
+    data.append('breed', this.state.breed)
+    data.append('age', this.state.age)
+    data.append('size', this.state.size)
+    data.append('description', this.state.description)
+    axios.post("https://animal-hello-3000.codio-box.uk/api/v1/dogs", data, { 
+      auth: {
+              username: 'daniel',
+              password: 'abc'
+        },
+      headers: {
+            'content-type': 'multipart/form-data'
+        }
+      })
+      .then(res => { // then print response status
+        console.log(res.statusText)
+      })
+  }
+  
+  render(){
+    return ( 
+      <Form {...formItemLayout}>
+        <Title level={2}> Insert a new dog</Title>
+        <Form.Item name="breed" label="Breed">
+          <Input onChange={this.handleBreedChange}/>
+        </Form.Item>
+        <Form.Item name="age" label="Age">
+          <Input onChange={this.handleAgeChange}/>
+        </Form.Item>
+        <Form.Item name="size" label="Size">
+          <Input onChange={this.handleSizeChange}/>
+        </Form.Item>
+        <Form.Item name="description" label="Description">
+          <TextArea rows={3} onChange={this.handleDescriptionChange}/>
+        </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>
+    ); 
+  }
+
+}
+
+
+export default NewDog;
\ No newline at end of file