Merge pull request #11 from rayriffy/feature/refactor

Refactor
rayriffy · Apr 15, 2019 · 585eead · 585eead
2 parents 5fdbc1a + 504abf8
commit 585eead
Show file tree

Hide file tree

Showing 16 changed files with 330 additions and 340 deletions.
diff --git a/src/components/app.js b/src/components/app.js
@@ -10,12 +10,13 @@ import {Row, Col, Layout, Typography, Divider} from 'antd'
 import {Nav} from './nav'
 
 import appStyle from './app.module.css'
+import darkStyle from '../styles/dark.module.css'
 
 const {Footer, Content} = Layout
 const {Title, Text} = Typography
 
 export class App extends React.Component {
-  state = {dark: LocalStorage.get('dark')}
+  state = {mounted: false, dark: LocalStorage.get('dark')}
 
   toggleDark = () => {
     let newState = !LocalStorage('dark')
@@ -28,10 +29,12 @@ export class App extends React.Component {
       LocalStorage.set('dark', false)
       this.setState({dark: false})
     }
+
+    this.setState({mounted: true})
   }
 
   render() {
-    const {dark} = this.state
+    const {mounted, dark} = this.state
     const {title, subtitle, children, navigation = true} = this.props
 
     return (
@@ -43,31 +46,33 @@ export class App extends React.Component {
             }`}
           </style>
         </Helmet>
-        <Layout style={{backgroundColor: dark ? '#272728' : '#f0f2f5'}}>
-          <Content className={appStyle.container}>
-            <Row className={appStyle.header} type="flex" justify="space-between" align="bottom">
-              <Col span={navigation ? 22 : 24}>
-                <Title style={{color: dark ? '#e1e1e1' : 'rgba(0, 0, 0, 0.85)'}} className={appStyle.title}>
-                  {title}
-                </Title>
-                {subtitle && (
-                  <Title
-                    level={3}
-                    style={{color: dark ? '#a7a7a8' : 'rgba(0, 0, 0, 0.45)', display: 'inline'}}>{` ${subtitle}`}</Title>
-                )}
-              </Col>
-              {navigation && <Nav toggleDark={this.toggleDark} />}
-            </Row>
-            <Divider className={appStyle.divider} />
-            {children}
-          </Content>
-          <Footer className={appStyle.footer}>
-            <Text style={{color: dark ? '#fff' : 'rgba(0, 0, 0, 0.65)'}}>Built with love by</Text>{' '}
-            <a href="https://facebook.com/rayriffy" style={{color: dark ? '#3784f7' : '#1890ff'}}>
-              r4yr1ffy
-            </a>
-          </Footer>
-        </Layout>
+        {mounted && (
+          <Layout style={{backgroundColor: dark ? '#272728' : '#f0f2f5'}}>
+            <Content className={appStyle.container}>
+              <Row className={appStyle.header} type="flex" justify="space-between" align="bottom">
+                <Col span={navigation ? 22 : 24}>
+                  <Title className={[appStyle.title, dark ? darkStyle.appTitle : null].join(' ')}>{title}</Title>
+                  {subtitle && (
+                    <Title
+                      level={3}
+                      className={dark ? darkStyle.appSubtitle : null}
+                      style={{display: 'inline'}}>{` ${subtitle}`}</Title>
+                  )}
+                </Col>
+                {navigation && <Nav toggleDark={this.toggleDark} />}
+              </Row>
+              <Divider className={appStyle.divider} />
+              {children}
+            </Content>
+            <Footer className={appStyle.footer}>
+              <Text className={dark ? darkStyle.whiteText : null}>Built with love by</Text>{' '}
+              <a href="https://facebook.com/rayriffy" className={dark ? darkStyle.link : null}>
+                r4yr1ffy
+              </a>
+            </Footer>
+          </Layout>
+        )}
+        \
       </AppContextProvider>
     )
   }

diff --git a/src/components/nav.js b/src/components/nav.js
@@ -7,6 +7,7 @@ import {AppContextConsumer} from '../context/AppContext'
 
 import {Col, Icon, Drawer, List, Typography, Switch} from 'antd'
 
+import darkStyle from '../styles/dark.module.css'
 import navStyle from './nav.module.css'
 
 const {Title, Text} = Typography
@@ -67,10 +68,9 @@ export class Nav extends React.Component {
                 return (
                   <Col span={2}>
                     <Icon
-                      className={navStyle.icon}
+                      className={[navStyle.icon, dark ? darkStyle.whiteText : null].join(' ')}
                       type="more"
                       onClick={this.showDrawer}
-                      style={{color: dark ? '#fff' : 'rgba(0, 0, 0, 0.65)'}}
                     />
                     <Drawer
                       title={

diff --git a/src/components/post.js b/src/components/post.js
@@ -8,6 +8,8 @@ import {Icon, Divider} from 'antd'
 import {Meta} from './post/meta'
 import {Read} from './post/read'
 
+import darkStyle from '../styles/dark.module.css'
+
 export class Post extends React.Component {
   render() {
     const {raw, post = {exclude: []}} = this.props
@@ -19,7 +21,7 @@ export class Post extends React.Component {
           {({dark}) => {
             return (
               <Divider>
-                <Icon type="book" theme="outlined" style={{color: dark ? '#fff' : 'rgba(0, 0, 0, 0.85)'}} />
+                <Icon type="book" theme="outlined" className={dark ? darkStyle.whiteText : null} />
               </Divider>
             )
           }}

diff --git a/src/components/post/meta.js b/src/components/post/meta.js
@@ -8,6 +8,7 @@ import {Row, Col, Typography} from 'antd'
 import {Slug} from './meta/slug'
 import {Share} from './meta/share'
 
+import darkStyle from '../../styles/dark.module.css'
 import metaStyle from './meta.module.css'
 
 const {Title} = Typography
@@ -40,7 +41,7 @@ export class Meta extends React.Component {
                 lg={{span: 9, offset: 1}}
                 key="col-meta">
                 <Row key="meta-title">
-                  <Title level={3} style={{color: dark ? '#e1e1e1' : 'rgba(0, 0, 0, 0.85)'}}>
+                  <Title level={3} className={dark ? darkStyle.metaTitle : null}>
                     {raw.title.pretty}
                   </Title>
                 </Row>

diff --git a/src/components/post/meta/slug.js b/src/components/post/meta/slug.js
@@ -7,6 +7,7 @@ import {AppContextConsumer} from '../../../context/AppContext'
 
 import {Collapse, Tag, message} from 'antd'
 
+import darkStyle from '../../../styles/dark.module.css'
 import slugStyle from './slug.module.css'
 
 const {Panel} = Collapse
@@ -58,9 +59,7 @@ export class Slug extends React.Component {
                       const stack = _.filter(tagStack, o => o.node.name === key)[0]
                       return (
                         <Panel
-                          header={
-                            <div style={{color: dark ? '#fff' : 'rgba(0, 0, 0, 0.85)'}}>{_.capitalize(stack.node.name)}</div>
-                          }
+                          header={<div className={dark ? darkStyle.whiteText : null}>{_.capitalize(stack.node.name)}</div>}
                           showArrow={false}
                           key={`meta-${stack.node.name}`}>
                           {orderedTags[key].map(tag => {

diff --git a/src/components/poster.js b/src/components/poster.js
@@ -9,6 +9,7 @@ import {Col, Card, Tag, message} from 'antd'
 
 import LazyLoad from 'react-lazyload'
 
+import darkStyle from '../styles/dark.module.css'
 import posterStyle from './poster.module.css'
 
 const {Meta} = Card
@@ -55,8 +56,7 @@ export class Poster extends React.Component {
                     xl={{span: 4}}
                     key={`grid-${raw.id}`}>
                     <Card
-                      style={{backgroundColor: dark ? '#3c3c3d' : '#fff'}}
-                      className={posterStyle.card}
+                      className={[posterStyle.card, dark ? darkStyle.card : null].join(' ')}
                       hoverable
                       cover={
                         <a href={`/r/${raw.id}`} onClick={success}>
@@ -73,7 +73,7 @@ export class Poster extends React.Component {
                       }
                       key={`card-${raw.id}`}>
                       <Meta
-                        title={<div style={{color: dark ? '#fff' : 'rgba(0, 0, 0, 0.65)'}}>{raw.title.pretty}</div>}
+                        title={<div className={dark ? darkStyle.whiteText : null}>{raw.title.pretty}</div>}
                         description={filterTags.map(filterTag => {
                           return raw.tags.map(tag => {
                             const stack = _.filter(tagStack, o => o.node.name === filterTag)[0]

diff --git a/src/components/poster.module.css b/src/components/poster.module.css
@@ -7,6 +7,6 @@
 }
 
 .cover {
-  border-radius: 10px 10px 0 0;
+  border-radius: 10px 10px 0 0 !important;
   width: 100%;
 }
diff --git a/src/context/AppContext.js b/src/context/AppContext.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const AppContext = React.createContext({})
+const AppContext = React.createContext({})
 
 export const AppContextProvider = AppContext.Provider
 export const AppContextConsumer = AppContext.Consumer
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -9,49 +9,40 @@ import {Row, Col, Card, Typography} from 'antd'
 
 import {App} from '../components/app'
 
+import darkStyle from '../styles/dark.module.css'
+
 const {Title} = Typography
 
 export default class NotFoundPage extends React.Component {
-  state = {mounted: false}
-
-  componentDidMount = () => {
-    this.setState({mounted: true})
-  }
   render() {
     const siteTitle = this.props.data.site.siteMetadata.title
 
-    const {mounted} = this.state
-
     return (
-      <div>
-        {mounted && (
-          <App title={`${siteTitle}`} subtitle={`error`}>
-            <Helmet htmlAttributes={{lang: 'en'}} title={`Not Found · ${siteTitle}`} />
-            <AppContextConsumer>
-              {({dark}) => {
-                return (
-                  <Row>
-                    <Col
-                      xs={{span: 20, offset: 2}}
-                      sm={{span: 16, offset: 4}}
-                      md={{span: 12, offset: 6}}
-                      lg={{span: 8, offset: 8}}>
-                      <Card style={{backgroundColor: dark ? '#3c3c3d' : '#fff'}}>
-                        <Title level={2} style={{color: dark ? '#e1e1e1' : 'rgba(0, 0, 0, 0.85)'}}>
-                          Not found
-                        </Title>
-                        <p style={{color: dark ? '#fff' : 'rgba(0, 0, 0, 0.65)'}}>
-                          You just hit a route that doesn&#39;t exist... the sadness.
-                        </p>
-                      </Card>
-                    </Col>
-                  </Row>
-                )
-              }}
-            </AppContextConsumer>
-          </App>
-        )}
-      </div>
+      <App title={`${siteTitle}`} subtitle={`error`}>
+        <Helmet htmlAttributes={{lang: 'en'}} title={`Not Found · ${siteTitle}`} />
+        <AppContextConsumer>
+          {({dark}) => {
+            return (
+              <Row>
+                <Col
+                  xs={{span: 20, offset: 2}}
+                  sm={{span: 16, offset: 4}}
+                  md={{span: 12, offset: 6}}
+                  lg={{span: 8, offset: 8}}>
+                  <Card className={dark ? darkStyle.card : null}>
+                    <Title level={2} className={dark ? darkStyle.cardTitle : null}>
+                      Not found
+                    </Title>
+                    <p className={dark ? darkStyle.cardContent : null}>
+                      You just hit a route that doesn&#39;t exist... the sadness.
+                    </p>
+                  </Card>
+                </Col>
+              </Row>
+            )
+          }}
+        </AppContextConsumer>
+      </App>
     )
   }
 }