├── .gitignore
├── _config.yml
├── logo.png
├── favicon.ico
├── public
    ├── logo.png
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── .idea
    ├── dictionaries
    │   └── albiona.xml
    ├── misc.xml
    ├── vcs.xml
    ├── modules.xml
    ├── react_admin_dashboard.iml
    └── workspace.xml
├── .storybook
    ├── addons.js
    └── config.js
├── src
    ├── components
    │   ├── layout
    │   │   ├── App.test.js
    │   │   ├── Layout.js
    │   │   ├── App.js
    │   │   ├── Notification.js
    │   │   ├── NavMenu.js
    │   │   ├── NotificationContent.js
    │   │   ├── VerticalMenu.js
    │   │   ├── TopMenu.js
    │   │   └── SideMenu.js
    │   ├── pages
    │   │   ├── Button.js
    │   │   ├── Home.js
    │   │   ├── Card.js
    │   │   └── UserManagement.js
    │   ├── extension
    │   │   └── TextIcon.js
    │   └── common
    │   │   └── registerServiceWorker.js
    ├── store
    │   ├── SideMenu.js
    │   ├── SearchStore.js
    │   ├── Card.js
    │   ├── configureStore.js
    │   └── UserManagement.js
    ├── stories
    │   └── index.js
    ├── index.js
    └── styles
    │   ├── NavMenu.css
    │   └── index.css
├── manifest.json
├── CONTRIBUTING.md
├── index.html
├── README.md
├── package.json
├── asset-manifest.json
└── service-worker.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-slate


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlbionaHoti/react_admin_dashboard/HEAD/logo.png


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlbionaHoti/react_admin_dashboard/HEAD/favicon.ico


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlbionaHoti/react_admin_dashboard/HEAD/public/logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlbionaHoti/react_admin_dashboard/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.idea/dictionaries/albiona.xml:
--------------------------------------------------------------------------------
1 | <component name="ProjectDictionaryState">
2 |   <dictionary name="albiona" />
3 | </component>


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 | import '@storybook/addon-notes/register';


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="JSX" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   configure
 3 | } from '@storybook/react';
 4 | 
 5 | function loadStories() {
 6 |   import('../src/stories/index.js');
 7 |   // You can require as many stories as you need.
 8 | }
 9 | 
10 | configure(loadStories, module);


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


--------------------------------------------------------------------------------
/src/components/pages/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import {Button} from "semantic-ui-react";
 4 | 
 5 | const ClickButton = props => (
 6 |     <Button>
 7 |         Click me!
 8 |     </Button>
 9 | );
10 | 
11 | export default connect()(ClickButton);
12 | 


--------------------------------------------------------------------------------
/src/components/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import {Segment} from "semantic-ui-react";
 4 | 
 5 | const Home = props => (
 6 |   <Segment>
 7 |     <h1>React Admin Dashboard</h1>
 8 |   </Segment>
 9 | );
10 | 
11 | export default connect()(Home);
12 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/react_admin_dashboard.iml" filepath="$PROJECT_DIR$/.idea/react_admin_dashboard.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "ReactAdmin",
 3 |   "name": "ReactAdminDashboard",
 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 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "ReactAdmin",
 3 |   "name": "ReactAdminDashboard",
 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 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ### Installing / Getting started
 2 | 
 3 | ```
 4 |   git clone https://github.com/AlbionaHoti/react_admin_dashboard.git
 5 |   cd react_admin_dashboard
 6 | ```
 7 | 
 8 | To start the project run
 9 | ```
10 |   npm install
11 |   npm start
12 | ```
13 | To start storybook run
14 | 
15 | ```
16 | npm run storybook
17 | ```
18 | Feel free to add issues if you want to fix something or add new features :)
19 | 


--------------------------------------------------------------------------------
/src/store/SideMenu.js:
--------------------------------------------------------------------------------
 1 | const toggleMenu = 'TOGGLE_MENU';
 2 | const initialState = { smallMenu: false };
 3 | 
 4 | export const actionCreators = {
 5 |   toggleSideMenu: () => ({ type: toggleMenu }),
 6 | };
 7 | 
 8 | export const reducer = (state, action) => {
 9 |   state = state || initialState;
10 | 
11 |   if (action.type === toggleMenu) {
12 |     return { ...state, smallMenu: !state.smallMenu};
13 |   }
14 | 
15 |   return state;
16 | };
17 | 


--------------------------------------------------------------------------------
/src/components/layout/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import SideMenu from "../layout/SideMenu";
 3 | import TopMenu from "../layout/TopMenu";
 4 | 
 5 | export default props => (
 6 |     <div className="grid">
 7 |         <div className="menu">
 8 |             <TopMenu/>
 9 |         </div>
10 |         <div className="main-content">
11 |             <SideMenu>
12 |                 {props.children}
13 |             </SideMenu>
14 |         </div>
15 |     </div>
16 | );
17 | 


--------------------------------------------------------------------------------
/src/stories/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { action } from '@storybook/addon-actions';
 4 | import Button from '../components/';
 5 | 
 6 | storiesOf('Button', module)
 7 |   .add('with text', () => (
 8 |     <Button onClick={action('clicked')}>Hello Button</Button>
 9 |   ))
10 |   .add('with some emoji', () => (
11 |     <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
12 |   ));   


--------------------------------------------------------------------------------
/src/store/SearchStore.js:
--------------------------------------------------------------------------------
 1 | const SEARCH_BY_TEXT = 'SEARCH_BY_TEXT';
 2 | const initialState = { text: '' };
 3 | 
 4 | export const actionCreators = {
 5 |     search: (text) => async (dispatch, getState) => {
 6 |       dispatch({ type: SEARCH_BY_TEXT, text: text });
 7 |   },
 8 | };
 9 | 
10 | export const reducer = (state, action) => {
11 |   state = state || initialState;
12 | 
13 |   if (action.type === SEARCH_BY_TEXT) {
14 |     return { ...state, text: action.text };
15 |   }
16 | 
17 |   return state;
18 | };
19 | 


--------------------------------------------------------------------------------
/src/components/layout/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Route } from 'react-router'
 3 | import Layout from '.././layout/Layout'
 4 | import Home from '.././pages/Home'
 5 | import UserManagement from '.././pages/UserManagement'
 6 | import CardForm from '.././pages/Card'
 7 | 
 8 | export default () => (
 9 |   <Layout>
10 |     <Route exact path="/" component={Home} />
11 |     <Route path="/userManagement" component={UserManagement} />
12 |     <Route path="/card" component={CardForm} />
13 |   </Layout>
14 | );
15 | 


