import React, { Fragment, Component } from 'react'
import { Heading, Text, Link } from '@hackclub/design-system'
import IconButton from 'components/IconButton'
import { Modal, Overlay, CloseButton } from 'components/Modal'

const RulesButton = props => (
  <IconButton
    glyph="flag-fill"
    bg="info"
    children="Rules"
    inverted
    fontSize={2}
    m={3}
    style={{ position: 'absolute', right: 0, top: 0 }}
    {...props}
  />
)

class Help extends Component {
  state = { active: false }

  toggleRules = () => {
    this.setState(state => ({ active: !state.active }))
  }

  // Render a modal for challenge rules on button press
  render() {
    if (this.state.active) {
      return (
        <Fragment>
          <RulesButton onClick={this.toggleRules} />
          <Modal align="left" my={4} p={[3, 4]}>
            <CloseButton onClick={this.toggleRules} />
            <Heading.h2>Challenge Rules</Heading.h2>
            <Text fontSize={2} my={3}>
              Challenge is open to Hack Club community members. It strictly
              follows Hack Club’s{' '}
              <Link href="https://conduct.hackclub.com" target="_blank">
                Code of Conduct
              </Link>
              . Anything breaking our Code of Conduct (ex. voter fraud) and
              contestants found cheating can be temporarily or permanently
              banned.
            </Text>
            <Text fontSize={2}>
              If you think anyone has violated our Conduct or cheating policy,
              please reach out to us confidentially at{' '}
              <Link href="mailto:challenge@hackclub.com">
                challenge@hackclub.com
              </Link>
              .
            </Text>
          </Modal>
          <Overlay onClick={this.toggleRules} />
        </Fragment>
      )
    }
    return <RulesButton onClick={this.toggleRules} />
  }
}

export default Help

@@ -13,27 +13,16 @@
 , %7B 
-Fragment, Component
+useState
  %7D f
@@ -430,70 +430,86 @@
 %0A)%0A%0A
-class Help extends Component %7B%0A  state = %7B active: 
+export default () =%3E %7B%0A  const %5Bactive, setActive%5D = useState(
 false
- %7D
+)
 %0A%0A  
+const 
 togg
@@ -528,159 +528,34 @@
  =%3E 
-%7B%0A    this.setState(state =%3E (%7B active: !state.active %7D))%0A  %7D%0A%0A  // Render a modal for challenge rules on button press%0A  render() %7B%0A    if (this.state.
+setActive(!active)%0A%0A  if (
 acti
@@ -560,18 +560,16 @@
 tive) %7B%0A
-  
     retu
@@ -583,23 +583,11 @@
     
-  %3CFragment%3E%0A  
+%3C%3E%0A
     
@@ -604,37 +604,32 @@
 Button onClick=%7B
-this.
 toggleRules%7D /%3E%0A
@@ -620,34 +620,32 @@
 toggleRules%7D /%3E%0A
-  
         %3CModal a
@@ -685,18 +685,16 @@
         
-  
 %3CCloseBu
@@ -699,37 +699,32 @@
 Button onClick=%7B
-this.
 toggleRules%7D /%3E%0A
@@ -733,18 +733,16 @@
         
-  
 %3CHeading
@@ -776,34 +776,32 @@
 g.h2%3E%0A          
-  
 %3CText fontSize=%7B
@@ -811,18 +811,16 @@
 my=%7B3%7D%3E%0A
-  
         
@@ -897,18 +897,16 @@
         
-  
 follows 
@@ -918,26 +918,24 @@
 Club%E2%80%99s%7B' '%7D%0A
-  
             
@@ -1007,18 +1007,16 @@
         
- 
- 
 Code of 
@@ -1031,34 +1031,32 @@
             
-  
 %3C/Link%3E%0A
             
@@ -1035,34 +1035,32 @@
         %3C/Link%3E%0A
-  
             . An
@@ -1129,18 +1129,16 @@
         
-  
 contesta
@@ -1189,30 +1189,16 @@
 manently
-%0A             
  banned.
@@ -1204,34 +1204,32 @@
 .%0A          
-  
 %3C/Text%3E%0A
             
@@ -1208,34 +1208,32 @@
         %3C/Text%3E%0A
-  
           %3CText 
@@ -1258,18 +1258,16 @@
         
- 
- 
 If you t
@@ -1335,18 +1335,16 @@
         
-  
 please r
@@ -1377,26 +1377,24 @@
 lly at%7B' '%7D%0A
-  
             
@@ -1451,18 +1451,16 @@
         
-  
 challeng
@@ -1482,34 +1482,32 @@
             
-  
 %3C/Link%3E%0A
             
@@ -1486,34 +1486,32 @@
         %3C/Link%3E%0A
-  
             .%0A  
@@ -1514,34 +1514,32 @@
 .%0A          
-  
 %3C/Text%3E%0A
           %3C/
@@ -1518,34 +1518,32 @@
         %3C/Text%3E%0A
-  
         %3C/Modal%3E
@@ -1551,18 +1551,16 @@
         
- 
- 
 %3COverlay
@@ -1561,37 +1561,32 @@
 verlay onClick=%7B
-this.
 toggleRules%7D /%3E%0A
@@ -1595,40 +1595,24 @@
     
-  %3C/Fragment
+%3C/
 %3E%0A    
-  
 )%0A  
- 
- 
 %7D%0A  
- 
- 
 retu
@@ -1640,13 +1640,8 @@
 ck=%7B
-this.
 togg
@@ -1656,31 +1656,6 @@
  /%3E%0A
-  %7D%0A%7D%0A%0Aexport default Help
+%7D
 %0A

Refactor Help modal