Daily logs
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

Comment only
 
ABCDEFGHIJKLMNOPQRSTUVWXYZAA
1
Important DatesActual DateJessicaVanessaOne thing I learned today -VHoOne thing I learned today - JessResource 2Resource 3
2
3
September 22 2017
4
*What you did:*

*Problems*

*What to do next*
September 21 2017
Learn about React life cycle
Add other pages for tutorial
Learn about testing
5
*What you did:*

*Problems*

*What to do next*
September 20 2017
Using Skrollr for tutorial
Talk about food tech
Call with RG supervisor
6
*What you did:*

*Problems*

*What to do next*
September 19 2017
Learn about React life cycle
Add other pages for tutorial
Learn about testing
More learning & tutorials on Redux
FInished blog post about our conference
Created views for login and navbar header
With Redux: react is in charge of the presentation and views, and Redux is in charge of data mgmt and state. Components get their state from a single object tree aka STOREhttps://tighten.co/blog/react-101-using-redux
7
*What you did:*

*Problems*

*What to do next*
September 18 2017
Jess worked on media queries and skrollr for tutorial:
http://weaver-villages-18145.bitballoon.com/
Learning about Redux & React Lifecycle
Blog 2 for RGSoC
When a class is initialized, it sets the state with a default value and knows to listen for changes to state within the components. In initialization, the component(s) are rendered and then componentDidMount is called. In the next phase, components are re-rendered as the state changes with this.setState input changes
8
*What you did:*

*Problems*

*What to do next*
Objectives for the week:
9
*What you did:*

*Problems*

*What to do next*
September 15 2017Learning about React Router
10
*What you did:*

*Problems*

*What to do next*
September 14 2017
- Skrollr tutorial
- Testing with Mocha and Chai
11
*What you did:*

*Problems*

*What to do next*
September 13 2017
- Testing with Mocha and Chai
testing should be only for essential functioning
12
*What you did:*

*Problems*

*What to do next*
September 12 2017
- Reverse order of notifs to show most recent first
- Call with Rails Girls community
- Testing with Mocha and Chai
-some more progress on authentication app
-created readme for webapp https://github.com/WorldBrain/Notifications-Server/blob/master/README.md
13
*What you did:*

*Problems*

*What to do next*
September 11 2017
- Creating tutorial with Skrollr
- Refresh on React + JS concepts, asynchronisty and Compenent lifecylce
- Testing fetch data and react components with jest

http://weaver-villages-18145.bitballoon.com/
-Tutorial for authentication using Express, Node and Passporthttps://www.danielgynn.com/build-an-authentication-app-using-express-node-passport/https://scotch.io/tutorials/easy-node-authentication-setup-and-local
14
*What you did:*

*Problems*

*What to do next*
create react app comes with jest for testing
15
*What you did:*

*Problems*

*What to do next*
Objectives for the week:Authentication with username and password
16
17
*What you did:*
Badge dropdown is working in react, with async functions
Heroku workshop with Izel

*Problems*
Performance issues for notification when clicked - read/unread.

*What to do next*
Testing with mocha
September 1, 2017
- Asked Izel for feedback on PR
- Asked Giulio about css transitions in React
- Started tutorial with skrollr
- Routing MERN stack
- Testing with mocha
18
*What you did:*
Badge dropdown is working in react, with async functions
Heroku workshop with Izel

*Problems*
Performance issues for notification when clicked - read/unread.

*What to do next*
Testing with mocha
August 31, 2017
*What you did:*
- testing with Mocha
- using CSS for interactions/animations in Notif list
- how to iterate a notif id atuomatically (noti_1, notif_2, notif_3 etc)
- how to list notifications in order
- check polling adds each new notif
Testing crud routes and mongodb connectionIndexing a database: means that database is already organized in some type of order to anticipate making certain searches easier (ex by topic, by name letters). Means that instead of querying in entire db for each search, only querying certain recordshttps://build-podcast.com/mocha/
19
*What you did:*
Badge dropdown is working in react, with async functions
Heroku workshop with Izel

*Problems*
Performance issues for notification when clicked - read/unread.

*What to do next*
Testing with mocha
August 30, 2017
*What you did:*
- started testing with Mocha
- using react tranisition for interactions/animations

