jaredwilli / webernote-react

:helicopter: Create and edit notes in real-time.

Welcome to Webernote!!

Overview

---

This app is a side-project I'm developing using React, Redux, ES6, and Firebase as the data store. I have learned a great deal from building this application, now for the third time. The first time I made it with jQuery, the second time with AngularJS.

It is a great example of what a real-world application might be like, which makes it perfect to build it using different technologies that I want to learn or get better with.

Demo

---

You can see that as you change the fields in the edit form, the updates are made everywhere, instantly populating the form rest of the components and filling out the app with some useful UI features and capabilites that you can ultimately operate the application with the more notes you have!

Responsive Layout

---

I wanted to be able to take this app and use it anywhere I was right from on my phone. So, I used flexbox to make the rather complex layout of the columns and the edit form rows and filled in remaining spaces which normally would be a problem, it was quite easy with the use of flexbox.

It's not 100% perfect yet. But you can use it, it's functional. I did make some improvements that required some more thought around the UX on mobile, but overall it's pretty usable.

---

Install

Yarn helps to spead things up a bit, but I use npm as well.

brew install yarn

Clone && cd && yarn

git clone [email protected]:jaredwilli/webernote-react.git
cd webernote-react
yarn

Running Server:

yarn start

_The app will be served on (http://localhost:3000/).

Building - Testing - Watching

This is still a Create React App unejected. (Sounds so weird...) But there are tons of cool things you can do

Building

yarn build
Yarn build-start

Testing

yarn test  [-- --jsdom] [--coverage]
yarn coverage   [--watch]

Sass Watching / Building

yarn watch-css
yarn build-css

***ORRR..... Read the code :)

Get a list of the npm scripts you can run.

yarn run

---

Prettier Configuration

This app uses prettier to auto format the code on pre-commit. It also has a .prettierrc file for setting some defaults. It is recommended that you install Prettier in your code editor of choice and configure your workspace settings for it to be the same as what this project has defined.

Contributing

Everyone is welcome, we can turn it into a really useful app together! Of course I am open to anyone looking to contribute. This app is kind of a what I use to build a real-world and production level and quality application using technologies I am not very familiar with so I can pick it up while building a pretty complex single-page-app.

If you are interested in contributing to this project, check out the Issues page and choose from any of the various features, bugs, ideas and other things that you may want to give a shot to add, and open a Pull Request.

Roadmap

Check out the issues, there's and apply the label Roadmap.

License

MIT License

webernote-react's Issues

Need to link the different login methods user accounts

When users login with different oauth options they need to have their accounts linked to each other so they see the same data everytime rather than having multiple different account per user.

https://firebase.google.com/docs/auth/web/account-linking?authuser=0

Add new note selects notebook from previously selected note

Need to fix this

Replace the current user auth system with the react-redux-firebase one

This is pretty solid looking. I should probably use it as it's already well established and not annoying to fix maybe.

https://github.com/prescottprue/react-redux-firebase

What I've learned so far while building this application

As I've grown this application, one of the things I've learned is that as the number of components you have increases it begins to become apparent that the folder structure begins to get challenging and organizing the different types of components is a bit of an issue.

Folder structure

Trying to come up with the best structure and the way to organize them so that it makes sense is important to me. I want this project to be architected in an easy to scale way. A way that is easy to test. Maintain and grow.

And, I would also like to make it easy to change it into something else if I so decide to pivot the app into something different. That is a difficult task too.

I've learned that the components should be broken up in 2 ways:

• by feature (search, edit, nav, etc.)
• by type (container, stateful, stateless, high order, presentational, functional, etc)

Component types

I've also learned that container components should not be more than that, a container. They should handle the necessary requests and data fetching, and then display the components that require that data. Nothing more.

Higher order components are simply higher order functions, they are components that take a component, and return a different component that is more enhanced than the one that was given to it. They are a way to share common functionality among components that may require similar methods, and they can be useful in terms of making components more reusable.

Testing

Another thing I've learned is that this application is complex, and requires unit tests for each piece of it in order to not break something somewhere else when I change something. I think that making the components more generic will fix some of that but it's still going to be necessary to test everything.

It has been a challenge to get unit tests set up so that I can write them. Mainly because of the need to mock firebase and the way that it's api works. I think I've managed to achieve that now, and everything should be doable as far as testing goes. I just need to do it and break up the work in smaller chunks so I can merge things easier.

