absolutely massive typescript porting time

packages/roleypoly-ui/pages/_app.tsx

@@ -8,11 +8,11 @@ import { Provider } from 'react-redux'
 import ErrorP, { Overlay } from './_error'
 import styled from 'styled-components'
 import { withRedux } from '../config/redux'
-import type { UserPartial } from '@roleypoly/types'
+import { UserPartial } from '@roleypoly/types'
 
-type NextPage = React.Component<any> & React.StatelessFunctionalComponent<any> & {
-  getInitialProps: (ctx: any, ...args: any) => any
-}
+// type NextPage = React.Component<any> | React.FunctionComponent<any> & {
+//   getInitialProps: (ctx: any, ...args: any) => any
+// }
 
 const MissingJS = styled.noscript`
   display: flex;
@@ -25,18 +25,18 @@ const MissingJS = styled.noscript`
 `
 
 class RoleypolyApp extends App {
-  static async getInitialProps ({ Component, ctx, router }: { Component: NextPage, router: any, ctx: {[x:string]: any}}) {
+  static async getInitialProps ({ Component, ctx, router }: any) {
     // Fix for next/error rendering instead of our error page.
     // Who knows why this would ever happen.
-    if (Component.displayName === 'ErrorPage' || Component.constructor.name === 'ErrorPage') {
+    if (Component.constructor.name === 'ErrorPage') {
       Component = ErrorP
     }
 
     // console.log({ Component })
 
     let pageProps = {}
-    const rpc = withCookies(ctx)
-    let user: ?UserPartial
+    const rpc = withCookies()
+    let user: UserPartial | null = null
     try {
       user = await rpc.getCurrentUser()
       ctx.user = user
@@ -75,7 +75,7 @@ class RoleypolyApp extends App {
   }
 
   render () {
-    const { Component, pageProps, router, user, layout, robots, store } = this.props
+    const { Component, pageProps, router, user, layout, robots, store } = this.props as any
     // Fix for next/error rendering instead of our error page.
     // Who knows why this would ever happen.
     const ErrorCaughtComponent = (Component.displayName === 'ErrorPage' || Component.constructor.name === 'ErrorPage') ? ErrorP : Component

packages/roleypoly-ui/pages/_error.tsx

@@ -24,9 +24,9 @@ const ResponsiveSplitter = styled.div`
   font-size: 1.3em;
   flex-direction: column;
   ${md`
-    flex-direction: row; 
-    min-height: 100vh; 
-    position: relative; 
+    flex-direction: row;
+    min-height: 100vh;
+    position: relative;
     top: -50px;
   `}
 
@@ -52,10 +52,14 @@ const Code = styled.h1`
   ${md`font-size: 2em;`}
 `
 
