From c4bcdb892387cbb9ae5520289ef13132e3bf3282 Mon Sep 17 00:00:00 2001
From: Andre Emiliano <novaisea@coventry.ac.uk>
Date: Sun, 11 Apr 2021 16:07:17 +0000
Subject: [PATCH] Changed posts to dogs and connected BackEnd

---
 src/App.js                                 | 22 ++++++++++----
 src/components/bloggrid.js                 | 18 ++++++------
 src/components/{post.js => dog.js}         | 34 +++++++++++-----------
 src/components/{postcard.js => dogcard.js} | 16 +++++-----
 src/components/{postgrid.js => doggrid.js} | 28 +++++++++---------
 src/components/{posticon.js => dogicon.js} |  6 ++--
 src/components/home.js                     |  2 +-
 src/components/login.js                    |  2 +-
 src/components/register.js                 |  4 +--
 src/components/upload.js                   |  3 +-
 src/data/posts.json                        | 14 ---------
 src/data/postsList.json                    | 16 +---------
 12 files changed, 75 insertions(+), 90 deletions(-)
 rename src/components/{post.js => dog.js} (60%)
 rename src/components/{postcard.js => dogcard.js} (57%)
 rename src/components/{postgrid.js => doggrid.js} (65%)
 rename src/components/{posticon.js => dogicon.js} (92%)

diff --git a/src/App.js b/src/App.js
index 84eab8c..ad88094 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ import Account from './components/account';
 import Register from './components/register';
 import Login from './components/login';
 import Home from './components/home';
-import Post from './components/post';
+import Dog from './components/dog';
 import Uploader from './components/upload';
 
 import UserContext from './contexts/user';
@@ -24,11 +24,22 @@ class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      user: {loggedIn: false}
+      user: {loggedIn: false},
+			apiResponse: ""
     }
     this.login = this.login.bind(this);
     this.logout = this.logout.bind(this);
   }