Functional Programming

Making this a functional code base is also important while building this app. I've learned that this is not an object oriented world within redux and react, and it is possible to do things in a much different way. Plus with ES6 it's not a much more functional language and it's possible to write code more cleanly, easier to test and just pure. I like that. I need to do more of it.

Large PRs are hard to merge

No surprise here. Obviously large PRs are harder to merge, more going on more that could break. While working on a feature it's been common that it would break something somewhere, which required me to change some code in places that was not originally intended, causes a cascade of changes to occur and eventually large PRs which could not be merged. I suppose this is an effect of learning a new technology, combined with getting a production level app up and running with all the tools and capabilities of automating everything like an app should have.

Well, I have that stuff now, I need to use it.

This app is going to be the shit, and I want to make sure that it reflects my abilities properly. I am capable of much more and I want to prove it to myself. I know I can do better.

Do it!!

Latest screenshot of my account in production has 54 notes!! I do use this app everyday.

Older screenshots

Create settings modal

Add URL validation and make the url field more useful

Need to give URL field some love. it's not used at all and no validation on it yet.

Refactor functions that aren't pure

I may have let things go a bit and create some impure functions here and there. Need to refactor things a bit so that's better architected.

Test ticket from Code Climate

Make toolbar nav menu items collapse into the hamburger menu list on small screens

When viewing the app on my phone the toolbar menu items get overlapped with the add note button.

Plus the toolbar menu isn't really that useful on mobil anyways so maybe just remove most of it completely idk. need to think about that more.

Fix the creation of double anonymous users from onAuthStateChanged on logout/login

When logging out onAuthStateChanged is called and anonymous user is created. on login, anonymous user is deleted then signIn is called, but onAuthStateChanged is called again then and it creates another anonymous user because user doesn't exist at that point.

Fix "complex_logic" issue in src/common/noteHelpers.js

Consider simplifying this complex logical expression.

https://codeclimate.com/github/jaredwilli/webernote-react/src/common/noteHelpers.js#issue_5a08e544a825fb00010000e3

Note types - similar to how i did the post types for the app i made prior to wphonors

Yes, i know exactly what i mean here.

Use the .map().reduce() pattern as shown below for get object counts

notebooks.map(notebook => {
            let count = notes.reduce((sum, note) => {
                return (note.notebook.id === notebook.id) ? sum + 1 : sum;
            }, 0);


});

Merging anonymous user and logged in with duplicate data causes issues

If an anonymous user adds a notebook tag or label that exists already in a user account, when logging in and merging the two into the user account causes duplicate data.

Need to filter through the data during the merge and remove the duplicates and update the merged notes to reference the ones that are kept instead of the removed ones.

Create layout components for grid like layout

I need a layout component for the 3 columns

• Right, middle, left

A layout component for the rows of edit note component. This will be tricky cuz of flex box maybe.
Top, mid-top, mid-bottom, bottom.

Add the ability to arrow up and down through the note list to select and navigate notes

This is something that will make it better for keyboard users and faster note navigation.

Add status color picker

To make notes have different priorities or labels i guess.
can make them colored in note list based on color picked

Create smaller components that do more granular things

Some of the components are quite large. I can definitely break up more parts of them into smaller components.

• Make more components that aren't aware of their children such as a split pane for the notes container, https://codepen.io/gaearon/pen/gwZOJp?editors=0010

https://reactjs.org/docs/components-and-props.html

React-router for clicking on the notebooks and tags in nav menu

To be able to filter by notebooks or tags.

Make note nav scrollable for each taxonomy list block not the entire sidebar.

That way when you have lots of one taxonomy or another the others wont get pushed down below the fold.

TDD First approach

Since I am going to write the app to be functional I should follow the TDD style and write the tests first. Should be easier to do since I will know exactly what each functions input and outputs will be.

https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44

Make the note types menu useful and the toolbar menu

Drag n drop for the toolbar for quick access to things

http://react-dnd.github.io/react-dnd/

This looks like a decent choice for the dnd library

Modal component for various things

• settings page
• login window
• shortcuts window

Create an admin interface once user roles are implemented to control everything.

Everything includes:

• prune old and orphaned data for anonymous users that can no longer be accessed.
• other obvious things that you do in the admin side of things

[Functionalize] Create selector for selectedNote and set es6 parameter defaults

Just one part of the refactoring needed to make the app fully functional

