add router data to header

ui/components/header/auth.js

@@ -7,6 +7,7 @@ import styled from 'styled-components'
 import { Hide } from '../../kit/media'
 import Link from 'next/link'
 import { connect } from 'react-redux'
+import { getCurrentServerState } from '../../stores/currentServer'
 
 const temporaryServer = {
   id: '423497622876061707',
@@ -47,10 +48,10 @@ const StyledAvatar = styled.img`
 
 const ServerSelector = (props) => <div {...props}>
   <div>
-    <StyledServerPic {...temporaryServer} />
+    <StyledServerPic {...props} />
   </div>
   <div>
-    { temporaryServer.name }
+    { props.name }
   </div>
 </div>
 
@@ -73,22 +74,27 @@ const StyledUserSection = styled(UserSection)`
   text-align: right;
 `
 
-const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User }> = ({ user }) => (
+const Spacer = styled.div`
+  flex: 1;
+`
+
+const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User, isOnServer: boolean, currentServer: * }> = ({ user, isOnServer, currentServer = temporaryServer }) => (
   <HeaderBarCommon noBackground={false}>
     <>
-      <Link href='/s/add' prefetch>
+      <Link href='/'>
         <LogoBox>
           <Logomark />
         </LogoBox>
       </Link>
-      <StyledServerSelector />
+      { isOnServer ? <StyledServerSelector name={currentServer.name} id={currentServer.id} icon={currentServer.icon} /> : <Spacer /> }
       <StyledUserSection user={user} />
     </>
   </HeaderBarCommon>
 )
 
-const mapStateToProps = state => {
+const mapStateToProps = (state, { router }) => ({
-
+  isOnServer: router.pathname === '/_internal/_server',
-}
+  currentServer: router.pathname === '/_internal/_server' ? getCurrentServerState(state, router.query.id).server : {}
+})
 
 export default connect(mapStateToProps)(HeaderBarAuth)

ui/components/header/common.js

@@ -17,7 +17,7 @@ const Header = styled.div`
   top: 0;
   left: 0;
   right: 0;
-  z-index: 100;
+  z-index: 5;
 `
 
 const HeaderInner = styled.div`

ui/components/layout.js

@@ -23,11 +23,11 @@ const ContentBox = styled.div`
   /* max-height: calc(100vh - 50px); */
 `
 
-const Layout = ({ children, user, noBackground }: {children: React.Element<any>, user: User, noBackground: boolean }) => <>
+const Layout = ({ children, user, noBackground, router }: {children: React.Element<any>, user: User, noBackground: boolean, router: * }) => <>
   <GlobalColors />
   <SocialCards />
   <LayoutWrapper>
-    <HeaderBar user={user} noBackground={noBackground} />
+    <HeaderBar user={user} noBackground={noBackground} router={router} />
     <ContentBox>
       {children}
     </ContentBox>

ui/pages/_app.js

@@ -56,7 +56,11 @@ class RoleypolyApp extends App {
   catchFOUC () {
     setTimeout(() => {
       if (document.documentElement) document.documentElement.className += ' force-active'
-    }, 1500)
+    }, 700)
+  }
+
+  componentDidMount () {
+    this.catchFOUC()
   }
 
   render () {
@@ -87,7 +91,7 @@ class RoleypolyApp extends App {
           ` }} />
       </Head>
       <Provider store={store}>
-        <Layout user={user} {...layout}>
+        <Layout user={user} {...layout} router={router}>
           <ErrorCaughtComponent {...pageProps} router={router} originalName={Component.displayName || Component.constructor.name} />
         </Layout>
       </Provider>