+	
+	callAPI() {
+    fetch("https://animal-hello-3000.codio-box.uk/api/v1")
+        .then(res => res.text())
+        .then(res => this.setState({ apiResponse: res }));
+	}
+
+	componentWillMount() {
+    this.callAPI();
+	}
 
   login(user) {
     console.log("User is now being set on the context");
@@ -45,7 +56,8 @@ class App extends React.Component {
     const context = {
       user: this.state.user,
       login: this.login,
-      logout: this.logout
+      logout: this.logout,
+			apiResponse: this.apiResponse
     };
 
     return (
@@ -61,12 +73,12 @@ class App extends React.Component {
               <Route path="/register" children={<Register />} />
               <Route path="/login" children={<Login />} />
               <Route path="/upload" children={<Uploader />} />
-              <Route path="/post/:id" children={<Post />} />
+              <Route path="/dog/:id"  children={<Dog />} />
               <Route path="/" children={<Home />} exact />
             </Switch>
           </Content>
 
-          <Footer style={{ textAlign: 'center' }}>Created for Web API Development</Footer>
+          <Footer style={{ textAlign: 'center' }}>Created for Web API Development {this.state.apiResponse}</Footer>
 
         </Router>
       </UserContext.Provider>  
diff --git a/src/components/bloggrid.js b/src/components/bloggrid.js
index 275d122..82a5cba 100644
--- a/src/components/bloggrid.js
+++ b/src/components/bloggrid.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Col, Row } from 'antd';
-import PostCard from './postcard';
+import dogCard from './dogcard';
 import { status, json } from '../utilities/requestHandlers';
 
 class BlogGrid extends React.Component {
@@ -8,29 +8,29 @@ class BlogGrid extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      posts: []
+      dogs: []
     }
   }
 
   componentDidMount() {
-    fetch('http://localhost:3030/api/v1/dogs')
+    fetch('http://animal-hello-3000.codio-box.uk/api/v1/dogs')
     .then(status)
     .then(json)
     .then(data => {
-      this.setState({ posts: data })
+      this.setState({ dogs: data })
     })
     .catch(err => console.log("Error fetching dogs"));
   }
 
   render() {
-    if (!this.state.posts.length) {
-      return <h3>Loading posts...</h3>
+    if (!this.state.dogs.length) {
+      return <h3>Loading dogs...</h3>
     }
-    const cardList = this.state.posts.map(post => {
+    const cardList = this.state.dogs.map(dog => {
       return (
-        <div style={{padding:"10px"}} key={post.ID}>
+        <div style={{padding:"10px"}} key={dog.ID}>
           <Col span={6}>
-            <PostCard {...post} />
+            <dogCard {...dog} />
           </Col>
         </div>
       )
diff --git a/src/components/post.js b/src/components/dog.js
similarity index 60%
rename from src/components/post.js
rename to src/components/dog.js
index c72a23a..73b6321 100644
--- a/src/components/post.js
+++ b/src/components/dog.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import { withRouter } from 'react-router';
 import { Image, Row, Col, Typography } from 'antd'
-import PostIcon from './posticon';
+import DogIcon from './dogicon';
 import { status, json } from '../utilities/requestHandlers';
 
 const { Title, Paragraph } = Typography;
 
-class Post extends React.Component {
+class Dog extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      post: undefined
+      dog: undefined
     }
     this.toggleLike = this.toggleLike.bind(this);
   }
@@ -19,34 +19,34 @@ class Post extends React.Component {
   componentDidMount() {
     const id = this.props.match.params.id; // available using withRouter()
 
-    fetch(`http://localhost:3030/api/v1/dogs/${id}`)
+    fetch(`http://animal-hello-3000.codio-box.uk/api/v1/dogs/${id}`)
     .then(status)
     .then(json)
-    .then(post => {
-      this.setState({post:post})
+    .then(dog => {
+      this.setState({dog:dog})
     })
     .catch(err => {
-      console.log(`Fetch error for post ${id}`)
+      console.log(`Fetch error for dog ${id}`)
     });
   }
 
   toggleLike(isSelected) {
-    // Implement same functionality as in <PostCard>
+    // Implement same functionality as in <DogCard>
     // To avoid repetition (DRY principle) the handler for this
-    // and for <PostCard> should be defined in a single place
+    // and for <DogCard> should be defined in a single place
     // and imported into both components.
     console.log('like was toggled');
   }
 
   render() {
-    if (!this.state.post) {
-      return <h3>Loading post...</h3>
+    if (!this.state.dog) {
+      return <h3>Loading dog...</h3>
     }
-    const post = this.state.post;
+    const dog = this.state.dog;
 
     const icons = (
       <div>
-        Likes : <PostIcon type="like" count={post.likes} selected={post.liked}
+        Likes : <DogIcon type="like" count={dog.likes} selected={dog.liked}
           handleToggle={this.toggleLike}/><br/>
       </div>
     );
@@ -55,11 +55,11 @@ class Post extends React.Component {
       <div>
         <Row type="flex" justify="space-around" align="middle">
           <Col span={6} align="center">
-            <Image width={200} alt="Post" src={post.imageURL} />
+            <Image width={200} alt="Dog" src={dog.imageURL} />
           </Col>
           <Col span={12}>
-            <Title>{post.title}</Title>
-            <Paragraph>{post.allText}</Paragraph>
+            <Title>{dog.title}</Title>
+            <Paragraph>{dog.allText}</Paragraph>
           </Col>
           <Col span={6} align="center">
             {icons}
@@ -71,4 +71,4 @@ class Post extends React.Component {
 
 }
 
-export default withRouter(Post);
+export default withRouter(Dog);
diff --git a/src/components/postcard.js b/src/components/dogcard.js
similarity index 57%
rename from src/components/postcard.js
rename to src/components/dogcard.js
index 9b0ed74..635ecb9 100644
--- a/src/components/postcard.js
+++ b/src/components/dogcard.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Card } from 'antd';
-import PostIcon from './posticon';
+import DogIcon from './dogicon';
 import NavImage from './navimage';
 
 const { Meta } = Card;
 
-class PostCard extends React.Component {
+class DogCard extends React.Component {
 
   constructor(props) {
     super(props);
@@ -13,21 +13,21 @@ class PostCard extends React.Component {
   }
 
   toggleLike(isSelected) {
-    console.log(`toggle LIKE on post ${this.props.ID}`);
+    console.log(`toggle LIKE on dog ${this.props.ID}`);
     console.log(`new value ${isSelected}`);
     // code can be added here to update the API with new liked status
   }
 
   render() {
-    const postID = this.props.ID;
+    const dogID = this.props.ID;
     return (
       <Card
         style={{ width: 320 }}
-        cover={<NavImage alt={`Post ${postID}`} src={this.props.imageURL} to={`/post/${postID}`} />}
+        cover={<NavImage alt={`Dog ${dogID}`} src={this.props.imageURL} to={`/dog/${dogID}`} />}
         hoverable={true}
         actions={[
-          <PostIcon type="like" countLink={this.props.links.likes} selected={this.props.liked}
-              handleToggle={this.toggleLike} id={postID}/>,
+          <DogIcon type="like" countLink={this.props.links.likes} selected={this.props.liked}
+              handleToggle={this.toggleLike} id={dogID}/>,
         ]}>
         
         <Meta title={this.props.title} description={this.props.summary} />
@@ -36,4 +36,4 @@ class PostCard extends React.Component {
   }
 }
 
-export default PostCard; 
+export default DogCard; 
diff --git a/src/components/postgrid.js b/src/components/doggrid.js
similarity index 65%
rename from src/components/postgrid.js
rename to src/components/doggrid.js
index 7524181..16ff66b 100644
--- a/src/components/postgrid.js
+++ b/src/components/doggrid.js
@@ -8,46 +8,46 @@ const grid = (
   <>
   <Row type="flex" justify="space-around">
     <Col span={6}>
-      <Link to="/post/1">
+      <Link to="/dog/1">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1024/400"/>} hoverable>
-          <Meta title="First Post" description="This is about something" />
+          <Meta title="First Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/post/2">
+      <Link to="/dog/2">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-          <Meta title="Second Post" description="This is about something" />
+          <Meta title="Second Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/post/3">
+      <Link to="/dog/3">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1026/400"/>}>
-          <Meta title="Third Post" description="This is about something" />
+          <Meta title="Third Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
   </Row>  
   <Row type="flex" justify="space-around">
     <Col span={6}>
-      <Link to="/post/4">
+      <Link to="/dog/4">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1027/400"/>}>
-          <Meta title="Fourth Post" description="This is about something" />
+          <Meta title="Fourth Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/post/5">
+      <Link to="/dog/5">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1028/400"/>}>
-          <Meta title="Fifth Post" description="This is about something" />
+          <Meta title="Fifth Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/post/6">
+      <Link to="/dog/6">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1029/400"/>}>
-          <Meta title="Sixth Post" description="This is about something" />
+          <Meta title="Sixth Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
@@ -55,8 +55,8 @@ const grid = (
   </>
 );
 
-function PostGrid(props) {
+function DogGrid(props) {
   return grid;
 }
 
-export default PostGrid;
+export default DogGrid;
diff --git a/src/components/posticon.js b/src/components/dogicon.js
similarity index 92%
rename from src/components/posticon.js
rename to src/components/dogicon.js
index d8390da..4615deb 100644
--- a/src/components/posticon.js
+++ b/src/components/dogicon.js
@@ -28,7 +28,7 @@ function getIcon (theme, iconType) {
   return Icon;
 }
   
-class PostIcon extends React.Component {
+class DogIcon extends React.Component {
   constructor(props){  
     super(props);  
     this.state = {
@@ -56,7 +56,7 @@ class PostIcon extends React.Component {
       this.setState({count:count})
     })
     .catch(err => {
-      console.log(`${this.props.type} icon error for post ${this.props.id}`)
+      console.log(`${this.props.type} icon error for dog ${this.props.id}`)
     });
   }
 
@@ -80,4 +80,4 @@ class PostIcon extends React.Component {
   }
 }
 
-export default PostIcon;
+export default DogIcon;
diff --git a/src/components/home.js b/src/components/home.js
index df445b6..9f37705 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -5,7 +5,7 @@ import BlogGrid from './bloggrid';
 const { Search } = Input;
 
 function Home(props) {
-  
+
   return (
       <div className="site-layout-content">
         <div style={{ padding: '2% 20%' }}>
diff --git a/src/components/login.js b/src/components/login.js
index 462ec84..ee288fe 100644
--- a/src/components/login.js
+++ b/src/components/login.js
@@ -39,7 +39,7 @@ class LoginForm extends React.Component {
     login(values) {
         const {username, password} = values;
         console.log(`logging in user: ${username}`)
-        fetch('http://localhost:3030/api/v1/users/login', {
+        fetch('http://animal-hello-3000.codio-box.uk/api/v1/users', {
             method: "POST",
             headers: {
                 "Authorization": "Basic " + btoa(username + ":" + password)
diff --git a/src/components/register.js b/src/components/register.js
index 9deeabf..4b29708 100644
--- a/src/components/register.js
+++ b/src/components/register.js
@@ -51,8 +51,8 @@ class RegistrationForm extends React.Component {
   onFinish = (values) => {
     console.log('Received values of form: ', values);
     const { confirm, ...data } = values;  // ignore the 'confirm' value in data sent
-    fetch('http://localhost:3030/api/v1/users', {
-        method: "POST",
+    fetch('http://animal-hello-3000.codio-box.uk/api/v1/users', {
+        method: "dog",
         body: JSON.stringify(data),
         headers: {
             "Content-Type": "application/json"
diff --git a/src/components/upload.js b/src/components/upload.js
index 844db6e..38a781b 100644
--- a/src/components/upload.js
+++ b/src/components/upload.js
@@ -8,9 +8,10 @@ function Uploader(props) {
   // but for the example we just use a fixed set of props for the ant.design component.
   const uploadProps = {
     name: 'upload',
-    action: 'http://localhost:3030/api/v1/images',
+    action: 'http://animal-hello-3000.codio-box.uk/api/v1/images',
     headers: {
       authorization: 'Basic ' + btoa("bob:password")  // don't hard code credentials, this is just a demo
+																											//btoa(username + ":" + password)
     },
     onChange(info) {
       if (info.file.status !== 'uploading') {
diff --git a/src/data/posts.json b/src/data/posts.json
index bdf65e0..2a1a14c 100644
--- a/src/data/posts.json
+++ b/src/data/posts.json
@@ -5,8 +5,6 @@
 		"allText": "Morbi vehicula augue mi, sed vestibulum turpis tempor vitae. Sed vitae tortor non eros suscipit rutrum ut nec nunc. Duis sed enim et lacus finibus dictum. Nulla lacinia euismod est. Mauris gravida gravida magna, a faucibus arcu vestibulum id. Donec id massa ut mauris mollis sodales. Aenean eget nisl urna. Donec risus orci, pharetra vel placerat nec, gravida at lacus.\nIn hac habitasse platea dictumst. Phasellus viverra nisl vitae iaculis commodo. Phasellus commodo massa eu est tincidunt posuere. Nullam pellentesque lacinia pharetra.",
 		"imgURL": "https://picsum.photos/id/1044/400",
 		"likes": 14,
-		"comments": 4,
-		"pinned": false,
 		"liked": true
 	},
 	"2": {
@@ -15,8 +13,6 @@
 		"allText": "Morbi vehicula augue mi, sed vestibulum turpis tempor vitae. Sed vitae tortor non eros suscipit rutrum ut nec nunc. Duis sed enim et lacus finibus dictum. Nulla lacinia euismod est. Mauris gravida gravida magna, a faucibus arcu vestibulum id. Donec id massa ut mauris mollis sodales. Aenean eget nisl urna. Donec risus orci, pharetra vel placerat nec, gravida at lacus.\nIn hac habitasse platea dictumst. Phasellus viverra nisl vitae iaculis commodo. Phasellus commodo massa eu est tincidunt posuere. Nullam pellentesque lacinia pharetra.",
 		"imgURL": "https://picsum.photos/id/1045/400",
 		"likes": 5,
-		"comments": 3,
-		"pinned": true,
 		"liked": false
 	},
 	"3": {
@@ -25,8 +21,6 @@
 		"allText": "Morbi vehicula augue mi, sed vestibulum turpis tempor vitae. Sed vitae tortor non eros suscipit rutrum ut nec nunc. Duis sed enim et lacus finibus dictum. Nulla lacinia euismod est. Mauris gravida gravida magna, a faucibus arcu vestibulum id. Donec id massa ut mauris mollis sodales. Aenean eget nisl urna. Donec risus orci, pharetra vel placerat nec, gravida at lacus.\nIn hac habitasse platea dictumst. Phasellus viverra nisl vitae iaculis commodo. Phasellus commodo massa eu est tincidunt posuere. Nullam pellentesque lacinia pharetra.",
 		"imgURL": "https://picsum.photos/id/1051/400",
 		"likes": 7,
-		"comments": 2,
-		"pinned": false,
 		"liked": false
 	},
 	"4": {
@@ -35,8 +29,6 @@
 		"allText": "Morbi vehicula augue mi, sed vestibulum turpis tempor vitae. Sed vitae tortor non eros suscipit rutrum ut nec nunc. Duis sed enim et lacus finibus dictum. Nulla lacinia euismod est. Mauris gravida gravida magna, a faucibus arcu vestibulum id. Donec id massa ut mauris mollis sodales. Aenean eget nisl urna. Donec risus orci, pharetra vel placerat nec, gravida at lacus.\nIn hac habitasse platea dictumst. Phasellus viverra nisl vitae iaculis commodo. Phasellus commodo massa eu est tincidunt posuere. Nullam pellentesque lacinia pharetra.",
 		"imgURL": "https://picsum.photos/id/1047/400",
 		"likes": 14,
-		"comments": 4,
-		"pinned": true,
 		"liked": true
 	},
 	"5": {
@@ -45,8 +37,6 @@
 		"allText": "Morbi vehicula augue mi, sed vestibulum turpis tempor vitae. Sed vitae tortor non eros suscipit rutrum ut nec nunc. Duis sed enim et lacus finibus dictum. Nulla lacinia euismod est. Mauris gravida gravida magna, a faucibus arcu vestibulum id. Donec id massa ut mauris mollis sodales. Aenean eget nisl urna. Donec risus orci, pharetra vel placerat nec, gravida at lacus.\nIn hac habitasse platea dictumst. Phasellus viverra nisl vitae iaculis commodo. Phasellus commodo massa eu est tincidunt posuere. Nullam pellentesque lacinia pharetra.",
 		"imgURL": "https://picsum.photos/id/1048/400",
 		"likes": 5,
-		"comments": 3,
-		"pinned": false,
 		"liked": false
 	},
 	"6": {
@@ -55,8 +45,6 @@
 		"allText": "Morbi vehicula augue mi, sed vestibulum turpis tempor vitae. Sed vitae tortor non eros suscipit rutrum ut nec nunc. Duis sed enim et lacus finibus dictum. Nulla lacinia euismod est. Mauris gravida gravida magna, a faucibus arcu vestibulum id. Donec id massa ut mauris mollis sodales. Aenean eget nisl urna. Donec risus orci, pharetra vel placerat nec, gravida at lacus.\nIn hac habitasse platea dictumst. Phasellus viverra nisl vitae iaculis commodo. Phasellus commodo massa eu est tincidunt posuere. Nullam pellentesque lacinia pharetra.",
 		"imgURL": "https://picsum.photos/id/1049/400",
 		"likes": 7,
-		"comments": 2,
-		"pinned": false,
 		"liked": false
 	},
 	"7": {
@@ -65,8 +53,6 @@
 		"allText": "Morbi vehicula augue mi, sed vestibulum turpis tempor vitae. Sed vitae tortor non eros suscipit rutrum ut nec nunc. Duis sed enim et lacus finibus dictum. Nulla lacinia euismod est. Mauris gravida gravida magna, a faucibus arcu vestibulum id. Donec id massa ut mauris mollis sodales. Aenean eget nisl urna. Donec risus orci, pharetra vel placerat nec, gravida at lacus.\nIn hac habitasse platea dictumst. Phasellus viverra nisl vitae iaculis commodo. Phasellus commodo massa eu est tincidunt posuere. Nullam pellentesque lacinia pharetra.",
 		"imgURL": "https://picsum.photos/id/1050/400",
 		"likes": 14,
-		"comments": 4,
-		"pinned": false,
 		"liked": false
 	}
 }
diff --git a/src/data/postsList.json b/src/data/postsList.json
index 92e0444..a5813c2 100644
--- a/src/data/postsList.json
+++ b/src/data/postsList.json
@@ -1,11 +1,9 @@
 [{
 		"id": 1,
-		"title": "article 1",
+		"title": "post 1",
 		"summary": "some desription about the article",
 		"imgURL": "https://picsum.photos/id/1044/400",
 		"likes": 14,
-		"comments": 4,
-		"pinned": false,
 		"liked": true
 	},
 	{
@@ -14,8 +12,6 @@
 		"summary": "some desription about the article",
 		"imgURL": "https://picsum.photos/id/1045/400",
 		"likes": 5,
-		"comments": 3,
-		"pinned": true,
 		"liked": false
 	},
 	{
@@ -24,8 +20,6 @@
 		"summary": "some desription about the article",
 		"imgURL": "https://picsum.photos/id/1051/400",
 		"likes": 7,
-		"comments": 2,
-		"pinned": false,
 		"liked": false
 	},
 	{
@@ -34,8 +28,6 @@
 		"summary": "some desription about the article",
 		"imgURL": "https://picsum.photos/id/1047/400",
 		"likes": 14,
-		"comments": 4,
-		"pinned": true,
 		"liked": true
 	},
 	{
@@ -44,8 +36,6 @@
 		"summary": "some desription about the article",
 		"imgURL": "https://picsum.photos/id/1048/400",
 		"likes": 5,
-		"comments": 3,
-		"pinned": false,
 		"liked": false
 	},
 	{
@@ -54,8 +44,6 @@
 		"summary": "some desription about the article",
 		"imgURL": "https://picsum.photos/id/1049/400",
 		"likes": 7,
-		"comments": 2,
-		"pinned": false,
 		"liked": false
 	},
 	{
@@ -64,8 +52,6 @@
 		"summary": "some desription about the article",
 		"imgURL": "https://picsum.photos/id/1050/400",
 		"likes": 14,
-		"comments": 4,
-		"pinned": false,
 		"liked": false
 	}
 ]