Add loggedIn view for home page

app/i18n/locales/en.json

@@ -16,7 +16,10 @@
     "logged_out_community_header": "A Look Inside the Hive",
     "logged_out_recent_reviews": "Recent Reviews",
     "logged_out_recent_updates": "Recent Updates",
-    "logged_out_join_now": "Join Now!"
+    "logged_out_join_now": "Join Now!",
+    "logged_in_subtitle": "Welcome!",
+    "logged_in_updates": "Updates",
+    "logged_in_interactions": "Interactions"
   },
   "404": {
     "header": "Oops!",

app/views/home/controller.js

@@ -5,19 +5,18 @@ export class HomeController extends ViewController {
     // Super passes state, view name, and default state to ViewController,
     // which stores state in this.appState and the view controller's state to this.state
     super(state, i18n, 'home', {
-      recentReviews: [],
-      recentUpdates: [],
+      loggedOut: {
+        recentReviews: [],
+        recentUpdates: [],
+      },
+      loggedIn: {
+        updates: [],  // statuses, ratings, and reviews from people you follow.
+        interactions: [], // likes, comments, recommendations, etc.
+      },
     });
 
     // If using controller methods in an input's onchange or onclick instance,
     // either bind the class's 'this' instance to the method first...
     // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
   }
-
-  get recentReviews() {
-    return [...this.state.recentReviews];
-  }
-  get recentUpdates() {
-    return [...this.state.recentUpdates];
-  }
 }

app/views/home/index.js

@@ -2,6 +2,7 @@ import html from 'choo/html';
 
 import { HomeController } from './controller';  // The controller for this view, where processing should happen.
 import { loggedOutView } from './loggedOut';
+import { loggedInView } from './loggedIn';
 
 // This is the view function that is exported and used in the view manager.
 export const homeView = (state, emit, i18n) => {
@@ -12,7 +13,7 @@ export const homeView = (state, emit, i18n) => {
   return [
     (!controller.isLoggedIn
       ? loggedOutView(controller, emit)
-      : html`<p>lol wut how are u logged in</p>`
+      : loggedInView(controller, emit)
     ),
   ];
 }

app/views/home/loggedIn.js

@@ -0,0 +1,39 @@
+import html from 'choo/html';
+
+export const loggedInView = (homeController, emit) => {
+  const { __ } = homeController.i18n;
+
+  return [
+    html`<section>
+      <h2>${__('home.logged_in_subtitle')}</h2>
+      <div class="flex one two-700">
+        <div>
+          <div class="card">
+            <header>
+              <h3>${__('home.logged_in_updates')}</h3>
+              <button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.reload')}>
+                <i class="icon-reload"></i>
+              </button>
+            </header>
+            <footer>
+              ${homeController.state.loggedIn.updates.map(update => reviewCard(homeController, update))}
+            </footer>
+          </div>
+        </div>
+        <div>
+          <div class="card">
+            <header>
+              <h3>${__('home.logged_in_interactions')}</h3>
+              <button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.reload')}>
+                <i class="icon-reload"></i>
+              </button>
+            </header>
+            <footer>
+              ${homeController.state.loggedIn.interactions.map(interaction => reviewCard(homeController, interaction))}
+            </footer>
+          </div>
+        </div>
+      </div>
+    </section>`,
+  ];
+}

app/views/home/loggedOut.js

@@ -57,7 +57,7 @@ export const loggedOutView = (homeController, emit) => {
               </button>
             </header>
             <footer>
-              ${homeController.recentReviews.map(review => reviewCard(homeController, review))}
+              ${homeController.state.loggedOut.recentReviews.map(review => reviewCard(homeController, review))}
             </footer>
           </div>
         </div>
@@ -70,7 +70,7 @@ export const loggedOutView = (homeController, emit) => {
               </button>
             </header>
             <footer>
-              ${homeController.recentUpdates.map(review => reviewCard(homeController, review))}
+              ${homeController.state.loggedOut.recentUpdates.map(update => reviewCard(homeController, update))}
             </footer>
           </div>
         </div>