Changed posts to dogs and connected BackEnd

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>  

src/components/bloggrid.js

@@ -1,36 +1,36 @@
 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 {
 
   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>
       )

src/components/post.js → src/components/dog.js

@@ -1,52 +1,52 @@
 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);
   }
 
   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);

src/components/postcard.js → src/components/dogcard.js

@@ -1,33 +1,33 @@
 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);
     this.toggleLike = this.toggleLike.bind(this);
   }
 
   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; 

src/components/postgrid.js → src/components/doggrid.js

@@ -8,55 +8,55 @@ 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>
   </Row>  
   </>
 );
 
-function PostGrid(props) {
+function DogGrid(props) {
   return grid;
 }
 
-export default PostGrid;
+export default DogGrid;

src/components/posticon.js → 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;

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%' }}>

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)

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"

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') {

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
 	}
 }

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
 	}
 ]