MOTR-46 Analysis Page UI (#8)

* initial files created for linkout page

* Refactored tests to be more readable

* containerized linkoutPage, started sass stylings

* Styled linkout page and added actual links

* Made stickey footer utilizing flexbox display properties

* modified styling of linkoutPage and added proptypes

* Added functionality of canceling uploads by clicking button, created initial tests to validate functionality

* Changed yarn sass command to compile and NOT watch, added yarn sass-watch command for watching

* Changed yarn sass command to compile and NOT watch, added yarn sass-watch command for watching

* Implemented node-sass instead of ruby version of sass, updated readMe to reflect changes, beginning integrated test of upload screen

* modified styling to reduce white space

* added modal for confirmation before actual cancelling of upload

* Changed path to reach url to /external-links

* external links page changed to tile based format

* Modified footer and landing page to be more mobile friendly

* MOTR-47 fixed action dependency issue in storybook import

* link item title moved underneath link image, borders removed from link items

* style changes to allignement/position of text on linkout page

* navbar item for 'useful links' fixed to redirect to /external-links

* MOTR-48 turned upload form in to fully controlled component

* Added tests to confirm proper upload screen and form functionality

* modified dependencies of uploadList and uploadListRow stories to fix deprecated import warning from importing 'action'

* Fixed propType error for processData checkbox (was recieving the name of the checkbox instead of the checked boolean attribute)

* initial construction of analysis page component

* removed node-sass from dependencies list

* initial layout of home page of analysis and navigation structure in redux

* Commenting and refactoring of initial analysis homepage code, added proptypes

* Added style linting

* Analysis navigation set and inactive buttons implemented

* styling made more responsive

* analysis page testing added

* fixed analysis page story to render correctly

* Included analysis page and scss style guide sections to README

* Modified comments

* Added hover over disabled analysis to show coming soon text

* implemented style-lint suggestions

README.md

@@ -65,6 +65,7 @@
  * Style guide:
      - [Eslint](https://github.com/eslint/eslint) 
      - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
+     - [Style Lint Recommended SCSS Guide](https://github.com/stylelint/stylelint-config-recommended)
 
 ### Additional Notes
 
@@ -80,5 +81,6 @@
   - React-router is being used to handle routing
   - history ( createBrowserHistory ) is used to update location from button clicks and function calls ( history.push('path/to/new/location') )
   - \< Link > tags  from react-router are used in place of \< a > tags handle navigation from links. Certain elements return \< Redirect to="path/to/new/location" > elements if protected and user not authenticated.
+  - Analysis page only uses routing to differentiate between human and analysis (/analysis/human or /analysis/animal). After that it acts as a single page application.
 
 ---

package.json

@@ -44,6 +44,7 @@
     "eslint-config-airbnb": "^17.1.0",
     "react-test-renderer": "^16.5.2",
     "sass": "^1.15.1",
-    "storybook-react-router": "^1.0.1"
+    "storybook-react-router": "^1.0.1",
+    "stylelint-config-recommended": "^2.1.0"
   }
 }

src/App.jsx

@@ -13,6 +13,7 @@ import DashboardConnected from './components/dashboard';
 import UploadScreenConnected from './components/uploadScreen';
 import AuthLoadingConnected from './components/authLoading';
 import LinkoutPageConnected from './components/linkoutPage';
+import AnalysisHomePageConnected from './components/analysisHomePage';
 
 const hist = History;
 
@@ -34,6 +35,7 @@ function App({ history = hist }) {
             <Route path="/dashboard" component={DashboardConnected} />
             <Route path="/upload" component={UploadScreenConnected} />
             <Route path="/external-links" component={LinkoutPageConnected} />
+            <Route path="/analysis/:subjectType" component={AnalysisHomePageConnected} />
           </div>
           <FooterConnected />
           <AuthLoadingConnected />