resolving redirection on go-back button

src/components/error-dart.js

@@ -1,11 +1,71 @@
 import React from 'react'
+import axios from 'axios'
 import { Header, Button } from 'semantic-ui-react'
 
-import { getTheme, urlErrorAssets } from 'formula_one'
+import { getTheme, urlErrorAssets, urlWhoAmI } from 'formula_one'
 
 import blocks from '../css/error-dart.css'
+import { element } from 'prop-types'
 
 export default class ErrorDart extends React.PureComponent {
+  state = {
+    isFacultyOrGuest: false
+  }
+
+  isFacultyOrGuest = (roles) => {
+    let isFacultyOrGuest = false
+    roles.forEach(element => {
+      if (element.role === 'FacultyMember' || element.role === 'Guest') {
+        isFacultyOrGuest = true
+      }
+    })
+    return isFacultyOrGuest
+  }
+
+  fetchUserRoles = () => {
+    axios
+      .get(urlWhoAmI())
+      .then(res => {
+        this.setState({
+          isFacultyOrGuest: this.isFacultyOrGuest(res.data.roles)
+        })
+      })
+      .catch(() => {
+        this.setState({
+          isFacultyOrGuest: true
+        })
+      })
+  }
+
+  getGoBackButton = () => {
+    if (this.state.isFacultyOrGuest) {
+      return (
+        <Button
+          basic
+          onClick = {() => this.props.history.goBack()}
+          color={getTheme()}
+        >
+          Go back?
+        </Button>
+      )
+    }
+    return (
+      <Button
+        basic
+        as='a'
+        href='https://youtu.be/dQw4w9WgXcQ?t=43&lc=Ugx5eioe8QbJJGWVZ0x4AaABAg'
+        target='_blank'
+        color={getTheme()}
+      >
+        Go back?
+      </Button>
+    )
+  }
+
+  componentDidMount() {
+    this.fetchUserRoles()
+  }
+
   render () {
     return (
       <div>
@@ -15,15 +75,7 @@ export default class ErrorDart extends React.PureComponent {
               404: Foundn't
               <Header.Subheader>Content not found</Header.Subheader>
             </Header>
-            <Button
-              basic
-              as='a'
-              href='https://youtu.be/dQw4w9WgXcQ?t=43&lc=Ugx5eioe8QbJJGWVZ0x4AaABAg'
-              target='_blank'
-              color={getTheme()}
-            >
-              Go back?
-            </Button>
+            {this.getGoBackButton()}
           </div>
           <div styleName='blocks.board-container'>
             <img

src/components/error-rabbit.js

@@ -1,11 +1,70 @@
 import React from 'react'
+import axios from 'axios'
 import { Header, Button } from 'semantic-ui-react'
 
-import { getTheme, urlErrorAssets } from 'formula_one'
+import { getTheme, urlErrorAssets, urlWhoAmI } from 'formula_one'
 
 import blocks from '../css/error-rabbit.css'
 
 export default class ErrorRabbit extends React.PureComponent {
+  state = {
+    isFacultyOrGuest: false
+  }
+
+  isFacultyOrGuest = (roles) => {
+    let isFacultyOrGuest = false
+    roles.forEach(element => {
+      if (element.role === 'FacultyMember' || element.role === 'Guest') {
+        isFacultyOrGuest = true
+      }
+    })
+    return isFacultyOrGuest
+  }
+
+  fetchUserRoles = () => {
+    axios
+      .get(urlWhoAmI())
+      .then(res => {
+        this.setState({
+          isFacultyOrGuest: this.isFacultyOrGuest(res.data.roles)
+        })
+      })
+      .catch(() => {
+        this.setState({
+          isFacultyOrGuest: true
+        })
+      })
+  }
+
+  getGoBackButton = () => {
+    if (this.state.isFacultyOrGuest) {
+      return (
+        <Button
+          basic
+          onClick = {() => this.props.history.goBack()}
+          color={getTheme()}
+        >
+          Go back?
+        </Button>
+      )
+    }
+    return (
+      <Button
+        basic
+        as='a'
+        href='https://youtu.be/dQw4w9WgXcQ?t=43&lc=Ugx5eioe8QbJJGWVZ0x4AaABAg'
+        target='_blank'
+        color={getTheme()}
+      >
+        Go back?
+      </Button>
+    )
+  }
+
+  componentDidMount() {
+    this.fetchUserRoles()
+  }
+
   render () {
     return (
       <div>
@@ -15,15 +74,7 @@ export default class ErrorRabbit extends React.PureComponent {
               404: Foundn't
               <Header.Subheader>Content not found</Header.Subheader>
             </Header>
-            <Button
-              basic
-              as='a'
-              href='https://youtu.be/dQw4w9WgXcQ?t=43&lc=Ugx5eioe8QbJJGWVZ0x4AaABAg'
-              target='_blank'
-              color={getTheme()}
-            >
-              Go back?
-            </Button>
+            {this.getGoBackButton()}
           </div>
           <div styleName='blocks.confetti-container'>
             <img

src/components/no-match.js

@@ -16,6 +16,7 @@ import blocks from '../css/no-match.css'
 
 export default class NoMatch extends React.PureComponent {
   render () {
+    const { history } = this.props
     const creators = [
       {
         name: 'Dhruv Bhanushali',
@@ -42,7 +43,7 @@ export default class NoMatch extends React.PureComponent {
               <Scrollbars autoHide>
                 <div styleName='blocks.app-wrapper'>
                   <Container styleName='blocks.main'>
-                    {isBrowser ? <ErrorDart /> : <ErrorRabbit />}
+                    {isBrowser ? <ErrorDart history={history} /> : <ErrorRabbit history={history} />}
                   </Container>
                 </div>
               </Scrollbars>