Merge pull request #12 from ppeerttu/development

Minor fixes

README.md

@@ -1,6 +1,6 @@
 # chat-frontend
 
-Front end for [Slack](https://slack.com)-ish chat application.
+Front end for a hobby chat application.
 Author Perttu Kärnä
 
 ## Tech stack
@@ -48,9 +48,12 @@ To wrap these two into together, we use objects called [Observables](https://xgr
 
 ### To run the development server
 
+See commands above for each step.
+
 1. Install dependencies
 2. Configure API url at src/environments (default http://localhost:3000)
 3. Run the development server
+    * The front end should be available at http://localhost:4200
 4. Stop the server by **Ctrl + C**
 
 ## Thanks to

src/app/middleware/api.ts

@@ -76,31 +76,31 @@ export default () => next => action => {
   const [requestType, successType, errorType] = types;
   // Forwards requestType action down the middleware stack
   next(actionWith({type: requestType, data: data}));
-  return request(method, path, data).then(
-    res => {
-      let type;
-      if (res.status >= 400) {
-        type = errorType;
-        return res.text().then(textData => {
-          return next(actionWith(filterToken({
-            res: textData,
-            type: type
-          })));
-        });
-      } else {
-        type = successType;
-        return res.json().then(jsonData => {
-          return next(actionWith(filterToken({
-            res: jsonData,
-            type: type
-          })));
-        });
-      }
-    }).catch(err => {
-      console.error(err);
-      return next(actionWith(filterToken({
-        error: 'Not able to connect to the service.',
-        type: errorType
-      })));
-    })
+  return request(method, path, data)
+    .then(res => {
+        let type;
+        if (res.status >= 400) {
+          type = errorType;
+          return res.text().then(textData => {
+            return next(actionWith(filterToken({
+              res: textData,
+              type: type
+            })));
+          });
+        } else {
+          type = successType;
+          return res.json().then(jsonData => {
+            return next(actionWith(filterToken({
+              res: jsonData,
+              type: type
+            })));
+          });
+        }
+      }).catch(err => {
+        console.error(err);
+        return next(actionWith(filterToken({
+          error: 'Not able to connect to the service.',
+          type: errorType
+        })));
+      })
 };

src/app/reducers/api.ts

@@ -8,12 +8,6 @@ const types = {
 };
 
 export function apiReducer(state: AppState = INITIAL_STATE, action: ChatAction): AppState {
-
-  if (action.type.includes(types.REQUEST)) {
-    return Object.assign({}, state, {
-      waiting: true
-    });
-  }
   if (action.type.includes(types.SUCCESS)) {
     return Object.assign({}, state, {
       waiting: false
@@ -24,6 +18,11 @@ export function apiReducer(state: AppState = INITIAL_STATE, action: ChatAction):
       waiting: false
     });
   }
+  if (action.type.includes(types.REQUEST)) {
+    return Object.assign({}, state, {
+      waiting: true
+    });
+  }
 
   return Object.assign({}, state);
 }

src/app/views/chat/chat.component.ts

@@ -41,7 +41,7 @@ export class ChatComponent {
           return this.chatAction.openSocket().then(() => {
             if (this.user === null || this.user === undefined) {
               // Get user data and refresh token
-              this.userAction.refreshToken()
+              return this.userAction.refreshToken()
               .then(action => {
                 if (
                   action.type === UserActions.TOKEN_REQUEST_FAILED
@@ -90,6 +90,7 @@ export class ChatComponent {
             if (window.localStorage) {
               window.localStorage.removeItem('token');
             }
+            this.router.navigateByUrl('/login');
           });
         }
 

src/app/views/chat/participants/participants.component.html

@@ -2,6 +2,9 @@
   <div class="header-container">
     <h4>Participants</h4>
   </div>
+  <p id="no-room" *ngIf="!roomId">
+    No room selected! Select a room from My rooms to view participants.
+  </p>
   <div *ngFor="let user of users" class="user-element">
     <i class="material-icons">account_box</i>
     <p>

src/app/views/chat/participants/participants.component.scss

@@ -1,5 +1,10 @@
 @import '../../../../styles.scss';
 
+#no-room {
+    margin: 10px;
+}
+
+
 .header-container {
   background-color: mat-color($chat-app-primary, 700);
   width: 100%;

src/app/views/chat/participants/participants.component.ts

@@ -16,9 +16,9 @@ export class ParticipantsComponent {
   @select() roomsIn$:Observable<RoomInfo[]>;
   @select() viewRoom$:Observable<number>;
   users: User[];
+  roomId: number;
 
   private rooms: RoomInfo[];
-  private roomId: number;
   private roomsInSub;
   private viewRoomSub;
 

src/app/views/chat/settings/settings.component.html

@@ -13,20 +13,3 @@
     <a (click)="logout()" class="logout">Log out</a>
   </li>
 </ul>
-
-<!--
-<mat-list>
-  <mat-list-item>
-    <button class="nav-item" (click)="openProfileModal()" mat-button>Profile <i class="material-icons">account_circle</i></button>
-  </mat-list-item>
-  <mat-list-item>
-    <button class="nav-item" mat-button (click)="goToAbout()">About <i class="material-icons">info</i></button>
-  </mat-list-item>
-  <mat-list-item>
-    <button class="nav-item" mat-button (click)="goToHelp()">Help <i class="material-icons">help</i></button>
-  </mat-list-item>
-  <mat-list-item>
-    <button class="nav-item" mat-button color="warn" (click)="logout()">Log out <i class="fa fa-sign-out fa-2"></i></button>
-  </mat-list-item>
-</mat-list>
--->