-export default class CustomErrorPage extends React.Component {
-  static getInitialProps ({ res, err, robots }) {
-    const statusCode = res ? res.statusCode : err ? err.statusCode : null
-    robots = 'NOINDEX, NOFOLLOW'
+type CEPProps = {
+  statusCode: number
+}
+
+export default class CustomErrorPage extends React.Component<CEPProps> {
+  static getInitialProps ({ res, err }): CEPProps {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : 0
+    // const robots = 'NOINDEX, NOFOLLOW'
     return { statusCode }
   }
 
@@ -68,7 +72,7 @@ export default class CustomErrorPage extends React.Component {
   renderServer = () => this.out('Oops.', 'Server was unhappy about this render. Try reloading or changing page.', 'クッキーを送ってください〜')
   renderAuthExpired = () => this.out('Woah.', 'That magic login link was expired.', 'What are you trying to do?')
 
-  out (code, description, flair) {
+  out (code: string, description: string, flair: string) {
     return <div>
       <Overlay />
       <ResponsiveSplitter>

packages/roleypoly-ui/pages/_internal/_server.tsx

@@ -1,37 +1,33 @@
 // @flow
 import * as React from 'react'
 import Head from 'next/head'
-import type { PageProps } from '../../types'
+import { PageProps } from '../../types'
 import SocialCards from '../../components/social-cards'
 import redirect from '../../util/redirect'
-import { connect } from 'react-redux'
-import { fetchServerIfNeed, getCurrentServerState, type ServerState } from '../../stores/currentServer'
-import { renderRoles, getCategoryViewState, toggleRole, type ViewState } from '../../stores/roles'
+// import { connect } from 'react-redux'
 import styled from 'styled-components'
 import Role from '../../components/role'
 
 type ServerPageProps = PageProps & {
-  currentServer: ServerState,
-  view: ViewState,
+  currentServer: any,
+  view: any,
   isDiscordBot: boolean
 }
 
-const mapStateToProps = (state, { router: { query: { id } } }) => {
-  return {
-    currentServer: getCurrentServerState(state, id),
-    view: getCategoryViewState(state)
-  }
-}
-
 const Category = styled.div``
-const Hider = styled.div``
+
+type HiderProps = {
+  visible: boolean
+  children?: any
+}
+const Hider = styled.div<HiderProps>``
 
 const RoleHolder = styled.div`
   display: flex;
   flex-wrap: wrap;
 `
 class Server extends React.PureComponent<ServerPageProps> {
-  static async getInitialProps (ctx: *, rpc: *, router: *) {
+  static async getInitialProps (ctx: any, rpc: any, router: any) {
     const isDiscordBot = ctx.req && ctx.req.headers['user-agent'].includes('Discordbot')
     if (ctx.user == null) {
       if (!isDiscordBot) {
@@ -40,10 +36,10 @@ class Server extends React.PureComponent<ServerPageProps> {
     }
 
     ctx.robots = 'NOINDEX, NOFOLLOW'
-    await ctx.store.dispatch(fetchServerIfNeed(router.query.id, rpc))
+    // await ctx.store.dispatch(fetchServerIfNeed(router.query.id, rpc))
 
     if (!isDiscordBot) {
-      await ctx.store.dispatch(renderRoles(router.query.id))
+      // await ctx.store.dispatch(renderRoles(router.query.id))
     }
     return { isDiscordBot }
   }
@@ -54,13 +50,13 @@ class Server extends React.PureComponent<ServerPageProps> {
       this.props.router.push('/s/add')
     }
 
-    await dispatch(fetchServerIfNeed(id))
-    await dispatch(renderRoles(id))
+    // await dispatch(fetchServerIfNeed(id))
+    // await dispatch(renderRoles(id))
   }
 
-  onToggle = (role) => (nextState) => {
+  onToggle = (role) => (/*nextState*/) => {
     if (role.safe) {
-      this.props.dispatch(toggleRole(role.id, nextState))
+      // this.props.dispatch(toggleRole(role.id, nextState))
     }
   }
 
@@ -86,7 +82,7 @@ class Server extends React.PureComponent<ServerPageProps> {
           <title key='title'>{currentServer.server.name} - Roleypoly</title>
         </Head>
         { this.renderSocial() }
-        hello <span style={{ color: currentServer.gm?.color }}>{currentServer.gm?.nickname}</span> on {currentServer.server.name} ({ view.dirty ? 'dirty' : 'clean' })
+        hello <span style={{ color: currentServer.gm.color }}>{currentServer.gm.nickname }</span> on {currentServer.server.name} ({ view.dirty ? 'dirty' : 'clean' })
         <Hider visible={true || currentServer.id !== null}>
           { !view.invalidated && view.categories.map(c => <Category key={`cat__${c.name}__${c.id}`}>
             <div>{ c.name }</div>
@@ -102,4 +98,4 @@ class Server extends React.PureComponent<ServerPageProps> {
   }
 }
 
-export default connect(mapStateToProps)(Server)
+export default Server

packages/roleypoly-ui/pages/_test/landing-mock.tsx

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import type { PageProps } from '../../types'
+import { PageProps } from '../../types'
 
 export default class LandingTest extends React.Component<PageProps> {
   render () {

packages/roleypoly-ui/pages/auth/login.tsx

@@ -6,8 +6,8 @@ import DiscordButton from '../../components/discord-button'
 import RPC from '../../config/rpc'
 import redirect from '../../util/redirect'
 import dynamic from 'next/dynamic'
-import type { PageProps } from '../../types'
-import type { ServerSlug } from '@roleypoly/types'
+import { PageProps } from '../../types'
+import { ServerSlug } from '@roleypoly/types'
 import getConfig from 'next/config'
 const { publicRuntimeConfig: { BOT_HANDLE } } = getConfig()
 
@@ -17,8 +17,8 @@ type AuthLoginState = {
 }
 
 type AuthLoginProps = PageProps & {
-  redirect: ?string,
-  redirectSlug: ?ServerSlug
+  redirect?: string,
+  redirectSlug?: ServerSlug
 }
 
 const Wrapper = styled.div`
@@ -124,8 +124,8 @@ export default class AuthLogin extends React.Component<AuthLoginProps, AuthLogin
     waiting: false
   }
 
-  static async getInitialProps (ctx: *, rpc: typeof RPC, router: *) {
-    let { r } = (router.query: { r: string })
+  static async getInitialProps (ctx: any, rpc: typeof RPC, router: any) {
+    let { r } = (router.query as { r?: string })
 
     if (ctx.user != null) {
       redirect(ctx, r || '/')
@@ -133,17 +133,19 @@ export default class AuthLogin extends React.Component<AuthLoginProps, AuthLogin
 
     ctx.robots = 'NOINDEX, NOFOLLOW'
 
-    if (r != null) {
-      let redirectSlug = null
+    if (r !== undefined) {
+      let redirectSlug: ServerSlug | null = null
       if (r.startsWith('/s/') && r !== '/s/add') {
         redirectSlug = await rpc.getServerSlug(r.replace('/s/', ''))
       }
       return { redirect: r, redirectSlug }
     }
+
+    return {}
   }
 
   componentDidMount () {
-    if (this.props.redirect != null) {
+    if (this.props.redirect !== undefined) {
       this.props.router.replace(this.props.router.pathname)
     }
   }
@@ -176,7 +178,7 @@ export default class AuthLogin extends React.Component<AuthLoginProps, AuthLogin
   render () {
     return <Wrapper>
       <div>
-        {(this.props.redirectSlug != null) ? <Slug {...this.props.redirectSlug} /> : null}
+        {(this.props.redirectSlug !== undefined) ? <Slug {...this.props.redirectSlug} /> : null}
         <DiscordButton href={`/api/auth/redirect?r=${this.props.redirect || '/'}`}>Sign in with Discord</DiscordButton>
         <Line />
         <div>

packages/roleypoly-ui/pages/help/why-no-roles.tsx

@@ -3,8 +3,13 @@ import styled from 'styled-components'
 import demoRoles from '../../config/demo'
 import MediaQuery from '../../kit/media'
 
-const admin = { name: 'admin', color: '#db2828' }
-const bot = { name: 'roleypoly', color: 'var(--c-5)' }
+type Role = {
+  name: string
+  color: string
+}
+
+const admin: Role = { name: 'admin', color: '#db2828' }
+const bot: Role = { name: 'roleypoly', color: 'var(--c-5)' }
 
 const exampleGood = [
   admin,
@@ -39,7 +44,7 @@ const Collapser = styled.div`
   })}
 `
 
-const DiscordRole = styled.div`
+const DiscordRole = styled.div<{role: Role}>`
   color: ${({ role: { color } }) => color};
   position: relative;
   padding: 0.3em 0.6em;