react animation components

MianJawadAhmad · Oct 6, 2019 · 1ccddef · 1ccddef
1 parent 4f6e35c
commit 1ccddef
Show file tree

Hide file tree

Showing 4 changed files with 1,271 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
     "bootstrap-social": "^5.1.1",
     "cross-fetch": "2.1.0",
     "font-awesome": "^4.7.0",
+    "prop-types": "15.6.0",
     "react": "^16.8.6",
+    "react-animation-components": "3.0.0",
     "react-dom": "^16.8.6",
     "react-popper": "^0.9.2",
     "react-redux": "^5.0.7",

diff --git a/src/components/DishdetailComponent.js b/src/components/DishdetailComponent.js
@@ -4,16 +4,25 @@ import { Link } from 'react-router-dom';
 import { Control, LocalForm, Errors } from 'react-redux-form';
 import { Loading } from './LoadingComponent';
 import { baseUrl } from '../shared/baseUrl';
+import { FadeTransform, Fade, Stagger } from 'react-animation-components';
 
 function RenderDish({ dish }) {
     return (
-        <Card>
-            <CardImg top src={baseUrl + dish.image} alt={dish.name} />
-            <CardBody>
-                <CardTitle>{dish.name}</CardTitle>
-                <CardText>{dish.description}</CardText>
-            </CardBody>
-        </Card>
+        <div className="col-12 col-md-5 m-1">
+            <FadeTransform
+                in
+                transformProps={{
+                    exitTransform: 'scale(0.5) translateY(-50%)'
+                }}>
+                <Card>
+                    <CardImg top src={baseUrl + dish.image} alt={dish.name} />
+                    <CardBody>
+                        <CardTitle>{dish.name}</CardTitle>
+                        <CardText>{dish.description}</CardText>
+                    </CardBody>
+                </Card>
+            </FadeTransform>
+        </div>
     );
 }
 
@@ -30,11 +39,23 @@ function RenderComments({comments, postComment, dishId}) {
     });
 
     return (
-        <div>
+        <div className="col-12 col-md-5 m-1">
             <h4>Comments</h4>
             <ul className="list-unstyled">
-                {commentList}
+            <Stagger in>
+                {comments.map((comment) => {
+                return (
+                    <Fade in>
+                        <li key={comment.id}>
+                            <p>{comment.comment}</p>
+                            <p>-- {comment.author} , {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit'}).format(new Date(Date.parse(comment.date)))}</p>
+                        </li>
+                    </Fade>
+                        );
+                    })}
+                </Stagger>
             </ul>
+
             <CommentForm dishId={dishId} postComment={postComment} />
         </div>
     );

diff --git a/src/components/HomeComponent.js b/src/components/HomeComponent.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
 import { Loading } from './LoadingComponent';
 import { baseUrl } from '../shared/baseUrl';
+import { FadeTransform } from 'react-animation-components';
+
 
 function RenderCard({ item, isLoading, errMess }) {
     if (isLoading) {
@@ -13,32 +15,38 @@ function RenderCard({ item, isLoading, errMess }) {
         );
     }
     else return (
-        <Card>
-                    <CardImg src={baseUrl + item.image} alt={item.name} />
-                    <CardBody>
-                        <CardTitle>{item.name}</CardTitle>
-                        {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle> : null}
-                        <CardText>{item.description}</CardText>
-                    </CardBody>
-                </Card>
+        <FadeTransform
+            in
+            transformProps={{
+                exitTransform: 'scale(0.5) translateY(-50%)'
+            }}>
+            <Card>
+                <CardImg src={baseUrl + item.image} alt={item.name} />
+                <CardBody>
+                <CardTitle>{item.name}</CardTitle>
+                {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle> : null }
+                <CardText>{item.description}</CardText>
+                </CardBody>
+            </Card>
+        </FadeTransform>
                 );
             }
 
 function Home(props) {
     return (
         <div className="container">
-                    <div className="row align-items-start">
-                        <div className="col-12 col-md m-1">
-                            <RenderCard item={props.dish} isLoading={props.dishesLoading} errMess={props.dishesErrMess} />
-                        </div>
-                        <div className="col-12 col-md m-1">
-                            <RenderCard item={props.promotion} isLoading={props.promoLoading} errMess={props.promoErrMess} />
-                        </div>
-                        <div className="col-12 col-md m-1">
-                            <RenderCard item={props.leader} />
-                        </div>
-                    </div>
+            <div className="row align-items-start">
+                <div className="col-12 col-md m-1">
+                    <RenderCard item={props.dish} isLoading={props.dishesLoading} errMess={props.dishesErrMess} />
+                </div>
+                <div className="col-12 col-md m-1">
+                    <RenderCard item={props.promotion} isLoading={props.promoLoading} errMess={props.promoErrMess} />
+                </div>
+                <div className="col-12 col-md m-1">
+                    <RenderCard item={props.leader} />
                 </div>
+            </div>
+        </div>
                 );
             }