*What to do next*
Testing with mocha
Splitting up MERN stack into 2 separate repos: Node/Express server side API and React client sidePromise: JS function that allows you to make synchronous sequence of calling methods by resolving or rejecting functions in the callbacks.
Closure: created when an inner function can access variables defined in the parent function
assertion libraries for testing. e.g. chai
20
*What you did:*
Badge dropdown is working in react, with async functions
Heroku workshop with Izel

*Problems*
Performance issues for notification when clicked - read/unread.

*What to do next*
Testing with mocha
August 29, 2017
*What you did:*
Worked through Jon's advice on how to improve performance:
- Rearranging the setstate functions. If a notif is viewed, set className to viewed when selectedNotificationId is set to doc._id. Then it is not necessary to call setStateFromPouch() add make a costly call to the db, just to change the styling of the notif li from unread to read.
- Use key={doc._id} instead of key={doc.title} in list of notifs, becuase _id will always be unique.
*What to do next*
Testing with mocha
*VHo Updates*
-read through documentation and tutorial for creating Express server that serves react file and API, and able to Deploy
-built react-express app, deployed on local machine https://daveceddia.com/create-react-app-express-production/

Issues: Still need to work through deploying this to Heroku

*What to do next*: Resolve heroku deploy issues and try to recreate with MERN app
Gitignore file: contains things that you don't want to be commited to git when deploying ex API keys

API Definition: architecture that allows one application to consume/use data or logic from another application, through an exposed endpoint

Proxy: acts as both client and sever in order to make reqeusts on behalf of a client. Proxy gives additional security and data transformation.
Rest vs RPC https://daveceddia.com/create-react-app-express-production/https://sites.google.com/site/wagingguerillasoftware/rest-series/what-is-restful-rest-vs-rpc
21
August 28, 2017
*What you did:*
Badge dropdown is working in react, with async functions
Heroku workshop with Izel

*Problems*
Performance issues for notification when clicked - read/unread.

*What to do next*
Testing with mocha
Reading documentation for Heroku deployments and Node
Finally understood why Notifications app is not deploying: I'm trying to deploy the react front end and node server on a single Herroku app, but opening several ports in Heroku is not allowed
*What to do next*: 2 options
1) Split app into 2 separate repos: React FE and BE API node using Node/Express server, then deploy both to Heroku
2) Try serving your react app dist directory from node server using express.static https://github.com/facebookincubator/create-react-app/issues/639
Debug app by thoroughly reading terminal and heroku logs - indicates if there are missing dependencies, procfile commands not being recognized

MERN App can be split into client side and server side repos

Dependencies: node packages needed to run app
Dev Dependencies: only needed to run in dev/prod environment (ex mocha)
22
Objectives for the week:
- Finish react dropdown with loading icon
- Testing with mocha
- Tutorial

- Teach Vanessa about unit tests in mocha
- Teach Jess how to create a serverhttps://mochajs.org/#getting-startedTesting MERN app: https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d
23
August 25, 2017
*What you did:*
Integrating desktop notifications
researching authentication on MERN app
*Problems*
Breaking dropdown badge notifs
*What to do next*
call desktopNotifications from setUreadCount. If unread count increases, display desktop notif

Move on from PR - ask Izel for review, Jon for more direction, move on to MERN stack authentication
-Add custom env var for API path
-Modified Express searver to handle routes in dev and prod envi
-Modified fetch api to incorporate object literal with baseurl depending on dev and prod env
-Add error handling for server

*What to do next*
Deploy app with command that uses npm build
Procfile: tells heroku how to run pieces of your app ex. react app and server, and which commands to run

Env variables: used to keep sensitive info hidden. They are embedded during build time, and are defined on process.env. By default NODE_ENV knows its env (dev, test, prod) from run commands, all other react variables need to be declared starting with REACT_APP

Template literals: contain placeholders '${ expression }' that are passed into a function

Debug: look at everything in terminal
browser: look at console.log, network requests, bundle.js
Web workers are the same as service workers. JS scripts that run in the background and don't interfere with the UIhttps://github.com/Automattic/mongoose/issues/5399
24
August 24, 2017
*What you did:*
Implemented async await functions
Removed test db without breaking react setState for unead msgs
*Problems*
How to use setInterval with aysnc/await function fetchNewNotifs
*What to do next*
Integrate desktop notifications
Help with authentication on MERN app
Testing
Refactoring
Configured mongodb uri in server.js and fetch api in react.js
Deploy changes to heroku
Cleaning up my git repo file

