function app() { //////////////// Collection var CongressionalCollection = Backbone.Collection.extend({ url: "http://congress.api.sunlightfoundation.com/legislators/", apiKey: "325ade0da4514bb29ff036144a8bc016", parse:function(rawData){ console.log(rawData) return rawData.results } }) /////////////// Router var CongressionalRouter = Backbone.Router.extend({ routes: { "favorites": "handleFaves", "*default" : "handleCuties" }, handleCuties: function() { var cc = new CongressionalCollection() cc.fetch({ data:{ "apikey":cc.apiKey } }).then(function(){ DOM.render(<CutiesView congressColl={cc}/>, document.querySelector('.container')) }) }, handleFaves: function() { DOM.render(<FavesView />, document.querySelector('.container')) }, initialize: function() { Backbone.history.start() } }) var cr = new CongressionalRouter() }
function app() { // start app // new Router() var ItemModel = Backbone.Model.extend({ defaults: { done: false, dueDate: "", descript: "" }, initialize: function(taskName) { this.set({task: taskName}) } }) var ToDoCollection = Backbone.Collection.extend({ model: ItemModel }) var ToDoView = React.createClass({ _addItem: function(taskName) { // var mod = new ItemModel({task: taskName}) this.state.all.add(new ItemModel(taskName)) this._updater() }, _updater: function(){ this.setState({ all: this.state.all, done: this.state.all.where({done:true}), undone: this.state.all.where({done: false}), showing: location.hash.substr(1) }) }, getInitialState: function() { return { all: this.props.toDoColl, done: this.props.toDoColl.where({ done: true}), undone: this.props.toDoColl.where({done: false}), showing: this.props.showing } }, render: function() { var coll = this.state.all if (this.state.showing === "done") coll = this.state.done if (this.state.showing === "undone") coll = this.state.undone return ( <div className="toDoView"> <Tabs updater={this._updater} showing={this.state.showing} /> <ItemAdder adderFunc={this._addItem}/> <ToDoList updater={this._updater} toDoColl={coll}/> </div> ) } }) var Tabs = React.createClass({ _genTab: function(tabType, i) { return <Tab updater={this.props.updater} key={i} type={tabType} showing={this.props.showing} /> }, render: function() { return ( <div className="tabs"> {["all", "done", "undone"].map(this._genTab)} </div> ) } }) var Tab = React.createClass({ _changeRoute: function() { location.hash = this.props.type this.props.updater() }, render: function() { var styleObj = {} if (this.props.type === this.props.showing){ styleObj.background = "orange" } return ( <div onClick={this._changeRoute} style={styleObj} className="tab"> <p>{this.props.type}</p> </div> ) } }) var ItemAdder = React.createClass({ _handleKeyDown: function(keyEvent) { if(keyEvent.keyCode === 13) { var newToDoItem = keyEvent.target.value this.props.adderFunc(newToDoItem) keyEvent.target.value = "" } }, render: function() { return <input onKeyDown={this._handleKeyDown} className="toDoAdder" type="text" placeholder="whatca gotta do?" id="toDo"/> } }) var ToDoList = React.createClass({ _makeItem: function(model,i) { console.log(model, i) return <Item key={i} updater={this.props.updater} itemModel={model} /> }, render: function() { return ( <div className="toDoList"> {this.props.toDoColl.map(this._makeItem)} </div> ) } }) var Item = React.createClass({ _toggleDone: function() { if (this.props.itemModel.get('done')) { this.props.itemModel.set({done: false}) } else { this.props.itemModel.set({done: true} ) } this.props.updater() }, _handleDescription: function(keyEvent) { if(keyEvent.keyCode === 13) { var newDesc = keyEvent.target.value this.props.itemModel.set({descript: newDesc}) console.log(this.props.itemModel) keyEvent.target.value = "" } }, _handleDueDate: function(keyEvent) { if(keyEvent.keyCode === 13) { var newDueDate = keyEvent.target.value this.props.itemModel.set({dueDate: newDueDate}) console.log(this.props.itemModel) keyEvent.target.value = "" } }, render: function() { var buttonFiller = this.props.itemModel. get('done') ? "\u2713" : ' ' return ( <div className="toDoItem"> {this.props.itemModel.get('task')} <input onKeyDown={this._handleDescription} className="descAdder" type="text" placeholder="description..." id="desc"/> <input onKeyDown={this._handleDueDate} className="dueDateAdder" type="text" placeholder="Due when?" id="dueDate"/> <button onClick={this._toggleDone}>{buttonFiller}</button> </div> ) } }) var ToDoRouter = Backbone.Router.extend({ routes: { "undone": "showUndone", "done" : "showDone", "*default" : "home" }, showDone: function(){ DOM.render(<ToDoView showing="done" toDoColl={new ToDoCollection()}/>, document.querySelector('.container')) }, home: function(){ DOM.render(<ToDoView showing="all" toDoColl={new ToDoCollection()}/>, document.querySelector('.container')) }, showUnDone: function(){ DOM.render(<ToDoView showing="undone" toDoColl={new ToDoCollection()}/>, document.querySelector('.container')) }, initialize: function() { Backbone.history.start() } }) var pr = new ToDoRouter() }
function app() { //------------ Models ------------// // set up model for user of the to-do list app // the username default is null because it is overwritten by SignInView var UserModel = Backbone.Model.extend({ defaults: { username: null }, // this url requries .json because the persistance data is returned in this format url: function() { return `https://no-reservations.firebaseio.com/users/${this.get('username').json}` } }) // default view on the model is that a task is false or "un-done" var ListModel = Backbone.Model.extend({ defaults: { status: "pending" } }) // put the initialize method on collection // initialize is passed in a username from below var ListCollection = Backbone.Firebase.Collection.extend({ model: ListModel, initialize: function(username) { this.url = `https://no-reservations.firebaseio.com/users/${username}/tasks` }, parse: function(rawData) { // console.log(rawData) return rawData } }) //------------ Sign-In View ------------// // captures value in input bar where user signs into the to-do-list var SignInView = React.createClass ({ _submitUsername: function(evt) { if (evt.keyCode === 13) { var username = evt.target.value this.props.handleUserSubmit(username) } }, render: function() { return ( <div className="signinContainer"> <input onKeyDown={this._submitUsername} name="username" /> </div> ) } }) //------------ Router ------------// var Router = Backbone.Router.extend({ routes: { "*todo": "home", "default": "showLogin" }, handleUserSubmit: function(username) { console.log('running handle submit') localStorage.todoUsername = username var userModel = new UserModel({username: username}) userModel.fetch().then(function(resp){ if (resp !== null) { window.location.hash = "todo" } }) }, showLogin: function() { window.location.hash = "login" var boundSubmitter = this.handleUserSubmit.bind(this) DOM.render(<SignInView handleUserSubmit={boundSubmitter}/>, document.querySelector('.container')) }, home: function() { if (typeof localStorage.todoUsername !== 'string') {window.location.hash = "login"} var lc = new ListCollection(localStorage.todoUsername) //console.log(lc) //var intervalID = setInterval(lc.fetch.bind(lc),1500) DOM.render(<ListView listColl={lc}/>,document.querySelector('.container')) }, initialize: function() { Backbone.history.start() } }) var rtr = new Router() }
var BlogRouter = BackboneFire.Router.extend({ routes:{ "authenticate" : "handleAuth", "createblog" : "handleWriterView", "readblog" : "handleReaderView", "*Default" : "handleHome" }, handleHome:function(){ var userInfoColl = new BlogPostCollection(ref.getAuth().uid) DOM.render(<HomeView userInfo={this.userInfoColl}/>, document.querySelector('.container') ) }, handleWriterView: function(){ var newPostColl = new BlogPostCollection(ref.getAuth().uid) DOM.render(<WriterView freshPost={newPostColl}/>, document.querySelector('.container') ) }, handleReaderView: function(){ var pc = new BlogPostCollection(ref.getAuth().uid) DOM.render(<ReaderView finishedPostColl={pc}/>, document.querySelector('.container') ) }, handleAuth: function(){ DOM.render(<AuthView/>, document.querySelector('.container') ) }, initialize: function(){ var self = this var auth = ref.getAuth() if (!auth) location.hash = "authenticate" self.on("all", function(){ if(!ref.getAuth()) location.hash="authenticate" }, self) // ref.onAuth(function(authData){ // if (authData === null){ // self.authenticateUser = null // } else { // self.authenticateUser = authData // } // }) BackboneFire.history.start() } })
function app() { //--------------------------// // Collection and Models // //--------------------------// var FaveCutiesCollection = Backbone.Firebase.Collection.extend({ //This is the url that firebase will sync with each time a new cutie is favorited url: 'https://congressionalcuties.firebaseio.com/favecuties' }) var CutieModel = Backbone.Model.extend({ defaults: { 'fave': false //This will affect the heart (for favorites) } }) var CongressionalCollection = Backbone.Collection.extend ({ url: "http://congress.api.sunlightfoundation.com/legislators/", apiKey: "325ade0da4514bb29ff036144a8bc016", parse: function(rawData){ console.log(rawData) return rawData.results }, model: CutieModel }) //--------------------------// // Router // //--------------------------// var CongressionalRouter = Backbone.Router.extend ({ routes: { "favorites": "handleFaves", "*default": "handleCuties" }, handleCuties: function() { var cc = new CongressionalCollection() var fc = new FaveCutiesCollection() cc.fetch ({ data: { "apikey": cc.apiKey } }).then(function(){ (DOM.render(<CutiesView cutieType="all" congressColl={cc} faveColl={fc}/>, document.querySelector('.container'))) }) }, handleFaves: function() { DOM.render(<CutiesView cutieType="fave" congressColl={new FaveCutiesCollection}/>, document.querySelector('.container')) }, initialize: function() { Backbone.history.start() } }) //------------------------------------// // Views - located in other js files // //------------------------------------// var cr = new CongressionalRouter() }
function app() { // start app // new Router() var GiftHorseRouter = Backbone.Router.extend({ routes: { "splash" : "_showSplashPage", "hoofbeats" : "_showHoofBeatsView", "stable" : "_showStableView", "send" : "_showSendView", "logout" : "_handleLogOut", "*default" : "_showSplashPage", }, initialize: function() { this.ref = new Firebase("https://gifthorse.firebaseio.com/") window.ref = this.ref if (!this.ref.getAuth()) { location.hash = "splash" } this.on("route", function() { if (!this.ref.getAuth()) { location.hash = "splash" } }) }, _handleLogOut: function() { this.ref.unauth() location.hash = "splash" }, _showSplashPage: function() { DOM.render(<SplashPage logUserIn={this._logUserIn.bind(this)} createUser={this._createUser.bind(this)} />, document.querySelector(".container")) }, _showHoofBeatsView: function() { var uid = ref.getAuth().uid var giftHorseColl = new GiftHorses(uid) DOM.render(<HoofBeatsView giftHorseColl={giftHorseColl}/>, document.querySelector(".container")) }, _showStableView: function() { var uid = ref.getAuth().uid var giftHorseColl = new GiftHorses(uid) DOM.render(<StableView giftHorseColl={giftHorseColl}/>, document.querySelector(".container")) }, _showSendView: function() { var uid = ref.getAuth().uid var giftHorseColl = new GiftHorses(uid) DOM.render(<SenderView giftHorseColl={giftHorseColl}/>, document.querySelector(".container")) }, _logUserIn: function(email,password){ console.log(email,password) this.ref.authWithPassword({ email: email, password: password }, function(err, authData) { if (err) console.log(err) else { location.hash = "hoofbeats" } } ) }, _createUser: function(email,password) { console.log(email, password) var self = this this.ref.createUser({ email: email, password: password, profileImage: "http://lorempixel.com/80/80/" }, function(err, authData) { if (err) console.log(err) else { var userMod = new UserModel(authData.uid) userMod.set({ email: email, id: authData.uid, profileImage: "http://lorempixel.com/80/80/" }) self._logUserIn(email,password) } }) } }) var pr = new GiftHorseRouter() Backbone.history.start() }
function app() { // start app // new Router() var AuthView = React.createClass({ _handleSignUp: function(evt){ var component = this var evt = evt console.log("event!", evt) evt.preventDefault() var emailInput = evt.currentTarget.email.value var pwInput = evt.currentTarget.password.value var userNameInput = evt.currentTarget.username.value fbRef.createUser( { email : emailInput, // internal to fb password : pwInput //internal to fb }, function(err, authData){ console.log(err) console.log(authData) var userBlogsColl = new UserBlogsColl(fbRef); userBlogsColl.create({ username: userNameInput, id: authData.uid, posts: '' }) //notify app of authenticatedUser myRouter.authenticatedUser = authData.uid myRouter.authenticatedUserPosts = new PostsByUserColl(fbRef, authData.uid) myRouter.navigate('', {trigger: true} ) }) }, componentDidMount: function(){ var component = this this.props.coll.on('sync', function(){ console.log("mounted", component.props.coll) component.setState({ userSecretColl: component.props.coll }) }) }, render: function(){ return ( <div> <form onSubmit={this._handleSignUp}> <h3>Welcome to Another Blog Site!</h3> <input type="text" id="email" placeholder="Email"/><br/> <input type="password" id="password" placeholder="Password"/><br/><br/> <input type="text" id="username" placeholder="Your Name"/><br/> <input id="signup" type="submit" defaultValue="Sign Up"/><br/> </form> <hr/> <form onSubmit={this._handleLogIn}> <h3 className="signin">Sign In</h3> <input type="text" id="email" placeholder="Email"/><br/> <input className="button-primary" type="submit" defaultValue="Log In"/><br/> </form> </div> ) } }) var HomeView = React.createClass({ getInitialState: function(){ return { posts: this.props.postsColl } }, // componentDidMount: function(){ // var self = this // this.props.postsColl.on('sync', function(){ // }) // }, _addPost: function(e) { console.log("new post") this.props.postsColl.add({ content: e.currentTarget.value }) }, render: function() { console.log('home') var coll = this.props //.get('id') console.log(coll) return ( <div id="homeDiv"> <div>Your posts go here</div> <input onKeyPress={this._addPost}type="text"></input> </div> ) } }) var UserBlogsColl = BackboneFire.Firebase.Collection.extend({ url: "", initialize: function(fb){ this.url = fb.child('users') } }) var PostsByUserColl = BackboneFire.Firebase.Collection.extend({ url: "", initialize: function(fb, usrUid){ this.url = fb.child('users').child(usrUid).child('posts') console.log(this.url) } }) var AppRouter = BackboneFire.Router.extend({ routes: { "authenticate": "showSplash", "*home": "showHome" }, showHome: function() { if (this.authenticatedUser === null) { this.navigate('authenticate', {'trigger': true}) return } DOM.render(<HomeView postsColl={this.authenticatedUserPosts}/>, document.querySelector('.container')) }, showSplash: function() { console.log("work please") var fbColl = new UserBlogsColl(fbRef) console.log(fbColl) DOM.render(<AuthView coll={fbColl}/>, document.querySelector('.container')) }, initialize: function() { var rtr = this fbRef.onAuth(function(authData){ if(authData){ console.log('authenticated') rtr.authenticatedUser = authData.uid } else { console.log('Not authenticated') rtr.authenticatedUser = null } }) console.log("routing") BackboneFire.history.start() } }) var fbRef = new Firebase("https://anotherblog.firebaseio.com/") var myRouter = new AppRouter() }
function app() { // start app // new Router() var PrewardRouter = Backbone.Router.extend({ routes: { "splash" : "_showSplashPage", "dash" : "_showDashboard", "logout" : "_handleLogOut", }, initialize: function() { this.ref = new Firebase("https://preward.firebaseio.com/") window.ref = this.ref if (!this.ref.getAuth()) { location.hash = "splash" } this.on("route", function() { if (!this.ref.getAuth()) { location.hash = "splash" } }) }, _handleLogOut: function() { this.ref.unauth() location.hash = "splash" }, _showSplashPage: function() { DOM.render(<SplashPage logUserIn={this._logUserIn.bind(this)} createUser={this._createUser.bind(this)} />, document.querySelector(".container")) }, _showDashboard: function() { var uid = ref.getAuth().uid var msgColl = new UserMessages(uid) DOM.render(<DashPage user={this.email} msgColl={msgColl}/>,document.querySelector(".container")) }, _logUserIn: function(email,password){ console.log(email,password) this.ref.authWithPassword({ email: email, password: password }, function(err, authData) { if (err) console.log(err) else { location.hash = "dash" } } ) }, _createUser: function(email,password,nickName) { console.log(email, password) var self = this this.ref.createUser({ email: email, password: password, nickName: nickName }, function(err, authData) { if (err) console.log(err) else { var userMod = new UserModel(authData.uid) userMod.set({ name: nickName, email: email, id: authData.uid }) self._logUserIn(email,password) } }) } }) var pr = new PrewardRouter() Backbone.history.start() }
function app() { // start app // new Router() var GiphyModel = Backbone.Model.extend({ defaults: { "fave":false, } }) var GiphyCollection = Backbone.Collection.extend ({ url: "http://api.giphy.com/v1/gifs/search", apiKey: "dc6zaTOxFJmzC", parse: function(rawData){ return rawData.data }, model:GiphyModel }) var FavesCollection = Backbone.Firebase.Collection.extend({ url: "https://giphybase.firebaseio.com/favegiphys" }) var GiphyRouter = Backbone.Router.extend({ routes: { "favorites": "handleFaves", "*default" : "handleGiphys" }, handleGiphys: function(query){ var fc = new FavesCollection() var gc = new GiphyCollection() gc.reset.bind(this) gc.fetch ({ data: { "api_key": gc.apiKey, "q": query } }).then(function(){ DOM.render(<GiphyView giphyType="all" query={query} giphyColl={gc} faveColl={fc} />, document.querySelector('.container')) }) }, handleFaves: function() { DOM.render(<GiphyView giphyType="faves" giphyColl={new FavesCollection} />, document.querySelector('.container')) }, initialize: function() { Backbone.history.start() } }) var GiphyView = React.createClass({ _handleSearch: function(event){ var query = event.currentTarget.search.value location.hash = query }, // componentWillMount: function(){ // var self = this // self.props.giphyColl.on("sync reset", function() {self.forceUpdate()}) // }, // componentWillUnmount: function(){ // var self = this // self.props.giphyColl.off("sync reset") // }, render: function(){ return ( <div className="giphyView"> <h1>{this.props.query}</h1> <form onSubmit={this._handleSearch}> <input className="searchBar" type="text" placeholder="search..." id="search"/> </form> <GiphyList giphyColl={this.props.giphyColl.models} faveColl={this.props.faveColl} /> </div> ) } }) var GiphyList = React.createClass ({ _makeGiphyComponent: function(model, id) { return <Giphy giphyData={model} key={id} faveColl={this.props.faveColl} updater={this._updater} /> console.log(model) }, _updater: function(){ this.setState({ giphyColl: this.state.giphyColl }) }, getInitialState: function(){ return{ giphyColl: this.props.giphyColl } }, render: function(){ return ( <div className="giphyList"> {this.props.giphyColl.map(this._makeGiphyComponent)} </div> ) } }) var Giphy = React.createClass ({ _handleComment: function(){ }, render: function(){ var giphyModel = this.props.giphyModel return ( <div className="giphy"> <img src={this.props.giphyData.attributes.images.original.url}/> <div className="interactive"><button className="heart">❤</button><form onSubmit={this._handleComment}> <input className="comment" type="text" id="comment" placeholder="add a comment..."/> </form> </div> </div> ) } }) var gr = new GiphyRouter() }
var BlogRouter = BackboneFire.Router.extend({ routes: { 'bloglist':'handleBlogList', 'createblog':'handleCreateBlog', 'logout': 'handleLogOut', 'publicblog':'handlePublicBlog', '*splash':'handleSplashPage' }, handlePublicBlog:function(){ var publicListColl = new PublicBlogCollection() var queriedUserMdl = new UserModel(fbRef.getAuth().uid) DOM.render(<PublicBlog userModel={queriedUserMdl} publicListColl={publicListColl} />, document.querySelector('.container')) }, handleLogOut:function(evt){ fbRef.unauth() this.navigate('splash',{trigger:true}) }, handleBlogList:function(){ console.log('handling blog list') rtr = this fbRef.authData = fbRef.getAuth() // UM = UserModel var queriedUserMdl = new UserModel(fbRef.getAuth().uid) var blogListColl = new BlogListCollection(fbRef.getAuth().uid) var publicListColl = new PublicBlogCollection() DOM.render(<Bloglist blogListColl={blogListColl} userModel={queriedUserMdl} publicListColl={publicListColl}/>, document.querySelector('.container')) }, handleCreateBlog:function(){ rtr = this var queriedUserMdl = new UserModel(fbRef.getAuth().uid) console.log('userName>>>>>>>', queriedUserMdl) DOM.render(<Createblog userModel={queriedUserMdl} />, document.querySelector('.container')) }, handleSplashPage:function(){ DOM.render(<SplashPage/>, document.querySelector('.container')) }, initialize:function(){ var rtr = this console.log('initializing') rtr.authenticatedUser = fbRef.getAuth() if (!rtr.authenticatedUser) location.hash = "splash" // fbRef.onAuth(function(authData){ // console.log('new auth status! >>>>>', authData) // if(authData){ // rtr.userId = authData.uid // rtr.authenticatedUser = authData // } else { // rtr.authenticatedUser = null // } // }) rtr.on('all', function() { if(!fbRef.getAuth()){ location.hash = "splash" } }) BackboneFire.history.start() } })
function app() { // start app // new Router() var FavCutiesCollection = Backbone.Firebase.Collection.extend({ url: "http://cutiesofcongress.firebaseio.com/users", initialize: function(uid) { this.url = `http://cutiesofcongress.firebaseio.com/users/${uid}/faves` } }) var CutieModel = Backbone.Model.extend({ defaults:{ 'fave': false }, parse: function(rawData) { this.set({id:rawData.bioguide_id}) return rawData } }) var CongressionalCollection = Backbone.Collection.extend ({ url: 'http://congress.api.sunlightfoundation.com/legislators', apiKey:"325ade0da4514bb29ff036144a8bc016", parse: function (rawData){ return rawData.results }, model: CutieModel, }) var CongressionalRouter = Backbone.Router.extend ({ routes: { "allcuties": "showAllCuties", "faves": "showFaves", "dash": "showDashboard", "logout": "handleLogOut", "splash": "showSplashPage" }, initialize: function() { this.ref = new Firebase("https://cutiesofcongress.firebaseio.com") var auth = this.ref.getAuth() console.log(auth) if (!auth) location.hash = "splash" this.on("all",function() { if (!this.ref.getAuth()) location.hash = "splash" }, this) }, handleLogOut: function() { this.ref.unauth() location.hash = "splash" }, showDashboard: function() { DOM.render(<Dashboard email={this.ref.getAuth().password.email}/>, document.querySelector('.container')) }, showAllCuties: function() { var cc = new CongressionalCollection() var fc = new FavCutiesCollection(this.ref.getAuth().uid) cc.fetch({ data:{ "apikey": cc.apiKey } }) DOM.render(<CutiesView email={this.ref.getAuth().password.email} cutieType="all" faveColl={fc} congressColl={cc} />, document.querySelector('.container')) }, showFaves: function() { var fc = new FavCutiesCollection(this.ref.getAuth().uid) DOM.render(<FavesView email={this.ref.getAuth().password.email} congressColl={fc} />, document.querySelector('.container')) }, showSplashPage: function() { var boundSignerUpper = this._signUserUp.bind(this) var boundLoggerInner = this._logUserIn.bind(this) DOM.render(<SplashPage loggerInner={boundLoggerInner} error={null} signerUpper={boundSignerUpper} />, document.querySelector('.container')) }, _logUserIn: function(submittedEmail,submittedPassword) { var ref = this.ref var handler = function(error, authData) { if (error) { console.log("Login Failed!", error); } else { console.log("Authenticated successfully with payload:"); console.log(authData) location.hash = "dash" } } ref.authWithPassword({ email : submittedEmail, password : submittedPassword }, handler); }, _signUserUp: function(submittedEmail,submittedPassword) { var ref = this.ref var boundSignerUpper = this._signUserUp.bind(this) var boundLoggerInner = this._logUserIn.bind(this) var storeUser = function(userData) { ref.child('users').child(userData.uid).set({email:submittedEmail}) } var handler = function(error, userData) { if (error) { console.log("Error creating user:"******"Successfully created user account with uid:", userData.uid); storeUser(userData) boundLoggerInner(submittedEmail,submittedPassword) } } ref.createUser({ email : submittedEmail, password : submittedPassword }, handler); } }) var cr = new CongressionalRouter() Backbone.history.start() }