Created react list, reusable components and mock data to test

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"

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; 

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;

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;

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> 
         </>
   );
 }

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;

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