TerribleDev/minbin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reduce connected containers

Browse Source
This commit is contained in:
Tommy Parnell
2017-12-21 17:40:37 -05:00
parent 1dc3d3ba57
commit b65bb0b7bf
9 changed files with 2238 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,3 +1,4 @@
node_modules
dist
.vscode
.vscode
npm-debug.log

4
package.json
View File

@@ -33,6 +33,8 @@
"css-loader": "^0.28.7",
"source-map-loader": "^0.2.3",
"style-loader": "^0.19.1",
"typescript": "^2.6.2"
"typescript": "^2.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}

32
src/components/TabNav.tsx
View File

@@ -1,35 +1,37 @@
import { IsLoggedIn } from '../containers/IsLoggedIn';
import { LoginState } from '../models/LoginState';
import { Edit } from '../containers/Edit';
import { Tab1 } from './Tab1';
import * as React from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, NavbarBrand } from 'reactstrap';
export class TabNav extends React.Component<any, any> {
constructor(props: any) {
export interface TabSelected {tabNumber: string}
export interface TabNavProps {login: LoginState}
export class TabNav extends React.Component<TabNavProps, TabSelected> {
constructor(props: TabNavProps) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
activeTab: '1'
tabNumber: "1"
};
}
toggle(tab: string) {
if (this.state.activeTab !== tab) {
if (this.state.tabNumber !== tab) {
super.setState({
activeTab: tab
tabNumber: tab
});
}
}
render() {
let plzLogin = <h4> Please login, yo</h4>
let editor = <Edit docId={"awesome"} />
var editor = this.props.login.isLoggedIn ? <Edit docId={"awesome"} login={this.props.login} /> : <h4> Please login, yo</h4>
return (
<div>
<Nav tabs className="ml-auto">
<NavItem>
<NavLink
className={this.state.activeTab === '1' ? 'active': ''}
className={this.state.tabNumber === '1' ? 'active': ''}
onClick={() => { this.toggle('1'); }}
>
View
@@ -37,23 +39,23 @@ export class TabNav extends React.Component<any, any> {
</NavItem>
<NavItem>
<NavLink
className={this.state.activeTab === '2' ? 'active': ''}
className={this.state.tabNumber === '2' ? 'active': ''}
onClick={() => { this.toggle('2'); }}
>
Edit
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabContent activeTab={this.state.tabNumber}>
<TabPane tabId="1">
<Row >
<Tab1 />
<Row style={{height: '100%'}}>
<Tab1 />
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<Row style={{height: '100%'}}>
<Col sm="12">
<IsLoggedIn isTrue={editor} isFalse={plzLogin} />
{editor}
</Col>
</Row>
</TabPane>

27
src/containers/AppContainer.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { LoginContainer } from './Login';
import { TabNav } from '../components/TabNav';
import { NavBar } from '../components/NavBar';
import * as React from 'react';
import * as redux from 'redux';
import {Store} from "redux"
import { connect } from 'react-redux';
import { AppState } from '../models/AppState';
const mapStateToProps = (state : AppState) : AppState =>
{
return state;
};
class appContainer extends React.Component<AppState, {}>{
render(){
return <div className="app container-fluid">
<NavBar>
<LoginContainer/>
</NavBar>
<TabNav login={this.props.login} />
</div>
}
}
export const AppContainer = connect(mapStateToProps)(appContainer)

23
src/containers/Edit.tsx
View File

@@ -1,3 +1,4 @@
import { LoginState } from '../models/LoginState';
import { AppState } from '../models/AppState';
import * as React from 'react';
import * as _ from 'underscore';
@@ -6,16 +7,10 @@ import {Document} from '../models/Document'
import { Col } from 'reactstrap';
import { connect } from 'react-redux';
interface PassedInProps {docId: string}
interface ReduxProps {appState: AppState}
interface EditProps extends PassedInProps, ReduxProps{}
interface EditProps {docId: string, login: LoginState}
interface EditState {document: Document}
const mapStateToProps = (state : AppState, ownProps : PassedInProps) : EditProps =>
{
return {appState: state, docId: ownProps.docId};
}
export class edit extends React.Component<EditProps, EditState>{
export class Edit extends React.Component<EditProps, EditState>{
constructor(props: EditProps){
super(props)
this.state = {
@@ -27,7 +22,7 @@ export class edit extends React.Component<EditProps, EditState>{
}
ref: any
componentDidMount() {
if(!this.props.appState.login.isLoggedIn){
if(!this.props.login.isLoggedIn){
return;
}
let docId = '';
@@ -37,7 +32,7 @@ export class edit extends React.Component<EditProps, EditState>{
else{
docId = this.generateDocId()
}
this.ref = fbData.rebase.syncState(`docs/${this.props.appState.login.uid}/${docId}`, {
this.ref = fbData.rebase.syncState(`docs/${this.props.login.uid}/${docId}`, {
context: this,
state: 'document',
asArray: false
@@ -66,8 +61,8 @@ export class edit extends React.Component<EditProps, EditState>{
render(){
let textArea = null;
if(this.props.appState.login.isLoggedIn){
textArea = <textarea value={this.state.document.Body} onChange={(event)=>this.updateDocument(event.target.value)}></textarea>
if(this.props.login.isLoggedIn){
textArea = <textarea className="form-control" style={{height: "70vh"}} value={this.state.document.Body} onChange={(event)=>this.updateDocument(event.target.value)}></textarea>
}
return(
<Col sm="12">
@@ -76,6 +71,4 @@ export class edit extends React.Component<EditProps, EditState>{
);
}
}
export const Edit = connect(mapStateToProps)(edit)
}

22
src/containers/IsLoggedIn.tsx
View File

@@ -1,22 +0,0 @@
import { AppState } from '../models/AppState';
import * as React from 'react';
import { connect } from 'react-redux';
export interface IsLoggedInReduxProps {appstate: AppState}
export interface IsLoggedInPassedProps {isTrue: JSX.Element, isFalse: JSX.Element}
export interface IsLoggedInProps extends IsLoggedInReduxProps,IsLoggedInPassedProps {}
const mapStateToProps = (state : AppState, ownProps : IsLoggedInPassedProps) : IsLoggedInProps =>
{
return {isTrue: ownProps.isTrue, isFalse: ownProps.isFalse, appstate: state};
}
class isLoggedIn extends React.Component<IsLoggedInProps,{}>{
render(){
if(this.props.appstate.login.isLoggedIn){
return this.props.isTrue
}
else{
return this.props.isFalse
}
}
}
export const IsLoggedIn = connect(mapStateToProps)(isLoggedIn)

26
src/containers/Login.tsx
View File

@@ -3,44 +3,44 @@ import * as actions from '../actions/loginActions';
import { LoginState } from '../models/LoginState';
import * as React from 'react';
import * as firebase from 'firebase';
import { LoginButton } from "../components/LoginButton"
import { LoginButton } from "../components/LoginButton";
import * as reactRedux from 'react-redux';
import {AppState} from '../models/AppState'
import {AppState} from '../models/AppState';
import { Dispatch, connect } from 'react-redux';
import * as redux from 'redux';
const mapStateToProps = (state : AppState) : IBaseLoginProps =>
{
return {loginState: state.login};
}
};
const mapDispatchToProps = (dispatch: (action: Action)=>any) : IBaseLoginDispatches => {
return {
onLogin:(loginState: LoginState) => dispatch(actions.login(loginState)),
onLogOut:() => dispatch(actions.logout())
}
}
interface IBaseLoginProps {loginState: LoginState}
interface IBaseLoginDispatches {onLogin: (loginState: LoginState)=>any, onLogOut: ()=>any}
};
interface IBaseLoginProps {loginState: LoginState;}
interface IBaseLoginDispatches {onLogin: (loginState: LoginState)=>any; onLogOut: ()=>any;}
interface ILoginProps extends IBaseLoginProps,IBaseLoginDispatches {}
class loginContainer extends React.Component<ILoginProps,{}>{
constructor(props: ILoginProps){
super(props)
super(props);
firebase.auth().onAuthStateChanged((e)=>this.handleLogin(e));
}
handleLogin(user: firebase.User){
if (user) {
this.props.onLogin({isLoggedIn: true, displayName: user.displayName, uid: user.uid})
this.props.onLogin({isLoggedIn: true, displayName: user.displayName, uid: user.uid});
} else {
this.props.onLogOut()
this.props.onLogOut();
}
}
logout(){
firebase.auth().signOut()
.then(()=>this.props.onLogOut())
.then(()=>this.props.onLogOut());
}
login(){
@@ -51,12 +51,12 @@ class loginContainer extends React.Component<ILoginProps,{}>{
if(this.props && this.props.loginState && this.props.loginState.isLoggedIn){
return <span> Hi, {this.props.loginState.displayName} <a href="#" onClick={()=>this.logout()}>Log Out</a> </span>
return <span> Hi, {this.props.loginState.displayName} <a href="#" onClick={()=>this.logout()}>Log Out</a> </span>;
}
else{
return <LoginButton onClick={this.login} />
return <LoginButton onClick={this.login} />;
}
}
}
export const LoginContainer = connect(mapStateToProps, mapDispatchToProps)(loginContainer)
export const LoginContainer = connect(mapStateToProps, mapDispatchToProps)(loginContainer);

8
src/index.tsx
View File

@@ -9,15 +9,11 @@ import { LoginContainer } from './containers/Login'
import { createStore } from 'redux'
import {MainReducer} from './reducers/MainReducer'
import { Provider } from 'react-redux'
import { AppContainer } from "./containers/AppContainer";
let store = createStore(MainReducer)
const App = () => (
<div className="app container-fluid">
<NavBar>
<LoginContainer/>
</NavBar>
<TabNav />
</div>
<AppContainer/>
);

2202
yarn.lock
View File

File diff suppressed because it is too large Load Diff