50 | Loading...
;
32 | } else if (error) {
33 | return {error.message}
;
34 | } else if (!direct) {
35 | return
43 | {!isEmpty &&
53 | );
54 | }
55 | }
56 |
57 | MeetingQuestions.propTypes = propTypes;
58 |
59 | export default MeetingQuestions;
60 |
--------------------------------------------------------------------------------
/src/components/meetings/MeetingNew.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { browserHistory } from 'react-router';
5 | import MeetingForm from './MeetingForm';
6 | import meetingActions from '../../actions/meetings';
7 |
8 | class MeetingNew extends Component {
9 | constructor() {
10 | super();
11 | this.onSubmit = this.onSubmit.bind(this);
12 | }
13 |
14 | componentWillMount() {
15 | if (!this.props.initialValues.directKey) {
16 | this.props.initialValues.directKey = this.props.params.id;
17 | }
18 | this.props.reset();
19 | }
20 |
21 | /* eslint no-param-reassign: ["error", { "props": false }] */
22 | onSubmit(meeting) {
23 | if (meeting.meetingDate instanceof Date) {
24 | meeting.meetingDateReverse = 0 - meeting.meetingDate;
25 | meeting.meetingDate = meeting.meetingDate.toISOString();
26 | }
27 | this.props.create(meeting).then(() => {
28 | browserHistory.goBack();
29 | });
30 | }
31 |
32 | render() {
33 | return (
34 |
35 |
40 | );
41 | }
42 | }
43 |
44 | MeetingNew.propTypes = {
45 | create: PropTypes.func.isRequired,
46 | reset: PropTypes.func.isRequired,
47 | };
48 |
49 | const mapStateToProps = (state) => {
50 | const initialValues = {
51 | meetingDate: new Date(),
52 | };
53 | return {
54 | initialValues,
55 | formType: 'create',
56 | error: state.meetings.error,
57 | directs: state.directs.list,
58 | };
59 | };
60 |
61 | export default connect(
62 | mapStateToProps,
63 | { create: meetingActions.create,
64 | reset: meetingActions.resetActive,
65 | })(MeetingNew);
66 |
--------------------------------------------------------------------------------
/src/components/header/DirectSortBtn.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import IconMenu from 'material-ui/IconMenu';
3 | import MenuItem from 'material-ui/MenuItem';
4 | import IconButton from 'material-ui/IconButton';
5 | import FontIcon from 'material-ui/FontIcon';
6 | import { white } from 'material-ui/styles/colors';
7 | import PropTypes from 'prop-types';
8 |
9 | import {SORT_BY_NAME, SORT_BY_TEAM_NAME} from '../../constants/general';
10 |
11 | /**
12 | * @description PropTypes for DirectSort
13 | * @type {{handleChange: (*)}}
14 | */
15 | const propTypes = {
16 | handleChange: PropTypes.func.isRequired,
17 | selected: PropTypes.string.isRequired,
18 | };
19 |
20 | /**
21 | * @class DirectSort
22 | * @extends React.Component
23 | * @description Render component
24 | */
25 | class DirectSort extends Component {
26 |
27 | /**
28 | * @description handle on change
29 | * @param {Object} e synthetic event
30 | * @param {String} val new value
31 | */
32 | handleOnChange = (e, val) => {
33 | this.props.handleChange(val);
34 | };
35 |
36 | /**
37 | * @description render
38 | * @return {Object} JSX HTML Content
39 | */
40 | render() {
41 | const icon = (
42 |
43 | sort
44 |
45 | );
46 | return (
47 |
48 |
53 |
56 |
57 | );
58 | }
59 | }
60 |
61 | DirectSort.propTypes = propTypes;
62 |
63 | export default DirectSort;
64 |
--------------------------------------------------------------------------------
/src/components/directs/form/DirectNew.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { reduxForm } from 'redux-form';
4 | import { connect } from 'react-redux';
5 | import { browserHistory } from 'react-router';
6 | import RaisedButton from 'material-ui/RaisedButton';
7 |
8 | import DirectForm, { validate } from './DirectForm';
9 | import directActions from '../../../actions/directs';
10 | import { getTeamsArray } from '../../../selectors/teams';
11 |
12 | class DirectNew extends Component {
13 | constructor() {
14 | super();
15 | this.onSubmit = this.onSubmit.bind(this);
16 | this.onCancelClick = this.onCancelClick.bind(this);
17 | }
18 |
19 | onSubmit(direct) {
20 | this.props.create(direct).then(() => {
21 | browserHistory.push('/directs');
22 | });
23 | }
24 |
25 | onCancelClick(event) {
26 | event.preventDefault(); // Fix double touchtap bug
27 | browserHistory.push('/directs');
28 | }
29 |
30 | render() {
31 | return (
32 |
33 |
34 |
39 |
* Indicates required field
40 |
51 |
52 |
59 |
60 | );
61 | }
62 | }
63 |
64 | QuestionSingle.propTypes = propTypes;
65 |
66 | export default QuestionSingle;
67 |
--------------------------------------------------------------------------------
/src/components/meetings/questions/dialog/QuestionForm.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Field, reduxForm } from 'redux-form';
3 | import { TextField } from 'redux-form-material-ui';
4 | import RaisedButton from 'material-ui/RaisedButton';
5 | import PropTypes from 'prop-types';
6 |
7 | /**
8 | * @description PropTypes for QuestionForm
9 | * @type {Object}
10 | */
11 | const propTypes = {
12 | handleSubmit: PropTypes.func.isRequired,
13 | handleFormSubmit: PropTypes.func.isRequired,
14 | handleFormCancel: PropTypes.func.isRequired,
15 | };
16 |
17 | /**
18 | * @description validation for Question form
19 | * @param values
20 | * @return {{}}
21 | */
22 | export const validate = (values) => {
23 | const errors = {};
24 | if (!values.question) {
25 | errors.question = 'Required';
26 | }
27 | return errors;
28 | };
29 |
30 | /**
31 | * @description QuestionForm
32 | * @param {Function} handleSubmit
33 | * @param {Function} handleFormSubmit
34 | * @param {Function} handleFormCancel
35 | * @return {XML}
36 | */
37 | function QuestionForm({ handleSubmit, handleFormSubmit, handleFormCancel }) {
38 | return (
39 |
62 | );
63 | }
64 |
65 | QuestionForm.propTypes = propTypes;
66 |
67 | export default reduxForm({
68 | form: 'questions',
69 | validate,
70 | })(QuestionForm);
71 |
--------------------------------------------------------------------------------
/src/components/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import getMuiTheme from 'material-ui/styles/getMuiTheme';
4 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
5 | import { green100, green500, green700 } from 'material-ui/styles/colors';
6 | import { browserHistory } from 'react-router';
7 |
8 | import Header from './Header';
9 | import LeftDrawer from './LeftDrawer';
10 | import BottomNav from './BottomNav';
11 | import store from '../store/store';
12 | import { listenToAuth } from '../actions/auth';
13 |
14 | const muiTheme = getMuiTheme({
15 | palette: {
16 | primary1Color: green500,
17 | primary2Color: green700,
18 | primary3Color: green100,
19 | },
20 | });
21 |
22 | class App extends Component {
23 | constructor(props) {
24 | super(props);
25 | this.state = { open: false };
26 | }
27 |
28 | componentDidMount() {
29 | store.dispatch(listenToAuth());
30 | }
31 |
32 | handleMenuTap = () => this.setState({ open: !this.state.open });
33 |
34 | handleNavigate = (path) => {
35 | this.setState({ open: false });
36 | browserHistory.push(path);
37 | }
38 |
39 | render() {
40 | return (
41 |
42 |
43 |
47 | this.setState({ open })}
50 | handleNavigate={this.handleNavigate}
51 | />
52 | {this.props.children}
53 |
57 |
58 | );
59 | }
60 | }
61 |
62 | App.propTypes = {
63 | children: PropTypes.object.isRequired,
64 | };
65 |
66 | export default App;
67 |
--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router';
3 | import ArrowIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-up';
4 |
5 | const Footer = () => (
6 |
7 |
8 |
9 |
10 | About
11 |
12 |
13 |
15 |
16 |
18 |
19 |
21 |
22 |
23 |
24 | Support
25 |
26 |
27 |
29 |
30 |
32 |
33 |
35 |
36 |
50 |
51 |
Use of this website signifies your agreement to the
52 |
55 |
38 |
39 |
Meeting
46 |
47 |
48 |
Follow Up
55 |
56 |
57 | );
58 | }
59 |
60 | DirectSingleActions.propTypes = propTypes;
61 |
62 | export default HideOnArchivedHOC(DirectSingleActions);
63 |
--------------------------------------------------------------------------------
/src/HOCs/archive/__tests__/HideOnArchivedHOC.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef,import/first */
2 | jest.mock('../ArchiveHocFactory', () => jest.fn());
3 | import ArchiveHocFactory from '../ArchiveHocFactory';
4 | import React from 'react';
5 | import { shallow } from 'enzyme';
6 |
7 | import HideOnArchivedHOC, { componentFactory } from '../HideOnArchivedHOC';
8 |
9 | const TestComponent = () => (I am test
);
10 |
11 | describe('HideOnArchived', () => {
12 | let HideOnArhive;
13 |
14 | beforeEach(() => {
15 | HideOnArhive = componentFactory(TestComponent);
16 | });
17 |
18 | it('Should return wrapped component if isArchived props is not passed ', () => {
19 | const wrapped = shallow(I am test
);
11 | describe('ShowOnArchived', () => {
12 | let ShowOnArchived;
13 |
14 | beforeEach(() => {
15 | ShowOnArchived = componentFactory(TestComponent);
16 | });
17 |
18 | it('Should return null if isArchived not passed as props ', () => {
19 | const wrapper = shallow(
41 |
42 |
43 | {name}}
47 | textStyle={{ paddingRight: 0 }}
48 | avatar={
49 |
50 |
56 | }
57 | subtitle={
58 |
59 |
{title}
60 |
{teamName}
61 |
67 |
68 | );
69 | }
70 |
71 | HeadInfo.propTypes = propTypes;
72 | HeadInfo.defaultProps = defaultProps;
73 |
74 | export default HeadInfo;
75 |
--------------------------------------------------------------------------------
/src/components/meetings/questions/dialog/QuestionsList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { List, ListItem } from 'material-ui/List';
4 | import PropTypes from 'prop-types';
5 |
6 | import QuestionItem from './QuestionItem';
7 | import QuestionsTools from './QuestionsTools';
8 | import { getFiltreredQuestionsArray } from '../../../../selectors/questions';
9 |
10 | /**
11 | * @description PropTypes for QuestionsList
12 | * @type {Object}
13 | */
14 | const propTypes = {
15 | list: PropTypes.arrayOf(PropTypes.shape({
16 | id: PropTypes.string.isRequired,
17 | question: PropTypes.string.isRequired,
18 | })).isRequired,
19 | clickOnItem: PropTypes.func.isRequired,
20 | onDelete: PropTypes.func.isRequired,
21 | loading: PropTypes.bool.isRequired,
22 | };
23 |
24 | /**
25 | * @function QuestionsList
26 | * @param {Array} list array of questions
27 | * @param {Function} clickOnItem
28 | * @param {Function} onDelete
29 | * @param {Boolean} loading
30 | * @returns {XML}
31 | */
32 | function QuestionsList({ list, clickOnItem, onDelete, loading }) {
33 | const isEmptyList = list.length === 0;
34 | const emptyListPrimaryText = loading ? 'Please wait' : 'No items. Add or/and Import Questions';
35 | return (
36 |
37 |
39 | { isEmptyList &&
50 | );
51 | }
52 |
53 | QuestionsList.propTypes = propTypes;
54 |
55 | const mapStateToProps = state => ({
56 | list: getFiltreredQuestionsArray(state),
57 | loading: state.questions.loading,
58 | });
59 |
60 | export default connect(mapStateToProps)(QuestionsList);
61 |
62 |
--------------------------------------------------------------------------------
/src/components/meetings/MeetingList.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Link } from 'react-router';
4 | import { connect } from 'react-redux';
5 | import { List, ListItem } from 'material-ui/List';
6 | import FloatingActionButton from 'material-ui/FloatingActionButton';
7 | import ContentAdd from 'material-ui/svg-icons/content/add';
8 |
9 | import MeetingItem from './MeetingItem';
10 |
11 | class MeetingList extends Component {
12 |
13 | renderMeetings() {
14 | const rows = [];
15 | if (this.props.meetings && this.props.meetings.size > 0) {
16 | this.props.meetings.forEach((meeting, key) => {
17 | rows.push(
18 |
50 |
51 | {this.renderMeetings()}
52 |
59 |
60 | );
61 | }
62 | }
63 |
64 | MeetingList.propTypes = {
65 | meetings: PropTypes.object.isRequired,
66 | };
67 |
68 | const mapStateToProps = (state) => {
69 | return {
70 | meetings: state.meetings.list,
71 | };
72 | };
73 |
74 | export default connect(mapStateToProps)(MeetingList);
75 |
--------------------------------------------------------------------------------
/src/components/Privacy.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Divider from 'material-ui/Divider';
3 |
4 | const Privacy = () => (
5 |
6 |
Privacy Policy
7 |
Last updated: March 24, 2017
8 |
9 |
10 |
11 |
12 | Your privacy is very important to us. Accordingly, we have developed this Policy in order
13 | for you to understand how we collect, use, communicate and disclose and make use of
14 | personal information. The following outlines our privacy policy.
15 |
16 |
17 |
18 |
19 | We will collect and use of personal information solely with the objective of bettering
20 | the user's experience or for other compatible purposes.
21 |
22 |
23 | We will only retain personal information as long as necessary for the fulfillment of
24 | those purposes.
25 |
26 |
27 | We will collect personal information by lawful and fair means and, where appropriate,
28 | with the knowledge or consent of the individual concerned.
29 |
30 |
31 | We will attempt to protect personal information by reasonable security safeguards
32 | against loss or theft, as well as unauthorized access, disclosure, copying, use or
33 | modification.
34 |
35 |
36 | We will make readily available to users information about our policies and
37 | practices relating to the management of personal information.
38 |
39 |
40 | We may use analytics software, including but not limited to, Google Analytics, etc.
41 | Such data collected will be used solely for the purpose of improving the user
42 | experience.
43 |
44 |
45 | We use local storage technologies, including Cookies, localStorage, etc. to enhance
46 | your experience.
47 |
48 |
49 |
39 |
43 |
* Indicates required field
44 |
60 |
64 |
66 |
70 |
72 |
73 | );
74 | }
75 |
76 | MeetingNavigationIcons.propTypes = propTypes;
77 |
78 | export default MeetingNavigationIcons;
79 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "one-on-one",
3 | "version": "0.7.2",
4 | "description": "A simple tracking app for one-on-one meetings",
5 | "private": true,
6 | "devDependencies": {
7 | "enzyme": "^2.9.1",
8 | "eslint": "^3.8.0",
9 | "eslint-config-airbnb": "^15.0.1",
10 | "eslint-plugin-import": "^2.2.0",
11 | "eslint-plugin-jsx-a11y": "^5.0.3",
12 | "eslint-plugin-react": "^7.0.1",
13 | "node-sass": "^4.5.1",
14 | "npm-run-all": "^4.0.2",
15 | "react-scripts": "1.0.16",
16 | "react-test-renderer": "^15.6.1",
17 | "redux-mock-store": "^1.2.3"
18 | },
19 | "dependencies": {
20 | "axios": "^0.16.2",
21 | "firebase": "^4.1.2",
22 | "group-array": "^0.3.3",
23 | "material-ui": "^0.18.3",
24 | "mout": "^1.0.0",
25 | "object-property-natural-sort": "^0.0.4",
26 | "prop-types": "^15.5.10",
27 | "re-reselect": "^0.6.3",
28 | "react": "^15.5.4",
29 | "react-color": "^2.13.1",
30 | "react-dom": "^15.5.4",
31 | "react-ga": "^2.1.2",
32 | "react-quill": "^1.1.0",
33 | "react-redux": "^5.0.1",
34 | "react-router": "^3.0.5",
35 | "react-router-redux": "^4.0.7",
36 | "react-tap-event-plugin": "^2.0.0",
37 | "react-transition-group": "1.x",
38 | "reactcss": "^1.2.2",
39 | "redux": "^3.6.0",
40 | "redux-form": "^6.4.1",
41 | "redux-form-material-ui": "^4.1.2",
42 | "redux-thunk": "^2.1.0",
43 | "reselect": "^3.0.1",
44 | "source-map-explorer": "^1.5.0",
45 | "store": "^2.0.12",
46 | "string": "^3.3.3",
47 | "tinycolor2": "^1.4.1",
48 | "unique-random": "^1.0.0",
49 | "validator": "^7.0.0"
50 | },
51 | "scripts": {
52 | "analyze": "source-map-explorer build/static/js/main.*",
53 | "build-css": "node-sass src/ -o src/",
54 | "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
55 | "start-js": "react-scripts start",
56 | "start": "npm-run-all -p watch-css start-js",
57 | "build": "npm run build-css && react-scripts build",
58 | "test": "react-scripts test --env=jsdom",
59 | "eject": "react-scripts eject"
60 | },
61 | "eslintConfig": {
62 | "extends": "react-app"
63 | },
64 | "author": "Vidal Graupera (http://www.vidalgraupera.com)",
65 | "license": "Apache 2.0"
66 | }
67 |
--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "directs": {
4 | ".indexOn": ["name"],
5 | "$uid": {
6 | ".read": "auth != null && auth.uid == $uid",
7 | ".write": "auth != null && auth.uid == $uid"
8 | }
9 | },
10 | "meetings": {
11 | ".indexOn": ["meetingDateReverse", "directKey"],
12 | "$uid": {
13 | ".read": "auth != null && auth.uid == $uid",
14 | ".write": "auth != null && auth.uid == $uid"
15 | }
16 | },
17 | "teams": {
18 | ".indexOn": ["name"],
19 | "$uid": {
20 | ".read": "auth != null && auth.uid == $uid",
21 | ".write": "auth != null && auth.uid == $uid"
22 | }
23 | },
24 | "followUps": {
25 | ".indexOn": ["meetingKey", "directKey"],
26 | "$uid": {
27 | ".read": "auth != null && auth.uid == $uid",
28 | ".write": "auth != null && auth.uid == $uid"
29 | }
30 | },
31 | "questions": {
32 | "$uid": {
33 | ".indexOn": ["question","externalID"],
34 | ".read": "auth != null && auth.uid == $uid",
35 | ".write": "auth != null && auth.uid == $uid"
36 | }
37 | },
38 | "categoriesQuestions": {
39 | "$uid": {
40 | ".indexOn": ["name"],
41 | ".read": "auth != null && auth.uid == $uid",
42 | ".write": "auth != null && auth.uid == $uid"
43 | }
44 | },
45 | "accounts": {
46 | "$uid": {
47 | ".read": "auth != null && auth.uid == $uid",
48 | ".write": "auth != null && auth.uid == $uid"
49 | }
50 | },
51 | "archived": {
52 | "directs": {
53 | ".indexOn": ["name"],
54 | "$uid": {
55 | ".read": "auth != null && auth.uid == $uid",
56 | ".write": "auth != null && auth.uid == $uid"
57 | }
58 | },
59 | "meetings": {
60 | ".indexOn": ["meetingDateReverse", "directKey"],
61 | "$uid": {
62 | ".read": "auth != null && auth.uid == $uid",
63 | ".write": "auth != null && auth.uid == $uid"
64 | }
65 | },
66 | "followUps": {
67 | ".indexOn": ["meetingKey", "directKey"],
68 | "$uid": {
69 | ".read": "auth != null && auth.uid == $uid",
70 | ".write": "auth != null && auth.uid == $uid"
71 | }
72 | }
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/selectors/archivedDirects.js:
--------------------------------------------------------------------------------
1 | import { createSelector } from 'reselect';
2 | import createCachedSelector from 're-reselect';
3 | import { getTeamsArray } from './teams';
4 | import { SORT_WITHOUT_TEAM_NAME } from '../constants/general';
5 |
6 | /**
7 | * @description Return directs from state
8 | * @param {Object} state app state
9 | */
10 | const getArchivedDirects = (state) => {
11 | if (!(state.archivedDirects.list instanceof Map)) {
12 | return [];
13 | }
14 | return state.archivedDirects.list;
15 | };
16 |
17 | const getTeams = state => getTeamsArray(state);
18 |
19 | /**
20 | * @description selector for directs array
21 | * @return {Array} array of direct objects
22 | */
23 | export const getArchivedArray = createSelector(getArchivedDirects, (directs) => {
24 | const arr = [];
25 | directs.forEach((direct, key) => {
26 | arr.push({ ...direct, ...{ id: key } });
27 | });
28 |
29 | return arr;
30 | });
31 |
32 | /**
33 | * @description selector for archived array count
34 | * @return {Number} number of array items
35 | */
36 | export const getArchivedArrayCount = createSelector(
37 | getArchivedArray,
38 | arr => arr.length,
39 | );
40 |
41 | /**
42 | * @description return array of archived directs with teamName
43 | * @return {Array}
44 | */
45 | export const getArchivedDirectsArrayWithTeam = createSelector(
46 | [getArchivedArray, getTeams],
47 | (directs, teams) => {
48 | return directs.map((direct) => {
49 | let teamName = SORT_WITHOUT_TEAM_NAME;
50 | if (direct.team) {
51 | const teamDirect = teams.find(team => team.id === direct.team);
52 | if (typeof teamDirect !== 'undefined') {
53 | teamName = teamDirect.name;
54 | }
55 | }
56 | return { ...direct, ...{ teamName } };
57 | });
58 | });
59 |
60 | export const getArchivedDirect = createCachedSelector(
61 | [getArchivedArray, getTeams, (state, id) => id],
62 | (directs, teams, id) => {
63 | const direct = directs.find(directSingle => directSingle.id === id);
64 | let teamName = '';
65 | if (direct.team) {
66 | const teamDirect = teams.find(team => team.id === direct.team);
67 | if (typeof teamDirect !== 'undefined') {
68 | teamName = teamDirect.name;
69 | }
70 | }
71 | return { ...direct, ...{ teamName } };
72 | },
73 | )((state, id) => id);
74 |
--------------------------------------------------------------------------------
/src/components/Features.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import meetingShowScreenshot from '../images/meeting-show.png';
3 | import meetingEditScreenshot from '../images/meeting-edit.png';
4 | import directsTeamScreenshot from '../images/directs-by-team.png';
5 | import followUpEditScreenshot from '../images/followUp-edit.png';
6 |
7 | const Features = () => {
8 | return (
9 |
10 |
Features
11 |
Things to make tracking 1 on 1s easier
12 |
13 |
14 |
19 |
24 |
25 |
26 |
Meetings
27 |
28 | Two sections for notes
29 | Includes sample questions you can ask
30 | Links to follow up items
31 |
32 |
33 |
34 |
35 |
36 |
Team members
37 |
38 | List of direct reports
39 | Categorize by color
40 | Group into teams
41 |
42 |
43 |
44 |
49 |
50 |
51 |
52 |
53 |
58 |
59 |
60 |
Follow Up Items
61 |
62 | Linked to directs and meetings
63 | Due dates
64 |
65 |
66 |
67 |
dashboard ;
23 | const meetingsIcon = chat ;
24 | const directsIcon = people ;
25 | const followUpsIcon = assignment ;
26 |
27 | const paths = [/^\/dashboard/i, /^\/directs/i, /^\/meetings/i, /^\/followUps/i];
28 | let selectedIndex = -1;
29 | for (let i = 0; i < paths.length; i += 1) {
30 | if (paths[i].test(window.location.pathname)) {
31 | selectedIndex = i;
32 | break;
33 | }
34 | }
35 |
36 | if (selectedIndex !== -1) {
37 | return (
38 |
39 |
40 | handleNavigate('/dashboard')}
44 | />
45 | handleNavigate('/directs')}
49 | />
50 | handleNavigate('/meetings')}
54 | />
55 | handleNavigate('/followUps')}
59 | />
60 |
61 |
62 | );
63 | }
64 | return ;
65 | }
66 |
67 | BottomNav.propTypes = propTypes;
68 |
69 | export default BottomNav;
70 |
71 |
--------------------------------------------------------------------------------
/src/HOCs/archive/__tests__/OnArchivedContainerHOC.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef,no-unused-vars,import/first */
2 | jest.mock('../../../selectors/routing');
3 | import React from 'react';
4 | import { Provider } from 'react-redux';
5 | import { shallow } from 'enzyme';
6 | import configMockStore from 'redux-mock-store';
7 | import { getIsArchived } from '../../../selectors/routing';
8 | import OnArchivedContainerHOC, { componentFactory, mapStateToProps } from '../OnArchivedContainerHOC';
9 |
10 |
11 | const TestComponent = () => Test component
;
12 |
13 | describe('OnArchivedContainerHOC', () => {
14 | describe('mapStateToProps', () => {
15 | getIsArchived.mockImplementationOnce(() => ({ isArchived: false }));
16 | const mapProps = mapStateToProps({});
17 |
18 | it('Should call selector getIsArchived ', () => {
19 | expect(getIsArchived.mock.calls.length).toBe(1);
20 | });
21 |
22 | it('Should provide isArchived prop', () => {
23 | expect(mapProps.isArchived).toBeDefined();
24 | });
25 | });
26 |
27 | describe('componentFactory', () => {
28 | let OnArchivedContainer;
29 |
30 | const dispatch = jest.fn();
31 |
32 | beforeEach(() => {
33 | OnArchivedContainer = componentFactory(TestComponent);
34 | });
35 |
36 | it('Should be instance of OnArchivedContainer', () => {
37 | const wrapper = shallow(
57 | );
59 |
60 | it('Should exists OnArchivedContainer', () => {
61 | expect(wrapper.find(OnArchivedContainer).exists()).toBeTruthy();
62 | });
63 | });
64 | });
65 |
66 |
--------------------------------------------------------------------------------
/src/components/teams/TeamsDropDownField.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Field } from 'redux-form';
3 | import Divider from 'material-ui/Divider';
4 | import { SelectField } from 'redux-form-material-ui';
5 | import MenuItem from 'material-ui/MenuItem';
6 | import PropTypes from 'prop-types';
7 |
8 | import TeamCrudDialogBoxContainer from './dialog/TeamCrudDialogBoxContainer';
9 |
10 | /**
11 | * @description propTypes for TeamsDropDownField
12 | * @type {{teams}}
13 | */
14 | const propTypes = {
15 | teams: PropTypes.arrayOf(
16 | PropTypes.shape({
17 | id: PropTypes.string.isRequired,
18 | name: PropTypes.string.isRequired,
19 | createdAt: PropTypes.string,
20 | updatedAt: PropTypes.string,
21 | }).isRequired,
22 | ).isRequired,
23 | };
24 |
25 | /**
26 | * @class TeamsDropDownField
27 | * @extends React.Component
28 | * @description Render component
29 | */
30 | class TeamsDropDownField extends Component {
31 |
32 | state = {
33 | openDialog: false,
34 | };
35 |
36 | handleOpenDialog = () => {
37 | this.setState({ openDialog: true });
38 | };
39 |
40 | handleCloseDialog = () => {
41 | this.setState({ openDialog: false });
42 | };
43 |
44 | render() {
45 | const { teams } = this.props;
46 | return (
47 |
48 |
56 |
76 |
80 |
43 | );
48 | };
49 |
50 | /**
51 | * @description render
52 | * @return {Object} JSX HTML Content
53 | */
54 | render() {
55 | const isEmpty = this.props.categoriesQuestions.length === 0;
56 | const { loadingQuestions } = this.props;
57 | return (isEmpty || loadingQuestions) ? null : this.renderSelectField();
58 | }
59 | }
60 |
61 | CategoriesQuestions.propTypes = propTypes;
62 |
63 | const mapStateToProps = state => ({
64 | categoriesQuestions: getCategoriesQuestionsArray(state),
65 | filterByCategory: state.questions.filterByCategory,
66 | loadingQuestions: state.questions.loading,
67 | });
68 |
69 | const mapDispatchToProp = dispatch => ({
70 | setQuestionFilter: (categoryID) => {
71 | dispatch(setCategoryFilter(categoryID));
72 | },
73 | });
74 |
75 | export default connect(mapStateToProps, mapDispatchToProp)(CategoriesQuestions);
76 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 1 on 1 Tracker
2 |
3 |
73 |
88 | );
89 | }
90 | }
91 |
92 | RichTextEditor.propTypes = propTypes;
93 |
94 | export default RichTextEditor;
95 |
--------------------------------------------------------------------------------
/src/components/LeftDrawer.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import Drawer from 'material-ui/Drawer';
5 | import MenuItem from 'material-ui/MenuItem';
6 | import Divider from 'material-ui/Divider';
7 |
8 | import Auth from './Auth';
9 | import { isAuthenticated, rootPath } from '../actions/auth';
10 | import QuestionMenuItem from './drawer/QuestionMenuItem';
11 | import TeamMenuItem from './drawer/TeamMenuItem';
12 |
13 | class LeftDrawer extends Component {
14 | render() {
15 | let signedInItems;
16 | if (isAuthenticated(this.props)) {
17 | signedInItems = (
18 |
19 |
{
22 | this.props.handleNavigate('/account');
23 | }}
24 | />
25 |
26 |
28 |
41 | {
43 | this.props.handleNavigate(rootPath(isAuthenticated(this.props)));
44 | }}
45 | >
46 | 1on1 Tracker
47 |
48 | {signedInItems}
49 | this.props.handleNavigate('/terms')}
52 | primaryText="Terms and Conditions"
53 | />
54 | this.props.handleNavigate('/privacy')}
56 | primaryText="Privacy Policy"
57 | />
58 | this.props.handleNavigate('/about')}
61 | primaryText="About 1on1tracker"
62 | />
63 | this.props.handleNavigate('/about-me')}
65 | primaryText="About me"
66 | />
67 |
68 | );
69 | }
70 | }
71 |
72 | LeftDrawer.propTypes = {
73 | handleNavigate: PropTypes.func.isRequired,
74 | open: PropTypes.bool,
75 | };
76 |
77 | LeftDrawer.defaultProps = {
78 | open: false,
79 | };
80 |
81 | const mapStateToProps = (state) => {
82 | return {
83 | auth: state.auth,
84 | };
85 | };
86 |
87 | export default connect(mapStateToProps)(LeftDrawer);
88 |
--------------------------------------------------------------------------------
/src/components/directs/single/tabs/meetings/DirectMeetingList.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Link } from 'react-router';
4 | import { connect } from 'react-redux';
5 | import { List, ListItem } from 'material-ui/List';
6 |
7 | import { getIsArchived } from '../../../../../selectors/routing';
8 | import InnerHtmlStripTags from '../../../../common/InnerHtmlStripTags';
9 |
10 |
11 | class DirectMeetingList extends Component {
12 |
13 | constructor() {
14 | super();
15 | this.state = { selectedMeetings: null };
16 | }
17 |
18 | componentDidMount() {
19 | this.onMount();
20 | }
21 |
22 | onMount() {
23 | const selectedMeetings = new Map([...this.props.meetings]
24 | .filter(([key, value]) =>
25 | value.directKey === this.props.directId));
26 | this.setState({ selectedMeetings });
27 | }
28 |
29 | renderMeetings() {
30 | const rows = [];
31 | if (this.props.meetings &&
32 | this.state.selectedMeetings &&
33 | this.state.selectedMeetings.size > 0) {
34 | this.state.selectedMeetings.forEach((meeting, key) => {
35 | const notesString = meeting.directsNotes ? meeting.directsNotes : meeting.managersNotes;
36 | rows.push(
37 |
42 |
62 |
63 | {this.renderMeetings()}
64 |
65 |
66 | );
67 | }
68 | }
69 |
70 | DirectMeetingList.propTypes = {
71 | directId: PropTypes.string.isRequired,
72 | meetings: PropTypes.object.isRequired,
73 | isArchived: PropTypes.bool.isRequired,
74 | };
75 |
76 | const mapStateToProps = (state) => {
77 | let meetings = 'meetings';
78 | const isArchived = getIsArchived(state);
79 | if (isArchived) {
80 | meetings = 'archivedMeetings';
81 | }
82 | return {
83 | meetings: state[meetings].list,
84 | isArchived,
85 | };
86 | };
87 |
88 | export default connect(mapStateToProps)(DirectMeetingList);
89 |
--------------------------------------------------------------------------------
/src/components/directs/single/head-info/UnarchiveBtn.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { browserHistory } from 'react-router';
4 | import { CardActions } from 'material-ui/Card';
5 | import RaisedButton from 'material-ui/RaisedButton';
6 | import { white , teal400 } from 'material-ui/styles/colors';
7 | import PropTypes from 'prop-types';
8 |
9 | import directAction, { archivedDirects as archivedDirectsAction } from '../../../../actions/directs';
10 | import followUpActions, { archivedFollowUps as archivedFollowUpsAction } from '../../../../actions/followUps';
11 | import meetingActions, { archivedMeetings as archivedMeetingsAction } from '../../../../actions/meetings';
12 | import ShowOnArchivedHOC from '../../../../HOCs/archive/ShowOnArchivedHOC';
13 | import { ARCHIVED_URL_SUFFIX } from '../../../../constants/general';
14 |
15 | /**
16 | * @description propTypes for UnarchiveBtn
17 | * @type {Object}
18 | */
19 | const propTypes = {
20 | id: PropTypes.string.isRequired,
21 | onMoveTo: PropTypes.func.isRequired,
22 | meetingsMoveEqualTo: PropTypes.func.isRequired,
23 | followUpsMoveEqualTo: PropTypes.func.isRequired,
24 | };
25 |
26 | /**
27 | * @class UnarchiveBtn
28 | * @extends React.Component
29 | * @description Render component
30 | */
31 | class UnarchiveBtn extends Component {
32 |
33 | onUnArchived = (event) => {
34 | event.preventDefault();
35 | if (window.confirm('Unarchive the direct?')) {
36 | const { id } = this.props;
37 | this.props.onMoveTo(id, directAction)
38 | .then(() => {
39 | this.props.meetingsMoveEqualTo('directKey', id, meetingActions);
40 | this.props.followUpsMoveEqualTo('directKey', id, followUpActions);
41 | });
42 | browserHistory.push({
43 | pathname: `/directs/${ARCHIVED_URL_SUFFIX}`,
44 | state: { isArchived: true },
45 | });
46 | }
47 | };
48 |
49 | /**
50 | * @description render
51 | * @return {Object} JSX HTML Content
52 | */
53 | render() {
54 | return (
55 |
56 |
63 | );
64 | }
65 | }
66 |
67 | UnarchiveBtn.propTypes = propTypes;
68 |
69 | const mapDispatchToProps = {
70 | onMoveTo: archivedDirectsAction.moveTo,
71 | followUpsMoveEqualTo: archivedFollowUpsAction.moveEqualTo,
72 | meetingsMoveEqualTo: archivedMeetingsAction.moveEqualTo,
73 | };
74 |
75 | export default ShowOnArchivedHOC(connect(null, mapDispatchToProps)(UnarchiveBtn));
76 |
--------------------------------------------------------------------------------
/src/components/followUps/FollowUpList.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Link } from 'react-router';
4 | import { connect } from 'react-redux';
5 | import {
6 | List,
7 | ListItem,
8 | } from 'material-ui/List';
9 | import Divider from 'material-ui/Divider';
10 | import FloatingActionButton from 'material-ui/FloatingActionButton';
11 | import ContentAdd from 'material-ui/svg-icons/content/add';
12 |
13 | import FollowUpItem from './FollowUpItem';
14 |
15 | class FollowUpList extends Component {
16 | constructor() {
17 | super();
18 | this.toggleCompleted = this.toggleCompleted.bind(this);
19 | this.state = {
20 | showCompleted: false,
21 | };
22 | }
23 |
24 | toggleCompleted() {
25 | this.setState({ showCompleted: !this.state.showCompleted });
26 | }
27 |
28 | renderFollowUps() {
29 | const rows = [];
30 | rows.push(
31 |
78 |
79 | {this.renderFollowUps()}
80 |
87 |
88 | );
89 | }
90 | }
91 |
92 | FollowUpList.propTypes = {
93 | followUps: PropTypes.object,
94 | };
95 |
96 | const mapStateToProps = (state) => {
97 | return {
98 | followUps: state.followUps.list,
99 | };
100 | };
101 |
102 | export default connect(mapStateToProps)(FollowUpList);
103 |
--------------------------------------------------------------------------------
/src/components/followUps/FollowUpItem.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { ListItem } from 'material-ui/List';
5 | import Checkbox from 'material-ui/Checkbox';
6 | import { browserHistory } from 'react-router';
7 |
8 | import followUpActions from '../../actions/followUps';
9 | import { getDirectsArray } from '../../selectors/direct';
10 | import { getIsArchived } from '../../selectors/routing';
11 |
12 | class FollowUpItem extends Component {
13 | static summary(followUp) {
14 | const dateString = new Date(followUp.followUpDate).toLocaleDateString();
15 | const notesString = followUp.description;
16 | return `${dateString} : ${notesString || 'TBD'}`;
17 | }
18 |
19 | constructor() {
20 | super();
21 | this.onClick = this.onClick.bind(this);
22 | }
23 |
24 | onClick() {
25 | browserHistory.push(`/followUps/${this.props.id}`);
26 | }
27 |
28 | handleCheck = (event, isInputChecked) => {
29 | const { id, followUp } = this.props;
30 | followUp.completed = !followUp.completed;
31 | this.props.update(id, followUp);
32 | }
33 |
34 | render() {
35 | const { directs, followUp, isArchived } = this.props;
36 |
37 | if (directs && followUp) {
38 | const direct = directs.find(directSingle => directSingle.id === followUp.directKey);
39 | return ( {
45 | event.stopPropagation();
46 | this.handleCheck(event, isInputChecked);
47 | }}
48 | />
49 | }
50 | primaryText={this.props.primaryText || ((direct && typeof direct.name !== 'undefined') ? direct.name : '???')}
51 | secondaryText={this.props.secondaryText || FollowUpItem.summary(followUp)}
52 | onClick={isArchived ? null : this.onClick}
53 | style={isArchived ? {cursor:'default'} : {}}
54 | />
55 | );
56 | }
57 |
58 | return null;
59 | }
60 | }
61 |
62 | FollowUpItem.contextTypes = {
63 | router: PropTypes.object,
64 | };
65 |
66 | FollowUpItem.propTypes = {
67 | directs: PropTypes.array.isRequired,
68 | followUp: PropTypes.object.isRequired,
69 | id: PropTypes.string.isRequired,
70 | primaryText: PropTypes.string,
71 | secondaryText: PropTypes.string,
72 | isArchived: PropTypes.bool.isRequired,
73 | };
74 |
75 | const mapStateToProps = (state) => {
76 | return {
77 | directs: getDirectsArray(state),
78 | isArchived: getIsArchived(state),
79 | };
80 | };
81 |
82 |
83 | const mapDispatchToProps = (dispatch) => {
84 | return {
85 | update: (key, value) => {
86 | dispatch(followUpActions.update(key, value));
87 | },
88 | };
89 | };
90 |
91 | export default connect(
92 | mapStateToProps,
93 | mapDispatchToProps,
94 | )(FollowUpItem);
95 |
--------------------------------------------------------------------------------
/src/components/followUps/FollowUpForm.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Field, reduxForm } from 'redux-form';
4 | import {
5 | DatePicker,
6 | TextField,
7 | SelectField,
8 | Checkbox,
9 | } from 'redux-form-material-ui';
10 | import RaisedButton from 'material-ui/RaisedButton';
11 | import MenuItem from 'material-ui/MenuItem';
12 |
13 | export const validate = (values) => {
14 | const errors = {};
15 | const requiredFields = ['directKey', 'followUpDate'];
16 | requiredFields.forEach((field) => {
17 | if (!values[field]) {
18 | errors[field] = 'Required';
19 | }
20 | });
21 | return errors;
22 | };
23 |
24 | class FollowUpForm extends Component {
25 | static formatDate(date) {
26 | return date.toLocaleDateString();
27 | }
28 |
29 | renderDirects() {
30 | const rows = [];
31 |
32 | this.props.directs.forEach((direct, key) => {
33 | rows.push(
19 |
20 |
Designed to help with your 1 on 1s and for use on your smartphone.
21 |
22 |
28 |
29 | VIDEO
35 |
36 |
37 |
38 |
39 |
40 | No more taking notes on paper that can get lost.
41 | Link follow up actions to people and meetings.
42 | Group your people into teams
43 | Includes a library of 300 suggested questions.
44 | Designed for easy note taking and follow up on your phone
45 | while you are away from your desk or computer.
46 |
47 |
48 |
54 |
55 |
56 |
57 |
58 |
Dashboard
59 |
64 |
See recent meetings and pending follow up items at a glance
65 |
66 |
67 |
68 |
69 |
70 | Create a free account using Google
71 |
72 |
77 |
78 |
}
41 | */
42 | const arraySort = (arr, sortByValue) => {
43 | return sort(arr, objNaturalSort(sortByValue));
44 | };
45 |
46 | function putEmptyTeamToEnd(arr, sortByValue) {
47 | return sort(arr, (a, b) => {
48 | if (a[sortByValue] === SORT_WITHOUT_TEAM_NAME) {
49 | return 1;
50 | }
51 | if (b[sortByValue] === SORT_WITHOUT_TEAM_NAME) {
52 | return -1;
53 | }
54 | return 0;
55 | });
56 | }
57 |
58 | function groupByTeam(arr, sortByValue) {
59 | return groupArray(arr, sortByValue);
60 | }
61 |
62 | /**
63 | * @description return sorted array of directs with teamName
64 | * @return {Array}
65 | */
66 | export const getDirectsArrayWithTeam = createSelector(
67 | [getDirectsArray, getTeams, sortBy],
68 | (directs, teams, sortByValue) => {
69 | const arr = directs.map((direct) => {
70 | let teamName = SORT_WITHOUT_TEAM_NAME;
71 | if (direct.team) {
72 | const teamDirect = teams.find(team => team.id === direct.team);
73 | if (typeof teamDirect !== 'undefined') {
74 | teamName = teamDirect.name;
75 | }
76 | }
77 | return { ...direct, ...{ teamName } };
78 | });
79 |
80 | let directsArray = arraySort(arr, sortByValue);
81 |
82 | if (sortByValue === SORT_BY_TEAM_NAME) {
83 | directsArray = putEmptyTeamToEnd(directsArray, sortByValue);
84 | return groupByTeam(directsArray, sortByValue);
85 | }
86 |
87 | return directsArray;
88 | });
89 |
90 | export const getDirect = createCachedSelector(
91 | [getDirectsArray, getTeams, (state, id) => id],
92 | (directs, teams, id) => {
93 | const direct = directs.find(directSingle => directSingle.id === id);
94 | let teamName = '';
95 | if (direct.team) {
96 | const teamDirect = teams.find(team => team.id === direct.team);
97 | if (typeof teamDirect !== 'undefined') {
98 | teamName = teamDirect.name;
99 | }
100 | }
101 | return { ...direct, ...{ teamName } };
102 | },
103 | )((state, id) => id);
104 |
--------------------------------------------------------------------------------
/src/components/meetings/MeetingForm.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Field, reduxForm } from 'redux-form';
4 | import {
5 | DatePicker,
6 | SelectField,
7 | } from 'redux-form-material-ui';
8 | import RaisedButton from 'material-ui/RaisedButton';
9 | import MenuItem from 'material-ui/MenuItem';
10 |
11 | import RichTextEditor from '../common/RichTextEditor';
12 | import MeetingQuestionsContainer from './questions/MeetingQuestionsContainer';
13 |
14 | export const validate = (values) => {
15 | const errors = {};
16 | const requiredFields = ['directKey', 'meetingDate'];
17 | requiredFields.forEach((field) => {
18 | if (!values[field]) {
19 | errors[field] = 'Required';
20 | }
21 | });
22 | return errors;
23 | };
24 |
25 | class MeetingForm extends Component {
26 | static formatDate(date) {
27 | return date.toLocaleDateString();
28 | }
29 |
30 | renderDirects() {
31 | const rows = [];
32 |
33 | this.props.directs.forEach((direct, key) => {
34 | rows.push(
62 |
76 | );
77 | }
78 | }
79 |
80 | MeetingEdit.propTypes = {
81 | update: PropTypes.func.isRequired,
82 | remove: PropTypes.func.isRequired,
83 | params: PropTypes.object.isRequired,
84 | route: PropTypes.object.isRequired,
85 | dirty: PropTypes.bool.isRequired,
86 | submitted: PropTypes.bool.isRequired,
87 | router: PropTypes.shape({
88 | setRouteLeaveHook: PropTypes.func,
89 | }).isRequired,
90 | };
91 |
92 | const mapStateToProps = (state) => {
93 | const meeting = state.meetings.activeMeeting;
94 | const initialValues = {
95 | ...meeting,
96 | meetingDate: meeting.meetingDate ? new Date(meeting.meetingDate) : null,
97 | };
98 | return {
99 | initialValues,
100 | formType: 'edit',
101 | dirty: isDirty('meeting')(state),
102 | submitted: hasSubmitSucceeded('meeting')(state),
103 | error: state.meetings.error,
104 | directs: state.directs.list,
105 | };
106 | };
107 |
108 | const mapDispatchToProps = {
109 | update: meetingActions.update,
110 | remove: meetingActions.remove,
111 | };
112 |
113 | export default connect(mapStateToProps, mapDispatchToProps)(withRouter(MeetingEdit));
114 |
--------------------------------------------------------------------------------
/src/components/followUps/FollowUpEdit.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { isDirty, hasSubmitSucceeded } from 'redux-form';
4 | import { connect } from 'react-redux';
5 | import RaisedButton from 'material-ui/RaisedButton';
6 | import { withRouter, browserHistory } from 'react-router';
7 | import FollowUpForm from './FollowUpForm';
8 |
9 | import followUpActions from '../../actions/followUps';
10 |
11 | class FollowUpEdit extends Component {
12 | constructor() {
13 | super();
14 | this.onDelete = this.onDelete.bind(this);
15 | this.onSubmit = this.onSubmit.bind(this);
16 | this.warnIfUnsavedChanges = this.warnIfUnsavedChanges.bind(this);
17 | }
18 |
19 | componentDidMount() {
20 | this.props.router.setRouteLeaveHook(
21 | this.props.route,
22 | this.warnIfUnsavedChanges,
23 | );
24 | window.onbeforeunload = () => this.warnIfUnsavedChanges();
25 | }
26 |
27 | componentDidUpdate(prevProps) {
28 | if (this.props.route.path !== prevProps.route.path) {
29 | this.props.router.setRouteLeaveHook(
30 | this.props.route,
31 | this.warnIfUnsavedChanges,
32 | );
33 | }
34 | }
35 |
36 | onDelete(event) {
37 | event.preventDefault(); // Fix double touchtap bug
38 | browserHistory.push('/followUps');
39 | this.props.remove(this.props.params.id).then(() => {
40 | });
41 | }
42 |
43 | onSubmit(followUp) {
44 | if (followUp.followUpDate instanceof Date) {
45 | followUp.followUpDateReverse = 0 - followUp.followUpDate;
46 | followUp.followUpDate = followUp.followUpDate.toISOString();
47 | }
48 |
49 | this.props.update(this.props.params.id, followUp).then(() => {
50 | browserHistory.goBack();
51 | });
52 | }
53 |
54 | warnIfUnsavedChanges(nextLocation) {
55 | if (this.props.dirty && !this.props.submitted) {
56 | return 'Are you sure you want to leave this page? You have unsaved changes.';
57 | }
58 | }
59 |
60 | render() {
61 | return (
62 |
63 |
77 | );
78 | }
79 | }
80 |
81 | FollowUpEdit.propTypes = {
82 | update: PropTypes.func.isRequired,
83 | remove: PropTypes.func.isRequired,
84 | params: PropTypes.object.isRequired,
85 | route: PropTypes.object.isRequired,
86 | dirty: PropTypes.bool.isRequired,
87 | submitted: PropTypes.bool.isRequired,
88 | router: PropTypes.shape({
89 | setRouteLeaveHook: PropTypes.func,
90 | }).isRequired,
91 | };
92 |
93 | const mapStateToProps = (state) => {
94 | const followUp = state.followUps.activeFollowUp;
95 | const initialValues = {
96 | ...followUp,
97 | followUpDate: new Date(followUp.followUpDate),
98 | };
99 | return {
100 | initialValues,
101 | formType: 'edit',
102 | dirty: isDirty('followUp')(state),
103 | submitted: hasSubmitSucceeded('followUp')(state),
104 | error: state.followUps.error,
105 | directs: state.directs.list,
106 | };
107 | };
108 |
109 | const mapDispatchToProps = {
110 | update: followUpActions.update,
111 | remove: followUpActions.remove,
112 | };
113 |
114 | export default connect(mapStateToProps, mapDispatchToProps)(withRouter(FollowUpEdit));
115 |
--------------------------------------------------------------------------------
/src/components/common/crud-dialog-box/CrudDialogBox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Dialog from 'material-ui/Dialog';
3 | import PropTypes from 'prop-types';
4 |
5 | import AddItemBtn from './AddItemBtn';
6 |
7 | const propTypes = {
8 | title: PropTypes.string.isRequired,
9 | openDialog: PropTypes.bool.isRequired,
10 | handleCloseDialog: PropTypes.func.isRequired,
11 | ListComponent: PropTypes.func.isRequired,
12 | onDeleteItem: PropTypes.func.isRequired,
13 | FormComponent: PropTypes.func.isRequired,
14 | submitForm: PropTypes.func.isRequired,
15 | };
16 |
17 | /**
18 | * @class CrudDialogBox
19 | * @extends React.Component
20 | * @description Render component
21 | */
22 | class CrudDialogBox extends Component {
23 |
24 | state = {
25 | showForm: false,
26 | clickedItem: null,
27 | };
28 |
29 | setDialogPropsForList = () => {
30 | return {
31 | title: `${this.props.title}s`,
32 | actions:
122 | {!showForm && list}
123 | {showForm && form}
124 |
125 | );
126 | }
127 | }
128 |
129 | CrudDialogBox.propTypes = propTypes;
130 |
131 | export default CrudDialogBox;
132 |
--------------------------------------------------------------------------------
/src/actions/auth.js:
--------------------------------------------------------------------------------
1 | import * as firebase from 'firebase';
2 | import { push } from 'react-router-redux';
3 | import { browserHistory } from 'react-router';
4 | import locStore from 'store';
5 |
6 | import { firebaseAuth, firebaseDb } from '../firebase/firebase';
7 | import * as types from './types';
8 | import { LOCAL_STORAGE_AUTH_STATE_KEY } from '../constants/general';
9 |
10 | import directActions, { archivedDirects as archivedDirectsAction } from './directs';
11 | import meetingActions, { archivedMeetings as archivedMeetingsAction } from './meetings';
12 | import followUpActions, { archivedFollowUps as archivedFollowUpsAction } from './followUps';
13 | import teamsActions from './teams';
14 | import questions from './questions';
15 | import categoriesQuestions from './categoriesQuestions';
16 |
17 | const recordLogin = (accountData) => {
18 | firebaseDb.ref('accounts').child(accountData.uid).set(accountData)
19 | .catch((error) => {
20 | console.log(error);
21 | });
22 | };
23 |
24 | export function isAuthenticated(state) {
25 | return state.auth.status === types.AUTH_LOGGED_IN;
26 | }
27 |
28 | export function rootPath(authenticated) {
29 | return authenticated ? '/dashboard' : '/';
30 | }
31 |
32 | export const listenToAuth = () => {
33 | return (dispatch, getState) => {
34 | firebaseAuth.onAuthStateChanged((authData) => {
35 | if (authData) {
36 | dispatch({
37 | ...authData.toJSON(),
38 | type: types.AUTH_LOGIN,
39 | });
40 |
41 | // reload on auth update.
42 | directActions.subscribe(dispatch, getState);
43 | archivedDirectsAction.subscribe(dispatch,getState);
44 | meetingActions.subscribe(dispatch, getState);
45 | archivedMeetingsAction.subscribe(dispatch, getState);
46 | followUpActions.subscribe(dispatch, getState);
47 | archivedFollowUpsAction.subscribe(dispatch, getState);
48 | teamsActions.subscribe(dispatch, getState);
49 | questions.subscribe(dispatch, getState);
50 | categoriesQuestions.subscribe(dispatch,getState);
51 | browserHistory.push(rootPath(true));
52 |
53 | recordLogin({
54 | ...authData.toJSON(),
55 | lastLogin: new Date().toISOString(),
56 | });
57 | } else if (getState().auth.status !== types.AUTH_ANONYMOUS) {
58 | dispatch({ type: types.AUTH_LOGOUT });
59 | }
60 | locStore.remove(LOCAL_STORAGE_AUTH_STATE_KEY);
61 | });
62 | };
63 | };
64 |
65 | export const openAuth = () => {
66 | return (dispatch) => {
67 | const provider = new firebase.auth.GoogleAuthProvider();
68 | firebaseAuth.signInWithRedirect(provider);
69 | firebaseAuth.getRedirectResult().then(()=>{
70 | dispatch({ type: types.AUTH_OPEN });
71 | locStore.set(LOCAL_STORAGE_AUTH_STATE_KEY,types.AUTH_AWAITING_RESPONSE);
72 | }).catch((error) => {
73 | const errorMessage = error.message;
74 | console.log(errorMessage);
75 | alert(errorMessage);
76 | dispatch({
77 | type: types.AUTH_ERROR,
78 | error: `Login failed! ${errorMessage}`,
79 | });
80 | dispatch({ type: types.AUTH_LOGOUT });
81 | });
82 | };
83 | };
84 |
85 | export const logoutUser = () => {
86 | return (dispatch, getState) => {
87 | directActions.unsubscribe(dispatch, getState);
88 | firebaseAuth.signOut().then(() => {
89 | dispatch({ type: types.AUTH_LOGOUT });
90 | dispatch(push(rootPath(false)));
91 | });
92 | };
93 | };
94 |
95 | export function requireAuth(nextState, replace) {
96 | return (dispatch, getState) => {
97 | if (!isAuthenticated(getState())) {
98 | replace({
99 | pathname: rootPath(false),
100 | state: { nextPathname: nextState.location.pathname },
101 | });
102 | }
103 | };
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/directs/form/DirectEdit.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { reduxForm } from 'redux-form';
4 | import { connect } from 'react-redux';
5 | import { browserHistory } from 'react-router';
6 | import RaisedButton from 'material-ui/RaisedButton';
7 | import { teal400, white } from 'material-ui/styles/colors';
8 |
9 | import DirectForm, { validate } from './DirectForm';
10 | import directActions, { archivedDirects } from '../../../actions/directs';
11 | import followUpActions, { archivedFollowUps } from '../../../actions/followUps';
12 | import meetingActions, { archivedMeetings } from '../../../actions/meetings';
13 | import { getTeamsArray } from '../../../selectors/teams';
14 |
15 | class DirectEdit extends Component {
16 | constructor() {
17 | super();
18 | this.onDelete = this.onDelete.bind(this);
19 | this.onSubmit = this.onSubmit.bind(this);
20 | }
21 |
22 | onDelete(event) {
23 | event.preventDefault(); // Fix double touchtap bug
24 | if (window.confirm('Delete the direct?')) {
25 | browserHistory.push('/directs');
26 | this.props.remove(this.props.params.id).then(() => {
27 | this.props.followUpsRemoveEqualTo('directKey', this.props.params.id);
28 | this.props.meetingsRemoveEqualTo('directKey', this.props.params.id);
29 | });
30 | }
31 | }
32 |
33 | onSubmit(direct) {
34 | this.props.update(this.props.params.id, direct).then(() => {
35 | browserHistory.push('/directs');
36 | });
37 | }
38 |
39 | onArchived = () => {
40 | if (window.confirm('Archive the direct?')) {
41 | this.props.onMoveTo(this.props.params.id, archivedDirects)
42 | .then(() => {
43 | this.props.meetingsMoveEqualTo('directKey', this.props.params.id, archivedMeetings);
44 | this.props.followUpsMoveEqualTo('directKey', this.props.params.id, archivedFollowUps);
45 | });
46 | browserHistory.push('/directs');
47 | }
48 | }
49 |
50 | render() {
51 | return (
52 |
53 |
77 | );
78 | }
79 | }
80 |
81 | DirectEdit.propTypes = {
82 | update: PropTypes.func.isRequired,
83 | remove: PropTypes.func.isRequired,
84 | params: PropTypes.object.isRequired,
85 | };
86 |
87 | const mapStateToProps = (state) => {
88 | const direct = state.directs.activeDirect;
89 | const initialValues = { ...direct,
90 | startDate: direct.startDate ? new Date(direct.startDate) : null,
91 | };
92 | return {
93 | initialValues,
94 | formType: 'edit',
95 | error: state.directs.error,
96 | teams: getTeamsArray(state),
97 | };
98 | };
99 |
100 | const mapDispatchToProps = {
101 | update: directActions.update,
102 | remove: directActions.remove,
103 | followUpsRemoveEqualTo: followUpActions.removeEqualTo,
104 | meetingsRemoveEqualTo: meetingActions.removeEqualTo,
105 | onMoveTo: directActions.moveTo,
106 | followUpsMoveEqualTo: followUpActions.moveEqualTo,
107 | meetingsMoveEqualTo: meetingActions.moveEqualTo,
108 | };
109 |
110 | export default connect(
111 | mapStateToProps,
112 | mapDispatchToProps,
113 | )(reduxForm({ form: 'direct', validate })(DirectEdit));
114 |
--------------------------------------------------------------------------------
/src/components/directs/form/DirectForm.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Field } from 'redux-form';
4 | import {
5 | DatePicker,
6 | TextField,
7 | } from 'redux-form-material-ui';
8 | import RaisedButton from 'material-ui/RaisedButton';
9 | import isMobilePhone from 'validator/lib/isMobilePhone';
10 |
11 | import TeamsDropDownField from '../../teams/TeamsDropDownField';
12 | import DirectColorPicker from './DirectColorPicker';
13 |
14 | const isValidPhone = (phone) => {
15 | return isMobilePhone(phone.replace(/-/g, ''), 'en-US');
16 | };
17 |
18 | export const validate = (values) => {
19 | const errors = {};
20 | const requiredFields = ['name'];
21 | requiredFields.forEach((field) => {
22 | if (!values[field]) {
23 | errors[field] = 'Required';
24 | }
25 | });
26 | const {phone} = values;
27 | if (phone && !isValidPhone(phone)) {
28 | errors.phone = 'Invalid phone number.';
29 | }
30 | return errors;
31 | };
32 |
33 | export default class DirectForm extends Component {
34 | constructor() {
35 | super();
36 | this.onSubmit = this.onSubmit.bind(this);
37 | }
38 |
39 | componentDidMount() {
40 | this.refs.name // the Field
41 | .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
42 | .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
43 | .focus(); // on TextField
44 | }
45 |
46 | onSubmit(direct) {
47 | this.props.onSubmit(direct);
48 | }
49 |
50 | formatDate(date) {
51 | return date.toLocaleDateString();
52 | }
53 |
54 | render() {
55 | const {formType, handleSubmit, pristine, submitting, teams} = this.props;
56 | const submitText = formType === 'edit' ? 'Update' : 'Create';
57 | return (
58 |
116 | );
117 | }
118 | }
119 |
120 | DirectForm.propTypes = {
121 | formType: PropTypes.oneOf(['create', 'edit']),
122 | handleSubmit: PropTypes.func,
123 | onSubmit: PropTypes.func,
124 | };
125 |
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, IndexRoute } from 'react-router';
3 |
4 | import { requireAuth } from './actions/auth';
5 |
6 | import App from './components/App';
7 | import MeetingShow from './components/meetings/MeetingShow';
8 | import MeetingList from './components/meetings/MeetingList';
9 | import MeetingNew from './components/meetings/MeetingNew';
10 | import MeetingEdit from './components/meetings/MeetingEdit';
11 | import DirectShow from './components/directs/single/DirectShow';
12 | import DirectHome from './components/directs/DirectHome';
13 | import DirectNew from './components/directs/form/DirectNew';
14 | import DirectEdit from './components/directs/form/DirectEdit';
15 | import FollowUpShow from './components/followUps/FollowUpShow';
16 | import FollowUpList from './components/followUps/FollowUpList';
17 | import FollowUpNew from './components/followUps/FollowUpNew';
18 | import FollowUpEdit from './components/followUps/FollowUpEdit';
19 |
20 |
21 | import Home from './components/Home';
22 | import Dashboard from './components/Dashboard';
23 | import About from './components/About';
24 | import AboutMe from './components/AboutMe';
25 | import Features from './components/Features';
26 | import Account from './components/Account';
27 | import Terms from './components/Terms';
28 | import Privacy from './components/Privacy';
29 |
30 | import NotFound from './components/404';
31 |
32 | import SetTextHOC from './HOCs/SetTextHOC';
33 | import { ARCHIVED_URL_SUFFIX } from './constants/general';
34 |
35 | export default function Routes(store) {
36 | const checkAuth = (nextState, replace) => {
37 | store.dispatch(requireAuth(nextState, replace));
38 | };
39 |
40 | return (
41 |
42 |
51 |
61 |
62 |
67 |
68 |
73 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/Dashboard.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { Link } from 'react-router';
4 | import Subheader from 'material-ui/Subheader';
5 | import {
6 | List,
7 | ListItem,
8 | } from 'material-ui/List';
9 | import FloatingActionButton from 'material-ui/FloatingActionButton';
10 | import MeetingIcon from 'material-ui/svg-icons/action/speaker-notes';
11 | import FollowUpIcon from 'material-ui/svg-icons/action/assignment';
12 | import DirectIcon from 'material-ui/svg-icons/social/person-add';
13 | import { lightBlue500, cyan500 } from 'material-ui/styles/colors';
14 |
15 | import MeetingItem from './meetings/MeetingItem';
16 | import FollowUpItem from './followUps/FollowUpItem';
17 | import ShowLoaderHOC from '../HOCs/ShowLoaderHOC';
18 |
19 | export class Dashboard extends Component {
20 |
21 | renderMeetings() {
22 | const rows = [];
23 | if (this.props.meetings && this.props.meetings.size > 0) {
24 | this.props.meetings.forEach((meeting, key) => {
25 | rows.push(
26 |
102 |
103 | Recent Meetings
104 | {this.renderMeetings()}
105 |
106 |
107 | Pending Follow Ups
108 | {this.renderFollowUps()}
109 |
110 |
131 | );
132 | }
133 | }
134 |
135 | const mapStateToProps = (state) => {
136 | return {
137 | followUps: state.followUps.list,
138 | meetings: state.meetings.list,
139 | loadingData: (state.meetings.loading || state.followUps.loading),
140 | };
141 | };
142 |
143 | export default connect(mapStateToProps)(
144 | ShowLoaderHOC('loadingData', true)(Dashboard),
145 | );
146 |
--------------------------------------------------------------------------------
4 |
5 | One-on-one tracking app for managers and their direct reports written in React and Firebase
6 | built and designed for the mobile web.
7 |
8 | Instead of continuing to use paper, or forgetting things, I wanted an
9 | app to keep track of my one-on-ones, plus I wanted to learn more about React and Firebase,
10 | so I created this.
11 |
12 | A *live* version can be found at [https://www.1on1tracker.com](https://www.1on1tracker.com)
13 |
14 | [](https://www.youtube.com/watch?v=n42TtZIKzEU "Quick Demo of 1on1tracker.com mobile website")
15 |
16 | ### Stack
17 |
18 | - React
19 | - Redux
20 | - React-Redux
21 | - React-Router
22 | - React-Router-Redux
23 | - Redux-Thunk
24 | - Redux-Form
25 | - Firebase
26 | - Material-UI
27 | - React-GA for Google Analytics
28 |
29 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
30 |
31 | ### Gallery
32 |
33 | 
34 | 
35 |
36 | 
37 |
38 |
39 |
40 | ### Deploy
41 |
42 | - Create a firebase project
43 | - Enable Google Authentication
44 | - Fork this repo
45 | - Copy src/firebase/config.js.example to src/firebase/config.js and fill out
46 | - npm run build
47 | - install firebase CLI tools
48 | - firebase deploy
49 |
50 | ### Code Style
51 |
52 | For the most part, this code attempts to follow Airbnb's styleguide.
53 |
54 | ## Roadmap
55 |
56 | The basic feature set is a list of meetings with notes linked to direct reports.
57 |
58 | - Better UI design and styling
59 | - Sorting
60 | - Search
61 | - Google hangout integration
62 | - Slack integration
63 | - Reports
64 | - Test coverage
65 |
66 | Want to talk about one on ones? Have an idea or question? Contact me.
67 |
68 | ## Contact
69 |
70 | If you find this useful, follow me [@vgraupera](https://twitter.com/vgraupera)
71 |
--------------------------------------------------------------------------------
/src/components/common/RichTextEditor.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ReactQuill from 'react-quill'; // ES6
3 | import 'react-quill/dist/quill.snow.css'; // ES6
4 |
5 | import { TextField } from 'redux-form-material-ui';
6 | import PropTypes from 'prop-types';
7 |
8 | /**
9 | * @description propTypes for RichTextEditor
10 | * @type {{input}}
11 | */
12 | const propTypes = {
13 | input: PropTypes.shape({
14 | value: PropTypes.string.isRequired,
15 | onChange: PropTypes.func.isRequired,
16 | }).isRequired,
17 | floatingLabelText: PropTypes.string.isRequired,
18 | };
19 |
20 | /**
21 | * @description component Style
22 | * @type {Object}
23 | */
24 | const style = {
25 | wrapperDiv: { marginTop: 10, marginBottom: 10 },
26 | inputStyle: { display: 'none' },
27 | floatingLabelStyle: { top: '10%' },
28 | textFieldStyle: { height: '28px', width: '100%' },
29 | };
30 |
31 | /**
32 | * @class RichTextEditor
33 | * @extends React.Component
34 | * @description Render component
35 | */
36 | class RichTextEditor extends Component {
37 |
38 | state = {
39 | value: this.props.input.value
40 | };
41 |
42 | /**
43 | * @description Handle Change in react-rte and pass to redux-form
44 | * @param {Object} value react-rte value obect
45 | */
46 | handleChange = (value) => {
47 | this.setState({ value });
48 | this.props.input.onChange(value);
49 | };
50 |
51 | /**
52 | * @description render
53 | * @return {Object} JSX HTML Content
54 | */
55 | render() {
56 |
57 | const modules = {
58 | toolbar: [
59 | [{ 'header': [1, 2, false] }],
60 | ['bold', 'italic', 'underline','strike', 'blockquote'],
61 | [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
62 | ],
63 | };
64 |
65 | const formats = [
66 | 'header',
67 | 'bold', 'italic', 'underline', 'strike', 'blockquote',
68 | 'list', 'bullet', 'indent',
69 | ];
70 |
71 | return (
72 |