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

moah things

Browse Source
This commit is contained in:
Tommy Parnell
2017-12-23 01:37:43 -05:00
parent 6786017892
commit 32177f809f
14 changed files with 326 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -8,10 +8,10 @@
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/node_modules/react/umd/react.development.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
<script src="/dist/bundle.js"></script>
</body>

7
package.json
View File

@@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server --output-public-path=dist",
"serve": "webpack-dev-server --output-public-path=dist --history-api-fallback",
"build": "webpack"
},
"author": "",
@@ -16,10 +16,13 @@
"@types/underscore": "^1.8.6",
"bootstrap": "^4.0.0-beta.2",
"firebase": "^4.8.0",
"path-to-regexp": "^2.1.0",
"re-base": "^3.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-syntax-highlighter": "^6.1.1",
"reactstrap": "^5.0.0-alpha.4",
"redux": "^3.7.2",
@@ -28,6 +31,8 @@
"devDependencies": {
"@types/react": "^16.0.31",
"@types/react-dom": "^16.0.3",
"@types/react-router": "^4.0.20",
"@types/react-router-dom": "^4.2.3",
"@types/reactstrap": "^5.0.6",
"awesome-typescript-loader": "^3.4.1",
"css-loader": "^0.28.7",

77
src/components/Editor.tsx
View File

@@ -1,13 +1,66 @@
// import * as React from "react";
// import { Col, FormText } from "reactstrap";
// import Document from '../models/Document'
// export interface EditorProps {document: Document, onChange}
// export class Editor extends React.Component<Document, {}>{
// render(){
// return(
// <Col sm="12">
// <textarea onch ></textarea>
// </Col>);
// }
import { LoginState } from '../models/LoginState';
import { AppState } from '../models/AppState';
import * as React from 'react';
import * as _ from 'underscore';
import fbData from '../startup/firebase'
import {Document} from '../models/Document'
import { Col } from 'reactstrap';
// }
interface EditProps {docId: string, login: LoginState, onChange?: (doc:string)=>void}
interface EditState {document: Document}
export class Editor extends React.Component<EditProps, EditState>{
constructor(props: EditProps){
super(props)
this.state = {
document:{
Title: '',
Body: ''
}
};
}
ref: any
componentDidMount() {
if(!this.props.login.isLoggedIn){
return;
}
let docId = '';
if(this.props && this.props.docId && this.props.docId.length > 0){
docId = this.props.docId;
}
else{
throw "no doc id!"
}
//todo move this functionality to the edit container
this.ref = fbData.rebase.syncState(`docs/${this.props.login.uid}/${docId}`, {
context: this,
state: 'document',
asArray: false
});
}
componentWillUnmount() {
fbData.rebase.removeBinding(this.ref);
}
updateDocument(docBody: string){
this.setState({
document: {
Title: '',
Body: docBody
}
});
}
render(){
let textArea = null;
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">
{textArea}
</Col>
);
}
}

7
src/components/ForOhFour.tsx Normal file
View File

@@ -0,0 +1,7 @@
import * as React from "react";
export class ForOhFour extends React.Component<any, any>{
render(){
return <h4>404! oh noes</h4>;
}
}

66
src/components/TabNav.tsx
View File

@@ -1,66 +0,0 @@
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 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 = {
tabNumber: "1"
};
}
toggle(tab: string) {
if (this.state.tabNumber !== tab) {
super.setState({
tabNumber: tab
});
}
}
render() {
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.tabNumber === '1' ? 'active': ''}
onClick={() => { this.toggle('1'); }}
>
View
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={this.state.tabNumber === '2' ? 'active': ''}
onClick={() => { this.toggle('2'); }}
>
Edit
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.tabNumber}>
<TabPane tabId="1">
<Row style={{height: '100%'}}>
<Tab1 />
</Row>
</TabPane>
<TabPane tabId="2">
<Row style={{height: '100%'}}>
<Col sm="12">
{editor}
</Col>
</Row>
</TabPane>
</TabContent>
</div>
);
}
}

6
src/components/Tab1.tsx → src/components/Viewer.tsx
View File