Issues:
Still not configuing files correctly. On my local machine I can connect to the mlab uri and GET notifications from localhost just fine.
But when I configure server.js to mongo uri and GET notifications from heroku baseurl/api/notifications
What is CORS? Before a browser sends a request (fetch/post/get), it first sends an Options request to the server to see if the server has opted to recieve cross origin requests that include an Authorization request header. One way to fix CORS errors is to specify cors Options

ex. const corsOptions = {
origin: '*';
methods: ['GET', 'POST'] }
25
August 23, 2017
*What you did:*
- Meeting with stefan to learn more about dev team processes
- Making await / async instead of promises
*What to do next*
- Other code refactoring
3 things to remember:
1) Make it work (reqs, implementation)
2) Make it pretty (UI, refactor)
3) Make it fast (performance)
26
August 22, 2017
*What you did:*
- Making await / async instead of promises
- creating dropdown badge in react dynamically update unread notif count
*Problems*
- When I remove test db, the react setstate viewed: true does not work, investigate further
*What to do next*
- Other code refactoring
Authorized Heroku to connect to Github and manually deploy
Cleaned up github repo and deleted unnecessary branches
Looked at configuring and using mongoose/mongo driver with connection settings
https://github.com/mongolab/mongodb-driver-examples/blob/master/nodejs/mongooseSimpleExample.jshttps://devcenter.heroku.com/articles/nodejs-mongoose
27
http://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/August 21, 2017
*What you did:*
- Created dropdown Notif badge on dropdown list
- Removed test db
- Making await / async instead of promises
*What to do next*
- Create await / async to update dropdown Notif badge on dropdown list dynamically
- Other code refactoring
- moving from pouch to graphQL and react to vue.js
Github issues after heroku create and push. Needed to:
-Git remote add origin
-Git branch set upstream to origin/master
-git pull (from master) and resolve conflicts from index.html, package.json and README
-Then git status and add unmerged files
-Tried to deploy mongodb

