refactor: replace loading conditions with hoc

mojotech · Aug 4, 2021 · ffdcdd2 · ffdcdd2
1 parent fb31a8a
commit ffdcdd2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/app/javascript/components/bathroom.jsx b/app/javascript/components/bathroom.jsx
@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
+import { compose } from 'react-recompose';
 import { WhiteSubTitle, WhiteTitleLarge } from '@components/typography';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 export const getBathroomCode = gql`
@@ -18,10 +20,7 @@ const Column = styled.div`
   margin-top: 100px;
 `;
 
-export const Bathroom = ({ loading, error, location }) => {
-  if (loading) {
-    return <LoadingMessage />;
-  }
+export const Bathroom = ({ error, location }) => {
   if (error) {
     return <ErrorMessage />;
   }
@@ -42,14 +41,15 @@ Bathroom.propTypes = {
   location: PropTypes.shape({
     bathroomCode: PropTypes.string,
   }),
-  loading: PropTypes.bool,
   error: PropTypes.bool,
 };
 
 Bathroom.defaultProps = {
   location: {},
-  loading: true,
   error: false,
 };
 
-export default withFragment({ location: getBathroomCode })(Bathroom);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getBathroomCode }),
+)(Bathroom);
diff --git a/app/javascript/components/date.jsx b/app/javascript/components/date.jsx
@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
+import { compose } from 'react-recompose';
 import { dateForTimezone } from '@lib/datetime';
 import { colors, fontSizes, spacing, fonts } from '@lib/theme';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 export const getTimeZone = gql`
@@ -22,15 +24,13 @@ export const DateText = styled.div`
 
 export class Date extends React.Component {
   static propTypes = {
-    loading: PropTypes.bool,
     error: PropTypes.bool,
     location: PropTypes.shape({
       timezone: PropTypes.string,
     }).isRequired,
   };
 
   static defaultProps = {
-    loading: true,
     error: false,
   };
 
@@ -66,10 +66,7 @@ export class Date extends React.Component {
   };
 
   render() {
-    const { loading, error } = this.props;
-    if (loading) {
-      return <LoadingMessage />;
-    }
+    const { error } = this.props;
 
     if (error) {
       return <ErrorMessage />;
@@ -83,4 +80,7 @@ export class Date extends React.Component {
   }
 }
 
-export default withFragment({ location: getTimeZone })(Date);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getTimeZone }),
+)(Date);
diff --git a/app/javascript/components/time-hero.jsx b/app/javascript/components/time-hero.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import Time from '@components/time';
+import { compose } from 'react-recompose';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 export const getTimeHero = gql`
@@ -11,10 +13,7 @@ export const getTimeHero = gql`
   }
 `;
 
-export const TimeHero = ({ loading, error, location }) => {
-  if (loading) {
-    return <LoadingMessage />;
-  }
+export const TimeHero = ({ error, location }) => {
   if (error) {
     return <ErrorMessage />;
   }
@@ -23,14 +22,15 @@ export const TimeHero = ({ loading, error, location }) => {
 };
 
 TimeHero.propTypes = {
-  loading: PropTypes.bool,
   error: PropTypes.bool,
   location: PropTypes.shape({}).isRequired,
 };
 
 TimeHero.defaultProps = {
-  loading: true,
   error: false,
 };
 
-export default withFragment({ location: getTimeHero })(TimeHero);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getTimeHero }),
+)(TimeHero);
diff --git a/app/javascript/components/wifi.jsx b/app/javascript/components/wifi.jsx
@@ -2,11 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import gql from 'graphql-tag';
+import { compose } from 'react-recompose';
 import { WhiteSubTitle, WhiteTitleLarge } from '@components/typography';
 import { Row } from '@components/row';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
 import WifiIcon from '@assets/images/icons/icon-wifi.svg';
 import LockIcon from '@assets/images/icons/icon-key.svg';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 const Column = styled.div`
@@ -30,10 +32,7 @@ export const getWifi = gql`
   }
 `;
 
-export const Wifi = ({ loading, error, location }) => {
-  if (loading) {
-    return <LoadingMessage />;
-  }
+export const Wifi = ({ error, location }) => {
   if (error) {
     return <ErrorMessage />;
   }
@@ -70,13 +69,14 @@ Wifi.propTypes = {
     wifiName: PropTypes.string,
     wifiPassword: PropTypes.string,
   }).isRequired,
-  loading: PropTypes.bool,
   error: PropTypes.bool,
 };
 
 Wifi.defaultProps = {
-  loading: true,
   error: false,
 };
 
-export default withFragment({ location: getWifi })(Wifi);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getWifi }),
+)(Wifi);