From 5e979ec20c48dad39ae8a5481af8643116a5ffe7 Mon Sep 17 00:00:00 2001
From: Michael Peacock <peacoc17@coventry.ac.uk>
Date: Fri, 26 Mar 2021 23:48:10 +0000
Subject: [PATCH] Created react list, reusable components and mock data to test

---
 package.json               |  2 +-
 src/components/dogcard.js  | 36 +++++++++++++++++++
 src/components/doggrid.js  | 41 ++++++++++++++++++++++
 src/components/dogicon.js  | 54 +++++++++++++++++++++++++++++
 src/components/home.js     | 53 +++-------------------------
 src/components/navimage.js | 12 +++++++
 src/data/dogs.json         | 71 ++++++++++++++++++++++++++++++++++++++
 7 files changed, 219 insertions(+), 50 deletions(-)
 create mode 100644 src/components/dogcard.js
 create mode 100644 src/components/doggrid.js
 create mode 100644 src/components/dogicon.js
 create mode 100644 src/components/navimage.js
 create mode 100644 src/data/dogs.json

diff --git a/package.json b/package.json
index 27cc025..95a553f 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "web-vitals": "^1.1.1"
   },
   "scripts": {
-    "start": "react-scripts --max_old_space_size=4096 start",
+    "start": "react-scripts --max_old_space_size=2000 start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/src/components/dogcard.js b/src/components/dogcard.js
new file mode 100644
index 0000000..b36b06f
--- /dev/null
+++ b/src/components/dogcard.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Card } from 'antd';
+import PostIcon from './dogicon';
+import NavImage from './navimage'
+
+const { Meta } = Card;
+
+class DogCard extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.handleNav = this.handleNav.bind(this);
+  }
+
+  handleNav() {
+    console.log(`clicked post ${this.props.id}`);
+  }
+
+  render() {
+    const dogID = this.props.id;
+    return (
+      <Card
+        style={{ width: 320 }}
+        cover={<NavImage img alt="test" src={this.props.imgURL} to={`/dog/${dogID}`}/>}
+        hoverable={true}
+        actions={[
+          <PostIcon type="heart" selected={this.props.heart}/>,
+          <PostIcon type="edit" selected={this.props.edit}/>
+        ]}>
+        <Meta title={this.props.Name} description={this.props.about} />
+      </Card>
+    );
+  }
+}
+
+export default DogCard; 
\ No newline at end of file
diff --git a/src/components/doggrid.js b/src/components/doggrid.js
new file mode 100644
index 0000000..595ee8b
--- /dev/null
+++ b/src/components/doggrid.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Col, Row } from 'antd';
+import DogCard from './dogcard';
+
+class BlogGrid extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      posts: []
+    }
+  }
+
+  componentDidMount() {
+    this.setState({
+      posts: require('../data/dogs.json')
+    })
+  }
+
+  render() {
+    if (!this.state.posts.length) {
+      return <h3>Loading posts...</h3>
+    }
+    const cardList = this.state.posts.map(post => {
+      return (
+        <div style={{padding:"10px"}} key={post.id}>
+          <Col span={6}>
+            <DogCard {...post} />
+          </Col>
+        </div>
+      )
+    });
+    return (
+      <Row type="flex" justify="space-around">
+        {cardList}
+      </Row>
+    );
+  }
+}
+
+export default BlogGrid;
\ No newline at end of file
diff --git a/src/components/dogicon.js b/src/components/dogicon.js
new file mode 100644
index 0000000..103269f
--- /dev/null
+++ b/src/components/dogicon.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { EditOutlined, EditFilled, HeartOutlined, HeartFilled} from "@ant-design/icons";
+
+function getIcon (theme, iconType) {
+    let Icon;
+    
+    if (theme === 'filled') {
+        if (iconType === 'edit') {
+            Icon = EditFilled
+        } else if (iconType === 'heart') {
+            Icon = HeartFilled
+        } 
+    } else if (theme === 'outlined') {
+        if (iconType === 'edit') {
+            Icon = EditOutlined
+        } else if (iconType === 'heart') {
+            Icon = HeartOutlined
+        } 
+    }
+    
+    return Icon;  
+}
+
+class PostIcon extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            selected: props.selected
+        };
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(){
+        //reverse the selected state with every click
+        this.setState({selected: !this.state.selected});
+    }
+
+    render(){
+        const theme = this.state.selected ? 'filled' : 'outlined';
+        const iconType = this.props.type;
+        const Icon = getIcon(theme, iconType);
+        
+        return (
+            <span>
+                <Icon
+                    onClick={this.onClick}
+                    style={{color:'steelblue'}} />
+                {this.props.count}
+          </span>
+        );
+    }
+}
+    
+export default PostIcon;
\ No newline at end of file
diff --git a/src/components/home.js b/src/components/home.js
index c826717..2b351d2 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -1,56 +1,11 @@
-import { Card, Row, Col } from 'antd';
-import { Link } from 'react-router-dom';
-const { Meta } = Card;
+import DogGrid from './doggrid'
 
 function Home(props) {
     return (
         <>
-        <Row type="flex" justify="space-around">
-            <Col span={6}>
-                <Link to="/dog/1">
-                    <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-                        <Meta title="Dog 1" description="Small about section breed age etc" />
-                    </Card>
-                </Link>
-            </Col>
-            <Col span={6}>
-                <Link to="/dog/2">
-                    <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-                        <Meta title="Dog 2" description="Small about section breed age etc" />
-                    </Card>
-                </Link>
-            </Col>
-            <Col span={6}>
-                <Link to="/dog/3">
-                    <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-                        <Meta title="Dog 3" description="Small about section breed age etc" />
-                    </Card>
-                </Link>
-            </Col>
-        </Row>  
-        <Row type="flex" justify="space-around">
-            <Col span={6}>
-                <Link to="/dog/4">
-                    <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-                        <Meta title="Dog 4" description="Small about section breed age etc" />
-                    </Card>
-                </Link>
-            </Col>
-            <Col span={6}>
-                <Link to="/dog/5">
-                    <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-                        <Meta title="Dog 5" description="Small about section breed age etc" />
-                    </Card>
-                </Link>
-            </Col>
-            <Col span={6}>
-                <Link to="/dog/6">
-                    <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-                        <Meta title="Dog 6" description="Small about section breed age etc" />
-                    </Card>
-                </Link>
-            </Col>
-        </Row>  
+        <div>
+            <DogGrid />    
+        </div> 
         </>
   );
 }
