refactor: introduce the withFadeAnimation() HOC (#784)

* refactor: introduce the withFadeAnimation() HOC

* revert: cancel file rename for now

Author: machour

src/components/loading-indicators/loading-event-list-item.component.js

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Animated } from 'react-native';
 import styled from 'styled-components';
 import { colors } from 'config';
-import { infiniteAnimation } from 'utils';
+import { FadeAnimationProps, withFadeAnimation } from 'utils';
 
 const Container = styled.View`
   padding: 10px;
@@ -39,40 +39,16 @@ const TextBar = styled(Animated.View)`
   background-color: ${colors.greyDark};
 `;
 
-export class LoadingEventListItem extends Component {
-  constructor() {
-    super();
-    this.fadeFrom = 0.3;
-    this.fadeTo = 0.6;
-    this.state = {
-      fadeAnimValue: new Animated.Value(this.fadeTo),
-    };
-  }
-
-  componentDidMount() {
-    this.runAnimation();
-  }
-
-  runAnimation() {
-    infiniteAnimation(
-      this.state.fadeAnimValue,
-      this.fadeFrom,
-      this.fadeTo,
-      () => {
-        this.runAnimation();
-      }
-    );
-  }
-
-  render() {
-    return (
-      <Container>
-        <Wrapper>
-          <Avatar style={{ opacity: this.state.fadeAnimValue }} />
-          <TextBar style={{ opacity: this.state.fadeAnimValue }} />
-          <Icon style={{ opacity: this.state.fadeAnimValue }} />
-        </Wrapper>
-      </Container>
-    );
-  }
-}
+const LoadingEventListItemComponent = ({ opacity }: FadeAnimationProps) => (
+  <Container>
+    <Wrapper>
+      <Avatar style={{ opacity }} />
+      <TextBar style={{ opacity }} />
+      <Icon style={{ opacity }} />
+    </Wrapper>
+  </Container>
+);
+
+export const LoadingEventListItem = withFadeAnimation(
+  LoadingEventListItemComponent
+);

src/utils/loading-animation.js

@@ -1,4 +1,5 @@
 import { Animated } from 'react-native';
+import React from 'react';
 
 export const loadingAnimation = state => {
   const duration = 500;
@@ -20,24 +21,49 @@ export const loadingAnimation = state => {
   return Animated.sequence(animatedTimings);
 };
 
-export const infiniteAnimation = (state, fromValue, toValue, onEnd) => {
-  const animatedTimings = [];
-  const duration = 1000;
-
-  animatedTimings.push(
-    Animated.timing(state, {
-      toValue: fromValue,
-      duration,
-    })
-  );
-  animatedTimings.push(
-    Animated.timing(state, {
-      toValue,
-      duration,
-    })
-  );
-
-  return Animated.sequence(animatedTimings).start(() => {
-    onEnd();
-  });
+export const withFadeAnimation = WrappedComponent => {
+  return class extends React.Component {
+    constructor() {
+      super();
+      this.fadeFrom = 0.3;
+      this.fadeTo = 0.6;
+      this.state = {
+        fadeAnimValue: new Animated.Value(this.fadeTo),
+      };
+    }
+
+    componentDidMount() {
+      this.runAnimation();
+    }
+
+    runAnimation() {
+      const animatedTimings = [];
+      const duration = 1000;
+
+      animatedTimings.push(
+        Animated.timing(this.state.fadeAnimValue, {
+          toValue: this.fadeFrom,
+          duration,
+        })
+      );
+      animatedTimings.push(
+        Animated.timing(this.state.fadeAnimValue, {
+          toValue: this.fadeTo,
+          duration,
+        })
+      );
+
+      return Animated.sequence(animatedTimings).start(() => {
+        this.runAnimation();
+      });
+    }
+
+    render() {
+      return <WrappedComponent opacity={this.state.fadeAnimValue} />;
+    }
+  };
+};
+
+export type FadeAnimationProps = {
+  opacity: number,
 };