Merge pull request #195 from chef/nls/misc

Merged change 77604389-51f0-4119-ba2b-bd11549e1c14

From review branch nls/misc into master

Signed-off-by: adam <[email protected]>

web/README.md

@@ -33,6 +33,33 @@ TASK_NAME`.
 * `repl`: Start a TypeScript REPL
 * `start`: Watch for changes and start a development server running on port 3000
 
+### Code Style Conventions
+
+These are guidelines for how to structure and format code in the application.
+
+* TypeScript is linted with [TSLint](http://palantir.github.io/tslint/). The
+  rules followed in this repository are in the [tslint.json](tslint.json) file.
+  Check your code with `npm run lint-js`.
+* SCSS is linted with [Sass Lint](https://github.com/sasstools/sass-lint). The
+  rules followed in this repository are in the [.sass-lint.yml](.sass-lint.yml)
+  file. Check your code with `npm run lint-css`.
+* TypeScript files should be named the same name as their default export (or the
+  main thing they are concerned with, if there is no default export), so if a
+  file has `export default class AppComponent {}`, it should be named
+  AppComponent.ts. If a module exports many things, it should given an
+  appropriate name and use camelCase.
+* Directories should be made for components and their associated files when
+  there is more than one file that pertains to a component.
+* Directories that end in -page/ and components that are SomethingPageComponent
+  are "page components", meaning they represent something that functions as a
+  page in the app. All of these should be used in the `RouteConfig` of the
+  AppComponent.
+* Directory names and SCSS file names should use snake-case.
+* SCSS files should start with an underscore and use snake-case:
+  \_my-thing.scss. (in Sass, files that start with underscore are partials and
+  can be loaded into other files. [app/app.scss](app/app.scss) imports these
+  files.)
+
 ## "Production"
 
 To build the JavaScript and CSS files, run `npm run build`.

web/app/AppComponent.ts

@@ -5,17 +5,17 @@
 // is made available under an open source license such as the Apache 2.0 License.
 
 import {AppStore} from "./AppStore";
-import {Component, Inject} from "angular2/core";
+import {Component} from "angular2/core";
 import {HeaderComponent} from "./header/HeaderComponent";
-import {HomeComponent} from "./home/HomeComponent";
-import {PackageComponent} from "./package/PackageComponent";
-import {PackagesComponent} from "./packages/PackagesComponent";
-import {Router, RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
-import {SignInComponent} from "./sign-in/SignInComponent";
+import {HomePageComponent} from "./home-page/HomePageComponent";
+import {PackagePageComponent} from "./package-page/PackagePageComponent";
+import {PackagesPageComponent} from "./packages-page/PackagesPageComponent";
+import {RouteConfig, Router, RouterOutlet} from "angular2/router";
+import {SignInPageComponent} from "./sign-in-page/SignInPageComponent";
 import {routeChange} from "./actions";
 
 @Component({
-  directives: [ROUTER_DIRECTIVES, HeaderComponent],
+  directives: [HeaderComponent, RouterOutlet],
   selector: "bldr",
   template: `
     <div class="bldr-container">
@@ -31,27 +31,32 @@ import {routeChange} from "./actions";
 })
 
 @RouteConfig([
-  { path: "/", name: "Home", component: HomeComponent },
-  { path: "/packages", name: "Packages", component: PackagesComponent },
-  { path: "/packages/:derivation", name: "PackagesForDerivation", component: PackagesComponent },
+  { path: "/", name: "Home", component: HomePageComponent },
+  { path: "/packages", name: "Packages", component: PackagesPageComponent },
+  { path: "/packages/:derivation", name: "PackagesForDerivation",
+    component: PackagesPageComponent },
   { path: "/packages/:derivation/:name/:version/:release", name: "Package",
-    component: PackageComponent },
-  { path: "/sign-in", name: "Sign In", component: SignInComponent },
+    component: PackagePageComponent },
+  { path: "/sign-in", name: "Sign In", component: SignInPageComponent },
 ])
 
 export class AppComponent {
-  private state;
-
   constructor(private router: Router, private store: AppStore) {
-    this.state = store.getState();
-
+    // Whenever the Angular route has an event, dispatch an event with the new
+    // route data.
     router.subscribe(value => store.dispatch(routeChange(value)));
 
+    // Listen for changes on the state.
     store.subscribe(state => {
-      let requestedRoute = store.getState().requestedRoute;
-      console.log("New state received ", state.toObject());
-
+      // If the state has a requestedRoute attribute, use the router to navigate
+      // to the route that was requested.
+      const requestedRoute = state.requestedRoute;
       if (requestedRoute) { router.navigate(requestedRoute); }
+
+      // For now, just dump the state in the console whenever it changes.
+      console.log("New state received ", state.toObject());
     });
   }
+
+  get state() { return this.store.getState(); }
 }

web/app/actions.ts

@@ -6,6 +6,7 @@
 
 export const ROUTE_CHANGE = "ROUTE_CHANGE";
 export const ROUTE_REQUESTED = "ROUTE_REQUESTED";
