├── src
    ├── App.css
    ├── components
    │   ├── layout
    │   │   ├── spinner.gif
    │   │   ├── Sidebar.js
    │   │   ├── Spinner.js
    │   │   ├── Dashboard.js
    │   │   ├── Alert.js
    │   │   └── AppNavbar.js
    │   ├── auth
    │   │   ├── Login.js
    │   │   └── Register.js
    │   ├── clients
    │   │   ├── Clients.js
    │   │   ├── AddClient.js
    │   │   ├── EditClient.js
    │   │   └── ClientDetails.js
    │   └── settings
    │   │   └── Settings.js
    ├── actions
    │   ├── notifyActions.js
    │   ├── types.js
    │   └── settingsActions.js
    ├── index.js
    ├── App.test.js
    ├── reducers
    │   ├── notifyReducer.js
    │   └── settingsReducer.js
    ├── helpers
    │   └── auth.js
    ├── store.js
    ├── App.js
    └── registerServiceWorker.js
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── .gitignore
├── README.md
└── package.json


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/clientpanel_react/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/components/layout/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/clientpanel_react/HEAD/src/components/layout/spinner.gif


--------------------------------------------------------------------------------
/src/actions/notifyActions.js:
--------------------------------------------------------------------------------
 1 | import { NOTIFY_USER } from './types';
 2 | 
 3 | export const notifyUser = (message, messageType) => {
 4 |   return {
 5 |     type: NOTIFY_USER,
 6 |     message,
 7 |     messageType
 8 |   };
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/actions/types.js:
--------------------------------------------------------------------------------
1 | export const NOTIFY_USER = 'NOTIFY_USER';
2 | export const DISABLE_BALANCE_ON_ADD = 'DISABLE_BALANCE_ON_ADD';
3 | export const DISABLE_BALANCE_ON_EDIT = 'DISABLE_BALANCE_ON_EDIT';
4 | export const ALLOW_REGISTRATION = 'ALLOW_REGISTRATION';
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import registerServiceWorker from './registerServiceWorker';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | registerServiceWorker();
8 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/layout/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | export default () => {
 5 |   return (
 6 |     <Link to="/client/add" className="btn btn-success btn-block">
 7 |       <i className="fas fa-plus" /> New
 8 |     </Link>
 9 |   );
10 | };
11 | 


--------------------------------------------------------------------------------
/src/components/layout/Spinner.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import spinner from './spinner.gif';
 3 | 
 4 | export default () => {
 5 |   return (
 6 |     <div>
 7 |       <img
 8 |         src={spinner}
 9 |         alt="Loading..."
10 |         style={{ width: '200px', margin: 'auto', display: 'block' }}
11 |       />
12 |     </div>
13 |   );
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/layout/Dashboard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Clients from '../clients/Clients';
 3 | import Sidebar from '../layout/Sidebar';
 4 | 
 5 | export default () => {
 6 |   return (
 7 |     <div className="row">
 8 |       <div className="col-md-10">
 9 |         <Clients />
10 |       </div>
11 |       <div className="col-md-2">
12 |         <Sidebar />
13 |       </div>
14 |     </div>
15 |   );
16 | };
17 | 


--------------------------------------------------------------------------------
/src/reducers/notifyReducer.js:
--------------------------------------------------------------------------------
 1 | import { NOTIFY_USER } from '../actions/types';
 2 | 
 3 | const initialState = {
 4 |   message: null,
 5 |   messageType: null
 6 | };
 7 | 
 8 | export default function(state = initialState, action) {
 9 |   switch (action.type) {
10 |     case NOTIFY_USER:
11 |       return {
12 |         ...state,
13 |         message: action.message,
14 |         messageType: action.messageType
15 |       };
16 |     default:
17 |       return state;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/layout/Alert.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | const Alert = props => {
 6 |   const { message, messageType } = props;
 7 |   return (
 8 |     <div
 9 |       className={classnames('alert', {
10 |         'alert-success': messageType === 'success',
11 |         'alert-danger': messageType === 'error'
12 |       })}
13 |     >
14 |       {message}
15 |     </div>
16 |   );
17 | };
18 | 
19 | Alert.propTypes = {
20 |   message: PropTypes.string.isRequired,
21 |   messageType: PropTypes.string.isRequired
22 | };
23 | 
24 | export default Alert;
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Client Panel
 2 | 
 3 | > Client management tool built on React, Redux and Firebase. Uses Firebase for authentication and Firestore for storing data
 4 | 
 5 | ## Quick Start
 6 | 
 7 | ```bash
 8 | # Install dependencies
 9 | npm install
10 | 
11 | # ADD YOUR OWN FIREBASE CONFIG TO STORE.JS
12 | 
13 | # Serve on localhost:3000
14 | npm start
15 | 
16 | # Build for production
17 | npm run build
18 | ```
19 | 
20 | ## App Info
21 | 
22 | ### Author
23 | 
24 | Brad Traversy
25 | [Traversy Media](http://www.traversymedia.com)
26 | 
27 | ### Version
28 | 
29 | 1.0.0
30 | 
31 | ### License
32 | 
33 | This project is licensed under the MIT License
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "clientpanel_react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "classnames": "^2.2.6",
 7 |     "firebase": "^5.3.0",
 8 |     "react": "^16.4.1",
 9 |     "react-dom": "^16.4.1",
10 |     "react-redux": "^5.0.7",
11 |     "react-redux-firebase": "^2.1.6",
12 |     "react-router-dom": "^4.3.1",
13 |     "react-scripts": "1.1.4",
14 |     "redux": "^4.0.0",
15 |     "redux-auth-wrapper": "^2.0.3",
16 |     "redux-firestore": "^0.5.7"
17 |   },
18 |   "scripts": {
19 |     "start": "react-scripts start",
20 |     "build": "react-scripts build",
21 |     "test": "react-scripts test --env=jsdom",
22 |     "eject": "react-scripts eject"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/reducers/settingsReducer.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   DISABLE_BALANCE_ON_ADD,
 3 |   DISABLE_BALANCE_ON_EDIT,
 4 |   ALLOW_REGISTRATION
 5 | } from '../actions/types';
 6 | 
 7 | export default function(state = {}, action) {
 8 |   switch (action.type) {
 9 |     case DISABLE_BALANCE_ON_ADD:
10 |       return {
11 |         ...state,
12 |         disableBalanceOnAdd: action.payload
13 |       };
14 |     case DISABLE_BALANCE_ON_EDIT:
15 |       return {
16 |         ...state,
17 |         disableBalanceOnEdit: action.payload
18 |       };
19 |     case ALLOW_REGISTRATION:
20 |       return {
21 |         ...state,
22 |         allowRegistration: action.payload
23 |       };
24 |     default:
25 |       return state;
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/helpers/auth.js:
--------------------------------------------------------------------------------
 1 | import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper';
 2 | import { connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect';
 3 | import LoadingScreen from '../components/layout/Spinner';
 4 | 
 5 | const locationHelper = locationHelperBuilder({});
 6 | 
 7 | export const UserIsAuthenticated = connectedRouterRedirect({
 8 |   wrapperDisplayName: 'UserIsAuthenticated',
 9 |   AuthenticatingComponent: LoadingScreen,
10 |   allowRedirectBack: true,
11 |   redirectPath: (state, ownProps) =>
12 |     locationHelper.getRedirectQueryParam(ownProps) || '/login',
13 |   authenticatingSelector: ({ firebase: { auth, profile, isInitializing } }) =>
14 |     !auth.isLoaded || isInitializing === true,
15 |   authenticatedSelector: ({ firebase: { auth } }) =>
16 |     auth.isLoaded && !auth.isEmpty
17 | });
18 | 
19 | export const UserIsNotAuthenticated = connectedRouterRedirect({
20 |   wrapperDisplayName: 'UserIsNotAuthenticated',
21 |   AuthenticatingComponent: LoadingScreen,
22 |   allowRedirectBack: false,
23 |   redirectPath: (state, ownProps) =>
24 |     locationHelper.getRedirectQueryParam(ownProps) || '/',
25 |   authenticatingSelector: ({ firebase: { auth, isInitializing } }) =>
26 |     !auth.isLoaded || isInitializing === true,
27 |   authenticatedSelector: ({ firebase: { auth } }) =>
28 |     auth.isLoaded && auth.isEmpty
29 | });
30 | 


--------------------------------------------------------------------------------
/src/actions/settingsActions.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   DISABLE_BALANCE_ON_ADD,
 3 |   DISABLE_BALANCE_ON_EDIT,
 4 |   ALLOW_REGISTRATION
 5 | } from './types';
 6 | 
 7 | export const setDisableBalanceOnAdd = () => {
 8 |   // Get settings from localStorage
 9 |   const settings = JSON.parse(localStorage.getItem('settings'));
10 | 
11 |   // Toggle
12 |   settings.disableBalanceOnAdd = !settings.disableBalanceOnAdd;
13 | 
14 |   // Set back to localStorage
15 |   localStorage.setItem('settings', JSON.stringify(settings));
16 | 
17 |   return {
18 |     type: DISABLE_BALANCE_ON_ADD,
19 |     payload: settings.disableBalanceOnAdd
20 |   };
21 | };
22 | 
23 | export const setDisableBalanceOnEdit = () => {
24 |   // Get settings from localStorage
25 |   const settings = JSON.parse(localStorage.getItem('settings'));
26 | 
27 |   // Toggle
28 |   settings.disableBalanceOnEdit = !settings.disableBalanceOnEdit;
29 | 
30 |   // Set back to localStorage
31 |   localStorage.setItem('settings', JSON.stringify(settings));
32 | 
33 |   return {
34 |     type: DISABLE_BALANCE_ON_EDIT,
35 |     payload: settings.disableBalanceOnEdit
36 |   };
37 | };
38 | 
39 | export const setAllowRegistration = () => {
40 |   // Get settings from localStorage
41 |   const settings = JSON.parse(localStorage.getItem('settings'));
42 | 
43 |   // Toggle
44 |   settings.allowRegistration = !settings.allowRegistration;
45 | 
46 |   // Set back to localStorage
47 |   localStorage.setItem('settings', JSON.stringify(settings));
48 |   return {
49 |     type: ALLOW_REGISTRATION,
50 |     payload: settings.allowRegistration
51 |   };
52 | };
53 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <meta name="theme-color" content="#000000">
 8 | 
 9 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
10 |   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
11 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
12 |     crossorigin="anonymous">
13 |   <!-- Font Awesome -->
14 |   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
15 |     crossorigin="anonymous">
16 | 
17 |   <title>Client Panel</title>
18 | </head>
19 | 
20 | <body>
21 |   <noscript>
22 |     You need to enable JavaScript to run this app.
23 |   </noscript>
24 |   <div id="root"></div>
25 | 
26 |   <!-- Bootstrap JS -->
27 |   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
28 |     crossorigin="anonymous"></script>
29 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
30 |     crossorigin="anonymous"></script>
31 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
32 |     crossorigin="anonymous"></script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import { createStore, combineReducers, compose } from 'redux';
 2 | import firebase from 'firebase';
 3 | import 'firebase/firestore';
 4 | import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase';
 5 | import { reduxFirestore, firestoreReducer } from 'redux-firestore';
 6 | // Reducers
 7 | import notifyReducer from './reducers/notifyReducer';
 8 | import settingsReducer from './reducers/settingsReducer';
 9 | 
10 | /////// ADD YOUR FIREBASE CONFIG HERE /////////
11 | const firebaseConfig = {};
12 | 
13 | // react-redux-firebase config
14 | const rrfConfig = {
15 |   userProfile: 'users',
16 |   useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
17 | };
18 | 
19 | // Init firebase instance
20 | firebase.initializeApp(firebaseConfig);
21 | // Init firestore
22 | const firestore = firebase.firestore();
23 | const settings = { timestampsInSnapshots: true };
24 | firestore.settings(settings);
25 | 
26 | // Add reactReduxFirebase enhancer when making store creator
27 | const createStoreWithFirebase = compose(
28 |   reactReduxFirebase(firebase, rrfConfig), // firebase instance as first argument
29 |   reduxFirestore(firebase)
30 | )(createStore);
31 | 
32 | const rootReducer = combineReducers({
33 |   firebase: firebaseReducer,
34 |   firestore: firestoreReducer,
35 |   notify: notifyReducer,
36 |   settings: settingsReducer
37 | });
38 | 
39 | // Check for settings in localStorage
40 | if (localStorage.getItem('settings') == null) {
41 |   // Default settings
42 |   const defaultSettings = {
43 |     disableBalanceOnAdd: true,
44 |     disableBalanceOnEdit: false,
45 |     allowRegistration: false
46 |   };
47 | 
48 |   // Set to localStorage
49 |   localStorage.setItem('settings', JSON.stringify(defaultSettings));
50 | }
51 | 
52 | // Create initial state
53 | const initialState = { settings: JSON.parse(localStorage.getItem('settings')) };
54 | 
55 | // Create store
56 | const store = createStoreWithFirebase(
57 |   rootReducer,
58 |   initialState,
59 |   compose(
60 |     reactReduxFirebase(firebase),
61 |     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
62 |   )
63 | );
64 | 
65 | export default store;
66 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 3 | import { UserIsAuthenticated, UserIsNotAuthenticated } from './helpers/auth';
 4 | 
 5 | import { Provider } from 'react-redux';
 6 | import store from './store';
 7 | 
 8 | import AppNavbar from './components/layout/AppNavbar';
 9 | import Dashboard from './components/layout/Dashboard';
10 | import AddClient from './components/clients/AddClient';
11 | import EditClient from './components/clients/EditClient';
12 | import ClientDetails from './components/clients/ClientDetails';
13 | import Login from './components/auth/Login';
14 | import Register from './components/auth/Register';
15 | import Settings from './components/settings/Settings';
16 | 
17 | import './App.css';
18 | 
19 | class App extends Component {
20 |   render() {
21 |     return (
22 |       <Provider store={store}>
23 |         <Router>
24 |           <div className="App">
25 |             <AppNavbar />
26 |             <div className="container">
27 |               <Switch>
28 |                 <Route
29 |                   exact
30 |                   path="/"
31 |                   component={UserIsAuthenticated(Dashboard)}
32 |                 />
33 |                 <Route
34 |                   exact
35 |                   path="/client/add"
36 |                   component={UserIsAuthenticated(AddClient)}
37 |                 />
38 |                 <Route
39 |                   exact
40 |                   path="/client/edit/:id"
41 |                   component={UserIsAuthenticated(EditClient)}
42 |                 />
43 |                 <Route
44 |                   exact
45 |                   path="/client/:id"
46 |                   component={UserIsAuthenticated(ClientDetails)}
47 |                 />
48 |                 <Route
49 |                   exact
50 |                   path="/login"
51 |                   component={UserIsNotAuthenticated(Login)}
52 |                 />
53 |                 <Route
54 |                   exact
55 |                   path="/register"
56 |                   component={UserIsNotAuthenticated(Register)}
57 |                 />
58 |                 <Route
59 |                   exact
60 |                   path="/settings"
61 |                   component={UserIsAuthenticated(Settings)}
62 |                 />
63 |               </Switch>
64 |             </div>
65 |           </div>
66 |         </Router>
67 |       </Provider>
68 |     );
69 |   }
70 | }
71 | 
72 | export default App;
73 | 


--------------------------------------------------------------------------------
/src/components/auth/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { compose } from 'redux';
 4 | import { connect } from 'react-redux';
 5 | import { firebaseConnect } from 'react-redux-firebase';
 6 | import { notifyUser } from '../../actions/notifyActions';
 7 | import Alert from '../layout/Alert';
 8 | 
 9 | class Login extends Component {
10 |   state = {
11 |     email: '',
12 |     password: ''
13 |   };
14 | 
15 |   onSubmit = e => {
16 |     e.preventDefault();
17 | 
18 |     const { firebase, notifyUser } = this.props;
19 |     const { email, password } = this.state;
20 | 
21 |     firebase
22 |       .login({
23 |         email,
24 |         password
25 |       })
26 |       .catch(err => notifyUser('Invalid Login Credentials', 'error'));
27 |   };
28 | 
29 |   onChange = e => this.setState({ [e.target.name]: e.target.value });
30 | 
31 |   render() {
32 |     const { message, messageType } = this.props.notify;
33 |     return (
34 |       <div className="row">
35 |         <div className="col-md-6 mx-auto">
36 |           <div className="card">
37 |             <div className="card-body">
38 |               {message ? (
39 |                 <Alert message={message} messageType={messageType} />
40 |               ) : null}
41 |               <h1 className="text-center pb-4 pt-3">
42 |                 <span className="text-primary">
43 |                   <i className="fas fa-lock" /> Login
44 |                 </span>
45 |               </h1>
46 |               <form onSubmit={this.onSubmit}>
47 |                 <div className="form-group">
48 |                   <label htmlFor="email">Email</label>
49 |                   <input
50 |                     type="text"
51 |                     className="form-control"
52 |                     name="email"
53 |                     required
54 |                     value={this.state.email}
55 |                     onChange={this.onChange}
56 |                   />
57 |                 </div>
58 |                 <div className="form-group">
59 |                   <label htmlFor="password">Password</label>
60 |                   <input
61 |                     type="password"
62 |                     className="form-control"
63 |                     name="password"
64 |                     required
65 |                     value={this.state.password}
66 |                     onChange={this.onChange}
67 |                   />
68 |                 </div>
69 |                 <input
70 |                   type="submit"
71 |                   value="Login"
72 |                   className="btn btn-primary btn-block"
73 |                 />
74 |               </form>
75 |             </div>
76 |           </div>
77 |         </div>
78 |       </div>
79 |     );
80 |   }
81 | }
82 | 
83 | Login.propTypes = {
84 |   firebase: PropTypes.object.isRequired,
85 |   notify: PropTypes.object.isRequired,
86 |   notifyUser: PropTypes.func.isRequired
87 | };
88 | 
89 | export default compose(
90 |   firebaseConnect(),
91 |   connect(
92 |     (state, props) => ({
93 |       notify: state.notify
94 |     }),
95 |     { notifyUser }
96 |   )
97 | )(Login);
98 | 


--------------------------------------------------------------------------------
/src/components/clients/Clients.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import PropTypes from 'prop-types';
  4 | import { compose } from 'redux';
  5 | import { connect } from 'react-redux';
  6 | import { firestoreConnect } from 'react-redux-firebase';
  7 | import Spinner from '../layout/Spinner';
  8 | 
  9 | class Clients extends Component {
 10 |   state = {
 11 |     totalOwed: null
 12 |   };
 13 | 
 14 |   static getDerivedStateFromProps(props, state) {
 15 |     const { clients } = props;
 16 | 
 17 |     if (clients) {
 18 |       // Add balances
 19 |       const total = clients.reduce((total, client) => {
 20 |         return total + parseFloat(client.balance.toString());
 21 |       }, 0);
 22 | 
 23 |       return { totalOwed: total };
 24 |     }
 25 | 
 26 |     return null;
 27 |   }
 28 | 
 29 |   render() {
 30 |     const { clients } = this.props;
 31 |     const { totalOwed } = this.state;
 32 | 
 33 |     if (clients) {
 34 |       return (
 35 |         <div>
 36 |           <div className="row">
 37 |             <div className="col-md-6">
 38 |               <h2>
 39 |                 {' '}
 40 |                 <i className="fas fa-users" /> Clients{' '}
 41 |               </h2>
 42 |             </div>
 43 |             <div className="col-md-6">
 44 |               <h5 className="text-right text-secondary">
 45 |                 Total Owed{' '}
 46 |                 <span className="text-primary">
 47 |                   ${parseFloat(totalOwed).toFixed(2)}
 48 |                 </span>
 49 |               </h5>
 50 |             </div>
 51 |           </div>
 52 | 
 53 |           <table className="table table-striped">
 54 |             <thead className="thead-inverse">
 55 |               <tr>
 56 |                 <th>Name</th>
 57 |                 <th>Email</th>
 58 |                 <th>Balance</th>
 59 |                 <th />
 60 |               </tr>
 61 |             </thead>
 62 |             <tbody>
 63 |               {clients.map(client => (
 64 |                 <tr key={client.id}>
 65 |                   <td>
 66 |                     {client.firstName} {client.lastName}
 67 |                   </td>
 68 |                   <td>{client.email}</td>
 69 |                   <td>${parseFloat(client.balance).toFixed(2)}</td>
 70 |                   <td>
 71 |                     <Link
 72 |                       to={`/client/${client.id}`}
 73 |                       className="btn btn-secondary btn-sm"
 74 |                     >
 75 |                       <i className="fas fa-arrow-circle-right" /> Details
 76 |                     </Link>
 77 |                   </td>
 78 |                 </tr>
 79 |               ))}
 80 |             </tbody>
 81 |           </table>
 82 |         </div>
 83 |       );
 84 |     } else {
 85 |       return <Spinner />;
 86 |     }
 87 |   }
 88 | }
 89 | 
 90 | Clients.propTypes = {
 91 |   firestore: PropTypes.object.isRequired,
 92 |   clients: PropTypes.array
 93 | };
 94 | 
 95 | export default compose(
 96 |   firestoreConnect([{ collection: 'clients' }]),
 97 |   connect((state, props) => ({
 98 |     clients: state.firestore.ordered.clients
 99 |   }))
100 | )(Clients);
101 | 


--------------------------------------------------------------------------------
/src/components/settings/Settings.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import PropTypes from 'prop-types';
 4 | import { connect } from 'react-redux';
 5 | import {
 6 |   setAllowRegistration,
 7 |   setDisableBalanceOnAdd,
 8 |   setDisableBalanceOnEdit
 9 | } from '../../actions/settingsActions';
10 | 
11 | class Settings extends Component {
12 |   disableBalanceOnAddChange = () => {
13 |     const { setDisableBalanceOnAdd } = this.props;
14 |     setDisableBalanceOnAdd();
15 |   };
16 | 
17 |   disableBalanceOnEditChange = () => {
18 |     const { setDisableBalanceOnEdit } = this.props;
19 |     setDisableBalanceOnEdit();
20 |   };
21 | 
22 |   allowRegistrationChange = () => {
23 |     const { setAllowRegistration } = this.props;
24 |     setAllowRegistration();
25 |   };
26 | 
27 |   render() {
28 |     const {
29 |       disableBalanceOnAdd,
30 |       disableBalanceOnEdit,
31 |       allowRegistration
32 |     } = this.props.settings;
33 | 
34 |     return (
35 |       <div>
36 |         <div className="row">
37 |           <div className="col-md-6">
38 |             <Link to="/" className="btn btn-link">
39 |               <i className="fas fa-arrow-circle-left" /> Back To Dashboard
40 |             </Link>
41 |           </div>
42 |         </div>
43 | 
44 |         <div className="card">
45 |           <div className="card-header">Edit Settings</div>
46 |           <div className="card-body">
47 |             <form>
48 |               <div className="form-group">
49 |                 <label>Allow Registration</label>{' '}
50 |                 <input
51 |                   type="checkbox"
52 |                   name="allowRegistration"
53 |                   checked={!!allowRegistration}
54 |                   onChange={this.allowRegistrationChange}
55 |                 />
56 |               </div>
57 | 
58 |               <div className="form-group">
59 |                 <label>Disable Balance On Add</label>{' '}
60 |                 <input
61 |                   type="checkbox"
62 |                   name="disableBalanceOnAdd"
63 |                   checked={!!disableBalanceOnAdd}
64 |                   onChange={this.disableBalanceOnAddChange}
65 |                 />
66 |               </div>
67 | 
68 |               <div className="form-group">
69 |                 <label>Disable Balance On Edit</label>{' '}
70 |                 <input
71 |                   type="checkbox"
72 |                   name="disableBalanceOnEdit"
73 |                   checked={!!disableBalanceOnEdit}
74 |                   onChange={this.disableBalanceOnEditChange}
75 |                 />
76 |               </div>
77 |             </form>
78 |           </div>
79 |         </div>
80 |       </div>
81 |     );
82 |   }
83 | }
84 | 
85 | Settings.propTypes = {
86 |   settings: PropTypes.object.isRequired,
87 |   setDisableBalanceOnAdd: PropTypes.func.isRequired,
88 |   setDisableBalanceOnEdit: PropTypes.func.isRequired,
89 |   setAllowRegistration: PropTypes.func.isRequired
90 | };
91 | 
92 | export default connect(
93 |   (state, props) => ({
94 |     auth: state.firebase.auth,
95 |     settings: state.settings
96 |   }),
97 |   { setAllowRegistration, setDisableBalanceOnAdd, setDisableBalanceOnEdit }
98 | )(Settings);
99 | 


--------------------------------------------------------------------------------
/src/components/auth/Register.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { compose } from 'redux';
  4 | import { connect } from 'react-redux';
  5 | import { firebaseConnect } from 'react-redux-firebase';
  6 | import { notifyUser } from '../../actions/notifyActions';
  7 | import Alert from '../layout/Alert';
  8 | 
  9 | class Register extends Component {
 10 |   state = {
 11 |     email: '',
 12 |     password: ''
 13 |   };
 14 | 
 15 |   componentDidMount() {
 16 |     const { allowRegistration } = this.props.settings;
 17 | 
 18 |     if (!allowRegistration) {
 19 |       this.props.history.push('/');
 20 |     }
 21 |   }
 22 | 
 23 |   onSubmit = e => {
 24 |     e.preventDefault();
 25 | 
 26 |     const { firebase, notifyUser } = this.props;
 27 |     const { email, password } = this.state;
 28 | 
 29 |     // Register with firebase
 30 |     firebase
 31 |       .createUser({ email, password })
 32 |       .catch(err => notifyUser('That User Already Exists', 'error'));
 33 |   };
 34 | 
 35 |   onChange = e => this.setState({ [e.target.name]: e.target.value });
 36 | 
 37 |   render() {
 38 |     const { message, messageType } = this.props.notify;
 39 |     return (
 40 |       <div className="row">
 41 |         <div className="col-md-6 mx-auto">
 42 |           <div className="card">
 43 |             <div className="card-body">
 44 |               {message ? (
 45 |                 <Alert message={message} messageType={messageType} />
 46 |               ) : null}
 47 |               <h1 className="text-center pb-4 pt-3">
 48 |                 <span className="text-primary">
 49 |                   <i className="fas fa-lock" /> Register
 50 |                 </span>
 51 |               </h1>
 52 |               <form onSubmit={this.onSubmit}>
 53 |                 <div className="form-group">
 54 |                   <label htmlFor="email">Email</label>
 55 |                   <input
 56 |                     type="text"
 57 |                     className="form-control"
 58 |                     name="email"
 59 |                     required
 60 |                     value={this.state.email}
 61 |                     onChange={this.onChange}
 62 |                   />
 63 |                 </div>
 64 |                 <div className="form-group">
 65 |                   <label htmlFor="password">Password</label>
 66 |                   <input
 67 |                     type="password"
 68 |                     className="form-control"
 69 |                     name="password"
 70 |                     required
 71 |                     value={this.state.password}
 72 |                     onChange={this.onChange}
 73 |                   />
 74 |                 </div>
 75 |                 <input
 76 |                   type="submit"
 77 |                   value="Register"
 78 |                   className="btn btn-primary btn-block"
 79 |                 />
 80 |               </form>
 81 |             </div>
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 |     );
 86 |   }
 87 | }
 88 | 
 89 | Register.propTypes = {
 90 |   firebase: PropTypes.object.isRequired,
 91 |   notify: PropTypes.object.isRequired,
 92 |   notifyUser: PropTypes.func.isRequired
 93 | };
 94 | 
 95 | export default compose(
 96 |   firebaseConnect(),
 97 |   connect(
 98 |     (state, props) => ({
 99 |       notify: state.notify,
100 |       settings: state.settings
101 |     }),
102 |     { notifyUser }
103 |   )
104 | )(Register);
105 | 


--------------------------------------------------------------------------------
/src/components/layout/AppNavbar.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import PropTypes from 'prop-types';
  4 | import { compose } from 'redux';
  5 | import { connect } from 'react-redux';
  6 | import { firebaseConnect } from 'react-redux-firebase';
  7 | 
  8 | class AppNavbar extends Component {
  9 |   state = {
 10 |     isAuthenticated: false
 11 |   };
 12 | 
 13 |   static getDerivedStateFromProps(props, state) {
 14 |     const { auth } = props;
 15 | 
 16 |     if (auth.uid) {
 17 |       return { isAuthenticated: true };
 18 |     } else {
 19 |       return { isAuthenticated: false };
 20 |     }
 21 |   }
 22 | 
 23 |   onLogoutClick = e => {
 24 |     e.preventDefault();
 25 | 
 26 |     const { firebase } = this.props;
 27 |     firebase.logout();
 28 |   };
 29 | 
 30 |   render() {
 31 |     const { isAuthenticated } = this.state;
 32 |     const { auth } = this.props;
 33 |     const { allowRegistration } = this.props.settings;
 34 | 
 35 |     return (
 36 |       <nav className="navbar navbar-expand-md navbar-dark bg-primary mb-4">
 37 |         <div className="container">
 38 |           <Link to="/" className="navbar-brand">
 39 |             ClientPanel
 40 |           </Link>
 41 |           <button
 42 |             className="navbar-toggler"
 43 |             type="button"
 44 |             data-toggle="collapse"
 45 |             data-target="#navbarMain"
 46 |           >
 47 |             <span className="navbar-toggler-icon" />
 48 |           </button>
 49 |           <div className="collapse navbar-collapse" id="navbarMain">
 50 |             <ul className="navbar-nav mr-auto">
 51 |               {isAuthenticated ? (
 52 |                 <li className="nav-item">
 53 |                   <Link to="/" className="nav-link">
 54 |                     Dashboard
 55 |                   </Link>
 56 |                 </li>
 57 |               ) : null}
 58 |             </ul>
 59 |             {isAuthenticated ? (
 60 |               <ul className="navbar-nav ml-auto">
 61 |                 <li className="nav-item">
 62 |                   <a href="#!" className="nav-link">
 63 |                     {auth.email}
 64 |                   </a>
 65 |                 </li>
 66 |                 <li className="nav-item">
 67 |                   <Link to="/settings" className="nav-link">
 68 |                     Settings
 69 |                   </Link>
 70 |                 </li>
 71 |                 <li className="nav-item">
 72 |                   <a
 73 |                     href="#!"
 74 |                     className="nav-link"
 75 |                     onClick={this.onLogoutClick}
 76 |                   >
 77 |                     Logout
 78 |                   </a>
 79 |                 </li>
 80 |               </ul>
 81 |             ) : null}
 82 | 
 83 |             {allowRegistration && !isAuthenticated ? (
 84 |               <ul className="navbar-nav ml-auto">
 85 |                 <li className="nav-item">
 86 |                   <Link to="/login" className="nav-link">
 87 |                     Login
 88 |                   </Link>
 89 |                 </li>
 90 |                 <li className="nav-item">
 91 |                   <Link to="/register" className="nav-link">
 92 |                     Register
 93 |                   </Link>
 94 |                 </li>
 95 |               </ul>
 96 |             ) : null}
 97 |           </div>
 98 |         </div>
 99 |       </nav>
100 |     );
101 |   }
102 | }
103 | 
104 | AppNavbar.propTypes = {
105 |   firebase: PropTypes.object.isRequired,
106 |   auth: PropTypes.object.isRequired,
107 |   settings: PropTypes.object.isRequired
108 | };
109 | 
110 | export default compose(
111 |   firebaseConnect(),
112 |   connect((state, props) => ({
113 |     auth: state.firebase.auth,
114 |     settings: state.settings
115 |   }))
116 | )(AppNavbar);
117 | 


--------------------------------------------------------------------------------
/src/components/clients/AddClient.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import PropTypes from 'prop-types';
  4 | import { compose } from 'redux';
  5 | import { connect } from 'react-redux';
  6 | import { firestoreConnect } from 'react-redux-firebase';
  7 | 
  8 | class AddClient extends Component {
  9 |   state = {
 10 |     firstName: '',
 11 |     lastName: '',
 12 |     email: '',
 13 |     phone: '',
 14 |     balance: ''
 15 |   };
 16 | 
 17 |   onSubmit = e => {
 18 |     e.preventDefault();
 19 | 
 20 |     const newClient = this.state;
 21 | 
 22 |     const { firestore, history } = this.props;
 23 | 
 24 |     // If no balance, make 0
 25 |     if (newClient.balance === '') {
 26 |       newClient.balance = 0;
 27 |     }
 28 | 
 29 |     firestore
 30 |       .add({ collection: 'clients' }, newClient)
 31 |       .then(() => history.push('/'));
 32 |   };
 33 | 
 34 |   onChange = e => this.setState({ [e.target.name]: e.target.value });
 35 | 
 36 |   render() {
 37 |     const { disableBalanceOnAdd } = this.props.settings;
 38 | 
 39 |     return (
 40 |       <div>
 41 |         <div className="row">
 42 |           <div className="col-md-6">
 43 |             <Link to="/" className="btn btn-link">
 44 |               <i className="fas fa-arrow-circle-left" /> Back To Dashboard
 45 |             </Link>
 46 |           </div>
 47 |         </div>
 48 | 
 49 |         <div className="card">
 50 |           <div className="card-header">Add Client</div>
 51 |           <div className="card-body">
 52 |             <form onSubmit={this.onSubmit}>
 53 |               <div className="form-group">
 54 |                 <label htmlFor="firstName">First Name</label>
 55 |                 <input
 56 |                   type="text"
 57 |                   className="form-control"
 58 |                   name="firstName"
 59 |                   minLength="2"
 60 |                   required
 61 |                   onChange={this.onChange}
 62 |                   value={this.state.firstName}
 63 |                 />
 64 |               </div>
 65 | 
 66 |               <div className="form-group">
 67 |                 <label htmlFor="lastName">Last Name</label>
 68 |                 <input
 69 |                   type="text"
 70 |                   className="form-control"
 71 |                   name="lastName"
 72 |                   minLength="2"
 73 |                   required
 74 |                   onChange={this.onChange}
 75 |                   value={this.state.lastName}
 76 |                 />
 77 |               </div>
 78 | 
 79 |               <div className="form-group">
 80 |                 <label htmlFor="email">Email</label>
 81 |                 <input
 82 |                   type="email"
 83 |                   className="form-control"
 84 |                   name="email"
 85 |                   onChange={this.onChange}
 86 |                   value={this.state.email}
 87 |                 />
 88 |               </div>
 89 | 
 90 |               <div className="form-group">
 91 |                 <label htmlFor="phone">Phone</label>
 92 |                 <input
 93 |                   type="text"
 94 |                   className="form-control"
 95 |                   name="phone"
 96 |                   minLength="10"
 97 |                   required
 98 |                   onChange={this.onChange}
 99 |                   value={this.state.phone}
100 |                 />
101 |               </div>
102 | 
103 |               <div className="form-group">
104 |                 <label htmlFor="balance">Balance</label>
105 |                 <input
106 |                   type="text"
107 |                   className="form-control"
108 |                   name="balance"
109 |                   onChange={this.onChange}
110 |                   value={this.state.balance}
111 |                   disabled={disableBalanceOnAdd}
112 |                 />
113 |               </div>
114 | 
115 |               <input
116 |                 type="submit"
117 |                 value="Submit"
118 |                 className="btn btn-primary btn-block"
119 |               />
120 |             </form>
121 |           </div>
122 |         </div>
123 |       </div>
124 |     );
125 |   }
126 | }
127 | 
128 | AddClient.propTypes = {
129 |   firestore: PropTypes.object.isRequired,
130 |   settings: PropTypes.object.isRequired
131 | };
132 | 
133 | export default compose(
134 |   firestoreConnect(),
135 |   connect((state, props) => ({
136 |     settings: state.settings
137 |   }))
138 | )(AddClient);
139 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/clients/EditClient.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import PropTypes from 'prop-types';
  4 | import { compose } from 'redux';
  5 | import { connect } from 'react-redux';
  6 | import { firestoreConnect } from 'react-redux-firebase';
  7 | import Spinner from '../layout/Spinner';
  8 | 
  9 | class EditClient extends Component {
 10 |   constructor(props) {
 11 |     super(props);
 12 |     // Create refs
 13 |     this.firstNameInput = React.createRef();
 14 |     this.lastNameInput = React.createRef();
 15 |     this.emailInput = React.createRef();
 16 |     this.phoneInput = React.createRef();
 17 |     this.balanceInput = React.createRef();
 18 |   }
 19 | 
 20 |   onSubmit = e => {
 21 |     e.preventDefault();
 22 | 
 23 |     const { client, firestore, history } = this.props;
 24 | 
 25 |     // Updated Client
 26 |     const updClient = {
 27 |       firstName: this.firstNameInput.current.value,
 28 |       lastName: this.lastNameInput.current.value,
 29 |       email: this.emailInput.current.value,
 30 |       phone: this.phoneInput.current.value,
 31 |       balance:
 32 |         this.balanceInput.current.value === ''
 33 |           ? 0
 34 |           : this.balanceInput.current.value
 35 |     };
 36 | 
 37 |     // Update client in firestore
 38 |     firestore
 39 |       .update({ collection: 'clients', doc: client.id }, updClient)
 40 |       .then(history.push('/'));
 41 |   };
 42 | 
 43 |   render() {
 44 |     const { client } = this.props;
 45 |     const { disableBalanceOnEdit } = this.props.settings;
 46 | 
 47 |     if (client) {
 48 |       return (
 49 |         <div>
 50 |           <div className="row">
 51 |             <div className="col-md-6">
 52 |               <Link to="/" className="btn btn-link">
 53 |                 <i className="fas fa-arrow-circle-left" /> Back To Dashboard
 54 |               </Link>
 55 |             </div>
 56 |           </div>
 57 | 
 58 |           <div className="card">
 59 |             <div className="card-header">Edit Client</div>
 60 |             <div className="card-body">
 61 |               <form onSubmit={this.onSubmit}>
 62 |                 <div className="form-group">
 63 |                   <label htmlFor="firstName">First Name</label>
 64 |                   <input
 65 |                     type="text"
 66 |                     className="form-control"
 67 |                     name="firstName"
 68 |                     minLength="2"
 69 |                     required
 70 |                     ref={this.firstNameInput}
 71 |                     defaultValue={client.firstName}
 72 |                   />
 73 |                 </div>
 74 | 
 75 |                 <div className="form-group">
 76 |                   <label htmlFor="lastName">Last Name</label>
 77 |                   <input
 78 |                     type="text"
 79 |                     className="form-control"
 80 |                     name="lastName"
 81 |                     minLength="2"
 82 |                     required
 83 |                     ref={this.lastNameInput}
 84 |                     defaultValue={client.lastName}
 85 |                   />
 86 |                 </div>
 87 | 
 88 |                 <div className="form-group">
 89 |                   <label htmlFor="email">Email</label>
 90 |                   <input
 91 |                     type="email"
 92 |                     className="form-control"
 93 |                     name="email"
 94 |                     ref={this.emailInput}
 95 |                     defaultValue={client.email}
 96 |                   />
 97 |                 </div>
 98 | 
 99 |                 <div className="form-group">
100 |                   <label htmlFor="phone">Phone</label>
101 |                   <input
102 |                     type="text"
103 |                     className="form-control"
104 |                     name="phone"
105 |                     minLength="10"
106 |                     required
107 |                     ref={this.phoneInput}
108 |                     defaultValue={client.phone}
109 |                   />
110 |                 </div>
111 | 
112 |                 <div className="form-group">
113 |                   <label htmlFor="balance">Balance</label>
114 |                   <input
115 |                     type="text"
116 |                     className="form-control"
117 |                     name="balance"
118 |                     ref={this.balanceInput}
119 |                     defaultValue={client.balance}
120 |                     disabled={disableBalanceOnEdit}
121 |                   />
122 |                 </div>
123 | 
124 |                 <input
125 |                   type="submit"
126 |                   value="Submit"
127 |                   className="btn btn-primary btn-block"
128 |                 />
129 |               </form>
130 |             </div>
131 |           </div>
132 |         </div>
133 |       );
134 |     } else {
135 |       return <Spinner />;
136 |     }
137 |   }
138 | }
139 | 
140 | EditClient.propTypes = {
141 |   firestore: PropTypes.object.isRequired
142 | };
143 | 
144 | export default compose(
145 |   firestoreConnect(props => [
146 |     { collection: 'clients', storeAs: 'client', doc: props.match.params.id }
147 |   ]),
148 |   connect(({ firestore: { ordered }, settings }, props) => ({
149 |     client: ordered.client && ordered.client[0],
150 |     settings
151 |   }))
152 | )(EditClient);
153 | 


--------------------------------------------------------------------------------
/src/components/clients/ClientDetails.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import PropTypes from 'prop-types';
  4 | import { compose } from 'redux';
  5 | import { connect } from 'react-redux';
  6 | import { firestoreConnect } from 'react-redux-firebase';
  7 | import Spinner from '../layout/Spinner';
  8 | import classnames from 'classnames';
  9 | 
 10 | class ClientDetails extends Component {
 11 |   state = {
 12 |     showBalanceUpdate: false,
 13 |     balanceUpdateAmount: ''
 14 |   };
 15 | 
 16 |   // Update balance
 17 |   balanceSubmit = e => {
 18 |     e.preventDefault();
 19 | 
 20 |     const { client, firestore } = this.props;
 21 |     const { balanceUpdateAmount } = this.state;
 22 | 
 23 |     const clientUpdate = {
 24 |       balance: parseFloat(balanceUpdateAmount)
 25 |     };
 26 | 
 27 |     // Update in firestore
 28 |     firestore.update({ collection: 'clients', doc: client.id }, clientUpdate);
 29 |   };
 30 | 
 31 |   // Delete client
 32 |   onDeleteClick = () => {
 33 |     const { client, firestore, history } = this.props;
 34 | 
 35 |     firestore
 36 |       .delete({ collection: 'clients', doc: client.id })
 37 |       .then(history.push('/'));
 38 |   };
 39 | 
 40 |   onChange = e => this.setState({ [e.target.name]: e.target.value });
 41 | 
 42 |   render() {
 43 |     const { client } = this.props;
 44 |     const { showBalanceUpdate, balanceUpdateAmount } = this.state;
 45 | 
 46 |     let balanceForm = '';
 47 |     // If balance form should display
 48 |     if (showBalanceUpdate) {
 49 |       balanceForm = (
 50 |         <form onSubmit={this.balanceSubmit}>
 51 |           <div className="input-group">
 52 |             <input
 53 |               type="text"
 54 |               className="form-control"
 55 |               name="balanceUpdateAmount"
 56 |               placeholder="Add New Balance"
 57 |               value={balanceUpdateAmount}
 58 |               onChange={this.onChange}
 59 |             />
 60 |             <div className="input-group-append">
 61 |               <input
 62 |                 type="submit"
 63 |                 value="Update"
 64 |                 className="btn btn-outline-dark"
 65 |               />
 66 |             </div>
 67 |           </div>
 68 |         </form>
 69 |       );
 70 |     } else {
 71 |       balanceForm = null;
 72 |     }
 73 | 
 74 |     if (client) {
 75 |       return (
 76 |         <div>
 77 |           <div className="row">
 78 |             <div className="col-md-6">
 79 |               <Link to="/" className="btn btn-link">
 80 |                 <i className="fas fa-arrow-circle-left" /> Back To Dashboard
 81 |               </Link>
 82 |             </div>
 83 |             <div className="col-md-6">
 84 |               <div className="btn-group float-right">
 85 |                 <Link to={`/client/edit/${client.id}`} className="btn btn-dark">
 86 |                   Edit
 87 |                 </Link>
 88 |                 <button onClick={this.onDeleteClick} className="btn btn-danger">
 89 |                   Delete
 90 |                 </button>
 91 |               </div>
 92 |             </div>
 93 |           </div>
 94 |           <hr />
 95 |           <div className="card">
 96 |             <h3 className="card-header">
 97 |               {client.firstName} {client.lastName}
 98 |             </h3>
 99 |             <div className="card-body">
100 |               <div className="row">
101 |                 <div className="col-md-8 col-sm-6">
102 |                   <h4>
103 |                     Client ID:{' '}
104 |                     <span className="text-secondary">{client.id}</span>
105 |                   </h4>
106 |                 </div>
107 |                 <div className="col-md-4 col-sm-6">
108 |                   <h3 className="pull-right">
109 |                     Balance:{' '}
110 |                     <span
111 |                       className={classnames({
112 |                         'text-danger': client.balance > 0,
113 |                         'text-success': client.balance === 0
114 |                       })}
115 |                     >
116 |                       ${parseFloat(client.balance).toFixed(2)}
117 |                     </span>{' '}
118 |                     <small>
119 |                       <a
120 |                         href="#!"
121 |                         onClick={() =>
122 |                           this.setState({
123 |                             showBalanceUpdate: !this.state.showBalanceUpdate
124 |                           })
125 |                         }
126 |                       >
127 |                         <i className="fas fa-pencil-alt" />
128 |                       </a>
129 |                     </small>
130 |                   </h3>
131 |                   {balanceForm}
132 |                 </div>
133 |               </div>
134 | 
135 |               <hr />
136 |               <ul className="list-group">
137 |                 <li className="list-group-item">
138 |                   Contact Email: {client.email}
139 |                 </li>
140 |                 <li className="list-group-item">
141 |                   Contact Phone: {client.phone}
142 |                 </li>
143 |               </ul>
144 |             </div>
145 |           </div>
146 |         </div>
147 |       );
148 |     } else {
149 |       return <Spinner />;
150 |     }
151 |   }
152 | }
153 | 
154 | ClientDetails.propTypes = {
155 |   firestore: PropTypes.object.isRequired
156 | };
157 | 
158 | export default compose(
159 |   firestoreConnect(props => [
160 |     { collection: 'clients', storeAs: 'client', doc: props.match.params.id }
161 |   ]),
162 |   connect(({ firestore: { ordered } }, props) => ({
163 |     client: ordered.client && ordered.client[0]
164 |   }))
165 | )(ClientDetails);
166 | 


--------------------------------------------------------------------------------