React time tracking

Time tracking app on React, try demo.

The app is inspired by toggl.com.

Tech stack

Web application based on React (clientside) and Firebase (serverside)

• Clientside UI libraries: material ui, flexboxgrid layout, formsy form validation, chartjs chart
• State management: redux, redux thunk, reselect
• Unit test: jest + enzyme

Features

Authentication

• Signup using email/password

Time entry

• Can add time entry
• Can track time spent on time entry and stop a time entry tracking
• Can list time entries
• Delete time entry
• Report

Tag

• Add tag to time entry
• CRUD tag

Demo

Try demo at https://vivid-trace.firebaseapp.com/ and storybook

Developer notes

Enzyme

Simulate onClick event in shallow (github)

const componentWrapper = shallow(<Component />)
componentWrapper.simulate('click', { preventDefault() {} })

Simulate change event in material-ui's TextField (github)

const input = wrapper.find('input[name="text"]')
input.node.value = "newvalue"
input.simulate('change', input)

Sass and create-react-app

Enable guide

Material UI 0.16.7

Click on button in a Table's Row without select that row (github)

Doesn't support responsive (github)

Storybook

Use storyshots to enable unit test. Need install story book addon packages and babel preset

Add .babelrc to project's root directory

{
  "presets": ["babel-preset-es2015", "react-app"]
}

Install packages

npm install storyshots @kadira/storybook-addons @kadira/storybook-channel --save-dev
npm install babel-core babel-preset-es2015 babel-preset-react-app --save-dev

Add src/__tests__/Storyshots.test.js:

import initStoryshots from 'storyshots'
initStoryshots()

Explicitly add material ui component id so Jest snapshot test doesn't get failed because of auto generated id

Run npm test