migration

Author: MacKentoch

front/src/hoc/withSuspense/styled/AnimatedDiv.tsx

@@ -10,17 +10,19 @@ const fadeIn = keyframes`
   }
 `;
 
+const mixin = css`
+opacity: 0;
+animation-name: ${fadeIn};
+animation-timing-function: ease-in;
+animation-duration: 0.7s;
+animation-delay: 0s;
+animation-fill-mode: both;
+`
+
 const AnimatedDiv = styled.div`
   ${({ viewEnter }) =>
-    viewEnter &&
-    css`
-      opacity: 0;
-      animation-name: ${fadeIn};
-      animation-timing-function: ease-in;
-      animation-duration: 0.7s;
-      animation-delay: 0s;
-      animation-fill-mode: both;
-    `};
+    viewEnter &&mixin
+  }
 `;
 
 export default AnimatedDiv;

front/src/pages/about/About.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import FadeInEntrance from '../../components/fadeInEntrance';
 
 type Props = {} & RouteComponentProps<any, any>;
 
 function About({}: Props) {
   return (
-    <div>
+    <FadeInEntrance>
       <h1>About</h1>
-    </div>
+    </FadeInEntrance>
   );
 }
 

front/src/pages/about/index.ts

@@ -1,5 +1,4 @@
 import { compose } from 'redux';
 import About from './About';
-import withEnterAnimation from '../../hoc/withEnterAnimation';
 
-export default compose(withEnterAnimation(/* no option yet */))(About);
+export default compose()(About);

front/src/pages/home/Home.tsx

@@ -5,12 +5,13 @@ import { Link } from 'react-router-dom';
 import HomeInfo from './styled/HomeInfo';
 import MainTitle from './styled/MainTitle';
 import LightNote from './styled/LightNote';
+import FadeInEntrance from '../../components/fadeInEntrance';
 
 type Props = {} & RouteComponentProps<any, any>;
 
 function Home({}: Props) {
   return (
-    <div>
+    <FadeInEntrance>
       <Jumbotron>
         <HomeInfo>
           <MainTitle>ReactJS 16.4+ Bootstrap 4</MainTitle>
@@ -38,7 +39,7 @@ function Home({}: Props) {
           </p>
         </HomeInfo>
       </Jumbotron>
-    </div>
+    </FadeInEntrance>
   );
 }
 

front/src/pages/home/index.ts

@@ -1,5 +1,4 @@
 import { compose } from 'redux';
 import Home from './Home';
-import withEnterAnimation from '../../hoc/withEnterAnimation';
 
-export default compose(withEnterAnimation(/* no option yet */))(Home);
+export default compose()(Home);