movingobjects / endeavors

Track & evaluate how you spend your time

         ------
       /--  --- \
       |👁👃 👁 ░👂   👍
   👋   \ 👄   ░/   //
    ||    --- ░/   ||
     \\     | ░|   //

endeavors's Issues

Refactor to use Redux

Redux looks worthwhile to learn to me, even if not totally necessary for this app

Switch to Cloud Firestore Beta?

It looks like Google is rebuilding Firebase's Realtime Database from scratch and calling it Cloud Firestore. It's still in beta, but it looks pretty polished. And it looks better than the old Realtime Database (what we just started using).

• Overview: https://firebase.google.com/docs/firestore/
• Getting started: https://firebase.google.com/docs/firestore/quickstart
• Data model: https://firebase.google.com/docs/firestore/data-model
• New vs. old: https://firebase.google.com/docs/firestore/rtdb-vs-firestore

Some highlights:

• id is included on result objects!!!!! <-- obs huge (jk, looks like they're still separate)
• more intuitive data structure ("documents" and "collections" instead of one giant tree)
• better story for hierarchical data (document subcollections)

They show an example of subcollections:

var messageRef = db.collection('rooms').doc('roomA')
                .collection('messages').doc('message1');

Seems relevant to our category/values nesting:

var valueRef = db.collection('categories').doc('categoryKey1')
                .collection('values').doc('valueKey1');

Though I guess it'd be more like:

const categoriesRef = db.collection('categories');
categoriesRef.forEach((categoryDoc) => {
    const category = categoryDoc.data(); // { label }
    const categoryRef = categoriesRef.doc(categoryDoc.id)
    const categoryValuesRef = categoryRef.collection('values')
    categoryValuesRef.forEach((valueDoc) => {
        const value = valueDoc.data(); // { label }
    });
});

And activities could have their "links":

const activitiesRef = db.collection('activities')
activitiesRef.forEach((activityDoc) => {
    const activity = activityDoc.data();  // { label }
    const activityRef = activitiesRef.doc(activityDoc.id);
    const valueLinksRef = activityRef.collection('valueLinks');
    valueLinksRef.forEach((valueLinkDoc) => {
        const valueLink = valueLinkDoc.data(); // { valueId, weight }
    });
});

Hmm actually now that I write that all out I'm not sure how much better it is

Replace printed text table cells with input elements

This might be a fun next step / good for another pairing day: swapping out all the table cells for input elements, so (similar to the original spreadsheet) users can live-update values

Would also give us a chance to ease into state:

1. in-memory (lost on refresh)
2. local storage (persists for device)
3. firebase? (persists for account)

Think through categories

• Do we need categories at all?
• Tags vs categories
• Categories for values? Categories for activities?
• How to handle initial state?
  • Do we provide default set of categories?
  • Are categories unchangeable?

How does RequireJS fit into this?

Aren't people using RequireJS? Does Webpack remove the need for Require? Halp!

Look into implementing dynamic/computed styles (for category colors, etc)

It seems there are many options, whole section just on React-style styling here:
https://survivejs.com/react/advanced-techniques/styling-react/

Someday, we should optimize for production

https://webpack.js.org/guides/production-build/

Should the dist folder be under version control?

Just noticed the bundle.js and bundle.js.map items updating in my last small commit, and not sure how to deal with these

Make this an Electron app

How rad would it be to ultimately make this a native app? Shouldn't necessarily be that hard.

This Graphcore branding app by Pentagram reminded me how dope these can be.

Improve authentication step

Currently, signInWithPopup is a little janky. We have no control over the popup properties (e.g., it's a frameless window, which is weird).

We may want to handle sign-in flow manually.

TODO: add SASS or LESS to our Webpack build

• SASS loader = https://github.com/webpack-contrib/sass-loader
• LESS loader = https://github.com/webpack-contrib/less-loader

Add user authentication