Merge pull request #1050 from appirio-tech/dev

Latest listings and some bug bash updates

Author: ajefts

README.md

@@ -20,6 +20,18 @@ In order to test a logged in user, you must make an entry in your `/etc/hosts` f
 - To create the build: `npm run build`
 - To run code linting: `npm run lint`
 - To run the tests: `npm test`
+
+## Running against Production backend
+To run this App against the production backend, you should configure your system in a way that a call to `local.topcoder.com` redirects to `localhost:3000` where the App is running. Then you just `npm run start-prod`, go to `local.topcoder.com` and use your credentials for the production web site (and, sure, be careful with what you are doing, it all will go through the production TopCoder API).
+
+To make the mentioned configuration on Ubuntu 16.04 you:
+- Add `127.0.0.1 local.topcoder.com` to your `/etc/hosts`
+- `$ sudo apt install libcap2-bin`
+- `$ which node` to figure out your `path/to/node`
+- `$ sudo setcap cap_net_bind_service=+ep /path/to/node`
+- Now run the App.
+
+*Disclaimer: I have no idea, what setcap does here, and how safe it is, but it does the job. Feel free to add your comments / modify this section, if you know more about it. Also, if you know how to make such configuration on other OS, please add it here.*
 
 ## Test Users
 - general member user accounts:  

app/index.jade

@@ -17,6 +17,17 @@ html
         h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
       })(document);
 
+    script.
+      (function() {
+        var s = document.createElement("script");
+        s.type = "text/javascript";
+        s.async = true;
+        s.src = '//api.usersnap.com/load/'+
+                '3e7c8f0c-6cf6-41b6-9f2c-e8e4e60dfc59.js';
+        var x = document.getElementsByTagName('script')[0];
+        x.parentNode.insertBefore(s, x);
+      })();
+
     include ../assets/scripts/google.analytics.jade
     include ../assets/scripts/zendesk-widget.jade
     include ../assets/scripts/raven-js.jade
@@ -38,4 +49,4 @@ html
 
     div(ui-view="footer")
 
-    #chart-tooltip
+    #chart-tooltip

app/listings/listings.controller.js

@@ -7,13 +7,13 @@ import { loadUser } from '../services/userv3.service.js'
 
   angular.module('tc.listings').controller('ListingsCtrl', ListingsCtrl)
 
