wip router, reducer and services being built

Author: rbeatie

.env

@@ -0,0 +1 @@
+REACT_APP_FIREBASE_CONFIG_JSON = '{"apiKey": "AIzaSyDKVx23-RXumPuqP0fOd04VFJAwh8bzfok", "authDomain": "access2justice-222101.firebaseapp.com", "databaseURL": "https://access2justice-222101.firebaseio.com", "messagingSenderId": "494375994655", "projectId": "access2justice-222101","storageBucket": ""}'

package-lock.json

@@ -6,6 +6,7 @@
     "firebase": "^5.7.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts-ts": "4.0.8",
     "redux": "^4.0.1",
     "rxjs": "^6.3.3"
@@ -21,9 +22,10 @@
     "@types/node": "^10.12.18",
     "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
+    "@types/react-router-dom": "^4.3.1",
     "@types/firebase": "^3.2.1",
     "node-sass": "^4.11.0",
-    "tachyons": "^4.10.0",
+    "tachyons": "^4.11.1",
     "typescript": "^3.2.2"
   },
   "browserslist": [

package.json

@@ -4,6 +4,6 @@ import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<App tiles={['test', 'foo']}/>, div);
   ReactDOM.unmountComponentAtNode(div);
 });

public/static/images/tclc_logo.png

@@ -1,18 +1,50 @@
+/* tslint:disable:no-console jsx-no-lambda */
 import * as React from 'react';
-import { LoginComponent } from "./components/login/login.component";
 import { NavComponent } from "./components/nav/nav.component";
+import { RoutesComponent } from "./router/routes.component";
 
 import './App.scss';
 
