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

absolutely massive typescript porting time

Browse source
This commit is contained in:
41666 2019-06-02 18:58:15 -05:00
parent 01f238f515
commit 30d08a630f
No known key found for this signature in database
GPG key ID: BC51D07640DC10AF
159 changed files with 2563 additions and 3861 deletions
Download patch file Download diff file Expand all files Collapse all files

100
packages/roleypoly-ui/components/header/auth.tsx Normal file
View file

@ -0,0 +1,100 @@
// @flow
import * as React from 'react'
import HeaderBarCommon, { Logomark } from './common'
import { type User } from '../../stores/user'
import DiscordIcon from '../discord-guild-pic'
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',
name: 'Placeholder',
icon: '8d03476c186ec8b2f6a1a4f5e55b13fe'
}
const LogoBox = styled.a`
flex: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
`
const StyledServerPic = styled(DiscordIcon)`
border-radius: 100%;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.25);
height: 35px;
width: 35px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
`
const StyledAvatar = styled.img`
border-radius: 100%;
border: 1px solid var(--c-green);
height: 35px;
width: 35px;
margin-left: 10px;
display: flex;
align-items: center;
justify-content: center;
`
const ServerSelector = (props) => <div {...props}>
<div>
<StyledServerPic {...props} />
</div>
<div>
{ props.name }
</div>
</div>
const StyledServerSelector = styled(ServerSelector)`
flex: 1;
display: flex;
align-items: center;
justify-content: left;
`
const UserSection = ({ user, ...props }) => <div {...props}>
<Hide.SM>{ user.username }</Hide.SM>
<StyledAvatar src={user.avatar} />
</div>
const StyledUserSection = styled(UserSection)`
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
`
const Spacer = styled.div`
flex: 1;
`
const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User, isOnServer: boolean, currentServer: * }> = ({ user, isOnServer, currentServer = temporaryServer }) => (
<HeaderBarCommon noBackground={false}>
<>
<Link href='/'>
<LogoBox>
<Logomark />
</LogoBox>
</Link>
{ isOnServer ? <StyledServerSelector name={currentServer.name} id={currentServer.id} icon={currentServer.icon} /> : <Spacer /> }
<StyledUserSection user={user} />
</>
</HeaderBarCommon>
)
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)