-  ListingsCtrl.$inject = ['CONSTANTS', 'logger', '$q','TcAuthService', 'UserService',
-    'UserStatsService', 'ProfileService', 'ChallengeService',
-    'ExternalAccountService', 'ngDialog', '$anchorScroll', '$scope'
+  ListingsCtrl.$inject = ['$location', '$scope', 'CONSTANTS', 'logger', '$q',
+    'TcAuthService', 'UserService', 'UserStatsService', 'ProfileService', 'ChallengeService', 'ExternalAccountService',
+    'ngDialog', '$anchorScroll'
   ]
-
-  function ListingsCtrl(CONSTANTS, logger, $q, TcAuthService, UserService, UserStatsService, ProfileService,
-  ChallengeService, ExternalAccountService, ngDialog, $anchorScroll, $scope) {
+  
+  function ListingsCtrl($location, $scope, CONSTANTS, logger, $q, TcAuthService,
+  UserService, UserStatsService,ProfileService, ChallengeService, ExternalAccountService, ngDialog, $anchorScroll) {
     var vm = this
     var handle
     vm.neverParticipated = false
@@ -25,7 +25,15 @@ import { loadUser } from '../services/userv3.service.js'
 
     function activate() {
       $scope.myChallenges = []
-      $scope.userProps = { isAuth: false, myChallenges: [] }
+      $scope.reactProps = {
+        config: CONSTANTS,
+        filterFromUrl: $location.hash(),
+        isAuth: false,
+        myChallenges: [],
+        onSaveFilterToUrl: function(filter) {
+          $location.hash(filter)
+        }
+      }
       logger.debug('Calling ListingsController activate()')
       vm.myChallenges = []
       loadUser().then(function(token) {
@@ -75,7 +83,15 @@ import { loadUser } from '../services/userv3.service.js'
           vm.myChallenges = userChallenges.reverse().slice(0, 8)
 
           // update myChallenges
-          $scope.userProps = { isAuth: true, myChallenges: vm.myChallenges }
+          $scope.reactProps = {
+            config: CONSTANTS,
+            filterFromUrl: $location.hash(),
+            isAuth: true,
+            myChallenges: vm.myChallenges,
+            onSaveFilterToUrl: function(filter) {
+              $location.hash(filter)
+            }
+          }
 
           vm.userHasChallenges = true
           vm.loading = false

app/listings/listings.jade

@@ -1,2 +1 @@
-
-<react-component name="ChallengeFiltersExample" props="userProps" watch-depth="reference"/>
+react-component.listings(name="ChallengeFiltersExample" props="reactProps" watch-depth="reference")

app/listings/listings.routes.js

@@ -21,8 +21,6 @@ import angular from 'angular'
       'listings': {
         parent: 'root',
         url: '/listings/',
-        template: require('./listings')(),
-        controller: 'ListingsCtrl as vm',
         resolve: {
           userHandle: ['$stateParams', function($stateParams) {
             return $stateParams.userHandle
@@ -31,6 +29,12 @@ import angular from 'angular'
         data: {
           authRequired: false,
           title: 'Listings'
+        },
+        views: {
+          'container@': {
+            controller: 'ListingsCtrl as vm',
+            template: require('./listings')()
+          }
         }
       }
     }

app/my-dashboard/my-dashboard.jade

@@ -24,3 +24,4 @@
   .programs(id="community", ui-view="programs")
 
   .community-updates(ui-view="community-updates")
+

app/services/blog.service.js

@@ -19,7 +19,8 @@ import X2JS from 'xml2js'
 
       // fetch blog rss feed
       $http.get(CONSTANTS.BLOG_LOCATION)
-        .then(function(data) {
+        .then(function(response) {
+          var data = response.data
           // parse the blog rss feed using x2js
           var parseString = X2JS.parseString
           parseString(data.trim(), function (err, res) {

app/services/jwtInterceptor.service.js

@@ -38,7 +38,7 @@ import { isTokenExpired, getFreshToken } from 'tc-accounts'
 
     function getToken(config) {
       // skip token for .html
-      if (config.url.indexOf('.html') > -1)
+      if (config.url.indexOf('.html') > -1 || config.url === CONSTANTS.BLOG_LOCATION)
         return null
 
       var haveItAddItEndpoints = [

assets/css/directives/challenge-tile.scss

@@ -111,6 +111,7 @@ challenge-tile .challenge.tile-view {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 12px 0;
     flex: 2;
   }
 
@@ -280,6 +281,12 @@ challenge-tile .challenge.tile-view {
   }
 
 
+  @media only screen and (max-width: 768px) {
+    .active-challenge {
+      height: auto;
+      margin: auto;
+    }
+  }
   .completed-challenge {
     height: 390px;
     display: flex;

assets/css/layout/footer.scss

@@ -8,6 +8,7 @@ footer {
 .bottom-footer {
 	background-color: $gray-darkest;
 	padding: 1px 20px 30px 20px;
+  margin-bottom: -20px;
 }
 
 .bottom-footer .menu-item .menu-link {
@@ -125,7 +126,7 @@ footer {
 	// removed fold-pusher from the rule to remove white space
 	.bottom-footer, .fold-pusher {
 	// .bottom-footer {
-		height: 200px;
+		height: auto;
 	}
 	.bottom-footer {
 		padding-top: 40px;

assets/css/layout/header.scss

@@ -183,6 +183,7 @@
 }
 
 .user-menu {
+  max-height: 54px;
   .user-avatar {
     height: 31px;
     width: 31px;

assets/css/my-dashboard/my-challenges.scss

@@ -131,7 +131,10 @@
     }
 
     .challenges {
-      @include horizontal-scroll;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-left: 0;
 
       &.tile-view, &.list-view {
         @media only screen and (min-width: 768px) {
@@ -168,7 +171,6 @@
         margin-bottom: 15px;
         @media only screen and (max-width: 767px) {
           display: inline-block;
-          margin-left: 15px;
 
           &:first-child {
             margin-left: 0;

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "build": "webpack --bail --progress --build --tc",
     "start": "webpack-dev-server --history-api-fallback --host 0.0.0.0 --dev --tc --inline --progress --port 3000",
+    "start-prod": "webpack-dev-server --history-api-fallback --host local.topcoder.com --prod --tc --inline --progress --port 80",
     "lint": "eslint .",
     "test": "karma start --tc --test"
   },