roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-17 10:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

swap to styled-components across the app.

Browse source
This commit is contained in:
41666 2019-03-11 02:51:36 -05:00
parent 7e0379ec3c
commit df2a27663b
16 changed files with 727 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

17
UI/pages/_app.js
View file

@ -1,19 +1,19 @@
import * as React from 'react'
import App, { Container } from 'next/app'
import Head from 'next/head'
import GlobalColors from '../components/global-colors'
import SocialCards from '../components/social-cards'
// import RPCClient from '../rpc'
import Layout from '../components/layout'
import { withCookies } from '../config/rpc'
class RoleypolyApp extends App {
static async getInitialProps ({ Component, ctx }) {
let pageProps = {}
const rpc = withCookies(ctx)
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
return { pageProps, user: await rpc.getCurrentUser() }
}
componentDidMount () {
@ -54,7 +54,7 @@ class RoleypolyApp extends App {
}
render () {
const { Component, pageProps, router, rpc } = this.props
const { Component, pageProps, router, user } = this.props
return (
<Container>
@ -64,9 +64,10 @@ class RoleypolyApp extends App {
<title key='title'>Roleypoly</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
</Head>
<GlobalColors />
<SocialCards />
<Component {...pageProps} router={router} rpc={rpc} />
<Layout user={user}>
<Component {...pageProps} router={router} />
</Layout>
</Container>
)
}

24
UI/pages/_document.js Normal file
View file

@ -0,0 +1,24 @@
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps (ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: <>{initialProps.styles}{sheet.getStyleElement()}</>
}
} finally {
sheet.seal()
}
}
}

21
UI/pages/_test/landing-mock.js
View file

@ -1,26 +1,9 @@
// @flow
import * as React from 'react'
import type { PageProps } from '../../types'
import HeaderBar from '../../containers/header-bar'
import { withCookies } from '../../config/rpc'
import { type UserPartial } from '../../../services/discord'
type InitialProps = {
user: ?UserPartial
}
export default class LandingTest extends React.Component<PageProps & InitialProps> {
static async getInitialProps (ctx: PageProps): Promise<InitialProps> {
const rpc = withCookies(ctx)
return {
user: await rpc.getCurrentUser()
}
}
export default class LandingTest extends React.Component<PageProps> {
render () {
return <div>
<HeaderBar user={this.props.user} />
</div>
return <div />
}
}

89
UI/pages/index.js
View file

@ -1,91 +1,10 @@
import React from 'react'
import Link from 'next/link'
import Head from '../components/head'
import Nav from '../components/nav'
// import Link from 'next/link'
// import Head from '../components/head'
// import Nav from '../components/nav'
const Home = () => (
<div>
<Head title='Home' />
<Nav />
<div className='hero'>
<h1 className='title'>Welcome to Next!</h1>
<p className='description'>
To get started, edit <code>pages/index.js</code> and save to reload.
</p>
<div className='row'>
<Link href='https://github.com/zeit/next.js#getting-started'>
<a className='card'>
<h3>Getting Started &rarr;</h3>
<p>Learn more about Next on Github and in their examples</p>
</a>
</Link>
<Link href='https://open.segment.com/create-next-app'>
<a className='card'>
<h3>Examples &rarr;</h3>
<p>
Find other example boilerplates on the{' '}
<code>create-next-app</code> site
</p>
</a>
</Link>
<Link href='https://github.com/segmentio/create-next-app'>
<a className='card'>
<h3>Create Next App &rarr;</h3>
<p>Was this tool helpful? Let us know how we can improve it</p>
</a>
</Link>
</div>
</div>
<style jsx>{`
.hero {
width: 100%;
color: #333;
}
.title {
margin: 0;
width: 100%;
padding-top: 80px;
line-height: 1.15;
font-size: 48px;
}
.title,
.description {
text-align: center;
}
.row {
max-width: 880px;
margin: 80px auto 40px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.card {
padding: 18px 18px 24px;
width: 220px;
text-align: left;
text-decoration: none;
color: #434343;
border: 1px solid #9b9b9b;
}
.card:hover {
border-color: #067df7;
}
.card h3 {
margin: 0;
color: #067df7;
font-size: 18px;
}
.card p {
margin: 0;
padding: 12px 0 0;
font-size: 13px;
color: #333;
}
`}</style>
</div>
<h1>Hi there.</h1>
)
export default Home