Skip to content

Commit

Permalink
feature(requests-table):Implement requests table [Finishes #171380698]
Browse files Browse the repository at this point in the history
  • Loading branch information
the22mastermind committed Jun 10, 2020
1 parent 8c78fbd commit 2cfba08
Show file tree
Hide file tree
Showing 29 changed files with 926 additions and 52 deletions.
12 changes: 10 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
{
"presets": ["@babel/preset-env","@babel/preset-react"],
"plugins": ["transform-class-properties"]
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"transform-class-properties",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-regenerator",
"@babel/plugin-transform-runtime"
]
}
7 changes: 7 additions & 0 deletions .codeclimate.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
version: "2"
checks:
method-lines:
config:
threshold: 40
exclude_patterns:
- "src/__tests__"
6 changes: 5 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@
}
],
"react/no-array-index-key": 0,
"jsx-a11y/anchor-is-valid": 0
"jsx-a11y/anchor-is-valid": 0,
"arrow-body-style": 0,
"no-shadow": 0,
"no-nested-ternary": 0,
"react/jsx-props-no-spreading": 0
}
}
9 changes: 9 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,19 @@
"homepage": "https://github.com/Stackup-Rwanda/stackup2-barefoot-frontend#readme",
"dependencies": {
"@babel/core": "^7.9.6",
"@babel/plugin-transform-runtime": "^7.10.1",
"@babel/polyfill": "^7.10.1",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.9.4",
"@material-ui/core": "^4.10.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.55",
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addons": "^5.3.18",
"@storybook/react": "^5.3.18",
"@testing-library/react": "^10.0.4",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.0.1",
"babel-loader": "^8.1.0",
Expand All @@ -59,17 +64,21 @@
"jest": "^26.0.1",
"jest-html-reporters": "^1.2.1",
"jest-transform-stub": "^2.0.0",
"less-loader": "^6.1.0",
"mini-css-extract-plugin": "^0.9.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-loader-spinner": "^3.1.14",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-slick": "^0.26.1",
"react-test-renderer": "^16.13.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
Expand Down
12 changes: 12 additions & 0 deletions src/__tests__/SectionHeader.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { cleanup } from '@testing-library/react';
import SectionHeader from '../components/SectionHeader/SectionHeader';

describe('<SectionHeader/>', () => {
afterEach(cleanup);
it('Should match the SectionHeader component snapshot', () => {
const tree = renderer.create(<SectionHeader />).toJSON();
expect(tree).toMatchSnapshot();
});
});
9 changes: 9 additions & 0 deletions src/__tests__/__snapshots__/SectionHeader.test.js.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<SectionHeader/> Should match the SectionHeader component snapshot 1`] = `
<p
className="MuiTypography-root makeStyles-title-1 MuiTypography-body1"
>
Trip requests
</p>
`;
5 changes: 0 additions & 5 deletions src/actions/actions.js

This file was deleted.

6 changes: 5 additions & 1 deletion src/assets/styles/sass/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ body {
}

.testimony-item {
display: flex;
display: flex !important;
flex-direction: row;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -169,6 +169,10 @@ body {
font-size: 14pt;
}

.testimony-description {
margin-left: 2px;
}

.testimony-author {
font-size: 10pt;
}
Expand Down
123 changes: 123 additions & 0 deletions src/components/RequestsTable/RequestsTable.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
import ActionsMenu from '../../views/ActionsMenu/ActionsMenu';

const StyledTableCell = withStyles((theme) => ({
head: {
// backgroundColor: '#FFFFFF',
backgroundColor: theme.palette.secondary.contrastText,
// color: '#00A799',
color: theme.palette.primary.dark,
},
body: {
fontSize: 14,
},
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
root: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
}))(TableRow);

const useStyles = makeStyles({
table: {
minWidth: 700,
},
tableCell: {
fontSize: 12,
},
tableIcons: {
fontSize: 16,
},
noData: {
fontSize: 14,
color: '#777777',
backgroundColor: '#FFFFFF',
textAlign: 'center',
},
});

const requesterActions = [
{
id: 1,
name: 'Edit',
},
{
id: 2,
name: 'Book Accommodation',
},
{
id: 3,
name: 'Rate Accommodation',
},
{
id: 4,
name: 'Like/Dislike Accommodation',
},
];

const RequestsTable = ({ requests }) => {
const classes = useStyles();

return (
<TableContainer>
<Table className={classes.table} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell className={classes.tableCell}>Date</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">Departure</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">Destination</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">Reason</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">Accommodation</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="center">Status</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="center" />
</TableRow>
</TableHead>
<TableBody>
{requests.length > 0 ? (requests.map((row) => (
<StyledTableRow key={row.id}>
<StyledTableCell className={classes.tableCell} component="th" scope="row">
{row.trips[0].travelDate}
</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">{row.trips[0].travelFrom}</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">{row.trips[0].travelTo}</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">{row.travelReason}</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="left">{row.accommodation ? 'Yes' : 'No'}</StyledTableCell>
<StyledTableCell className={classes.tableCell} align="center">
{row.status === 'pending' ? <RemoveCircleOutline className={classes.tableIcons} htmlColor="#DADADA" /> : <CheckCircleOutline className={classes.tableIcons} htmlColor="#00A799" />}
</StyledTableCell>
<StyledTableCell align="center">
<ActionsMenu actions={requesterActions} />
</StyledTableCell>
</StyledTableRow>
))
) : (
<StyledTableRow>
<StyledTableCell className={classes.noData} component="th" scope="row" align="center" colSpan={7}>
Oops! Looks like you have not yet made any requests.
</StyledTableCell>
</StyledTableRow>
)}
</TableBody>
</Table>
</TableContainer>
);
};

RequestsTable.propTypes = {
requests: PropTypes.arrayOf().isRequired,
};

export default RequestsTable;
31 changes: 31 additions & 0 deletions src/components/SectionHeader/SectionHeader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
title: {
color: '#484848',
backgroundColor: '#00a7990f',
padding: 24,
fontSize: 14,
fontFamily: 'Roboto',
fontWeight: 500,
},
});

const SectionHeader = ({ title }) => {
const classes = useStyles();

return (
<Typography className={classes.title}>
{title}
</Typography>
);
};

SectionHeader.propTypes = {
title: PropTypes.string.isRequired,
};

export default SectionHeader;
4 changes: 3 additions & 1 deletion src/entry/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../assets/styles/theme';
import LandingPage from '../views/LandingPage/LandingPage';
import NavBar from '../views/NavBar/NavBar';
import RequestsTablePage from '../views/RequestsTablePage/RequestsTablePage';

const App = () => (
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<NavBar />
<Switch>
<Route path="/" component={LandingPage} exact />
<Route exact path="/" component={LandingPage} />
<Route path="/dashboard/requests" component={RequestsTablePage} />
</Switch>
</Router>
</ThemeProvider>
Expand Down
12 changes: 6 additions & 6 deletions src/entry/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import App from './App';
import '../assets/styles/sass/index.scss';
import '../assets/styles/css/index.css';
import reducer from '../reducers/reducer';
import store from '../redux/store';

const store = createStore(reducer, composeWithDevTools());

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'),
);
17 changes: 0 additions & 17 deletions src/reducers/reducer.js

This file was deleted.

8 changes: 8 additions & 0 deletions src/redux/rootReducer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { combineReducers } from 'redux';
import tripRequestsReducer from './tripRequests/tripRequestsReducer';

const rootReducer = combineReducers({
tripRequests: tripRequestsReducer,
});

export default rootReducer;
11 changes: 11 additions & 0 deletions src/redux/store.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './rootReducer';

const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(thunk)),
);

export default store;
Loading

0 comments on commit 2cfba08

Please sign in to comment.