123 custom ringloader component (AgileVentures#146)

* A separate react component for spinner
* add a separate react component
* deleting the duplicate ringloader file from source tree
*  Changed the color of the spinner in subscription page
* pushing the deleted CustomRingLoader.js

Author: nataliyah123

src/components/CustomRingLoader.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Container } from 'semantic-ui-react'
+import { RingLoader } from 'react-spinners'
+
+const CustomRingLoader = props => {
+  return (
+    <Container>
+      <RingLoader sizeUnit={'px'} size={200} color={props.color || '#34495E'} />
+    </Container>
+  )
+}
+
+export default CustomRingLoader

src/components/EventSummary.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import { Header, Segment, Grid, Embed, Image, Icon } from 'semantic-ui-react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from './CustomRingLoader'
 import ReactHtmlParser from 'react-html-parser'
 import moment from 'moment-timezone'
 
@@ -79,7 +79,7 @@ const EventSummary = props => {
       </Fragment>
     )
   } else {
-    return <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
+    return <CustomRingLoader />
   }
 }
 

src/components/Paginate.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from './CustomRingLoader'
 
 const Paginate = ({ items, Component, error }) => {
   let itemsArray
@@ -8,7 +8,7 @@ const Paginate = ({ items, Component, error }) => {
     itemsArray = items.map(item => <Component key={item.id} item={item} />)
   }
   return (
-    itemsArray || error || <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
+    itemsArray || error || <CustomRingLoader />
   )
 }
 

src/components/ProjectSummary.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import { Header, Image, Grid, Card, Icon, Segment, Embed } from 'semantic-ui-react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from './CustomRingLoader'
 import { Link } from 'react-router-dom'
 import '../assets/ProjectSummary.css'
 
@@ -131,7 +131,7 @@ const ProjectSummary = props => {
       </Grid>
     )
   } else {
-    return <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
+    return <CustomRingLoader />
   }
 }
 

src/components/UserSummary.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import { Card, Image, Grid, Label, Tab, Embed, Icon } from 'semantic-ui-react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from './CustomRingLoader'
 import moment from 'moment'
 import '../assets/UserSummary.css'
 
@@ -244,7 +244,7 @@ const UserSummary = props => {
       </Fragment>
     )
   } else {
-    return <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
+    return <CustomRingLoader />
   }
 }
 

src/containers/About.js

@@ -2,35 +2,30 @@ import React from 'react'
 import ReactHtmlParser from 'react-html-parser'
 import axios from 'axios'
 import { Container } from 'semantic-ui-react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from '../components/CustomRingLoader'
 export class About extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = { about: null }
-  }
+    state = { about: null }
 
-  componentDidMount () {
-    axios.get('api/v1/static-pages/about-us')
-      .then(response => {
-        this.setState({ about: response.data })
-      })
-  }
+    componentDidMount () {
+      axios.get('api/v1/static-pages/about-us')
+        .then(response => {
+          this.setState({ about: response.data })
+        })
+    }
 
-  render () {
-    let { about } = this.state
+    render () {
+      let { about } = this.state
 
-    if (about) {
-      return (
-        <Container>
-          <div id='main'> {ReactHtmlParser(about)} </div>
-        </Container>)
-    } else {
-      return (
-        <Container>
-          <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
-        </Container>
-      )
+      if (about) {
+        return (
+          <Container>
+            <div id='main'>{ ReactHtmlParser(about) }</div>
+          </Container>)
+      } else {
+        return (
+          <CustomRingLoader />
+        )
+      }
     }
-  }
 }
 export default About

src/containers/GettingStartedPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from '../components/CustomRingLoader'
 import { Container } from 'semantic-ui-react'
 import axios from 'axios'
 import ReactHtmlParser from 'react-html-parser'
@@ -26,9 +26,9 @@ export default class GettingStartedPage extends Component {
         )
       } else {
         return (
-          <Container>
-            <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
-          </Container>
+
+          <CustomRingLoader />
+
         )
       }
     }

src/containers/MembershipPlansPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from '../components/CustomRingLoader'
 import { Container } from 'semantic-ui-react'
 import axios from 'axios'
 import ReactHtmlParser from 'react-html-parser'
@@ -21,9 +21,7 @@ export default class MembershipPlansPage extends Component {
       )
     } else {
       return (
-        <Container>
-          <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
-        </Container>
+        <CustomRingLoader />
       )
     }
   }

src/containers/PremiumF2FMembershipPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from '../components/CustomRingLoader'
 import { Container } from 'semantic-ui-react'
 import axios from 'axios'
 import ReactHtmlParser from 'react-html-parser'
@@ -25,9 +25,7 @@ export default class PremiumF2FMobMembershipPage extends Component {
       )
     } else {
       return (
-        <Container>
-          <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
-        </Container>
+        <CustomRingLoader />
       )
     }
   }

src/containers/PremiumMembershipPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { RingLoader } from 'react-spinners'
+import CustomRingLoader from '../components/CustomRingLoader'
 import { Container } from 'semantic-ui-react'
 import axios from 'axios'
 import ReactHtmlParser from 'react-html-parser'
@@ -25,9 +25,7 @@ export default class PremiumMembershipPage extends Component {
       )
     } else {
       return (
-        <Container>
-          <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
-        </Container>
+        <CustomRingLoader />
       )
     }
   }