diff --git a/index.html b/index.html index a97d99a..3204867 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,10 @@
- - + + - + diff --git a/package.json b/package.json index 54d3bbb..364ad4e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 26cc048..fa59e16 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -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{ -// render(){ -// return( -// -// -// ); -// } +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'; -// } \ No newline at end of file +interface EditProps {docId: string, login: LoginState, onChange?: (doc:string)=>void} +interface EditState {document: Document} + +export class Editor extends React.Component{ + 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 = + } + return( + + {textArea} + + ); + } + +} \ No newline at end of file diff --git a/src/components/ForOhFour.tsx b/src/components/ForOhFour.tsx new file mode 100644 index 0000000..2f84040 --- /dev/null +++ b/src/components/ForOhFour.tsx @@ -0,0 +1,7 @@ +import * as React from "react"; + +export class ForOhFour extends React.Component{ + render(){ + return

404! oh noes

; + } +} \ No newline at end of file diff --git a/src/components/TabNav.tsx b/src/components/TabNav.tsx deleted file mode 100644 index 18629c5..0000000 --- a/src/components/TabNav.tsx +++ /dev/null @@ -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 { - 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 ? :

Please login, yo

- return ( -
- - - - - - - - - - - {editor} - - - - -
- ); - } -} diff --git a/src/components/Tab1.tsx b/src/components/Viewer.tsx similarity index 79% rename from src/components/Tab1.tsx rename to src/components/Viewer.tsx index edcb4b8..c6dd02a 100644 --- a/src/components/Tab1.tsx +++ b/src/components/Viewer.tsx @@ -24,13 +24,13 @@ public static class Extension } } ` - -export class Tab1 extends React.Component{ +export interface ViewerProps {doc?: string, language?: string} +export class Viewer extends React.Component{ render(){ return( - {exampleText} + {this.props.doc || ''} ); } diff --git a/src/containers/AppContainer.tsx b/src/containers/AppContainer.tsx index a15dae8..240e79b 100644 --- a/src/containers/AppContainer.tsx +++ b/src/containers/AppContainer.tsx @@ -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{ - +class appContainer extends React.Component{ render(){ return
- + )=>{ + if(!routeProps.match.params.uid){ + return + } + if(!routeProps.match.params.docId){ + return + } + return + }} />
} diff --git a/src/containers/Edit.tsx b/src/containers/Edit.tsx index a8c1e66..4871e84 100644 --- a/src/containers/Edit.tsx +++ b/src/containers/Edit.tsx @@ -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{ - 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 - } - }) - } +export class Edit extends React.Component { + constructor(props: EditProps) { + super(props); - render(){ - let textArea = null; - if(this.props.login.isLoggedIn){ - textArea = - } - return( - - {textArea} - - ); - } + this.toggle = this.toggle.bind(this); + this.state = { + tabNumber: "1" + }; + } -} \ No newline at end of file + toggle(tab: string) { + if (this.state.tabNumber !== tab) { + super.setState({ + tabNumber: tab + }); + } + } + render() { + var editlawl = this.props.login.isLoggedIn ? {this.setState({doc: doc}) }} /> :

Please login, yo

+ var viewer = this.state.tabNumber === '1'? : null; + return ( +
+ + + + + {viewer} + + + + + + {editlawl} + + + + +
+ ); + } +} diff --git a/src/containers/Editor.tsx b/src/containers/Editor.tsx new file mode 100644 index 0000000..ffe0e30 --- /dev/null +++ b/src/containers/Editor.tsx @@ -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{ + 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 = + } + return( + + {textArea} + + ); + } + +} \ No newline at end of file diff --git a/src/containers/Login.tsx b/src/containers/Login.tsx index 52652af..425af31 100644 --- a/src/containers/Login.tsx +++ b/src/containers/Login.tsx @@ -31,6 +31,7 @@ class loginContainer extends React.Component{ } handleLogin(user: firebase.User){ + console.log(user); if (user) { this.props.onLogin({isLoggedIn: true, displayName: user.displayName, uid: user.uid}); diff --git a/src/index.tsx b/src/index.tsx index 4bec8d2..7c0edb6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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 = () => ( - + + + + ); diff --git a/src/util/doc.ts b/src/util/doc.ts new file mode 100644 index 0000000..56428b9 --- /dev/null +++ b/src/util/doc.ts @@ -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; +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index ed10ead..e00b3a8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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"] diff --git a/yarn.lock b/yarn.lock index 0f99636..0667d45 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"