From 1a50596f7ec1d6abda193a697a000c0290ed88ef Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Wed, 25 Oct 2017 14:54:38 +0100 Subject: [PATCH 1/5] Add table of contents and description to README --- README.md | 31 ++++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 13f7c09..f2a726d 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,22 @@ [![phase](https://img.shields.io/badge/phase-BETA-orange.svg)](https://img.shields.io/badge/phase-BETA-orange.svg) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](./LICENSE) -The following tutorials were used to help with the deployment using Node.js, the login with redux and the isolation of bootstrap styles: [Node](https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.mt6bbdd8m +The `bi-ui` allows a user to query the [business-index-api](https://github.com/ONSdigital/business-index-api). + +The following tutorials were used to help with the deployment using Node.js, the login with redux and the isolation of `sdc-global-design-patterns` styles: [Node](https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.mt6bbdd8m ), [Login](https://github.com/mxstbr/login-flow) and [Bootstrap Isolation](https://formden.com/blog/isolate-bootstrap). +### Table of Contents +**[1. Environment Setup](#environment-setup)**
+**[2. Running the UI](#running-the-ui)**
+**[3. Running the API](#running-the-api)**
+**[4. Testing](#testing)**
+**[5. Useful Extensions](#useful-extensions)**
+**[6. Logging into the UI](#logging-into-the-ui)**
+**[7. Troubleshooting](#troubleshooting)**
+**[8. Contributing](#contributing)**
+**[9. License](#License)**
+ ## Environment Setup for the UI 1. Install NPM, it is included with Node.js ([Download](https://nodejs.org/en/)) @@ -19,7 +32,7 @@ export BI_UI_TEST_USER_PASSWORD=test export JWT_SECRET=SECRET ``` -## Running the Demo UI: +## Running the UI: 1. Clone this repo, install dependencies and start NPM @@ -100,23 +113,23 @@ The node server will carry on running afterwards, you can shut it down with `kil * [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) - for seeing what is happening in your Redux store -## Logging into the Demo UI: +## Logging into the UI: Username and password are `test` or `admin`. ## Troubleshooting -### Using Bootstrap +### Using SDC Patterns -If you wish to use any React component that requires Bootstrap CSS/JS, do the following: +If you want to use any patterns from the [sdc-global-design-patterns library](https://onsdigital.github.io/sdc-global-design-patterns/index.html), you need to wrap your code in the following `div`: -```html -
- +```javascript +
+ ...
``` -More details on this can be found [here](https://github.com/ONSdigital/sbr-ui/pull/50). +If you want to use the sdc patterns inside a grid, it's probably a good idea to use the grid in the sdc pattern library, as many of the components inherit styles, so when using the external style library grid, you'll run into lots of problems with your sdc components inheriting the wrong colour/size etc. ## Contributing From 52a230a0e0d8c99523ca06d7ffa3cf796f61425c Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Wed, 25 Oct 2017 14:56:48 +0100 Subject: [PATCH 2/5] Fix README table of contents --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f2a726d..cd7c044 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ The following tutorials were used to help with the deployment using Node.js, the ), [Login](https://github.com/mxstbr/login-flow) and [Bootstrap Isolation](https://formden.com/blog/isolate-bootstrap). ### Table of Contents -**[1. Environment Setup](#environment-setup)**
+**[1. Environment Setup](#environment-setup-for-the-ui)**
**[2. Running the UI](#running-the-ui)**
**[3. Running the API](#running-the-api)**
**[4. Testing](#testing)**
@@ -16,7 +16,7 @@ The following tutorials were used to help with the deployment using Node.js, the **[6. Logging into the UI](#logging-into-the-ui)**
**[7. Troubleshooting](#troubleshooting)**
**[8. Contributing](#contributing)**
-**[9. License](#License)**
+**[9. License](#license)**
## Environment Setup for the UI From cd4aceccc4d9a376f3cd3937fa52d40580c5100a Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Thu, 26 Oct 2017 08:15:07 +0100 Subject: [PATCH 3/5] Add fix for redux reset store JSON issue - See https://github.com/ONSdigital/bi-ui/issues/3 for more details --- src/actions/LoginActions.js | 10 ++++++++++ src/reducers/apiSearch.js | 4 ++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/actions/LoginActions.js b/src/actions/LoginActions.js index e36f447..42b42c3 100644 --- a/src/actions/LoginActions.js +++ b/src/actions/LoginActions.js @@ -25,9 +25,11 @@ import { browserHistory } from 'react-router'; import { SET_AUTH, USER_LOGOUT, SENDING_REQUEST, SET_ERROR_MESSAGE, SET_USER_DETAILS } from '../constants/LoginConstants'; +import { SET_MATCH_QUERY, SET_RANGE_QUERY } from '../constants/ApiConstants'; import * as errorMessages from '../constants/MessageConstants'; import auth from '../utils/auth'; import { getUiInfo, getApiInfo } from '../actions/InfoActions'; +import { setQuery } from '../actions/ApiActions'; /** * Logs an user in @@ -59,6 +61,10 @@ export function login(username, password) { })); dispatch(getUiInfo()); dispatch(getApiInfo()); + // We setQuery to {} as a hacky solution to the issue below: + // https://github.com/ONSdigital/bi-ui/issues/3 + dispatch(setQuery(SET_MATCH_QUERY, {})); + dispatch(setQuery(SET_RANGE_QUERY, {})); forwardTo('/Home'); } else { switch (data.type) { @@ -87,6 +93,10 @@ export function checkAuth(token) { sessionStorage.clear(); forwardTo('/'); } else if (success) { + // We setQuery to {} as a hacky solution to the issue below: + // https://github.com/ONSdigital/bi-ui/issues/3 + dispatch(setQuery(SET_MATCH_QUERY, {})); + dispatch(setQuery(SET_RANGE_QUERY, {})); if (window.location.pathname === '/') { forwardTo('/Home'); } diff --git a/src/reducers/apiSearch.js b/src/reducers/apiSearch.js index 52fe69a..b304f84 100644 --- a/src/reducers/apiSearch.js +++ b/src/reducers/apiSearch.js @@ -12,7 +12,7 @@ const initialState = { match: { results: [], headers: [], - query: {}, + query: '', formattedQuery: '', currentlySending: false, errorMessage: '', @@ -21,7 +21,7 @@ const initialState = { range: { results: [], headers: [], - query: {}, + query: '', formattedQuery: '', currentlySending: false, errorMessage: '', From 19401c248bbaee4f69b0fa931b5331c0fb921042 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Thu, 26 Oct 2017 08:25:12 +0100 Subject: [PATCH 4/5] Add example expand view to Match --- src/views/Match.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/views/Match.js b/src/views/Match.js index 493715f..17d955f 100644 --- a/src/views/Match.js +++ b/src/views/Match.js @@ -191,6 +191,16 @@ class Match extends React.Component { ]} defaultPageSize={10} className="-striped -highlight" + SubComponent={row => { + return ( +
+ + Expand view will go here. + +
+ ); + }} + /> />
} From 99eae1e79e9133271a4f7db56b65796b894a8ae2 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Thu, 26 Oct 2017 08:26:47 +0100 Subject: [PATCH 5/5] Remove init query code to '' rather than {} - This was causing bugs on refresh --- src/actions/LoginActions.js | 8 ++++---- src/reducers/apiSearch.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/actions/LoginActions.js b/src/actions/LoginActions.js index 42b42c3..11dd04a 100644 --- a/src/actions/LoginActions.js +++ b/src/actions/LoginActions.js @@ -63,8 +63,8 @@ export function login(username, password) { dispatch(getApiInfo()); // We setQuery to {} as a hacky solution to the issue below: // https://github.com/ONSdigital/bi-ui/issues/3 - dispatch(setQuery(SET_MATCH_QUERY, {})); - dispatch(setQuery(SET_RANGE_QUERY, {})); + // dispatch(setQuery(SET_MATCH_QUERY, {})); + // dispatch(setQuery(SET_RANGE_QUERY, {})); forwardTo('/Home'); } else { switch (data.type) { @@ -95,8 +95,8 @@ export function checkAuth(token) { } else if (success) { // We setQuery to {} as a hacky solution to the issue below: // https://github.com/ONSdigital/bi-ui/issues/3 - dispatch(setQuery(SET_MATCH_QUERY, {})); - dispatch(setQuery(SET_RANGE_QUERY, {})); + // dispatch(setQuery(SET_MATCH_QUERY, {})); + // dispatch(setQuery(SET_RANGE_QUERY, {})); if (window.location.pathname === '/') { forwardTo('/Home'); } diff --git a/src/reducers/apiSearch.js b/src/reducers/apiSearch.js index b304f84..52fe69a 100644 --- a/src/reducers/apiSearch.js +++ b/src/reducers/apiSearch.js @@ -12,7 +12,7 @@ const initialState = { match: { results: [], headers: [], - query: '', + query: {}, formattedQuery: '', currentlySending: false, errorMessage: '', @@ -21,7 +21,7 @@ const initialState = { range: { results: [], headers: [], - query: '', + query: {}, formattedQuery: '', currentlySending: false, errorMessage: '',