@@ -24,13 +24,13 @@ public static class Extension
}
}
`
export class Tab1 extends React.Component<any, any>{
export interface ViewerProps {doc?: string, language?: string}
export class Viewer extends React.Component<ViewerProps, any>{
render(){
return(
<Col sm="12">
<Card style={{ paddingTop: "10px" }}>
<SyntaxHighlighter showLineNumbers={true} language='cs' style={googlecode} >{exampleText}</SyntaxHighlighter>
<SyntaxHighlighter showLineNumbers={true} language={this.props.language || 'cs'} style={googlecode} >{this.props.doc || ''}</SyntaxHighlighter>
</Card>
</Col>);
}

19
src/containers/AppContainer.tsx
View File

@@ -1,24 +1,33 @@
import { Edit } from './Edit';
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';
import { Route, RouteProps, RouterChildContext, RouteComponentProps, Redirect } from 'react-router';
import { ForOhFour } from '../components/ForOhFour'
import {generateDocId} from '../util/doc'
const mapStateToProps = (state : AppState) : AppState =>
{
return state;
};
class appContainer extends React.Component<AppState, {}>{
class appContainer extends React.Component<AppState, any>{
render(){
return <div className="app container-fluid">
<NavBar>
<LoginContainer/>
</NavBar>
<TabNav login={this.props.login} />
<Route path="/d/:uid/:docId*" render={(routeProps: RouteComponentProps<{docId?: string, uid?: string}>)=>{
if(!routeProps.match.params.uid){
return <ForOhFour />
}
if(!routeProps.match.params.docId){
return <Redirect to={`/d/${routeProps.match.params.uid}/${generateDocId()}`} />
}
return <Edit login={this.props.login} docId={routeProps.match.params.docId} />
}} />
</div>
}

111
src/containers/Edit.tsx
View File

@@ -1,74 +1,67 @@
import { LoginState } from '../models/LoginState';
import { AppState } from '../models/AppState';
import { Editor } from '../components/Editor';
import { Viewer } from '../components/Viewer';
import * as React from 'react';
import * as _ from 'underscore';
import fbData from '../startup/firebase'
import {Document} from '../models/Document'
import { Col } from 'reactstrap';
import { connect } from 'react-redux';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, NavbarBrand } from 'reactstrap';
interface EditProps {docId: string, login: LoginState}
interface EditState {document: Document}
export interface EditState {tabNumber: string, doc?: string}
export interface EditProps {login: LoginState, docId?: string}
export class Edit extends React.Component<EditProps, EditState>{
constructor(props: EditProps){
super(props)
export class Edit extends React.Component<EditProps, EditState> {
constructor(props: EditProps) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
document:{
Title: '',
Body: ''
}
tabNumber: "1"
};
}
ref: any
componentDidMount() {
if(!this.props.login.isLoggedIn){
return;
}
let docId = '';
if(this.props && this.props.docId && this.props.docId.length > 0){
docId = this.props.docId;
}
else{
docId = this.generateDocId()
}
this.ref = fbData.rebase.syncState(`docs/${this.props.login.uid}/${docId}`, {
context: this,
state: 'document',
asArray: false
toggle(tab: string) {
if (this.state.tabNumber !== tab) {
super.setState({
tabNumber: tab
});
}
componentWillUnmount() {
fbData.rebase.removeBinding(this.ref);
}
generateDocId(){
let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < 8; i++){
result += str.charAt(Math.floor(Math.random()*str.length))
}
return result;
}
updateDocument(docBody: string){
this.setState({
document: {
Title: '',
Body: docBody
}
})
}
render(){
let textArea = null;
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(
render() {
var editlawl = this.props.login.isLoggedIn ? <Editor docId={this.props.docId} login={this.props.login} onChange={(doc:string)=>{this.setState({doc: doc}) }} /> : <h4> Please login, yo</h4>
var viewer = this.state.tabNumber === '1'? <Viewer doc={this.state.doc} /> : null;
return (
<div>
<Nav tabs className="ml-auto">
<NavItem>
<NavLink
className={this.state.tabNumber === '1' ? 'active': ''}
onClick={() => { this.toggle('1'); }}
>
View
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={this.state.tabNumber === '2' ? 'active': ''}
onClick={() => { this.toggle('2'); }}
>
Edit
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.tabNumber}>
<TabPane tabId="1">
<Row style={{height: '100%'}}>
{viewer}
</Row>
</TabPane>
<TabPane tabId="2">
<Row style={{height: '100%'}}>
<Col sm="12">
{textArea}
{editlawl}
</Col>
</Row>
</TabPane>
</TabContent>
</div>
);
}
}

73
src/containers/Editor.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { LoginState } from '../models/LoginState';
import { AppState } from '../models/AppState';
import * as React from 'react';
import * as _ from 'underscore';
import fbData from '../startup/firebase'
import {Document} from '../models/Document'
import { Col } from 'reactstrap';
interface EditProps {docId: string, login: LoginState}
interface EditState {document: Document}
export class Editor extends React.Component<EditProps, EditState>{
constructor(props: EditProps){
super(props)
this.state = {
document:{
Title: '',
Body: ''
}
};
}
ref: any
componentDidMount() {
if(!this.props.login.isLoggedIn){
return;
}
let docId = '';
if(this.props && this.props.docId && this.props.docId.length > 0){
docId = this.props.docId;
}
else{
docId = this.generateDocId()
}
this.ref = fbData.rebase.syncState(`docs/${this.props.login.uid}/${docId}`, {
context: this,
state: 'document',
asArray: false
});
}
componentWillUnmount() {
fbData.rebase.removeBinding(this.ref);
}
generateDocId(){
let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < 8; i++){
result += str.charAt(Math.floor(Math.random()*str.length))
}
return result;
}
updateDocument(docBody: string){
this.setState({
document: {
Title: '',
Body: docBody
}
})
}
render(){
let textArea = null;
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">
{textArea}
</Col>
);
}
}

1
src/containers/Login.tsx
View File

@@ -31,6 +31,7 @@ class loginContainer extends React.Component<ILoginProps,{}>{
}
handleLogin(user: firebase.User){
console.log(user);
if (user) {
this.props.onLogin({isLoggedIn: true, displayName: user.displayName, uid: user.uid});

8
src/index.tsx
View File

@@ -2,7 +2,6 @@ import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
import 'bootstrap/dist/css/bootstrap.css';
import { TabNav } from './components/TabNav'
import { NavBar } from './components/NavBar'
import rebase from './startup/firebase'
import { LoginContainer } from './containers/Login'
@@ -10,10 +9,13 @@ import { createStore } from 'redux'
import {MainReducer} from './reducers/MainReducer'
import { Provider } from 'react-redux'
import { AppContainer } from "./containers/AppContainer";
import { BrowserRouter } from "react-router-dom";
let store = createStore(MainReducer)
const App = () => (
<AppContainer/>
<BrowserRouter>
<AppContainer />
</BrowserRouter>
);

8
src/util/doc.ts Normal file
View File

@@ -0,0 +1,8 @@
export function generateDocId(){
let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < 8; i++){
result += str.charAt(Math.floor(Math.random()*str.length))
}
return result;
}

4
webpack.config.js
View File

@@ -2,12 +2,12 @@ module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
path: __dirname + "./dist",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]

82
yarn.lock
View File

@@ -120,6 +120,10 @@
version "0.2.5"
resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.5.tgz#11ccb45505cb56d4bc0a9a09712b14585248e784"
"@types/history@*":
version "4.6.2"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
"@types/node@*":
version "8.5.1"
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.5.1.tgz#4ec3020bcdfe2abffeef9ba3fbf26fca097514b5"
@@ -138,6 +142,21 @@
"@types/react" "*"
redux "^3.6.0"
"@types/react-router-dom@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.2.3.tgz#06e0b67ff536adc0681dffdbe592ae91fb85887d"
dependencies:
"@types/history" "*"
"@types/react" "*"
"@types/react-router" "*"
"@types/react-router@*", "@types/react-router@^4.0.20":
version "4.0.20"
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.0.20.tgz#3404f54e44bba2239ea4320ea701d86d92f05486"
dependencies:
"@types/history" "*"
"@types/react" "*"
"@types/react-syntax-highlighter@^0.0.3":
version "0.0.3"
resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-0.0.3.tgz#c15aeac29eb193d11ac3a70e3d489f8539e6ee1a"
@@ -1953,6 +1972,16 @@ highlight.js@~9.12.0:
version "9.12.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
history@^4.7.2:
version "4.7.2"
resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
dependencies:
invariant "^2.2.1"
loose-envify "^1.2.0"
resolve-pathname "^2.2.0"
value-equal "^0.4.0"
warning "^3.0.0"
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -1965,7 +1994,7 @@ hoek@2.x.x:
version "2.16.3"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
hoist-non-react-statics@^2.2.1:
hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
@@ -2103,7 +2132,7 @@ interpret@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
invariant@^2.0.0:
invariant@^2.0.0, invariant@^2.2.1, invariant@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
@@ -2321,6 +2350,10 @@ is-wsl@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
isarray@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -2547,7 +2580,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
@@ -3091,6 +3124,16 @@ path-to-regexp@0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
path-to-regexp@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
dependencies:
isarray "0.0.1"
path-to-regexp@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.1.0.tgz#7e30f9f5b134bd6a28ffc2e3ef1e47075ac5259b"
path-type@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -3437,7 +3480,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
@@ -3601,6 +3644,29 @@ react-redux@^5.0.6:
loose-envify "^1.1.0"
prop-types "^15.5.10"
react-router-dom@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
dependencies:
history "^4.7.2"
invariant "^2.2.2"
loose-envify "^1.3.1"
prop-types "^15.5.4"
react-router "^4.2.0"
warning "^3.0.0"
react-router@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986"
dependencies:
history "^4.7.2"
hoist-non-react-statics "^2.3.0"
invariant "^2.2.2"
loose-envify "^1.3.1"
path-to-regexp "^1.7.0"
prop-types "^15.5.4"
warning "^3.0.0"
react-syntax-highlighter@^6.1.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-6.1.1.tgz#4d134fa9217c4025e7fd6efeadd08ba92436ee4e"
@@ -3836,6 +3902,10 @@ resolve-from@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
resolve-pathname@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -4531,6 +4601,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "~1.0.0"
spdx-expression-parse "~1.0.0"
value-equal@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"