*Issues*: db not deploying, not sure why
28
Objectives for the week:
- Respond to PR comments in webmemex
- React SetState
- call from json from Mern stack app
- refactoring - make react page rerender whenever pouch db changes
- query pouch db to retrieve unread message count instead of returning all notifs and forEaching them
- Make WB icon display unread notifs before clicking into notifs page for first time after installing WB
- styling and animation
q
29
August 18, 2017
Met with Luca to go through the following steps for deploying the db:
1) Set up mongodb URI in server.js file var mongouri = process.env.MONGO_URI
|| 'mongodb://localhost/wbnotification';
2) Set up env variable path in .zshrc file export MONGO_URI="mongodb://localhost/wbnotification"
3) Create db in Heroku, need to set up mlab
4) After db created, run `heroku config:set MONGO_URI=mongodb://something.`mlab`
30
August 17, 2017
*What you did:*
- Workshop at NYCDA
- How to deploy to Heroku
- Get element by id and set inner html in react (setstate) for notif dropdown badge
*What to do next*
- Heroku & MERN stack
Today gave Team ImpactDevs gave presentation on our project and a chrome extension tutorial at NYCDA. Also added a readme file with setup instructions, then tried to deploy via Heroku. https://safe-bastion-45672.herokuapp.com/

*Issues*: the deployed app shows only the form component, and when I try to submit a new record, I get TypeError: cannot read property 'id' of undefined
31
August 16, 2017
*What you did:*
- Connected breakfast talk to meet other developers at info.nl
- Worked on talk for NYCDA tomorrow
- got webmemex running with npm run watch without errors
*What to do next*
- Use dropdown li badge logic in react
- Query pouch db to retrieve unread message count instead of returning all notifs and forEaching them
- Make WB icon display unread notifs before clicking into notifs page
Created new parent component that contains logic for both Form and List components. Added this.setState to onSubmit event handler to re-render form when new notif is added.
-map notifs so that most recent shows up first
-clear form when notif is submitted
-styling changes to notif form and list

What to do next:
-change date.time to only show date
-add chrolonological number assigned to each notif
-add onProps validations to form (not empty)
-index Mongodb
-Testing
-Deploy

Long term potentially to-do:
-Login form
32
August 15, 2017
*What you did:*
- Made a pull request of notifs view from rebased upstream master
- Reordered logic so that:
a) a new notif is fetched
b) a notif is read -> call setUnreadcount, call updateWBiconbadge and -call updateDropdownNotifBadge

*What to do next*
- Make react page rerender whenever pouch db changes
- Made dropdown list respond dynamically to number of unread messages
- Query pouch db to retrieve unread message count instead of returning all notifs and forEaching them
- Make WB icon display unread notifs before clicking into notifs page
- use dropdown li badge logic in react
Added alert when new notification is submitted. Looked at how to refresh notifications list automatically when new notfication submitted:
1) this.forceUpdate() - not recommended
2) 2 way data binding: binding onSubmit event to onChange function and update this.State

*Issues*: right now list and form are in two separate components, not sure how to get list to know about onSubmit button to refresh and list all notification. I think I have to export the components into a parent component?

*What to do next*: get parent component to communicate onSubmit
33
August 14, 2017
*What you did:*
Rebasing master and adding notif view

*Problems:*
'package-chromium' errored

'-o file is expected to have a `.crx` suffix: [' + program.output + '] was given.');
Got form to submit new notifications to db, yay! Edited body-parser to read and convert title and body to JSON fields, updated routes to POST correctly
34
35
Objective for week
- Rebase master and make PR
- refactoring - make react page rerender whenever pouch db changes
- query pouch db to retrieve unread message count instead of returning all notifs and forEaching them
- Make WB icon display unread notifs before clicking into notifs page
- styling and animation
-Have form submit new notifications to to db
-Have fetch API render list of notifications, and refresh to show new ones
-Get MongoDB ready for deployment
36
37
August 11, 2017
*What you did:*
- basic logic for fetching JSON data and displaying in React, rendering notifs as read/unread and add a badge to WB icon and drop down list now complete.

*What to do next:*
- Rebase worldbrain/webmemex and make new PR
- refactoring - make react page rerender whenever pouch db changes
- query pouch db to retrieve unread message count instead of returning all notifs and forEaching them
- Make WB icon display unread notifs before clicking into notifs page
38
*What you did:*
- compared pouch data (array of objects inside objects) vs JSON (array of objects)
- setInterval on fetch
- ammended logic to go fetch -> update WB badge and dropdown icon

*Problems:*
- Syntax for using set state to update read/unread notifs styling without refreshing the page

*What to do next:*
- More work on set state to update read/unread notifs styling
Resolved issues from yesterday - for some reason the submit button was posting data to the incorrect filepath
Today concentrated on using fetch to post new JSON data to mongodb:
first with JS and then in React. Having problems with both of them.

Issues: React form doesn't do anything when I click submit (no errors either), JS form has syntax errors with unexpected token
39
August 10, 2017 - comparing pouch data (array of objects inside objects) vs JSON (array of objects)
- setTimeout on fetch - try with 'whats cracking in fetch file first - then think about imlementations
- find a way to rerender UI to display unread notifs => read without refreshing the page
Researched ways to submit form data:
1) XMLHttpRequest and the FormData object
2) Fetch API
Conclusion: Fetch is simpler, since xml needs two listeners to be set to handle success/error cases
Created plain html form and wrote script for a fetch API to send form data in JSON format to my notifications api.

Issues: routing issues with POST - I get a 404 error with 'cannot GET/Notifications'
https://seamusleahy.com/submitting-a-form-with-the-fetch-api/https://developers.google.com/web/updates/2015/03/introduction-to-fetch
40
*What you did:* - finished modular logic for fetching JSON data (MongoDB), checking if it is in pouch and then inserting any new notifications to pouch *What to do next:* - comparing pouch data (array of objects inside objects) vs JSON (array of objects) - find a way to rerender UI to display unread notifs => read without refreshing the page
41
August 9, 2017Can I pass 2 parameters into then() in a promise? Use react render to refresh component after notif.body has been viewedFirst render fake JSON API with Notif Table component, then render localhost:/4001/api/notifications, using fetch url
Fixed up CORS issues by installing npm cors, then requiring and adding middleware to server.js
42
*What you did:* - started modular approach to polling logic, retrunMongoData.js, returnDifferenceInArrays, PushNewNotifToPouch.js - can console log results of other two modules in PushNewNotifToPouch.js *What to do next:* - figure out how to return each value with promises and insert new pouch docinstalled cors and implemented in server.js files
git revert to un-break files
43
August 8, 2017Modular approach to polling logic Append id prefix Auto refresh on viewing notifWent through resources fetching and rendering api urlshttps://www.davidmeents.com/blog/create-a-react-js-support-ticketing-system-using-mongodb/https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms
44
*What you did:* - compared 2 arrays, return objects found in one but not the other - inserted to pouch from JSON data *What to do next:* - work out files structure for logic: => return JSON data => return list of pouch doc notifs => compare 2 arrays, return difference => insert difference as new pouch doc to - imediate update to viewed in UI with viewed/not viewed notifications, not refresh first - refector promise to find if notifs are read/unread. Use pouch query insteadFinished installing create-react-app MERN stack. Added dependencies, components, routes and middleware. Created Form component. *What to do next*: render mongodb JSON records in Table component & have form component able to submit records *Issues*: Not sure if it's React syntax or mongo connection that is causing components not to render and submit new records
45
August 7, 2017
46
imediate update to viewed in UI, not refresh first
47
48
Mongo must allow access control allow origin
49
Dropdown li to not display badge if badge === 0
50
Objective for the weekimediate update to viewed in UI, not refresh first fetch json data, insert into pouch if ids not match Pouch query for id: notif_ refactor: var PouchDB = require('pouchdb'); PouchDB.plugin(require('pouchdb-find'));-Fetch JSONs and render them with table component -Submit new records and add to db with form component -Det if CORS headers are needed
51
https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work
52
middle man (CORS proxy)https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors
53
from JSON
54
from requesthttps://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
55
Set json data file to allow cross origin requests or override/use middle man from request?
56
57
What you did: Problems: What to do next:*What you did:* - used ternary operator to add class for 'viewed'/'not-viewed' notification, rendered successfully in webmemex repo - returned variable from promise in external module *Problems:* - ternary operator to add class doesn't work in webmemex repo becuase gulp build pack requires className={styles.viewed} *What to do next:* - get badge to display number of unread notifs, not read notifs - if there's 0 unread notifs, don't display "0" - add dynamic badge to notifications dropdown list li - workaround the className={styles.viewed} issue - set css non-dynamically or find out how to use className={styles.viewed} with ternary operator conditional - fetch json data to inject to pouch db in prep for mongoStupid day troubleshooting Mongo and robomongo :( Also created new branch for building mern stack using create-react-app *Problems*: robomongo died, so now will use Studio3T (mongochef) as GUI *What to do next*: continue with steps to rebuild repo with create-react-app
58
August 4, 2017
59
What you did: Problems: What to do next:*What you did:* - used ternary operator to add class for 'viewed'/'not-viewed' notification - returned variable from promise in external module *Problems:* - ternary operator to add class doesn't work in webmemex repo becuase gulp build pack requires className={styles.viewed} *What to do next:* - get badge to display number of unread notifs, not read notifs - if there's 0 unread notifs, don't display "0" - add dynamic badge to notifications dropdown list li - workaround the className={styles.viewed} issue - set css non-dynamically or find out how to use className={styles.viewed} with ternary operator conditional - fetch json data to inject to pouch db in prep for mongoResearch serverside vs client side rendering: server-side renders everything (HTML, CSS, content) with downloaded JS, then executes React to make page interactive. Client side first sends empty doc w JS links, downloads JS then executes React. Tutorials on fetching mongodb records and displaying with via node/express in react Met with Stefan to discuss breaking up repository into 2 (one for server and one for client). For now we will stay with just one repo
60
August 3, 2017
61
What you did: Problems: What to do next:*What you did:* - using a callback function when calling (load the module, wait to execute, then we will use it!) - use await instead of promise inside the module (I'm not not that this will work tbh, because the behaviour is still going to be aynchronous I should think.) - use a query to the db instead of retrieving all docs with notif prefix, then iterating over them - (would be more concise and therefore could solve asynchronosity issues too.) *Problems:* - Pouch db query returning 'unknown module' error - await return 'reserved word' error - using a callback function inside module call still returns undefined *What to do next:* - Check my pouch errorsUpdated schema for notifications, tested sending to DB. Also tested all the CRUD routes. Meeting with Luca to review the project structure in Atom
62
August 2, 2017Module returning asynchronousy problem, possible solutions: - using a callback function when calling (load the module, wait to execute, then we will use it!) - use await instead of promise inside the module (I'm not not that this will work tbh, because the behaviour is still going to be aynchronous I should think.) - use a query to the db instead of retrieving all docs with notif prefix, then iterating over them - (would be more concise and therefore could solve asynchronosity issues too.) - try RGs coaches ideas (which I think a superficially semantic.)
63
What you did: Problems: What to do next:*What you did:* - Worked on JS promise return asynchronosity problems (from a module) - added a badge to the WB notifs dropdown list item. - Using if statement to dynamically append className="viewed" to set styling for viewed notifs. *Problems:* - Using if statement to dynamically append className="viewed" to set styling for viewed notifs (React syntax) - Returning and calling a promise from a module. *What to do next:* Talk to Luca about my problems.
64
August 1, 2017Pass props to display notif as unread in non-bold text Work out JS asynchronosity problems Add a badge to the WB notifs dropdown list item
65
What you did: Problems: What to do next:*What you did:* - React workshop with Emile *Problems:* - Returning a variable from an external module, where JS acts asynchronously - Chrome.browserAction returns undefined in content scripts. *What to do next:* Pass props to display notif as unread in non-bold text, work out JS asynchronosity problems, add a badge to the WB notifs dropdown list item.Started creating the MERN app for the notifications branch: -Connected mongodb to node/express server -Created and tested routes -Defined model and schema -Saved mock notifications to db *Next steps*: connect form to submit notifications to db
66
July 31, 2017
67
68
Objective for the week- dynamicaly display icon badge in response to unread notifs - make PR with rebased master - display read notif in non-bold - add bage to WB drop down list item for notifs
69
70
What you did: Problems: What to do next:*What you did:* - Added a show/hide toggle for the notification body - On view of title, updated pouch doc to set 'viewed' as true. *What to do next:* Set badge to show number of unread messages-Added react form component to input a new record, with event handlers to pas through input text -Fetch to display list of all records, including new one
71
July 28, 2017Research adding listener to each notification to listen if it has been viewed and update notif doc to viewed: ’true’; — > and link this to badge on WB icon. 1 pm call with EmileIncorporating React Front end with MEN
72
What you did: Problems: What to do next:*What you did:* Meeting with Luca, dev standup meeting, made PR of notifs page in webmemex. Starting to add listener to each notification to listen if it has been viewed and update notif doc to viewed: ’true’; — > and link this to badge on WB icon. *What to do next:* Use a listener to toggle 'viewed'/'not viewed' on pouch db and notification badge-Added geolocation attribute -Updated GET requests -Attach Front end
73
July 27, 2017- CSS styling to make notif page look better, make pull request?(code review) - JQuery to open notif, listener to check if it happened.Finishing up MERN app
74
What you did: Problems: What to do next:*What you did:* Meeting with Giulio, Stefan, Nynne, WB call. Got to pass list of pouch db docs for “notifs” into webmemex repo react view. *What to do next:* Use a listener to toggle 'viewed'/'not viewed' on pouch db and notification badgeAdded handling for put and delete routes. Learning about adding geolocation to JSON objects.
75
July 26, 2017Still MERN app, surprise, surprise!
76
What you did: Problems: What to do next:*What you did:* Trying to render list *Problems:* Can pass array of docs with 'notif' in prefix to render function, and console log but not yet render with react as list *What to do next:*-Understand middleware (body-parser) to extract body text from JSON data -Created models, included in routes -Connected with MongoDB via Mongoose to save new records -Tested POST methods with Postman
77
July 25, 2017-Use map method and setState to display all pouch docs with 'notifs' in the id prefix. -Insert this into webmemex repo, ask for code review. -Move onto badge listenerContinue with same MERN app
78
What you did: Problems: What to do next:*What you did:* Trying to render list *Problems:* Can pass array of docs with 'notif' in prefix to render function, and console log but not yet render with react as list *What to do next:*-Installed Node and Express in app -Creates routes and handling -Tested routes with postman
79
July 24, 2017Continue building mini MERN app
80
81
Objective for week:In Webmemex repo, display all pouch docs with prefix, ‘notif’ in the ID. Use .map method to render all docs as a list. Add view to show notification alone (or Jquery?). Add listener to see if notif viewed underway.Create mini MERN app Create repo to display table and form
82
83
July 23, 2017Got MongoDB up and running, better understanding of all MERN components and how they interact together
84
What you did: Problems: What to do next: The one thing that would help everything:*What you did:* Finallly passed a Pouch doc into React (ay carumba!) Used componentDidMount this.setstate, meetings with Stefan and Emile *Problems:* Rails instead of MERN stack app? *What to do next:* Pass pouch doc notifs page in webmemex repoToday sat with Stefan to do the following: 1) Recreate my react fixed-data-table to be able to run with npm start and not webpack. Then moved over the needed files and folders. Lesson learned: create-react-app has babel and webpack under the hood already. No need to reinstall 2) Reorganized and correctly referenced my files to have them organized correctly ( one main.js, components moved to own separate folder and files, data moved to own folder and files 2) Add a column header to my simple data table in React Next: create github branch with tables, add form
85
July 21, 2017
86
What you did: Problems: What to do next: The one thing that would help everything:*What you did:* Passed a Pouch doc into React, console.logged key:value pairs *Problems:* It took ages to work out how to import pouch into react file, *What to do next:* Pass key:value pairs into constructor as proptypes, to render them to the page with React, then how to retrieve ALL pouch docs of type /notifications and render them using map method.Finally rendered two types of tables: 1) with fixed-data-tables (a component for React), which also requires babel, webpack and all its dependancies. http://4dev.tech/2015/12/reactjs-datatable-with-sort-filter-and-pagination-example-part-1/ 2) with just straight <tr> and <table> elements, which looks very basic but could be cleaned up with some headings. http://www.automationfuel.com/reactjs-tables/ Next step: add column headers to the basic table
87
July 20, 2017
88
What you did: Problems: What to do next: The one thing that would help everything:*What you did:* Passed a Pouch doc into React, console.logged key:value pairs *Problems:* It took ages to work out how to import pouch into react file, *What to do next:* Pass key:value pairs into constructor as proptypes, to render them to the page with React, then how to retrieve ALL pouch docs of type /notifications and render them using map method.Back to more basic tutorials with rendering and mapping different datasets. Also learned about the importance of React hierarchy, componenents and organizing into different files Next: Goal is to actually be able to reproduced a fixed table using fixed-data-table in React
89
July 19, 2017http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/
90
What you did: Problems: What to do next: The one thing that would help everything:*What you did:* Looked repos and tutorials at how to pass a pouch doc into a react component Created project milestones document to help us track our progress. https://docs.google.com/document/d/1Qax0w4EfdPAtl1_6V-K591eWM8pipFu-3WVNKKb830o/edit# *Problems:* How to pass pouch doc to react component? *What to do next:* more research in how to pass pouch doc to react componentNot a very productive day but tried and failed to render a table with headers and rows.http://4dev.tech/2016/03/tutorial-sorting-and-filtering-a-reactjs-datatable/
91
July 18, 2017https://facebook.github.io/fixed-data-table/
92
What you did: Problems: What to do next: The one thing that would help everything:*What you did:* Rendered object in react with createClass and props, *Problems:* fetching notification from pouch doc to render in react *What to do next:* more research in pouch doc render to UIWent through tutorials on setting up React, creating components, props and statehttp://www.automationfuel.com/reactjs-tables/
93
July 17, 20171 - use props to display object keys in reactReact components and rendering for tables
94
https://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/#.WWx5ZdOGNE4 https://pouchdb.com/2015/02/28/efficiently-managing-ui-state-in-pouchdb.html
95
Objective end of this week:Display notif from pouch db in React 1 - use props to display object keys in react 2 - import pouch db doc into react component and render that in React Display notif from pouch db in webmemexHave Notifications form and table display for admin
96
97
98
What you did: Problems: What to do next: The one thing that would help everything:What you did: Tried to render a react component using props Problems: Problems rendering my components in react, look into react how to run build What to do next: Get react dev tools working, have a react meeting with GiulioRunning through these tutorial videos to understand server-side rendering, routing and client-side routing in React Finished basic read-only Notifications form in React, spent the day using logic to include client input for new Notirications. Issues/Questions: can't get my page to render after making changes to accept user input :(
99
July 14, 2017work on react and pouch repo, learn how to display an object in react more pouch learning, id groupings, where stored in webmemex, respond to jonathon
100
What you did: Problems: What to do next: The one thing that would help everything:What you did: Created an example using pouch and react https://github.com/JessicaML/react-pouchdb Problems: How to group documents in pouch, since the concept of a table has no SQL equivalent? By db or some id or grouping? Where are pouch dbs defined in webmemex? Are there 2 dbs - import and blacklist? How do you display an object keys in react? What to do next: Keep working on react and pouch example repo The one thing that would help everything:Had call with Nynne who suggested we make scheduled meetings with coaches - so did so with Luca, Jenny, and set up coffee chats at Info Finished the basic react form tutorial and edited to recreate Notifications Form and table. Notifications show up, now need to put into table and insert to MongoDB
Loading...