diff --git a/src/components/navimage.js b/src/components/navimage.js
new file mode 100644
index 0000000..843c9c2
--- /dev/null
+++ b/src/components/navimage.js
@@ -0,0 +1,12 @@
+/**
+ * Wrap an image tag as a React component to allow router linking.
+ */
+
+ import React from 'react';
+ import { useHistory } from 'react-router-dom';
+ 
+ const NavImage = (props) => {
+     const history = useHistory();
+     return <img alt={props.alt} src={props.src} onClick={() => history.push(props.to)} />;
+ }
+ export default NavImage;
\ No newline at end of file
diff --git a/src/data/dogs.json b/src/data/dogs.json
new file mode 100644
index 0000000..f0dac05
--- /dev/null
+++ b/src/data/dogs.json
@@ -0,0 +1,71 @@
+[{
+    "id": 1,
+    "Name": "dog1",
+    "Breed": "some desription about the article",
+    "Age": "4",
+    "about": "dog description",
+    "imgURL": "https://picsum.photos/id/1025/400",
+    "heart": false,
+    "edit": false
+},
+{
+    "id": 2,
+    "Name": "dog2",
+    "Breed": "some desription about the article",
+    "Age": "4",
+    "about": "dog description",
+    "imgURL": "https://picsum.photos/id/1025/400",
+    "heart": false,
+    "edit": false
+},
+{
+    "id": 3,
+    "Name": "dog3",
+    "Breed": "some desription about the article",
+    "Age": "4",
+    "about": "dog description",
+    "imgURL": "https://picsum.photos/id/1025/400",
+    "heart": false,
+    "edit": false
+},
+{
+    "id": 4,
+    "Name": "dog4",
+    "Breed": "some desription about the article",
+    "Age": "4",
+    "about": "dog description",
+    "imgURL": "https://picsum.photos/id/1025/400",
+    "heart": false,
+    "edit": false
+},
+{
+    "id": 5,
+    "Name": "dog5",
+    "Breed": "some desription about the article",
+    "Age": "4",
+    "about": "dog description",
+    "imgURL": "https://picsum.photos/id/1025/400",
+    "heart": false,
+    "edit": false
+},
+{
+    "id": 6,
+    "Name": "dog6",
+    "Breed": "some desription about the article",
+    "Age": "4",
+    "about": "dog description",
+    "imgURL": "https://picsum.photos/id/1025/400",
+    "heart": false,
+    "edit": false
+},
+{
+    "id": 7,
+    "Name": "dog7",
+    "Breed": "some desription about the article",
+    "Age": "4",
+    "about": "dog description",
+    "imgURL": "https://picsum.photos/id/1025/400",
+    "heart": false,
+    "edit": false
+}
+]
\ No newline at end of file