togglStat
Features
- Time reporting statistics web site interacting with Toggl.com.
- Extends free version with weekly and monthly reports.
- React application interacting with the public api called "toggl-api" towards Toggl.
- Components created are aimed to be generic and reusable.
- Uses a custom built npm package @2stefant.org/alldays.
- Uses the DurationCalculator for conversion from milliseconds to other time formats.
- Uses the ConfigService for encapsulation of '.env' features and localstorage.
Demo
Background
- This project was created to learn React, Github, Curl, Typescript etc.
- This project was initially the assignment for a React development course at Chas Academy in Sweden.
Technologies
This application is written with:
- Visual Studio Code
- React
- Javascript
- Jest, JavaScript Testing Framework with Code coverage enabled as default
- Moment.js, javaScript date library for parsing, validating, manipulating and formatting dates
Learn the Toggl API
Some details are summarized in ./src/hacks/TogglApi.md
Learn how to create a custom npm package
Some details are summarized in ./src/hacks/NpmQuickstart.md
Preconditions - Before using the application
- Clone the '.env.example' file and rename to '.env', located in the root folder.
- Create a free account at Toggl.com
- Create a workspace
- Create a project
- Start measure some time, give the entries some descriptions
- At Toggl.com, copy your API token at the bottom of the Profile page and paste it inside your '.env' file.
REACT_APP_TOGGL_API_TOKEN="YOUR-PRIVATE-TOKEN"
- Optionally disallow Debug option by emptying the section
REACT_APP_SHOW_DEBUG_OPTION=""
Configure environment
Setup the code with all dependencies
First you need to initialize the code. In the project directory, you can run:
npm install
Start application
In the project directory, you can run:
npm start
This will run the app in the development mode.
Open http://localhost:3000
to view it in the browser.
Workflow - How to use the application
Note: Example screenshots are available here
- Visit the Connect view.
- Click Connect
- If success, a dropdown with available workspaces are shown.
- Select one workspace, copy its workspaceId.
- Go to the settings page and paste the workspaceId into its input field.
- Save settings.
- Click Connect
- Visit the Home view.
- View information about project and statistics.
- Copy one projectId.
- Go to the settings page and paste the projectId into its input field.
- Save settings.
- Visit the Weeks view.
- View weekly reported time.
- Visit the Months view.
- View monthly reported time.
- Optionally enable Debug option in '.env' file, restart
and visit the Settings view.
- Select the checkbox for Debug mode.
- Several views will show additional non-production features.
- Select the checkbox for Debug mode.
Continue development
Run unit tests and code coverage.
In the project directory, you can run:
npm test
or
npm test -- --coverage
The page will reload if you make edits.
You will also see any lint errors in the console.
Update referenced npm packages to newer versions.
npm update
Build for production
npm run build
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
Source code folder structure
- src
- components
- Reusable headers, input fields, lists, dropdowns etc.
- hacks
- Exploratory parts, curl + toggl api.
- services
- Context for Toggl connection, encapsulation of local storage and dotenv files ('.env')
- views
- The different views of the application.
- components
Future features
-
Layout
- Styling
- Pictures
- Logo and icons
-
Pdf generation for weekly/monthly reported time.
-
Charting, e.g. https://www.developerdrive.com/how-to-chart-your-hours-with-apis-javascript-and-svg/