Employee-Directory/database.rules.json
{
"rules": {
".read": true,
".write": true
}
}
Employee-Directory/firebase.json
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Employee-Directory/package.json
{
"name": "employee-directory",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-dom": "^15.6.1",
"react-motion": "^0.5.0",
"react-scripts": "1.0.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Employee-Directory/public/favicon.ico
Employee-Directory/public/images/Albert.jpg
Employee-Directory/public/images/Alex.jpg
Employee-Directory/public/images/David.jpg
Employee-Directory/public/images/Jamie.jpg
Employee-Directory/public/images/Jillian.jpg
Employee-Directory/public/images/Joe.jpg
Employee-Directory/public/images/Sarah.jpg
Employee-Directory/public/images/Unknown.jpg
Employee-Directory/public/index.html

You need to enable JavaScript to run this app.


Employee-Directory/public/manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Employee-Directory/README.md
Employee-Directory/snapshots/snapshot.png
Employee-Directory/src/App.js
import React from 'react'
import {Col } from 'react-bootstrap'
import employeeList from './employeeList.json';
import HomePage from './components/HomePage/HomePage.js'
import EmployeePage from './components/EmployeePage/EmployeePage.js'
const filterEmployee = (searchText, maxResults) => {
return employeeList.filter((employee) => {
if (employee.data.name.toLowerCase().includes(searchText.toLowerCase())) {
return true;
}
return false;
}).slice(0, maxResults);
}
var maxResults = 4;
export default class App extends React.Component {
constructor(){
super();
this.state = {
selectedEmployee: employeeList[0].data,
filteredEmployee: filterEmployee('', maxResults)
}
}
onSearch = (event) => {
this.setState({
filteredEmployee: filterEmployee(event.target.value, maxResults)
});
}
onEmployeeClick = (employee) => {
this.setState({
selectedEmployee: {name: employee.name, info: employee.info, contact: employee.contact}
});
}
render() {
return (








);
}
}
Employee-Directory/src/components/EmployeeList/EmployeeList.js
import React from 'react'
import {TransitionMotion, spring, presets} from 'react-motion';
import EmployeeListItem from...