Added validation when registering and updated bloggrid

src/components/dogcard.js

@@ -27,7 +27,7 @@ class DogCard extends React.Component {
         hoverable={true}
         actions={[
           <DogIcon type="like" countLink={this.props.links.likes} selected={this.props.liked}
-              handleToggle={this.toggleLike} id={dogID}/>,
+              handleToggle={this.toggleLike} id={dogID}/>
         ]}>
 
         <Meta title={this.props.title} description={this.props.summary} />

src/components/doggrid.js

@@ -8,21 +8,21 @@ const grid = (
   <>
   <Row type="flex" justify="space-around">
     <Col span={6}>
-      <Link to="/dog/1">
+      <Link to="/dogs/1">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1024/400"/>} hoverable>
           <Meta title="First Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dog/2">
+      <Link to="/dogs/2">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
           <Meta title="Second Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dog/3">
+      <Link to="/dogs/3">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1026/400"/>}>
           <Meta title="Third Dog" description="This is about something" />
         </Card>
@@ -31,21 +31,21 @@ const grid = (
   </Row>  
   <Row type="flex" justify="space-around">
     <Col span={6}>
-      <Link to="/dog/4">
+      <Link to="/dogs/4">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1027/400"/>}>
           <Meta title="Fourth Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dog/5">
+      <Link to="/dogs/5">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1028/400"/>}>
           <Meta title="Fifth Dog" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dog/6">
+      <Link to="/dogs/6">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1029/400"/>}>
           <Meta title="Sixth Dog" description="This is about something" />
         </Card>

src/components/home.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PageHeader, Input } from 'antd';
-import BlogGrid from './bloggrid';
+import HomeGrid from './homegrid';
 
 const { Search } = Input;
 
@@ -18,7 +18,7 @@ function Home(props) {
             title="Dog Shelter"
             subTitle="Welcome to the website where you will find your new friend!"/>
         </div>  
-        <BlogGrid />
+        <HomeGrid />
       </div>
   );
 }

src/components/bloggrid.js → src/components/homegrid.js

@@ -3,7 +3,7 @@ import { Col, Row } from 'antd';
 import dogCard from './dogcard';
 import { status, json } from '../utilities/requestHandlers';
 
-class BlogGrid extends React.Component {
+class HomeGrid extends React.Component {
 
   constructor(props) {
     super(props);
@@ -43,4 +43,4 @@ class BlogGrid extends React.Component {
   }
 }
 
-export default BlogGrid;
+export default HomeGrid;

src/components/register.js

@@ -18,7 +18,15 @@ const emailRules = [
 ];
 
 const passwordRules = [
-    { required: true, message: 'Please input your password!' }
+    { required: true, message: 'Please input your password!' },
+		({ getFieldValue }) => ({
+        validator(rule, value) {
+            if (!value.length || getFieldValue('password').length >= 6 ) {
+                return Promise.resolve();
+            }
+            return Promise.reject('Password must contain 6 or more characters');
+        }
+    })
 ];
 
 const confirmRules = [
@@ -35,7 +43,15 @@ const confirmRules = [
 ];
 
 const usernameRules = [
-    { required: true, message: 'Please input your username!', whitespace: true }
+    { required: true, message: 'Please input your username!', whitespace: true },
+		({ getFieldValue }) => ({
+        validator(rule, value) {
+            if (!value.length || getFieldValue('username').length >= 3 ) {
+                return Promise.resolve();
+            }
+            return Promise.reject('Username must contain 3 or more characters');
+        }
+    })
 ]
 
 /**