+export const SET_CURRENT_PACKAGE = "SET_CURRENT_PACKAGE";
 export const SET_VISIBLE_PACKAGES = "SET_VISIBLE_PACKAGES";
 export const SIGN_IN_ATTEMPT = "SIGN_IN_ATTEMPT";
 export const SIGN_UP_ATTEMPT = "SIGN_UP_ATTEMPT";
@@ -51,6 +52,13 @@ export function requestRoute(requestedRoute: Array<any>) {
   };
 }
 
+export function setCurrentPackage(pkg) {
+  return {
+    type: SET_CURRENT_PACKAGE,
+    payload: pkg,
+  };
+}
+
 export function toggleUserNavMenu() {
   return {
     type: TOGGLE_USER_NAV_MENU

web/app/app.scss

@@ -10,10 +10,10 @@
 
 @import "header/header";
 @import "header/user-nav/user-nav";
-@import "home/home";
-@import "package/package";
-@import "packages/packages";
-@import "sign-in/sign-in";
+@import "home-page/home-page";
+@import "package-page/package-page";
+@import "packages-page/packages-page";
+@import "sign-in-page/sign-in-page";
 @import "sign-up-form/sign-up-form";
 
 .bldr-container {

web/app/boot.ts

@@ -7,10 +7,13 @@
 import "angular2/bundles/angular2-polyfills";
 import {AppComponent} from "./AppComponent";
 import {AppStore} from "./AppStore";
-import {ROUTER_PROVIDERS} from "angular2/router";
+import {bind} from "angular2/core";
+import {LocationStrategy, HashLocationStrategy, ROUTER_PROVIDERS} from "angular2/router";
 import {bootstrap} from "angular2/platform/browser";
 
 bootstrap(AppComponent, [
   AppStore,
   ROUTER_PROVIDERS,
+// Temporarily commenting this out
+//  bind(LocationStrategy).toClass(HashLocationStrategy)
 ]);

web/app/header/HeaderComponent.ts

@@ -5,12 +5,12 @@
 // is made available under an open source license such as the Apache 2.0 License.
 
 import {Component} from "angular2/core";
-import {ROUTER_DIRECTIVES} from "angular2/router";
+import {RouterLink} from "angular2/router";
 import {UserNavComponent} from "./user-nav/UserNavComponent";
 
 @Component({
-  directives: [ROUTER_DIRECTIVES, UserNavComponent],
-  inputs: ["appName"],
+  directives: [RouterLink, UserNavComponent],
+  inputs: ["appName", "routeParams"],
   selector: "bldr-header",
   template: `
     <header class="bldr-header">
@@ -29,12 +29,6 @@ import {UserNavComponent} from "./user-nav/UserNavComponent";
 })
 
 export class HeaderComponent {
-  // Ok I get that some of the state exists in the URL, but why aren't you using
-  // something like RouteParams instead of window.location?
-  //
-  // Because I was having some trouble with those and this works.
-  //
-  // See also https://github.com/angular/angular/issues/4016
   get onAllPackages() {
     return window.location.pathname === "/packages" &&
       window.location.search.replace("?show=", "") !== "mine";

web/app/header/_header.scss

@@ -3,14 +3,14 @@
   margin-bottom: $base-spacing;
 
   h1 {
-    @include span-columns(1);
+    @include span-columns(2);
     display: inline;
     margin-bottom: 0;
   }
 
   &-links {
     padding: 0.3em;
-    @include span-columns(10);
+    @include span-columns(9);
     display: inline-block;
 
     ul {

web/app/home/HomeComponent.ts → web/app/home-page/HomePageComponent.ts

@@ -24,7 +24,7 @@ import {requestRoute} from "../actions";
   `,
 })
 
-export class HomeComponent {
+export class HomePageComponent {
   constructor(private store: AppStore) {}
 
   ngOnInit() {

web/app/initialState.ts

@@ -0,0 +1,22 @@
+///<reference path='../node_modules/immutable/dist/immutable.d.ts'/>
+
+import * as Immutable from "immutable";
+import packages from "../fixtures/packages.ts";
+
+export default Immutable.Record({
+  appName: "bldr",
+  currentPackage: null,
+  currentYear: new Date().getFullYear(),
+  email: null,
+  isSignUpFormSubmitted: false,
+  isSignedIn: true,
+  isUserNavOpen: false,
+  packages,
+  password: null,
+  requestedRoute: null,
+  route: null,
+  username: "smith",
+  visiblePackages: [],
+})();
+
+

web/app/package/PackageListComponent.ts → web/app/package-page/PackageListComponent.ts

@@ -5,11 +5,11 @@
 // is made available under an open source license such as the Apache 2.0 License.
 
 import {Component} from "angular2/core";
-import {RouterLink, RouteParams} from "angular2/router";
+import {RouterLink} from "angular2/router";
 import {isPackage, packageString} from "../util";
 
 @Component({
-  inputs: ["packages"],
+  inputs: ["currentPackage", "packages"],
   directives: [RouterLink],
   selector: "package-list",
   template: `
@@ -28,8 +28,8 @@ import {isPackage, packageString} from "../util";
 })
 
 export class PackageListComponent {
-  constructor(private routeParams: RouteParams) {}
+  private currentPackage: Object;
+  private packages: Array<Object>;
   private isPackage(x, y) { return isPackage(x, y); }
   private packageString(pkg) { return packageString(pkg); }
-  get currentPackage() { return this.routeParams.params; }
 }

web/app/package/PackageComponent.ts → web/app/package-page/PackagePageComponent.ts

@@ -4,20 +4,22 @@
 // this file ("Licensee") apply to Licensee's use of the Software until such time that the Software
 // is made available under an open source license such as the Apache 2.0 License.
 
+import query from "../query";
 import {AppStore} from "../AppStore";
 import {Component} from "angular2/core";
-import {RouteParams, RouterLink} from "angular2/router";
+import {OnInit} from "angular2/core";
 import {PackageListComponent} from "./PackageListComponent";
-import {packageString} from "../util";
-import query from "../query";
+import {RouteParams, RouterLink} from "angular2/router";
+import {isPackage, packageString} from "../util";
+import {setCurrentPackage} from "../actions";
 
 @Component({
   directives: [PackageListComponent, RouterLink],
   template: `
   <div>
     <div *ngIf="!package" class="bldr-package">
       <h2>Not Found</h2>
-      <p>{{currentPackageIdString}} does not exist.</p>
+      <p>{{packageString(package)}} does not exist.</p>
       <p>Here's how you would make it: &hellip;</p>
     </div>
     <div *ngIf="package" class="bldr-package">
@@ -48,54 +50,61 @@ import query from "../query";
       </div>
       <div class="bldr-package-versions">
         <h3>Available Versions</h3>
-        <package-list [packages]="versions"></package-list>
+        <package-list [currentPackage]="package"
+                      [packages]="versions"></package-list>
       </div>
       <div class="bldr-package-releases">
         <h3>Releases <small>of version {{package.version}}</small></h3>
-        <package-list [packages]="releases"></package-list>
+        <package-list [currentPackage]="package"
+                      [packages]="releases"></package-list>
       </div>
       <div class="bldr-package-deps-build">
         <h3>Build Dependencies</h3>
-        <package-list [packages]="package.buildDependencies"></package-list>
+        <package-list [currentPackage]="package"
+                      [packages]="package.buildDependencies"></package-list>
       </div>
       <div class="bldr-package-deps-runtime">
         <h3>Runtime Dependencies</h3>
-        <package-list [packages]="package.dependencies"></package-list>
+        <package-list [currentPackage]="package"
+                      [packages]="package.dependencies"></package-list>
       </div>
     </div>
   </div>
   `,
 })
 
-export class PackageComponent {
-  private currentPackageParams;
-  private allPackages;
+export class PackagePageComponent implements OnInit {
   private releases;
   private versions;
 
   constructor (private routeParams: RouteParams, private store: AppStore) {
-    this.allPackages = this.store.getState().packages;
-    this.currentPackageParams = this.routeParams.params;
     this.releases = query(this.allPackages).
       allReleasesForPackageVersion(this.package).
       toArray();
     this.versions = query(this.allPackages).
       allVersionsForPackage(this.package).
       toArray();
-    console.log(this.versions);
   }
 
-  get currentPackageIdString() {
-    return packageString(this.currentPackageParams);
-  }
+  // Initially set up the package to be whatever comes from the params,
+  // so we can query for its versions and releases. In ngOnInit, we'll
+  // populate more data by dispatching setCurrentPackage.
+  get package() {
+    const currentPackageFromState = this.store.getState().currentPackage;
+    const params = this.routeParams.params;
 
-  get package () {
-    return query(this.allPackages).
-      fromParams(this.currentPackageParams).
-      first();
+    // Use the currentPackage from the state if it's the same package we want
+    // here.
+    if (isPackage(currentPackageFromState || {}, params)) {
+      return currentPackageFromState;
+    } else {
+      return params;
+    }
   }
 
-  packageString(pkg) {
-    return packageString(pkg);
-  }
+  get allPackages() { return this.store.getState().packages; }
+
+  ngOnInit() { this.store.dispatch(setCurrentPackage(this.package)); }
+
+  packageString(params) { return packageString(params); }
 }

web/app/packages/PackagesComponent.ts → web/app/packages-page/PackagesPageComponent.ts

@@ -5,8 +5,8 @@
 // is made available under an open source license such as the Apache 2.0 License.
 
 import {AppStore} from "../AppStore";
-import {Component} from "angular2/core";
-import {RouteParams, Router, RouterLink} from "angular2/router";
+import {Component, OnInit} from "angular2/core";
+import {RouteParams, RouterLink} from "angular2/router";
 import {filterPackagesBy, requestRoute} from "../actions";
 
 @Component({
@@ -39,7 +39,7 @@ import {filterPackagesBy, requestRoute} from "../actions";
   `
 })
 
-export class PackagesComponent {
+export class PackagesPageComponent implements OnInit {
   constructor(private store: AppStore, private routeParams: RouteParams) {}
 
   get derivation() {