refactor Indicators

Author: Dan Carbonell

src/components/Indicators/EmptyStateIndicator.js

@@ -2,20 +2,14 @@ import React from 'react';
 import { Text } from 'react-native';
 
 const EmptyStateIndicator = ({ listType }) => {
-  let Indicator;
   switch (listType) {
     case 'channel':
-      Indicator = <Text>You have no channels currently</Text>;
-      break;
+      return <Text>You have no channels currently</Text>;
     case 'message':
-      Indicator = null;
-      break;
+      return null;
     default:
-      Indicator = <Text>No items exist</Text>;
-      break;
+      return <Text>No items exist</Text>;
   }
-
-  return Indicator;
 };
 
 export default EmptyStateIndicator;

src/components/Indicators/LoadingErrorIndicator.js

@@ -1,19 +1,20 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from '@stream-io/styled-components';
 import PropTypes from 'prop-types';
-import { withTranslationContext } from '../../context';
+
+import { TranslationContext } from '../../context';
 
 const Container = styled.TouchableOpacity`
+  align-items: center;
   height: 100%;
   justify-content: center;
-  align-items: center;
   ${({ theme }) => theme.loadingErrorIndicator.container.css}
 `;
 
 const ErrorText = styled.Text`
-  margin-top: 20px;
   font-size: 14px;
   font-weight: 600;
+  margin-top: 20px;
   ${({ theme }) => theme.loadingErrorIndicator.errorText.css}
 `;
 
@@ -23,11 +24,12 @@ const RetryText = styled.Text`
   ${({ theme }) => theme.loadingErrorIndicator.retryText.css}
 `;
 
-const LoadingErrorIndicator = ({ listType, retry, t }) => {
-  let Loader;
+const LoadingErrorIndicator = ({ listType, retry }) => {
+  const { t } = useContext(TranslationContext);
+
   switch (listType) {
     case 'channel':
-      Loader = (
+      return (
         <Container
           onPress={() => {
             retry && retry();
@@ -37,26 +39,21 @@ const LoadingErrorIndicator = ({ listType, retry, t }) => {
           <RetryText>⟳</RetryText>
         </Container>
       );
-      break;
     case 'message':
-      Loader = (
+      return (
         <Container>
           <ErrorText>
             {t('Error loading messages for this channel ...')}
           </ErrorText>
         </Container>
       );
-      break;
     default:
-      Loader = (
+      return (
         <Container>
           <ErrorText>{t('Error loading')}</ErrorText>
         </Container>
       );
-      break;
   }
-
-  return Loader;
 };
 
 LoadingErrorIndicator.propTypes = {
@@ -65,4 +62,4 @@ LoadingErrorIndicator.propTypes = {
   retry: PropTypes.func,
 };
 
-export default withTranslationContext(LoadingErrorIndicator);
+export default LoadingErrorIndicator;

src/components/Indicators/LoadingIndicator.js

@@ -1,65 +1,55 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from '@stream-io/styled-components';
 import PropTypes from 'prop-types';
+
+import { TranslationContext } from '../../context';
 import { Spinner } from '../Spinner';
-import { withTranslationContext } from '../../context';
 
 const Container = styled.View`
+  align-items: center;
   height: 100%;
   justify-content: center;
-  align-items: center;
   ${({ theme }) => theme.loadingIndicator.container.css}
 `;
 const LoadingText = styled.Text`
-  margin-top: 20px;
   font-size: 14px;
   font-weight: 600;
+  margin-top: 20px;
   ${({ theme }) => theme.loadingIndicator.loadingText.css}
 `;
 
-class LoadingIndicator extends React.PureComponent {
-  static propTypes = {
-    listType: PropTypes.oneOf(['channel', 'message', 'default']),
-    loadingText: PropTypes.string,
-  };
+const LoadingIndicator = (props) => {
+  const { listType, loadingText } = props;
+  const { t } = useContext(TranslationContext);
+  let indicatorText = '';
 
-  static defaultProps = {
-    listType: 'default',
-  };
-
-  render() {
-    const { t, listType, loadingText } = this.props;
-    switch (listType) {
-      case 'channel':
-        return (
-          <Container>
-            <Spinner />
-            <LoadingText>
-              {loadingText ? loadingText : t('Loading channels ...')}
-            </LoadingText>
-          </Container>
-        );
-      case 'message':
-        return (
-          <Container>
-            <Spinner />
-            <LoadingText>
-              {loadingText ? loadingText : t('Loading messages ...')}
-            </LoadingText>
-          </Container>
-        );
-      case 'default':
-      default:
-        return (
-          <Container>
-            <Spinner />
-            <LoadingText>
-              {loadingText ? loadingText : t('Loading ...')}
-            </LoadingText>
-          </Container>
-        );
-    }
+  switch (listType) {
+    case 'channel':
+      indicatorText = loadingText ? loadingText : t('Loading channels ...');
+      break;
+    case 'message':
+      indicatorText = loadingText ? loadingText : t('Loading messages ...');
+      break;
+    case 'default':
+    default:
+      indicatorText = loadingText ? loadingText : t('Loading ...');
   }
-}
 
-export default withTranslationContext(LoadingIndicator);
+  return (
+    <Container>
+      <Spinner />
+      <LoadingText>{indicatorText}</LoadingText>
+    </Container>
+  );
+};
+
+LoadingIndicator.propTypes = {
+  listType: PropTypes.oneOf(['channel', 'message', 'default']),
+  loadingText: PropTypes.string,
+};
+
+LoadingIndicator.defaultProps = {
+  listType: 'default',
+};
+
+export default LoadingIndicator;