Update UI

Author: PrabhaniN

src/assets/loaders/bars.svg

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <v-card flat>
+      <v-list>
+        <v-list-tile
+          v-for="org in orgsData"
+          :key="org.name"
+          @click="viewOrg(org.name)"
+          avatar
+          ripple
+        >
+          <v-list-tile-avatar>
+            <img :src="org.avatar">
+          </v-list-tile-avatar>
+
+          <v-list-tile-content>
+            <v-list-tile-title v-html="org.name"></v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrgList',
+  computed: {
+    orgsData() {
+      return this.$store.getters.orgsData;
+    }
+  },
+  methods: {
+    viewOrg(name) {
+      this.$router.push({ name: 'orgView', params: { name: name } });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/assets/loaders/block.svg

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <v-card flat ripple>
+      <v-layout justify-center row>
+        <v-flex>
+          <v-avatar size="80">
+            <img :src="userData.dp">
+          </v-avatar>
+        </v-flex>
+        <v-flex>
+          <div class="username ml-3">{{userData.username}}</div>
+          <div class="github-name ml-3">{{userData.githubName}}</div>
+        </v-flex>
+      </v-layout>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserDetails',
+  computed: {
+    userData() {
+      return this.$store.getters.userData;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.username {
+  font-size: 20px;
+}
+.github-name {
+  color: grey;
+  font-size: 15px;
+}
+</style>

src/components/home/OrgList.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div v-if="!isLoading">
+      <v-card flat>
+        <OrgDetails :dp="org.avatar_url" :name="org.login"/>
+        <OrgRepos :orgName="org.login" :repos="orgRepos"/>
+      </v-card>
+    </div>
+
+    <div v-if="isLoading">
+      <img src="@/assets/loaders/block.svg" alt="loading...">
+    </div>
+  </div>
+</template>
+
+<script>
+import OrgDetails from './OrgDetails';
+import OrgRepos from './OrgRepos';
+import axios from 'axios';
+import AxiosHelper from '../../config/AxiosHelper';
+import AuthService from '../../services/authService';
+
+const authService = new AuthService();
+
+export default {
+  name: 'Org',
+  data() {
+    return {
+      org: [],
+      orgRepos: [],
+      isLoading: false
+    };
+  },
+  components: {
+    OrgDetails,
+    OrgRepos
+  },
+  computed: {
+    name() {
+      return this.$route.params.name;
+    }
+  },
+  methods: {
+    loadOrg() {
+      axios
+        .get(`${AxiosHelper.baseUrl}/orgs/${this.name}`, {
+          headers: {
+            Authorization: `token ${authService.getToken()}`
+          }
+        })
+        .then(res => {
+          this.org = res.data;
+          this.loadOrgRepos();
+        })
+        .catch(err => console.log(err));
+    },
+
+    //Can be done in a single call
+    loadOrgRepos() {
+      axios
+        .get(`${AxiosHelper.baseUrl}/orgs/${this.name}/repos`, {
+          headers: {
+            Authorization: `token ${authService.getToken()}`
+          }
+        })
+        .then(res => {
+          this.isLoading = false;
+          this.orgRepos = res.data;
+        })
+        .catch(err => console.log(err));
+    }
+  },
+  created() {
+    this.isLoading = true;
+    this.loadOrg();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/home/UserDetails.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <v-layout class="ma-5" justify-center>
+      <div v-if="!isLoading">
+        <UserDetails/>
+        <div class="mt-5 orgs">Organizations</div>
+        <OrgList/>
+      </div>
+      <div v-if="isLoading">
+        <img src="@/assets/loaders/block.svg" alt="loading...">
+      </div>
+    </v-layout>
+  </div>
+</template>
+
+<script>
+import UserDetails from '../components/home/UserDetails';
+import OrgList from '../components/home/OrgList';
+
+export default {
+  name: 'HomeView',
+  computed: {
+    isLoading() {
+      return this.$store.state.user == '' && this.$store.state.userOrgs == ''
+        ? true
+        : false;
+    }
+  },
+  components: {
+    UserDetails,
+    OrgList
+  },
+  created() {
+    this.$store.dispatch('loadUser');
+    this.$store.dispatch('loadUserOrgs');
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.orgs {
+  font-size: 20px;
+}
+</style>