From 123349f1e83e7eb7fe3ffecd2240177762a2d554 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Thu, 4 Mar 2021 18:20:08 +0000
Subject: [PATCH] feat(frontend): simplifies streams page

---
 packages/frontend/src/graphql/user.gql  | 14 ++++-
 packages/frontend/src/views/Profile.vue |  4 +-
 packages/frontend/src/views/Streams.vue | 75 ++++++++++++++++++++++---
 3 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/graphql/user.gql b/packages/frontend/src/graphql/user.gql
index 568f091bb..209346af6 100644
--- a/packages/frontend/src/graphql/user.gql
+++ b/packages/frontend/src/graphql/user.gql
@@ -10,11 +10,21 @@ query {
     profiles
     role
     suuid
-    streams{
+    streams {
       totalCount
     }
-    commits{
+    commits {
       totalCount
+      items {
+        id
+        streamId
+        streamName
+        authorId
+        authorName
+        authorAvatar
+        message
+        branchName
+      }
     }
   }
 }
diff --git a/packages/frontend/src/views/Profile.vue b/packages/frontend/src/views/Profile.vue
index 2cb2105f1..01a698d24 100644
--- a/packages/frontend/src/views/Profile.vue
+++ b/packages/frontend/src/views/Profile.vue
@@ -5,7 +5,7 @@
         <user-info-card :user="user"></user-info-card>
       </v-col>
       <v-col cols="12" sm="12" md="8" lg="9" xl="7" class="pt-10">
-        <v-card v-if="user" class="mb-3">
+        <!-- <v-card v-if="user" class="mb-3">
           <v-card-text class="body-1">
             <span>
               You have
@@ -18,7 +18,7 @@
             </span>
             <v-btn icon to="/streams"><v-icon>mdi-arrow-right</v-icon></v-btn>
           </v-card-text>
-        </v-card>
+        </v-card> -->
         <user-authorised-apps />
         <v-alert type="info" class="my-5 mt-10">
           Heads up! The sections below are intended for developers.
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index 5ba48934b..d98877906 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -2,12 +2,12 @@
   <v-container>
     <v-row>
       <v-col cols="12" sm="12" md="4" lg="3" xl="2">
-        <v-card rounded="lg" class="pa-5" elevation="0" color="background">
-          <v-card-title>Streams</v-card-title>
-          <v-card-text>
+        <v-card rounded="lg" class="mt-5 mx-5" elevation="0" color="background">
+          <!-- <v-card-title>Streams</v-card-title> -->
+          <!-- <v-card-text>
             You have {{ streams.totalCount }} stream{{ streams.totalCount == 1 ? `` : `s` }}
             in total.
-          </v-card-text>
+          </v-card-text> -->
           <v-card-actions>
             <v-btn color="primary" elevation="0" block @click="newStreamDialog = true">
               <v-icon small class="mr-1">mdi-plus-box</v-icon>
@@ -18,9 +18,55 @@
             <new-stream-dialog :open="newStreamDialog" />
           </v-dialog>
         </v-card>
+
+        <v-card v-if="user" rounded="lg" class="mx-5 mt-3" elevation="0" color="background">
+          <v-card-title class="subtitle-1 pb-0">Recent Commits</v-card-title>
+          <v-list color="transparent" two-lines class="recent-commits">
+            <v-list-item v-for="(commit, i) in user.commits.items" :key="i">
+              <v-list-item-avatar size="30" class="mr-2">
+                <user-avatar
+                  :id="commit.authorId"
+                  :avatar="commit.authorAvatar"
+                  :size="30"
+                  :name="commit.authorName"
+                />
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title class="subtitle-2">
+                  <router-link :to="'streams/' + commit.streamId + '/commits/' + commit.id">
+                    {{ commit.message }}
+                  </router-link>
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  in
+                  <router-link :to="'streams/' + commit.streamId">
+                    {{ commit.streamName }}
+                  </router-link>
+                </v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+          <v-card-actions></v-card-actions>
+          <v-dialog v-model="newStreamDialog" max-width="500">
+            <new-stream-dialog :open="newStreamDialog" />
+          </v-dialog>
+        </v-card>
       </v-col>
       <v-col cols="12" sm="12" md="8" lg="9" xl="7">
-        <v-card class="mt-4" elevation="0" color="transparent">
+        <v-card class="mt-5 mb-3 mx-4">
+          <v-card-text class="body-1">
+            <span>
+              You have
+              <v-icon small>mdi-compare-vertical</v-icon>
+              <b>{{ user.streams.totalCount }}</b>
+              streams and
+              <v-icon small>mdi-source-commit</v-icon>
+              <b>{{ user.commits.totalCount }}</b>
+              commits.
+            </span>
+          </v-card-text>
+        </v-card>
+        <v-card elevation="0" color="transparent">
           <div v-if="$apollo.loading">
             <v-skeleton-loader type="card, article, article"></v-skeleton-loader>
           </div>
@@ -45,17 +91,22 @@
 import gql from 'graphql-tag'
 import ListItemStream from '../components/ListItemStream'
 import NewStreamDialog from '../components/dialogs/NewStreamDialog'
+import UserAvatar from '../components/UserAvatar'
 import streamsQuery from '../graphql/streams.gql'
+import userQuery from '../graphql/user.gql'
 import InfiniteLoading from 'vue-infinite-loading'
 
 export default {
   name: 'Streams',
-  components: { ListItemStream, NewStreamDialog, InfiniteLoading },
+  components: { ListItemStream, NewStreamDialog, InfiniteLoading, UserAvatar },
   apollo: {
     streams: {
       prefetch: true,
       query: streamsQuery,
       fetchPolicy: 'cache-and-network' //https://www.apollographql.com/docs/react/data/queries/
+    },
+    user: {
+      query: userQuery
     }
   },
   data: () => ({
@@ -124,4 +175,14 @@ export default {
   }
 }
 </script>
-<style></style>
+<style scoped>
+.recent-commits a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.recent-commits a:hover {
+  text-decoration: underline;
+}
+</style>