--------------------------------------------------------------------------------
/.idea/react_admin_dashboard.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/src/components/layout/Notification.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Popup, Icon } from "semantic-ui-react";
 3 | import NotificationContent from "./NotificationContent";
 4 | 
 5 | export default class Notification extends Component {
 6 |   state = {};
 7 | 
 8 |   render() {
 9 |     return (
10 |       <Popup
11 |         hoverable
12 |         trigger={<Icon size="large" name="mail outline" color="grey" />}
13 |         position='bottom right'
14 |         verticalOffset={18}
15 |         size="small"
16 |         
17 |       >
18 |         <NotificationContent />
19 |         
20 |       </Popup>
21 |     );
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/store/Card.js:
--------------------------------------------------------------------------------
 1 | const incrementCountType = 'INCREMENT_COUNT';
 2 | const decrementCountType = 'DECREMENT_COUNT';
 3 | const initialState = { count: 0 };
 4 | 
 5 | export const actionCreators = {
 6 |   increment: () => ({ type: incrementCountType }),
 7 |   decrement: () => ({ type: decrementCountType })
 8 | };
 9 | 
10 | export const reducer = (state, action) => {
11 |   state = state || initialState;
12 | 
13 |   if (action.type === incrementCountType) {
14 |     return { ...state, count: state.count + 1 };
15 |   }
16 | 
17 |   if (action.type === decrementCountType) {
18 |     return { ...state, count: state.count - 1 };
19 |   }
20 | 
21 |   return state;
22 | };
23 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><base href="/react_admin_dashboard/"/><link rel="manifest" href="/react_admin_dashboard/manifest.json"><link rel="shortcut icon" href="/react_admin_dashboard/favicon.ico"><title>React Admin UI</title><link href="/react_admin_dashboard/static/css/main.8b61b94c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/react_admin_dashboard/static/js/main.511cd0c4.js"></script></body></html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Admin Dashboard
 2 | Admin Dashboard build with ReactJs and React Semantic UI. Which enables jump starting a new
 3 | project with a prepared layout and React Semantic UI provides access to many useful [components](https://react.semantic-ui.com/).
 4 | 
 5 | ## Installing / Getting started
 6 | 
 7 | ```shell
 8 | git clone https://github.com/AlbionaHoti/react_admin_dashboard.git
 9 | cd react_admin_dashboard
10 | ```
11 | ## To start the project run
12 | ```
13 | npm install
14 | npm start
15 | ```
16 | 
17 | ## To start storybook run
18 | ```
19 | npm run storybook
20 | ```
21 | 
22 | [Project Demo](https://albionahoti.github.io/react_admin_dashboard/) 
23 | 
24 | Author: [Albiona Hoti](https://albionahoti.github.io)
25 | 
26 | ![alt text](https://i.imgur.com/rTXO96K.png)
27 | 
28 | ## Demo Details
29 | 
30 | ![alt text](https://i.imgur.com/KzYwvL5.png)
31 | 


--------------------------------------------------------------------------------
/src/components/extension/TextIcon.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import {Icon} from "semantic-ui-react";
 4 | 
 5 | export default class TextIcon extends Component {
 6 | 
 7 |     style = {
 8 |         alignSelf: 'center',
 9 |         paddingLeft: '4px'
10 |     };
11 | 
12 |     static propTypes = {
13 |         name: PropTypes.string.isRequired,
14 |         hideText: PropTypes.bool.isRequired,
15 |         color: PropTypes.string
16 |     };
17 | 
18 |     render() {
19 |         return (
20 |             <div style={{whiteSpace: 'nowrap', display: 'inline-flex'}}>
21 |                 <Icon size='large'
22 |                       color={this.props.color}
23 |                       name={this.props.name}/>
24 |                 <div style={this.style} hidden={this.props.hideText}>
25 |                     {this.props.children}
26 |                 </div>
27 |             </div>
28 |         );
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/layout/NavMenu.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
 4 | import { LinkContainer } from 'react-router-bootstrap';
 5 | import './NavMenu.css';
 6 | 
 7 | export default props => (
 8 |   <Navbar inverse fixedTop fluid collapseOnSelect>
 9 |     <Navbar.Header>
10 |       <Navbar.Brand>
11 |         <Link to={'/'}>React Admin Dashboard</Link>
12 |       </Navbar.Brand>
13 |       <Navbar.Toggle />
14 |     </Navbar.Header>
15 |     <Navbar.Collapse>
16 |       <Nav>
17 |         <LinkContainer to={'/'} exact>
18 |           <NavItem>
19 |             <Glyphicon glyph='home' /> Home
20 |           </NavItem>
21 |         </LinkContainer>
22 |         <LinkContainer to={'/card'}>
23 |           <NavItem>
24 |             <Glyphicon glyph='education' /> Card
25 |           </NavItem>
26 |         </LinkContainer>
27 |       </Nav>
28 |     </Navbar.Collapse>
29 |   </Navbar>
30 | );
31 | 


--------------------------------------------------------------------------------
/src/components/pages/Card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { bindActionCreators } from 'redux'
 3 | import { connect } from 'react-redux'
 4 | import { actionCreators } from '../../store/Card'
 5 | import 'semantic-ui-css/semantic.min.css'
 6 | import { Card, Icon, Image } from 'semantic-ui-react'
 7 | 
 8 | 
 9 | const CardForm = props => (
10 |     <Card>
11 |         <Image src='https://semantic-ui.com/images/avatar/large/elliot.jpg' />
12 |         <Card.Content>
13 |             <Card.Header>Matthew</Card.Header>
14 |             <Card.Meta>
15 |                 <span className='date'>Joined in 2015</span>
16 |             </Card.Meta>
17 |             <Card.Description>Matthew is a musician living in Nashville.</Card.Description>
18 |         </Card.Content>
19 |         <Card.Content extra>
20 |             <a href="#">
21 |                 <Icon name='user' />
22 |                 22 Friends
23 |              </a>
24 |         </Card.Content>
25 |     </Card>
26 | );
27 | 
28 | export default connect(
29 |     state => state.card,
30 |     dispatch => bindActionCreators(actionCreators, dispatch)
31 | )(CardForm)
32 | 


--------------------------------------------------------------------------------
/src/components/layout/NotificationContent.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | 
 3 | import {
 4 |   Button,
 5 |   Grid,
 6 |   Header,
 7 |   Segment
 8 | } from "semantic-ui-react";
 9 | 
10 | export default class NotificationContent extends Component {
11 |   state = {};
12 |   render() {
13 |     const patients = [
14 |       {
15 |         name: "Elliot Fu",
16 |         bio: "Elliot has been a member since July 2012",
17 |         button: "More Info"
18 |       },
19 |       {
20 |         name: "James Frank",
21 |         bio: "James has been a member since Sep 2011",
22 |         button: "More Info"
23 |       },
24 |       {
25 |         name: "Algo Hemil",
26 |         bio: "Algo has been a member since Nov 2015",
27 |         button: "More Info"
28 |       }
29 |     ];
30 | 
31 |     return (
32 |       <Grid.Column textAlign='center'>
33 |         {patients.map(patient => (
34 | 
35 |           <Segment>
36 |             <Header as='h4'>Basic Plan</Header>
37 |             <p>
38 |               {patient.bio}
39 |             </p>
40 |             <Button>{patient.button}</Button>
41 |           </Segment>
42 |         ))}
43 |       </Grid.Column>
44 |     );
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import 'bootstrap/dist/css/bootstrap.css'
 2 | import 'bootstrap/dist/css/bootstrap-theme.css'
 3 | import './styles/index.css'
 4 | import React from 'react'
 5 | import ReactDOM from 'react-dom'
 6 | import { Provider } from 'react-redux'
 7 | import { ConnectedRouter } from 'react-router-redux'
 8 | import { createBrowserHistory } from 'history'
 9 | import configureStore from './store/configureStore'
10 | import App from './components/layout/App'
11 | import registerServiceWroker from './components/common/registerServiceWorker'
12 | 
13 | // Create browser history to use in the Redux store
14 | const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')
15 | const history = createBrowserHistory({ basename: baseUrl })
16 | 
17 | // Get the application-wide store instance, prepopulating with state from the server where available.
18 | const initialState = window.initialReduxState
19 | const store = configureStore(history, initialState)
20 | 
21 | const rootElement = document.getElementById('root')
22 | 
23 | ReactDOM.render(
24 |   <Provider store={store}>
25 |     <ConnectedRouter history={history}>
26 |       <App />
27 |     </ConnectedRouter>
28 |   </Provider>,
29 |   rootElement)
30 | 
31 | registerServiceWroker()
32 | 


--------------------------------------------------------------------------------
/src/store/configureStore.js:
--------------------------------------------------------------------------------
 1 | import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
 2 | import thunk from 'redux-thunk';
 3 | import { routerReducer, routerMiddleware } from 'react-router-redux';
 4 | import * as Card from './Card';
 5 | import * as SideMenu from "./SideMenu";
 6 | import * as UserManagement from "./UserManagement";
 7 | import * as SearchStore from "./SearchStore";
 8 | 
 9 | export default function configureStore(history, initialState) {
10 |   const reducers = {
11 |     card: Card.reducer,
12 |     sideMenu: SideMenu.reducer,
13 |     userManagement: UserManagement.reducer,
14 |     searchStore: SearchStore.reducer,
15 |   };
16 | 
17 |   const middleware = [
18 |     thunk,
19 |     routerMiddleware(history)
20 |   ];
21 | 
22 |   // In development, use the browser's Redux dev tools extension if installed
23 |   const enhancers = [];
24 |   const isDevelopment = process.env.NODE_ENV === 'development';
25 |   if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {
26 |     enhancers.push(window.devToolsExtension());
27 |   }
28 | 
29 |   const rootReducer = combineReducers({
30 |     ...reducers,
31 |     routing: routerReducer
32 |   });
33 | 
34 |   return createStore(
35 |     rootReducer,
36 |     initialState,
37 |     compose(applyMiddleware(...middleware), ...enhancers)
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/src/styles/NavMenu.css:
--------------------------------------------------------------------------------
 1 | .navbar li .glyphicon {
 2 |     margin-right: 10px;
 3 | }
 4 | 
 5 | /* Highlighting rules for nav menu items */
 6 | .navbar .navbar-nav .active a,
 7 | .navbar .navbar-nav .active a:hover,
 8 | .navbar .navbar-nav .active a:focus {
 9 |     background-image: none;
10 |     background-color: #4189C7;
11 |     color: white;
12 | }
13 | 
14 | @media (min-width: 768px) {
15 |     /* On large screens, convert the nav menu to a vertical sidebar */
16 |     .navbar {
17 |         height: 100%;
18 |         width: calc(25% - 20px);
19 |     }
20 |     .navbar {
21 |         border-radius: 0;
22 |         border-width: 0;
23 |         height: 100%;
24 |     }
25 |     .navbar-header {
26 |         float: none;
27 |     }
28 |     .navbar .navbar-collapse {
29 |         border-top: 1px solid #444;
30 |         padding: 0;
31 |     }
32 |     .navbar .container-fluid {
33 |         padding: 0;
34 |         margin: 0;
35 |     }
36 |     .navbar .container-fluid .navbar-brand {
37 |         margin: 0;
38 |     }
39 |     .navbar ul {
40 |         float: none;
41 |     }
42 |     .navbar li {
43 |         float: none;
44 |         font-size: 15px;
45 |         margin: 6px;
46 |     }
47 |     .navbar li a {
48 |         padding: 10px 16px;
49 |         border-radius: 4px;
50 |     }
51 |     .navbar a {
52 |         /* If a menu item's text is too long, truncate it */
53 |         width: 100%;
54 |         white-space: nowrap;
55 |         overflow: hidden;
56 |         text-overflow: ellipsis;
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "homepage": "http://AlbionaHoti/react_admin_dashboard",
 3 |   "name": "ReactAdminDashboard",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "bootstrap": "^3.3.7",
 8 |     "file-loader": "^1.1.9",
 9 |     "informed": "^1.10.4",
10 |     "prop-types": "latest",
11 |     "react": "^16.4.2",
12 |     "react-bootstrap": "^0.31.5",
13 |     "react-dom": "^16.4.2",
14 |     "react-redux": "^5.0.6",
15 |     "react-router-bootstrap": "^0.24.4",
16 |     "react-router-dom": "^4.2.2",
17 |     "react-router-redux": "^5.0.0-alpha.8",
18 |     "react-scripts": "^2.1.8",
19 |     "redux": "^3.7.2",
20 |     "redux-thunk": "^2.2.0",
21 |     "rimraf": "^2.6.2",
22 |     "semantic-ui-css": "^2.3.1",
23 |     "semantic-ui-react": "^0.78.3",
24 |     "url-loader": "^0.6.2"
25 |   },
26 |   "scripts": {
27 |     "start": "rimraf ./build && react-scripts start",
28 |     "build": "react-scripts build",
29 |     "test": "react-scripts test --env=jsdom",
30 |     "eject": "react-scripts eject",
31 |     "predeploy": "npm run build",
32 |     "deploy": "gh-pages -d build",
33 |     "storybook": "start-storybook -p 9001 -c .storybook"
34 |   },
35 |   "devDependencies": {
36 |     "@storybook/addon-actions": "^3.4.8",
37 |     "@storybook/addon-links": "^3.4.8",
38 |     "@storybook/addon-notes": "^3.4.8",
39 |     "@storybook/addons": "^3.4.8",
40 |     "@storybook/react": "^5.0.6",
41 |     "babel-core": "^6.26.3",
42 |     "gh-pages": "^1.2.0"
43 |   },
44 |   "browserslist": [
45 |     ">0.2%",
46 |     "not dead",
47 |     "not ie <= 11",
48 |     "not op_mini all"
49 |   ]
50 | }
51 | 


--------------------------------------------------------------------------------
/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 |   <base href="%PUBLIC_URL%/" />
 9 |   <!--
10 |       manifest.json provides metadata used when your web app is added to the
11 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
12 |     -->
13 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
14 |   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
15 |   <!--
16 |       Notice the use of %PUBLIC_URL% in the tags above.
17 |       It will be replaced with the URL of the `public` folder during the build.
18 |       Only files inside the `public` folder can be referenced from the HTML.
19 | 
20 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21 |       work correctly both with client-side routing and a non-root public URL.
22 |       Learn how to configure a non-root public URL by running `npm run build`.
23 |     -->
24 |   <title>React Admin UI</title>
25 | </head>
26 | 
27 | <body>
28 |   <noscript>
29 |       You need to enable JavaScript to run this app.
30 |     </noscript>
31 |   <div id="root"></div>
32 |   <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
 1 | @media (max-width: 767px) {
 2 |     /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
 3 |     body {
 4 |         padding-top: 50px;
 5 |     }
 6 | }
 7 | :root {
 8 |     --top-menu-height: 4em;
 9 | }
10 | 
11 | .top-menu {
12 |     height: var(--top-menu-height);
13 | }
14 | .grid {
15 |     width: 100%;
16 |     display: grid;
17 |     grid: var(--top-menu-height) / 1fr;
18 |     grid-template-areas:  "menu"
19 |                           "maincontent";
20 |     min-height: 100vh;
21 | }
22 | 
23 | .menu {
24 |     grid-area: menu;
25 |     z-index: 100;
26 | }
27 | 
28 | .main-content {
29 |     grid-area: maincontent;
30 |     background-color: #f9fafb;
31 | }
32 | 
33 | .parent {
34 |     display: inline-flex;
35 | }
36 | 
37 | .side {
38 |     transition: width 0.3s;
39 |     width: 14em !important;
40 |     overflow: hidden;
41 |     padding-top: var(--top-menu-height);
42 |     z-index: 99;
43 | }
44 | 
45 | .small-side {
46 |     width: 4em !important;
47 |     flex-basis: 4em;
48 | }
49 | 
50 | .content {
51 |     position: absolute;
52 |     right: 0;
53 |     transition: all 0.3s;
54 |     padding: 10px;
55 |     width: calc(100% - 14em);
56 | }
57 | 
58 | .small-content {
59 |     padding: 10px;
60 |     width: calc(100% - 4em);
61 | }
62 | 
63 | .logo-space-menu-item {
64 |     width: 14em;
65 | }
66 | 
67 | .display-inline {
68 |     display: inline-flex;
69 |     align-items: center;
70 | }
71 | 
72 | .logo-space {
73 |     font-family: "Roboto Light", serif;
74 |     font-size: 24px;
75 |     margin: 0 auto;
76 | 
77 | }
78 | 
79 | .logo-space img, .display-inline img {
80 |     margin-right: 8px;
81 | }
82 | 
83 | .no-border::before {
84 |     display: none;
85 | }
86 | .top-menu i.icon
87 | {
88 |     margin: 0 !important;
89 | }
90 | 
91 | 
92 | .drop-left-padding{
93 |     padding-left: 0 !important;
94 | }
95 | 
96 | .label-on-corner {
97 |     top: 0.8em !important;
98 |     left: 78% !important;
99 | }


--------------------------------------------------------------------------------
/asset-manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main.css": "static/css/main.8b61b94c.css",
 3 |   "main.css.map": "static/css/main.8b61b94c.css.map",
 4 |   "main.js": "static/js/main.511cd0c4.js",
 5 |   "main.js.map": "static/js/main.511cd0c4.js.map",
 6 |   "static/media/brand-icons.eot": "static/media/brand-icons.13db00b7.eot",
 7 |   "static/media/brand-icons.svg": "static/media/brand-icons.a1a749e8.svg",
 8 |   "static/media/brand-icons.ttf": "static/media/brand-icons.c5ebe0b3.ttf",
 9 |   "static/media/brand-icons.woff": "static/media/brand-icons.a046592b.woff",
10 |   "static/media/brand-icons.woff2": "static/media/brand-icons.e8c322de.woff2",
11 |   "static/media/flags.png": "static/media/flags.9c74e172.png",
12 |   "static/media/glyphicons-halflings-regular.eot": "static/media/glyphicons-halflings-regular.f4769f9b.eot",
13 |   "static/media/glyphicons-halflings-regular.svg": "static/media/glyphicons-halflings-regular.89889688.svg",
14 |   "static/media/glyphicons-halflings-regular.ttf": "static/media/glyphicons-halflings-regular.e18bbf61.ttf",
15 |   "static/media/glyphicons-halflings-regular.woff": "static/media/glyphicons-halflings-regular.fa277232.woff",
16 |   "static/media/glyphicons-halflings-regular.woff2": "static/media/glyphicons-halflings-regular.448c34a5.woff2",
17 |   "static/media/icons.eot": "static/media/icons.8e3c7f55.eot",
18 |   "static/media/icons.svg": "static/media/icons.962a1bf3.svg",
19 |   "static/media/icons.ttf": "static/media/icons.b87b9ba5.ttf",
20 |   "static/media/icons.woff": "static/media/icons.faff9214.woff",
21 |   "static/media/icons.woff2": "static/media/icons.0ab54153.woff2",
22 |   "static/media/outline-icons.eot": "static/media/outline-icons.701ae6ab.eot",
23 |   "static/media/outline-icons.svg": "static/media/outline-icons.82f60bd0.svg",
24 |   "static/media/outline-icons.ttf": "static/media/outline-icons.ad97afd3.ttf",
25 |   "static/media/outline-icons.woff": "static/media/outline-icons.ef60a4f6.woff",
26 |   "static/media/outline-icons.woff2": "static/media/outline-icons.cd6c777f.woff2"
27 | }


--------------------------------------------------------------------------------
/src/store/UserManagement.js:
--------------------------------------------------------------------------------
 1 | const GET_ALL_USERS_ACTION = "GET_ALL_USERS";
 2 | const DELETE_USER_ACTION = "DELETE_USER";
 3 | const UPDATE_USER_ACTION = "UPDATE_USER";
 4 | const ADD_USER_ACTION = "ADD_USER";
 5 | 
 6 | const initialState = {
 7 |   users: [
 8 |     {
 9 |       name: "Albiona",
10 |       email: "alb@gmail.com",
11 |       role: "Admin",
12 |       caloryLimit: 123
13 |     },
14 |     {
15 |       name: "Albiona",
16 |       email: "alb@gmail.com",
17 |       role: "Admin",
18 |       caloryLimit: 123
19 |     },
20 |     {
21 |       name: "Albiona",
22 |       email: "alb@gmail.com",
23 |       role: "Admin",
24 |       caloryLimit: 123
25 |     }
26 |   ]
27 | };
28 | 
29 | export const actionCreators = {
30 |   getUsers: () => async (dispatch, getState) => {
31 |     // dispatch({ type: GET_ALL_USERS_ACTION, users: json });
32 |   },
33 |   removeUser: id => async (dispatch, getState) => {
34 |     dispatch({
35 |       type: DELETE_USER_ACTION,
36 |       users: getState().userManagement.users.filter(m => m.id !== id)
37 |     });
38 |   },
39 |   editUser: user => async (dispatch, getState) => {
40 |     dispatch({
41 |       type: UPDATE_USER_ACTION,
42 |       users: getState().userManagement.users.map(
43 |         m => (m.id === user.id ? user : m)
44 |       )
45 |     });
46 |   },
47 |   addUser: user => async (dispatch, getState) => {
48 |     dispatch({
49 |       type: ADD_USER_ACTION,
50 |       user: Object.assign({}, user, { id: Math.random() })
51 |     });
52 |   }
53 | };
54 | 
55 | export const reducer = (state, action) => {
56 |   state = state || initialState;
57 | 
58 |   if (action.type === GET_ALL_USERS_ACTION) {
59 |     return { ...state, users: action.users };
60 |   }
61 |   if (action.type === DELETE_USER_ACTION) {
62 |     return { ...state, users: action.users };
63 |   }
64 |   if (action.type === UPDATE_USER_ACTION) {
65 |     return { ...state, users: action.users };
66 |   }
67 |   if (action.type === ADD_USER_ACTION) {
68 |     return { ...state, users: [...state.users, action.user] };
69 |   }
70 | 
71 |   return state;
72 | };
73 | 


--------------------------------------------------------------------------------
/src/components/layout/VerticalMenu.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Icon, Menu, Rail } from "semantic-ui-react";
 3 | import { NavLink } from "react-router-dom";
 4 | 
 5 | export default class VerticalMenu extends Component {
 6 |   state = { activeItem: "dashboard" };
 7 |   handleItemClick = (e, { name }) => this.setState({ activeItem: name });
 8 | 
 9 |   render() {
10 |     const { activeItem } = this.state;
11 | 
12 |     return (
13 |       <Menu fluid inverted vertical>
14 |         <NavLink to={"/appointments"}>
15 |           <Menu.Item
16 |             name="dashboard"
17 |             active={activeItem === "dashboard"}
18 |             onClick={this.handleItemClick}
19 |           >
20 |             <Rail position="left">
21 |               <Icon color="teal" name="home" />
22 |             </Rail>
23 |             Dashboard
24 |           </Menu.Item>
25 |         </NavLink>
26 | 
27 |         <NavLink to={"/appointments"} exact>
28 |           <Menu.Item
29 |             name="appointments"
30 |             active={activeItem === "appointments"}
31 |             onClick={this.handleItemClick}
32 |           >
33 |             <Icon name="calendar" />
34 |             Appointments
35 |           </Menu.Item>
36 |         </NavLink>
37 | 
38 |         <NavLink to={"/patients"} exact>
39 |           <Menu.Item
40 |             name="patients"
41 |             active={activeItem === "patients"}
42 |             onClick={this.handleItemClick}
43 |           >
44 |             <Icon name="users" />
45 |             Patients
46 |           </Menu.Item>
47 |         </NavLink>
48 | 
49 |         <NavLink to={"/card"} exact>
50 |           <Menu.Item
51 |             name="card"
52 |             active={activeItem === "card"}
53 |             onClick={this.handleItemClick}
54 |           >
55 |             Card
56 |           </Menu.Item>
57 |         </NavLink>
58 | 
59 |         {/* <NavLink to={"/layout"} exact>
60 |           <Menu.Item
61 |             name="layout"
62 |             active={activeItem === "layout"}
63 |             onClick={this.handleItemClick}
64 |           >
65 |             <Icon name="home" />
66 |             Layout
67 |           </Menu.Item>
68 |         </NavLink> */}
69 |       </Menu>
70 |     );
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/components/layout/TopMenu.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import {Icon,
 3 |         Image,
 4 |         Input, 
 5 |         Label, 
 6 |         Menu,  
 7 |        } from 'semantic-ui-react'
 8 | import {actionCreators as sideAction} from "../../store/SideMenu";
 9 | import {actionCreators as searchAction} from "../../store/SearchStore";
10 | import {bindActionCreators} from "redux";
11 | import { connect } from 'react-redux';
12 | import Notification from './Notification';
13 | 
14 | class TopMenu extends Component {
15 |   state = {};
16 | 
17 |   handleItemClick = (e, { name }) => this.setState({ activeItem: name });
18 | 
19 |   doSearch(event) {
20 |       this.props.actions.search(event.target.value);  
21 |   }
22 | 
23 |   render() {
24 |     return (
25 |       <Menu fixed="top" className="top-menu">
26 |         <Menu.Item className="logo-space-menu-item">
27 |           <div className="display-inline logo-space">
28 |             <Image src="./logo.png" />
29 |             <p>React Dashboard</p>
30 |           </div>
31 |         </Menu.Item>
32 | 
33 |         <Menu.Item
34 |           className="no-border"
35 |           onClick={this.props.actions.toggleSideMenu}
36 |         >
37 |           <Icon name="bars" />
38 |         </Menu.Item>
39 | 
40 |         <Menu.Item className="no-border drop-left-padding">
41 |           <Input
42 |             className="icon"
43 |             icon="search"
44 |             placeholder="Search..."
45 |             onChange={this.doSearch.bind(this)}
46 |           />
47 |         </Menu.Item>
48 | 
49 |         <Menu.Menu position="right">
50 |           <Menu.Item className="no-border" position="right">
51 |             <Notification />
52 |             <Label
53 |               className="label-on-corner"
54 |               color="teal"
55 |               size={"mini"}
56 |               floating
57 |               circular
58 |             >
59 |               22
60 |             </Label>
61 |           </Menu.Item>
62 |           <Menu.Item className="no-border" position="right">
63 |             <div className="display-inline">
64 |               <Image
65 |                 circular
66 |                 size={"mini"}
67 |                 src="https://react.semantic-ui.com/images/avatar/large/jenny.jpg"
68 |               />
69 |               Albiona
70 |             </div>
71 |           </Menu.Item>
72 |         </Menu.Menu>
73 |       </Menu>
74 |     );
75 |   }
76 | }
77 | 
78 | export default connect(
79 |     state => state.sideMenu,
80 |      dispatch => {
81 |         return {
82 |             actions: bindActionCreators(Object.assign({}, sideAction, searchAction), dispatch)
83 |         }}
84 | )(TopMenu);
85 | 


--------------------------------------------------------------------------------
/src/components/layout/SideMenu.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import {Menu} from 'semantic-ui-react'
 3 | import {Link} from "react-router-dom";
 4 | import TextIcon from "../extension/TextIcon";
 5 | import {bindActionCreators} from "redux";
 6 | import {connect} from "react-redux";
 7 | import { actionCreators } from "../../store/SideMenu";
 8 | 
 9 | class SideMenu extends Component {
10 |     state = {
11 |         activeItem: 'dashboard',
12 |     };
13 | 
14 |     handleItemClick = (e, {name}) => this.setState({activeItem: name});
15 |     changeSize = () => this.setState({smallSidebar: !this.props.smallMenu});
16 | 
17 |     getMenu() {
18 |         const {activeItem} = this.state;
19 |         return (
20 |             <Menu fixed='left' borderless className={(this.props.smallMenu ? 'small-side' : '') + ' side'} vertical>
21 |                 <Menu.Item as={Link} to={'/'} name='dashboard' active={activeItem === 'dashboard'}
22 |                            onClick={this.handleItemClick}>
23 |                     <TextIcon hideText={this.props.smallMenu} color='teal' name='home'>
24 |                         Dashboard
25 |                     </TextIcon>
26 |                 </Menu.Item>
27 | 
28 |                 <Menu.Item as={Link} to={'/appointments'} name='appointments'
29 |                            active={activeItem === 'appointments'}
30 |                            onClick={this.handleItemClick}>
31 |                     <TextIcon hideText={this.props.smallMenu} name='calendar'>
32 |                         Appointments
33 |                     </TextIcon>
34 |                 </Menu.Item>
35 | 
36 |                 <Menu.Item
37 |                     as={Link} to={'/userManagement'}
38 |                     name='userManagement' 
39 |                     active={activeItem === 'userManagement'}
40 |                     onClick={this.handleItemClick}
41 |                     >
42 |                     <TextIcon hideText={this.props.smallMenu} name='users'>
43 |                         Patients
44 |                     </TextIcon>
45 |                 </Menu.Item>
46 | 
47 |                 <Menu.Item as={Link} to={'/card'} name='card' active={activeItem === 'card'}
48 |                            onClick={this.handleItemClick}>
49 | 
50 |                     <TextIcon hideText={this.props.smallMenu} name='time'>
51 |                         Card
52 |                     </TextIcon>
53 |                 </Menu.Item>
54 | 
55 |                 {/* <Menu.Item as={Link} to={'/layout'} name='layout' active={activeItem === 'layout'}
56 |                            onClick={this.handleItemClick}>
57 |                     <TextIcon hideText={this.props.smallMenu} name='calendar'>
58 |                         Layout
59 |                     </TextIcon>
60 | 
61 |                 </Menu.Item> */}
62 |             </Menu>
63 |         )
64 |     }
65 | 
66 |     render() {
67 |         return (
68 |             <div className='parent'>
69 |                 <div className={(this.props.smallMenu ? 'small-side ' : '') + 'side'}>
70 |                     {this.getMenu()}
71 |                 </div>
72 |                 <div className={(this.props.smallMenu ? 'small-content ' : '') + 'content'}>
73 |                     {this.props.children}
74 |                 </div>
75 |             </div>
76 |         )
77 |     }
78 | }
79 | 
80 | export default connect(
81 |     state => state.sideMenu,
82 |     dispatch => bindActionCreators(actionCreators, dispatch)
83 | )(SideMenu);
84 | 


--------------------------------------------------------------------------------
/src/components/common/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 |       } else {
 39 |         // Is not local host. Just register service worker
 40 |         registerValidSW(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/service-worker.js:
--------------------------------------------------------------------------------
1 | "use strict";var precacheConfig=[["/react_admin_dashboard/index.html","eb685f747f816197c324765c8c27e331"],["/react_admin_dashboard/static/css/main.8b61b94c.css","760997b04eb646c970ea09376b99e04a"],["/react_admin_dashboard/static/js/main.511cd0c4.js","abb50e667c21f3144abaa930898195ee"],["/react_admin_dashboard/static/media/brand-icons.13db00b7.eot","13db00b7a34fee4d819ab7f9838cc428"],["/react_admin_dashboard/static/media/brand-icons.a046592b.woff","a046592bac8f2fd96e994733faf3858c"],["/react_admin_dashboard/static/media/brand-icons.a1a749e8.svg","a1a749e89f578a49306ec2b055c073da"],["/react_admin_dashboard/static/media/brand-icons.c5ebe0b3.ttf","c5ebe0b32dc1b5cc449a76c4204d13bb"],["/react_admin_dashboard/static/media/brand-icons.e8c322de.woff2","e8c322de9658cbeb8a774b6624167c2c"],["/react_admin_dashboard/static/media/flags.9c74e172.png","9c74e172f87984c48ddf5c8108cabe67"],["/react_admin_dashboard/static/media/glyphicons-halflings-regular.448c34a5.woff2","448c34a56d699c29117adc64c43affeb"],["/react_admin_dashboard/static/media/glyphicons-halflings-regular.89889688.svg","89889688147bd7575d6327160d64e760"],["/react_admin_dashboard/static/media/glyphicons-halflings-regular.e18bbf61.ttf","e18bbf611f2a2e43afc071aa2f4e1512"],["/react_admin_dashboard/static/media/glyphicons-halflings-regular.f4769f9b.eot","f4769f9bdb7466be65088239c12046d1"],["/react_admin_dashboard/static/media/glyphicons-halflings-regular.fa277232.woff","fa2772327f55d8198301fdb8bcfc8158"],["/react_admin_dashboard/static/media/icons.0ab54153.woff2","0ab54153eeeca0ce03978cc463b257f7"],["/react_admin_dashboard/static/media/icons.8e3c7f55.eot","8e3c7f5520f5ae906c6cf6d7f3ddcd19"],["/react_admin_dashboard/static/media/icons.962a1bf3.svg","962a1bf31c081691065fe333d9fa8105"],["/react_admin_dashboard/static/media/icons.b87b9ba5.ttf","b87b9ba532ace76ae9f6edfe9f72ded2"],["/react_admin_dashboard/static/media/icons.faff9214.woff","faff92145777a3cbaf8e7367b4807987"],["/react_admin_dashboard/static/media/outline-icons.701ae6ab.eot","701ae6abd4719e9c2ada3535a497b341"],["/react_admin_dashboard/static/media/outline-icons.82f60bd0.svg","82f60bd0b94a1ed68b1e6e309ce2e8c3"],["/react_admin_dashboard/static/media/outline-icons.ad97afd3.ttf","ad97afd3337e8cda302d10ff5a4026b8"],["/react_admin_dashboard/static/media/outline-icons.cd6c777f.woff2","cd6c777f1945164224dee082abaea03a"],["/react_admin_dashboard/static/media/outline-icons.ef60a4f6.woff","ef60a4f6c25ef7f39f2d25a748dbecfe"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,a){var t=new URL(e);return"/"===t.pathname.slice(-1)&&(t.pathname+=a),t.toString()},cleanResponse=function(e){if(!e.redirected)return Promise.resolve(e);return("body"in e?Promise.resolve(e.body):e.blob()).then(function(a){return new Response(a,{headers:e.headers,status:e.status,statusText:e.statusText})})},createCacheKey=function(e,a,t,n){var r=new URL(e);return n&&r.pathname.match(n)||(r.search+=(r.search?"&":"")+encodeURIComponent(a)+"="+encodeURIComponent(t)),r.toString()},isPathWhitelisted=function(e,a){if(0===e.length)return!0;var t=new URL(a).pathname;return e.some(function(e){return t.match(e)})},stripIgnoredUrlParameters=function(e,a){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return a.every(function(a){return!a.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var a=e[0],t=e[1],n=new URL(a,self.location),r=createCacheKey(n,hashParamName,t,/\.\w{8}\./);return[n.toString(),r]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(a){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!a.has(t)){var n=new Request(t,{credentials:"same-origin"});return fetch(n).then(function(a){if(!a.ok)throw new Error("Request for "+t+" returned a response with status "+a.status);return cleanResponse(a).then(function(a){return e.put(t,a)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var a=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(t){return Promise.all(t.map(function(t){if(!a.has(t.url))return e.delete(t)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var a,t=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),n="index.html";(a=urlsToCacheKeys.has(t))||(t=addDirectoryIndex(t,n),a=urlsToCacheKeys.has(t));var r="/react_admin_dashboard/index.html";!a&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(t=new URL(r,self.location).toString(),a=urlsToCacheKeys.has(t)),a&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(t)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(a){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,a),fetch(e.request)}))}});


--------------------------------------------------------------------------------
/src/components/pages/UserManagement.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import {
  3 |   Button,
  4 |   Form,
  5 |   Header,
  6 |   Icon,
  7 |   Input,
  8 |   Message,
  9 |   Segment,
 10 |   Table
 11 | } from "semantic-ui-react";
 12 | import { bindActionCreators } from "redux";
 13 | import { actionCreators } from "../../store/UserManagement";
 14 | import { connect } from "react-redux";
 15 | 
 16 | class UserManagement extends Component {
 17 |   constructor(props) {
 18 |     super(props);
 19 |     this.state = {
 20 |       newUser: {
 21 |         name: "",
 22 |         email: "",
 23 |         role: "",
 24 |         caloryLimit: 0
 25 |       }
 26 |     };
 27 |     this.handleSubmit = this.handleSubmit.bind(this);
 28 |   }
 29 | 
 30 |   getTableData = props => {
 31 |     return props.state.userManagement.users.filter(user => {
 32 |         return user.name.includes(props.state.searchStore.text)
 33 |     }).map(user => <Table.Row>
 34 |         <Table.Cell>
 35 |           {user.name +
 36 |             (user.password
 37 |               ? ' | Pass: "' + user.password + '" !!Attention'
 38 |               : "")}
 39 |         </Table.Cell>
 40 |         <Table.Cell>{user.email}</Table.Cell>
 41 |         <Table.Cell>{user.role}</Table.Cell>
 42 |         <Table.Cell>{user.caloryLimit}</Table.Cell>
 43 |         <Table.Cell>
 44 |           <Button onClick={() => this.selectUserForEditing(user.id)} size="mini" icon>
 45 |             <Icon name="pencil" />
 46 |           </Button>
 47 |           <Button onClick={() => this.deleteUser(user.id)} color="red" size="mini" icon>
 48 |             <Icon name="delete" />
 49 |           </Button>
 50 |         </Table.Cell>
 51 |       </Table.Row>);
 52 |   };
 53 | 
 54 |   deleteUser = id => {
 55 |     this.props.removeUser(id);
 56 |   };
 57 | 
 58 |   selectUserForEditing = id => {
 59 |     let user = this.props.state.userManagement.users.find(v => v.id === id);
 60 | 
 61 |     this.setState({
 62 |       newUser: user
 63 |     });
 64 |   };
 65 | 
 66 |   handleSubmit = () => {
 67 |     if (this.state.newUser.id) this.props.editUser(this.state.newUser);
 68 |     else this.props.addUser(this.state.newUser);
 69 | 
 70 |     this.clearUserForm();
 71 |   };
 72 | 
 73 |   handleChange = event => {
 74 |     const target = event.target;
 75 |     const value = target.type === "checkbox" ? target.checked : target.value;
 76 |     const name = target.name;
 77 | 
 78 |     this.setState({
 79 |       newUser: Object.assign({}, this.state.newUser, {
 80 |         [name]: value
 81 |       })
 82 |     });
 83 |   };
 84 | 
 85 |   onDropdownSelection = (e, { value }) => {
 86 |     this.setState({
 87 |       newUser: Object.assign({}, this.state.newUser, {
 88 |         role: value
 89 |       })
 90 |     });
 91 |   };
 92 | 
 93 |   clearUserForm = () => {
 94 |     this.setState({
 95 |       newUser: {
 96 |         name: "",
 97 |         email: "",
 98 |         role: "",
 99 |         caloryLimit: 0
100 |       }
101 |     });
102 |   };
103 | 
104 |   render() {
105 |     if (!this.props.state.userManagement.users) {
106 |       return <Message>USERMNG Loading</Message>;
107 |     }
108 |     return [
109 |       <Segment>
110 |         <Header>Registered Users</Header>
111 |         <Table compact celled>
112 |           <Table.Header fullWidth>
113 |             <Table.Row>
114 |               <Table.HeaderCell>Name</Table.HeaderCell>
115 |               <Table.HeaderCell>Email</Table.HeaderCell>
116 |               <Table.HeaderCell>Role</Table.HeaderCell>
117 |               <Table.HeaderCell>Calory Limit</Table.HeaderCell>
118 |               <Table.HeaderCell width={2}>Actions</Table.HeaderCell>
119 |             </Table.Row>
120 |           </Table.Header>
121 | 
122 |           <Table.Body>{this.getTableData(this.props)}</Table.Body>
123 | 
124 |           <Table.Footer fullWidth>
125 |             <Table.Row>
126 |               <Table.HeaderCell colSpan={5} />
127 |             </Table.Row>
128 |           </Table.Footer>
129 |         </Table>
130 |       </Segment>,
131 |       <Segment>
132 |         <Form>
133 |           <Form.Group unstackable widths={2}>
134 |             <Form.Field>
135 |               <label>Username</label>
136 |               <Input
137 |                 type="text"
138 |                 name="name"
139 |                 value={this.state.newUser.name}
140 |                 onChange={this.handleChange}
141 |                 placeholder="Enter name..."
142 |               />
143 |             </Form.Field>
144 |             <Form.Field>
145 |               <label>Email</label>
146 |               <Input
147 |                 type="text"
148 |                 name="email"
149 |                 value={this.state.newUser.email}
150 |                 onChange={this.handleChange}
151 |                 placeholder="Enter email..."
152 |               />
153 |             </Form.Field>
154 |           </Form.Group>
155 | 
156 |           <Form.Group unstackable widths={2}>
157 |             <Form.Field>
158 |               <label>Role</label>
159 |               <Input
160 |                 type="text"
161 |                 onChange={this.handleChange}
162 |                 name="role"
163 |                 value={this.state.newUser.role}
164 |                 placeholder="Enter role..."
165 |               />
166 |             </Form.Field>
167 |             <Form.Field>
168 |             <label>Calory Limit</label>
169 |             <Input
170 |               type="number"
171 |               onChange={this.handleChange}
172 |               name="caloryLimit"
173 |               value={this.state.newUser.caloryLimit}
174 |               placeholder="Select Calory Limit"
175 |               fluid
176 |             />
177 |             </Form.Field>
178 |           </Form.Group>
179 |           <Button primary type="submit" onClick={this.handleSubmit}>
180 |             Submit
181 |           </Button>
182 |           <Button onClick={this.clearUserForm}>Clear</Button>
183 |         </Form>
184 |       </Segment>
185 |     ];
186 |   }
187 | }
188 | 
189 | 
190 | export default connect(
191 |   state => {
192 |     const { searchStore, userManagement } = state;
193 |     return {
194 |       state: { searchStore, userManagement }
195 |     };
196 |   },
197 |   dispatch => bindActionCreators(actionCreators, dispatch)
198 | )(UserManagement);
199 | 


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="ChangeListManager">
  4 |     <list default="true" id="882139a8-80fa-43e3-9642-77753b732f99" name="Default" comment="">
  5 |       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
  6 |       <change beforePath="$PROJECT_DIR$/.storybook/addons.js" beforeDir="false" afterPath="$PROJECT_DIR$/.storybook/addons.js" afterDir="false" />
  7 |       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
  8 |       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
  9 |       <change beforePath="$PROJECT_DIR$/src/components/layout/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/layout/App.js" afterDir="false" />
 10 |       <change beforePath="$PROJECT_DIR$/src/components/pages/Counter.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/Counter.js" afterDir="false" />
 11 |       <change beforePath="$PROJECT_DIR$/src/stories/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/stories/index.js" afterDir="false" />
 12 |     </list>
 13 |     <ignored path="$PROJECT_DIR$/.tmp/" />
 14 |     <ignored path="$PROJECT_DIR$/temp/" />
 15 |     <ignored path="$PROJECT_DIR$/tmp/" />
 16 |     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
 17 |     <option name="SHOW_DIALOG" value="false" />
 18 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 19 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 20 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 21 |   </component>
 22 |   <component name="FUSProjectUsageTrigger">
 23 |     <session id="-975795119">
 24 |       <usages-collector id="statistics.lifecycle.project">
 25 |         <counts>
 26 |           <entry key="project.open.time.6" value="1" />
 27 |           <entry key="project.opened" value="1" />
 28 |         </counts>
 29 |       </usages-collector>
 30 |       <usages-collector id="statistics.file.extensions.open">
 31 |         <counts>
 32 |           <entry key="css" value="2" />
 33 |           <entry key="js" value="13" />
 34 |         </counts>
 35 |       </usages-collector>
 36 |       <usages-collector id="statistics.file.types.open">
 37 |         <counts>
 38 |           <entry key="CSS" value="2" />
 39 |           <entry key="JavaScript" value="13" />
 40 |         </counts>
 41 |       </usages-collector>
 42 |       <usages-collector id="statistics.file.extensions.edit">
 43 |         <counts>
 44 |           <entry key="js" value="39" />
 45 |         </counts>
 46 |       </usages-collector>
 47 |       <usages-collector id="statistics.file.types.edit">
 48 |         <counts>
 49 |           <entry key="JavaScript" value="39" />
 50 |         </counts>
 51 |       </usages-collector>
 52 |       <usages-collector id="statistics.js.language.service.starts" />
 53 |     </session>
 54 |   </component>
 55 |   <component name="FileEditorManager">
 56 |     <leaf SIDE_TABS_SIZE_LIMIT_KEY="600">
 57 |       <file pinned="false" current-in-tab="false">
 58 |         <entry file="file://$PROJECT_DIR$/src/stories/index.js">
 59 |           <provider selected="true" editor-type-id="text-editor">
 60 |             <state relative-caret-position="165">
 61 |               <caret line="3" column="36" selection-start-line="3" selection-start-column="36" selection-end-line="3" selection-end-column="36" />
 62 |             </state>
 63 |           </provider>
 64 |         </entry>
 65 |       </file>
 66 |       <file pinned="false" current-in-tab="false">
 67 |         <entry file="file://$PROJECT_DIR$/src/store/Counter.js">
 68 |           <provider selected="true" editor-type-id="text-editor">
 69 |             <state relative-caret-position="825">
 70 |               <caret line="15" selection-start-line="15" selection-end-line="15" />
 71 |             </state>
 72 |           </provider>
 73 |         </entry>
 74 |       </file>
 75 |       <file pinned="false" current-in-tab="false">
 76 |         <entry file="file://$PROJECT_DIR$/src/store/SideMenu.js">
 77 |           <provider selected="true" editor-type-id="text-editor">
 78 |             <state relative-caret-position="330">
 79 |               <caret line="6" selection-start-line="6" selection-end-line="6" />
 80 |             </state>
 81 |           </provider>
 82 |         </entry>
 83 |       </file>
 84 |       <file pinned="false" current-in-tab="false">
 85 |         <entry file="file://$PROJECT_DIR$/src/components/pages/UserManagement.js">
 86 |           <provider selected="true" editor-type-id="text-editor">
 87 |             <state relative-caret-position="605">
 88 |               <caret line="107" column="12" selection-start-line="107" selection-start-column="12" selection-end-line="107" selection-end-column="12" />
 89 |             </state>
 90 |           </provider>
 91 |         </entry>
 92 |       </file>
 93 |       <file pinned="false" current-in-tab="true">
 94 |         <entry file="file://$PROJECT_DIR$/src/components/pages/Counter.js">
 95 |           <provider selected="true" editor-type-id="text-editor">
 96 |             <state relative-caret-position="550">
 97 |               <caret line="10" column="32" lean-forward="true" selection-start-line="10" selection-start-column="32" selection-end-line="10" selection-end-column="32" />
 98 |             </state>
 99 |           </provider>
100 |         </entry>
101 |       </file>
102 |       <file pinned="false" current-in-tab="false">
103 |         <entry file="file://$PROJECT_DIR$/src/components/layout/App.js">
104 |           <provider selected="true" editor-type-id="text-editor">
105 |             <state relative-caret-position="330">
106 |               <caret line="6" column="38" selection-start-line="6" selection-start-column="38" selection-end-line="6" selection-end-column="38" />
107 |             </state>
108 |           </provider>
109 |         </entry>
110 |       </file>
111 |       <file pinned="false" current-in-tab="false">
112 |         <entry file="file://$PROJECT_DIR$/src/components/FetchData.js">
113 |           <provider selected="true" editor-type-id="text-editor">
114 |             <state relative-caret-position="665">
115 |               <caret line="29" column="1" selection-start-line="29" selection-start-column="1" selection-end-line="29" selection-end-column="1" />
116 |             </state>
117 |           </provider>
118 |         </entry>
119 |       </file>
120 |       <file pinned="false" current-in-tab="false">
121 |         <entry file="file://$PROJECT_DIR$/src/components/layout/TopMenu.js">
122 |           <provider selected="true" editor-type-id="text-editor">
123 |             <state relative-caret-position="458">
124 |               <caret line="34" column="46" selection-start-line="34" selection-start-column="46" selection-end-line="34" selection-end-column="46" />
125 |             </state>
126 |           </provider>
127 |         </entry>
128 |       </file>
129 |       <file pinned="false" current-in-tab="false">
130 |         <entry file="file://$PROJECT_DIR$/src/store/configureStore.js">
131 |           <provider selected="true" editor-type-id="text-editor">
132 |             <state relative-caret-position="412">
133 |               <caret line="12" column="22" selection-start-line="12" selection-start-column="22" selection-end-line="12" selection-end-column="22" />
134 |             </state>
135 |           </provider>
136 |         </entry>
137 |       </file>
138 |       <file pinned="false" current-in-tab="false">
139 |         <entry file="file://$PROJECT_DIR$/src/components/pages/Home.js">
140 |           <provider selected="true" editor-type-id="text-editor">
141 |             <state relative-caret-position="605">
142 |               <caret line="11" selection-start-line="11" selection-end-line="11" />
143 |             </state>
144 |           </provider>
145 |         </entry>
146 |       </file>
147 |     </leaf>
148 |   </component>
149 |   <component name="FindInProjectRecents">
150 |     <findStrings>
151 |       <find>weatherforecast</find>
152 |       <find>forecasts</find>
153 |       <find>toggle</find>
154 |       <find>submit</find>
155 |       <find>import cou</find>
156 |     </findStrings>
157 |   </component>
158 |   <component name="Git.Settings">
159 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
160 |   </component>
161 |   <component name="IdeDocumentHistory">
162 |     <option name="CHANGED_PATHS">
163 |       <list>
164 |         <option value="$PROJECT_DIR$/src/components/pages/Home.js" />
165 |         <option value="$PROJECT_DIR$/src/components/pages/Button.js" />
166 |         <option value="$PROJECT_DIR$/.storybook/config.js" />
167 |         <option value="$PROJECT_DIR$/src/stories/index.js" />
168 |         <option value="$PROJECT_DIR$/.gitignore" />
169 |         <option value="$PROJECT_DIR$/.storybook/addons.js" />
170 |         <option value="$PROJECT_DIR$/src/components/layout/App.js" />
171 |         <option value="$PROJECT_DIR$/src/components/pages/Counter.js" />
172 |       </list>
173 |     </option>
174 |   </component>
175 |   <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
176 |   <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER">
177 |     <package-json value="$PROJECT_DIR$/package.json" />
178 |   </component>
179 |   <component name="JsGulpfileManager">
180 |     <detection-done>true</detection-done>
181 |     <sorting>DEFINITION_ORDER</sorting>
182 |   </component>
183 |   <component name="NodeModulesDirectoryManager">
184 |     <handled-path value="$PROJECT_DIR$/node_modules" />
185 |   </component>
186 |   <component name="NodePackageJsonFileManager">
187 |     <packageJsonPaths>
188 |       <path value="$PROJECT_DIR$/package.json" />
189 |     </packageJsonPaths>
190 |   </component>
191 |   <component name="ProjectFrameBounds" extendedState="6" fullScreen="true">
192 |     <option name="x" value="18" />
193 |     <option name="y" value="52" />
194 |     <option name="width" value="1947" />
195 |     <option name="height" value="2018" />
196 |   </component>
197 |   <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
198 |   <component name="ProjectView">
199 |     <navigator proportions="" version="1">
200 |       <foldersAlwaysOnTop value="true" />
201 |     </navigator>
202 |     <panes>
203 |       <pane id="Scope" />
204 |       <pane id="ProjectPane">
205 |         <subPane>
206 |           <expand>
207 |             <path>
208 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
209 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
210 |             </path>
211 |             <path>
212 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
213 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
214 |               <item name="public" type="462c0819:PsiDirectoryNode" />
215 |             </path>
216 |             <path>
217 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
218 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
219 |               <item name="src" type="462c0819:PsiDirectoryNode" />
220 |             </path>
221 |             <path>
222 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
223 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
224 |               <item name="src" type="462c0819:PsiDirectoryNode" />
225 |               <item name="components" type="462c0819:PsiDirectoryNode" />
226 |             </path>
227 |             <path>
228 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
229 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
230 |               <item name="src" type="462c0819:PsiDirectoryNode" />
231 |               <item name="components" type="462c0819:PsiDirectoryNode" />
232 |               <item name="common" type="462c0819:PsiDirectoryNode" />
233 |             </path>
234 |             <path>
235 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
236 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
237 |               <item name="src" type="462c0819:PsiDirectoryNode" />
238 |               <item name="components" type="462c0819:PsiDirectoryNode" />
239 |               <item name="extension" type="462c0819:PsiDirectoryNode" />
240 |             </path>
241 |             <path>
242 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
243 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
244 |               <item name="src" type="462c0819:PsiDirectoryNode" />
245 |               <item name="components" type="462c0819:PsiDirectoryNode" />
246 |               <item name="layout" type="462c0819:PsiDirectoryNode" />
247 |             </path>
248 |             <path>
249 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
250 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
251 |               <item name="src" type="462c0819:PsiDirectoryNode" />
252 |               <item name="components" type="462c0819:PsiDirectoryNode" />
253 |               <item name="pages" type="462c0819:PsiDirectoryNode" />
254 |             </path>
255 |             <path>
256 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
257 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
258 |               <item name="src" type="462c0819:PsiDirectoryNode" />
259 |               <item name="stories" type="462c0819:PsiDirectoryNode" />
260 |             </path>
261 |             <path>
262 |               <item name="react_admin_dashboard" type="b2602c69:ProjectViewProjectNode" />
263 |               <item name="react_admin_dashboard" type="462c0819:PsiDirectoryNode" />
264 |               <item name="src" type="462c0819:PsiDirectoryNode" />
265 |               <item name="styles" type="462c0819:PsiDirectoryNode" />
266 |             </path>
267 |           </expand>
268 |           <select />
269 |         </subPane>
270 |       </pane>
271 |     </panes>
272 |   </component>
273 |   <component name="PropertiesComponent">
274 |     <property name="WebServerToolWindowFactoryState" value="false" />
275 |     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
276 |     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
277 |     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
278 |     <property name="nodejs_package_manager_path" value="yarn" />
279 |     <property name="settings.editor.selected.configurable" value="preferences.sourceCode" />
280 |   </component>
281 |   <component name="RunDashboard">
282 |     <option name="ruleStates">
283 |       <list>
284 |         <RuleState>
285 |           <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
286 |         </RuleState>
287 |         <RuleState>
288 |           <option name="name" value="StatusDashboardGroupingRule" />
289 |         </RuleState>
290 |       </list>
291 |     </option>
292 |   </component>
293 |   <component name="RunManager">
294 |     <configuration name="storybook" type="js.build_tools.npm" factoryName="npm" temporary="true" nameIsGenerated="true">
295 |       <package-json value="$PROJECT_DIR$/package.json" />
296 |       <command value="run" />
297 |       <scripts>
298 |         <script value="storybook" />
299 |       </scripts>
300 |       <node-interpreter value="project" />
301 |       <envs />
302 |       <method v="2" />
303 |     </configuration>
304 |     <recent_temporary>
305 |       <list>
306 |         <item itemvalue="npm.storybook" />
307 |       </list>
308 |     </recent_temporary>
309 |   </component>
310 |   <component name="SvnConfiguration">
311 |     <configuration />
312 |   </component>
313 |   <component name="TaskManager">
314 |     <task active="true" id="Default" summary="Default task">
315 |       <changelist id="882139a8-80fa-43e3-9642-77753b732f99" name="Default" comment="" />
316 |       <created>1533233995929</created>
317 |       <option name="number" value="Default" />
318 |       <option name="presentableId" value="Default" />
319 |       <updated>1533233995929</updated>
320 |       <workItem from="1533233997778" duration="601000" />
321 |       <workItem from="1533235135514" duration="1612000" />
322 |       <workItem from="1533310864212" duration="2185000" />
323 |       <workItem from="1533556554369" duration="1079000" />
324 |       <workItem from="1533565324688" duration="2692000" />
325 |       <workItem from="1533581079727" duration="117000" />
326 |       <workItem from="1535036460439" duration="1306000" />
327 |     </task>
328 |     <servers />
329 |   </component>
330 |   <component name="TimeTrackingManager">
331 |     <option name="totallyTimeSpent" value="9592000" />
332 |   </component>
333 |   <component name="ToolWindowManager">
334 |     <frame x="0" y="-76" width="3840" height="2236" extended-state="6" />
335 |     <editor active="true" />
336 |     <layout>
337 |       <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.17030917" />
338 |       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
339 |       <window_info id="npm" order="2" side_tool="true" />
340 |       <window_info id="Favorites" order="3" side_tool="true" />
341 |       <window_info anchor="bottom" id="Message" order="0" />
342 |       <window_info anchor="bottom" id="Find" order="1" />
343 |       <window_info anchor="bottom" id="Run" order="2" />
344 |       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
345 |       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
346 |       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
347 |       <window_info anchor="bottom" id="TODO" order="6" />
348 |       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
349 |       <window_info active="true" anchor="bottom" id="Terminal" order="8" visible="true" weight="0.3038618" />
350 |       <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
351 |       <window_info anchor="bottom" id="Version Control" order="10" />
352 |       <window_info anchor="right" id="Key Promoter X" />
353 |       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
354 |       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
355 |       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
356 |     </layout>
357 |   </component>
358 |   <component name="TypeScriptGeneratedFilesManager">
359 |     <option name="version" value="1" />
360 |   </component>
361 |   <component name="VcsContentAnnotationSettings">
362 |     <option name="myLimit" value="2678400000" />
363 |   </component>
364 |   <component name="editorHistoryManager">
365 |     <entry file="file://$PROJECT_DIR$/.storybook/config.js">
366 |       <provider selected="true" editor-type-id="text-editor">
367 |         <state relative-caret-position="165">
368 |           <caret line="3" selection-start-line="3" selection-end-line="3" />
369 |         </state>
370 |       </provider>
371 |     </entry>
372 |     <entry file="file://$PROJECT_DIR$/package.json">
373 |       <provider selected="true" editor-type-id="text-editor">
374 |         <state relative-caret-position="2035">
375 |           <caret line="37" column="34" selection-start-line="37" selection-start-column="34" selection-end-line="37" selection-end-column="34" />
376 |         </state>
377 |       </provider>
378 |     </entry>
379 |     <entry file="file://$PROJECT_DIR$/.storybook/addons.js">
380 |       <provider selected="true" editor-type-id="text-editor">
381 |         <state relative-caret-position="110">
382 |           <caret line="2" column="41" selection-start-line="2" selection-start-column="41" selection-end-line="2" selection-end-column="41" />
383 |         </state>
384 |       </provider>
385 |     </entry>
386 |     <entry file="file://$PROJECT_DIR$/src/components/pages/Button.js">
387 |       <provider selected="true" editor-type-id="text-editor">
388 |         <state relative-caret-position="275">
389 |           <caret line="5" column="12" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
390 |         </state>
391 |       </provider>
392 |     </entry>
393 |     <entry file="file://$PROJECT_DIR$/src/components/pages/Home.js">
394 |       <provider selected="true" editor-type-id="text-editor">
395 |         <state relative-caret-position="605">
396 |           <caret line="11" selection-start-line="11" selection-end-line="11" />
397 |         </state>
398 |       </provider>
399 |     </entry>
400 |     <entry file="file://$PROJECT_DIR$/.gitignore">
401 |       <provider selected="true" editor-type-id="text-editor">
402 |         <state>
403 |           <caret column="19" lean-forward="true" selection-start-column="19" selection-end-column="19" />
404 |         </state>
405 |       </provider>
406 |     </entry>
407 |     <entry file="file://$PROJECT_DIR$/src/store/configureStore.js">
408 |       <provider selected="true" editor-type-id="text-editor">
409 |         <state relative-caret-position="412">
410 |           <caret line="12" column="22" selection-start-line="12" selection-start-column="22" selection-end-line="12" selection-end-column="22" />
411 |         </state>
412 |       </provider>
413 |     </entry>
414 |     <entry file="file://$PROJECT_DIR$/src/store/WeatherForecasts.js">
415 |       <provider selected="true" editor-type-id="text-editor">
416 |         <state relative-caret-position="-742">
417 |           <caret line="13" column="58" selection-start-line="13" selection-start-column="58" selection-end-line="13" selection-end-column="58" />
418 |         </state>
419 |       </provider>
420 |     </entry>
421 |     <entry file="file://$PROJECT_DIR$/src/stories/index.js">
422 |       <provider selected="true" editor-type-id="text-editor">
423 |         <state relative-caret-position="165">
424 |           <caret line="3" column="36" selection-start-line="3" selection-start-column="36" selection-end-line="3" selection-end-column="36" />
425 |         </state>
426 |       </provider>
427 |     </entry>
428 |     <entry file="file://$PROJECT_DIR$/src/store/SearchStore.js">
429 |       <provider selected="true" editor-type-id="text-editor" />
430 |     </entry>
431 |     <entry file="file://$PROJECT_DIR$/src/store/Counter.js">
432 |       <provider selected="true" editor-type-id="text-editor">
433 |         <state relative-caret-position="825">
434 |           <caret line="15" selection-start-line="15" selection-end-line="15" />
435 |         </state>
436 |       </provider>
437 |     </entry>
438 |     <entry file="file://$PROJECT_DIR$/src/store/UserManagement.js">
439 |       <provider selected="true" editor-type-id="text-editor">
440 |         <state relative-caret-position="-2337">
441 |           <caret line="13" column="5" lean-forward="true" selection-start-line="13" selection-start-column="5" selection-end-line="13" selection-end-column="5" />
442 |         </state>
443 |       </provider>
444 |     </entry>
445 |     <entry file="file://$PROJECT_DIR$/src/components/common/registerServiceWorker.js">
446 |       <provider selected="true" editor-type-id="text-editor" />
447 |     </entry>
448 |     <entry file="file://$PROJECT_DIR$/src/components/FetchData.js">
449 |       <provider selected="true" editor-type-id="text-editor">
450 |         <state relative-caret-position="665">
451 |           <caret line="29" column="1" selection-start-line="29" selection-start-column="1" selection-end-line="29" selection-end-column="1" />
452 |         </state>
453 |       </provider>
454 |     </entry>
455 |     <entry file="file://$PROJECT_DIR$/src/components/layout/TopMenu.js">
456 |       <provider selected="true" editor-type-id="text-editor">
457 |         <state relative-caret-position="458">
458 |           <caret line="34" column="46" selection-start-line="34" selection-start-column="46" selection-end-line="34" selection-end-column="46" />
459 |         </state>
460 |       </provider>
461 |     </entry>
462 |     <entry file="file://$PROJECT_DIR$/src/styles/NavMenu.css">
463 |       <provider selected="true" editor-type-id="text-editor" />
464 |     </entry>
465 |     <entry file="file://$PROJECT_DIR$/src/styles/index.css">
466 |       <provider selected="true" editor-type-id="text-editor">
467 |         <state relative-caret-position="-3960" />
468 |       </provider>
469 |     </entry>
470 |     <entry file="file://$PROJECT_DIR$/src/store/SideMenu.js">
471 |       <provider selected="true" editor-type-id="text-editor">
472 |         <state relative-caret-position="330">
473 |           <caret line="6" selection-start-line="6" selection-end-line="6" />
474 |         </state>
475 |       </provider>
476 |     </entry>
477 |     <entry file="file://$PROJECT_DIR$/src/components/pages/UserManagement.js">
478 |       <provider selected="true" editor-type-id="text-editor">
479 |         <state relative-caret-position="605">
480 |           <caret line="107" column="12" selection-start-line="107" selection-start-column="12" selection-end-line="107" selection-end-column="12" />
481 |         </state>
482 |       </provider>
483 |     </entry>
484 |     <entry file="file://$PROJECT_DIR$/src/components/layout/App.js">
485 |       <provider selected="true" editor-type-id="text-editor">
486 |         <state relative-caret-position="330">
487 |           <caret line="6" column="38" selection-start-line="6" selection-start-column="38" selection-end-line="6" selection-end-column="38" />
488 |         </state>
489 |       </provider>
490 |     </entry>
491 |     <entry file="file://$PROJECT_DIR$/src/components/pages/Counter.js">
492 |       <provider selected="true" editor-type-id="text-editor">
493 |         <state relative-caret-position="550">
494 |           <caret line="10" column="32" lean-forward="true" selection-start-line="10" selection-start-column="32" selection-end-line="10" selection-end-column="32" />
495 |         </state>
496 |       </provider>
497 |     </entry>
498 |   </component>
499 |   <component name="masterDetails">
500 |     <states>
501 |       <state key="ScopeChooserConfigurable.UI">
502 |         <settings>
503 |           <splitter-proportions>
504 |             <option name="proportions">
505 |               <list>
506 |                 <option value="0.2" />
507 |               </list>
508 |             </option>
509 |           </splitter-proportions>
510 |         </settings>
511 |       </state>
512 |     </states>
513 |   </component>
514 | </project>


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