• Set some default parameters across the app so there is no Argument is undefined errors
• Create selectors, namely one for selectedNote since it exists in the notes state.
• Create selector for users instead of setting the user on users state. then use the selector to select the current user.

Use flexbox to handle the complex layout width and height

On current branch I've already converted to flexbox but the edit note description height is a pain and have to find a way to dynamically set the height by getting form height - offsettop of bottom div .

The issue also involves adding lots of tags making the tag field wrap to multiple lines pushing the bottom down, need to recalculate the height again somehow

Add material-ui to the app

http://www.material-ui.com/#/components/

Add a drag n drop image uploader

Add way to upload images to notes.

Create tests for all the things

This is a must have

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#writing-tests

Write tests for the Anon to user data copy

Need more tests all over to ensure things aren't breaking when I change stuff.

Especially around user data copy

Free SSL certificate once i get a host with shell access

https://letsencrypt.org/

Use Reselect to create selectors for easy composability

http://redux.js.org/docs/recipes/ComputingDerivedData.html

Setup a development vs production environment

Need to set up the app to work in the way that while developing its in development environment, vs production

Make it mobile friendly

I want to use it on my phone. Make it so

Improve UX on mobile

Fix hamburger nav drawer

Make description textarea not so tall so it fits on screen.

Top nav many overlap

Spacing between list and edit note sections

Show x note delete icon on note list

Show more detail on note list cards

Show note list filters somehow

Use react-codemod to convert the code I've got as much as possible

https://github.com/reactjs/react-codemod

Need to get sass setup to be used for watching and compiling the code as part of running server

This is a must have

Maybe think about making my own websocket service and data store

This is a lofy long term goal idea that I would love to be able to do, eventually.

Make my own websocket service for data storage on some database somewhere, to not need firebase.

Mock firebase for testing

Make note list title the link for a note if the note has a URL defined. but only if it's validated

In addition to adding url validation for note urls, make it so the note title in the middle column is the link from the url of the note.

Fix "similar-code" issue in src/actions/labelActions.js

Similar blocks of code found in 2 locations. Consider refactoring.

https://codeclimate.com/github/jaredwilli/webernote-react/src/actions/labelActions.js#issue_5a08e549a825fb000100010a

Goals today and must do's

#1. Remove delete note ability for mobile entirely. I keep deleting notes with lots of content that I can't get back cuz real time and all. Huge UX problem.
2. Fix notebook select so it correctly selects option from create notebook
3. Make create notebook select auto focus the input using ref attribute.
4. Write more tests.
5. Try to get note nav branch working and merged.
6. Use an icon for the link on note list on mobile.
7. High order components to share state between notes and the different types too track counts?
8. Make new issue for ideas I think of when I think of them so I don't forget.

Fix mobile note nav

The mobile nav that the Hamburger menu controls has been neglected and needs to be fixed again.

Also, need to make the routes do stuff. Like filter the note list by the route path. Idk really

Codemirror and rich text editor options

Make settings page per note that you can control the editor options, to choose rich text editor, code editor, or plain textarea.

Logout doesn't reload the page

again...

For now, don't merge existing users with anonymous - too much of a pain

There are many issues with merging anonymous user data with existing registered user data. the main issue is it's difficult to find duplicate data values, for example, notebooks that have the same name.

If a notebook with the same name exists in both anonymous and registered users, then that means there are notes with that same named notebook associated with them. Reducing the notebook to be just one or the other, is one thing, but then altering the notes which contain those notebooks as well is a whole other issue which is not really worth the hassle of doing at this time.

This issue is to document the problem and possibly understand it later if I ever revisit this problem and want to try and make it work.

For now, only anonymous user data will be copied over to newly created user accounts and nothing more.

Make a common.scss file and add mixins and vars etc.

Need to start using the features of sass effectively.

• color variables
• mixins
• reusable things
• etc.

Make a utility functions file for resusable higher order functions

Make some higher order functions that can be reused, and easy to test. Things like:

• wrapper around the firebase api endpoints

• usersWithType (types: notes, labels, tags, notebooks)

• notesWithType (types: notes, labels, tags, notebooks)

• notesWithTag

• notesWithNotebook

• notesWithLabel

• typesWithCount (types: notebooks, labels, tags)
  etc.

Refactor to not use table

I don't need to have the table. It was only for the resizable columns from the original implementation. Refactor to use divs.