-class App extends React.Component {
+export interface IAppProps {
+  tiles: string[];
+}
+
+export interface IAppState {
+  activeTile: string;
+  logedIn: boolean;
+}
+
+class App extends React.Component<IAppProps, IAppState> {
+
+  public state: IAppState = {
+    activeTile: 'dashboard',
+    login: false
+  };
+
+
+  constructor(public props: IAppProps) {
+    super(props);
+    this.navigationHandler = this.navigationHandler.bind(this);
+  }
+
+  public navigationHandler(name: string): void {
+    switch(name) {
+      case'login':
+
+    }
+  }
+
   public render() {
     return (
       <div className="App">
         <nav className="nav-container">
-          <NavComponent/>
+          <NavComponent tiles={this.props.tiles}
+                        active={this.state.activeTile}
+                        navigationHandler={this.navigationHandler} />
         </nav>
         <main className="content-container">
-          <LoginComponent/>
+          {process.env.REACT_APP_FIREBASE_CONFIG_JSON}
+          <RoutesComponent/>
         </main>
       </div>
     );

public/static/images/tclc_profiles.png

@@ -1,10 +1,25 @@
 import * as React from 'react';
 
 export const SVGs = {
-  google: () => (
+  dashboard:
+    <svg id="icon-meter2" viewBox="0 0 32 32">
+      <title>meter2</title>
+      <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM9.464 26.067c0.347-0.957 0.536-1.99 0.536-3.067 0-3.886-2.463-7.197-5.913-8.456 0.319-2.654 1.508-5.109 3.427-7.029 2.267-2.266 5.28-3.515 8.485-3.515s6.219 1.248 8.485 3.515c1.92 1.92 3.108 4.375 3.428 7.029-3.45 1.26-5.913 4.57-5.913 8.456 0 1.077 0.189 2.11 0.536 3.067-1.928 1.258-4.18 1.933-6.536 1.933s-4.608-0.675-6.536-1.933zM17.242 20.031c0.434 0.109 0.758 0.503 0.758 0.969v2c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1v-2c0-0.466 0.324-0.86 0.758-0.969l0.742-14.031h1l0.742 14.031z"/>
+    </svg>,
+  documents:
+    <svg id="icon-documents" viewBox="0 0 32 32">
+      <title>documents</title>
+      <path d="M8.997 3c0.007-1.106 0.904-2 2.011-2h9.991v6.002c0 1.111 0.898 1.998 2.006 1.998h4.994v17.003c0 1.107-0.894 1.997-1.997 1.997-0.007 1.106-0.899 2-2 2-0.007 1.106-0.899 2-2 2h-15.005c-1.107 0-1.997-0.899-1.997-2.007v-22.985c0-1.109 0.894-2.007 1.997-2.007 0.003-1.102 0.897-2 2-2v0zM7 27.993l-0-21.993c-0.552 0-1 0.455-1 0.995v23.009c0 0.55 0.455 0.995 1 0.995h15c0.552 0 1-0.455 1-0.995l-14.003-0.005c-1.107 0-1.997-0.899-1.997-2.007zM8 4.995v23.009c0 0.55 0.455 0.995 1 0.995h15c0.552 0 1-0.455 1-0.995l-14.003-0.005c-1.107 0-1.997-0.899-1.997-2.007v-21.993c-0.552 0-1 0.455-1 0.995v0zM22 1v5.997c0 0.554 0.451 1.003 0.991 1.003h5.009l-6-7z"/>
+    </svg>,
+  google:
     <svg id="icon-google" viewBox="0 0 32 32">
       <title>google</title>
       <path fill="#4285f4" d="M16.32 13.713v5.487h9.075c-0.367 2.353-2.741 6.899-9.075 6.899-5.46 0-9.919-4.519-9.919-10.099s4.46-10.099 9.919-10.099c3.107 0 5.188 1.319 6.38 2.465l4.339-4.184c-2.787-2.601-6.4-4.183-10.719-4.183-8.847 0-16 7.153-16 16s7.153 16 16 16c9.235 0 15.36-6.492 15.36-15.635 0-1.051-0.113-1.853-0.252-2.652h-15.108z"/>
+    </svg>,
+  profiles:
+    <svg id="icon-profiles" viewBox="0 0 36 32">
+      <title>profiles</title>
+      <path d="M24 24.082v-1.649c2.203-1.241 4-4.337 4-7.432 0-4.971 0-9-6-9s-6 4.029-6 9c0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h28c0-4.030-5.216-7.364-12-7.918z"/>
+      <path d="M10.225 24.854c1.728-1.13 3.877-1.989 6.243-2.513-0.47-0.556-0.897-1.176-1.265-1.844-0.95-1.726-1.453-3.627-1.453-5.497 0-2.689 0-5.228 0.956-7.305 0.928-2.016 2.598-3.265 4.976-3.734-0.529-2.39-1.936-3.961-5.682-3.961-6 0-6 4.029-6 9 0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h8.719c0.454-0.403 0.956-0.787 1.506-1.146z"/>
     </svg>
-  )
 };

src/App.test.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const Dashboard = () => <h1>Welcome!</h1>;

src/App.tsx

@@ -5,7 +5,6 @@ import { SVGs } from "../../commons/svg.list";
 
 import './login.style.scss';
 
-
 export class LoginComponent extends React.Component {
   private _FB: FirebaseService = new FirebaseService();
 
@@ -15,7 +14,7 @@ export class LoginComponent extends React.Component {
         <h1>Please Login</h1>
         <button className="Button--GoogleSignIn no-underline near-white bg-animate bg-dark-blue hover-bg-gray inline-flex items-center ma2 tc br2 pa0" onClick={this._FB.signInWithGoogle}>
           <div className="dib h3 w3 pa1 bg-white">
-            {SVGs.google()}
+            {SVGs.google}
           </div>
         <span className="f6 ml3 pr2">
           Sign in with Google

src/commons/svg.list.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import {SVGs} from "../../commons/svg.list";
+
+export const NavTileComponent = (props: {name: string, active: boolean, handler: (name: string) => void }) => {
+
+  const className = () => {
+    const baseClass =  'nav-tile_' + props.name;
+    return props.active ? baseClass.concat(' active') : baseClass;
+  };
+
+  return (
+    <div className={className()}>
+      {SVGs[props.name]}
+      <span className="nav-tile--label">{props.name}</span>
+    </div>
+  );
+};

src/components/dashboard/dashboard.component.tsx

@@ -1,17 +1,29 @@
 import * as React from 'react';
+import { NavTileComponent } from "./nav-tile.component";
 
 import './nav.style.scss';
 
-export class NavComponent extends React.Component {
-  public render() {
+export interface INavComponentProps {
+  navigationHandler: (name: string) => void;
+  active: string
+  tiles: string[];
+}
+
+export const NavComponent = (props: INavComponentProps) => {
+
+    // noinspection HtmlUnknownTarget
     return(
       <div className="navigation-wrapper">
-        <div>Logo</div>
+        <img src="./static/images/TCLC_Profiles.png" alt="The Commons Law Center Logo" />
         <div>Dashboard</div>
-        <div>Documents</div>
-        <div>Profiles</div>
+        {props.tiles.map(name => {
+          return (
+            <NavTileComponent name={name}
+                              handler={props.navigationHandler}
+                              active={props.active === name}
+                              key={name+'Tile'}/>
+          );
+        })}
       </div>
     )
-  }
-
-}
+};