From e03807c18efa611e7272b83f7ab8ce5efa14ffe1 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Wed, 8 Dec 2021 18:22:49 +0545
Subject: [PATCH 01/10] Updated sorting keys for channels #15

* Added channels API call fetch channels
* Updated sorting keys on the featured channels component
* Replaced title key with name key in channels, threads and messages
* Modulaized code folder wise
---
 src/components/ButtonComponent.vue            |  7 ---
 src/components/{ => Channels}/ChannelList.vue |  2 +-
 .../{ => Channels}/ChannelListItem.vue        |  6 +--
 .../{ => Channels}/CreateChannel.vue          |  4 +-
 .../{ => Channels}/FeaturedChannelList.vue    | 14 +++---
 src/components/{ => Shared}/FooterSection.vue |  0
 src/components/{ => Shared}/HeaderSection.vue |  2 +-
 src/components/{ => Threads}/ThreadList.vue   |  0
 .../{ => Threads}/ThreadListItem.vue          |  6 +--
 src/components/{ => Threads}/ThreadView.vue   |  0
 .../{ => Threads}/ThreadViewItem.vue          |  2 +-
 src/composables/global/useStore.js            | 43 ++++++++-----------
 src/composables/useChannels.js                |  8 ++--
 src/composables/userSorting.js                |  3 +-
 src/layout/HomePageLayout.vue                 |  4 +-
 src/plugins/axios.js                          | 10 ++---
 src/service/index.js                          |  4 ++
 src/views/ChannelsPage.vue                    |  2 +-
 src/views/LandingPage.vue                     |  9 ++--
 src/views/ThreadsPage.vue                     |  4 +-
 20 files changed, 60 insertions(+), 70 deletions(-)
 delete mode 100644 src/components/ButtonComponent.vue
 rename src/components/{ => Channels}/ChannelList.vue (88%)
 rename src/components/{ => Channels}/ChannelListItem.vue (82%)
 rename src/components/{ => Channels}/CreateChannel.vue (81%)
 rename src/components/{ => Channels}/FeaturedChannelList.vue (80%)
 rename src/components/{ => Shared}/FooterSection.vue (100%)
 rename src/components/{ => Shared}/HeaderSection.vue (89%)
 rename src/components/{ => Threads}/ThreadList.vue (100%)
 rename src/components/{ => Threads}/ThreadListItem.vue (84%)
 rename src/components/{ => Threads}/ThreadView.vue (100%)
 rename src/components/{ => Threads}/ThreadViewItem.vue (97%)

diff --git a/src/components/ButtonComponent.vue b/src/components/ButtonComponent.vue
deleted file mode 100644
index 8e17284..0000000
--- a/src/components/ButtonComponent.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <button
-    class="text-center p-3 rounded ring-2 ring-harvard-red text-xl hover:bg-red-600 hover:text-white hover:ring-white"
-  >
-    <slot></slot>
-  </button>
-</template>
diff --git a/src/components/ChannelList.vue b/src/components/Channels/ChannelList.vue
similarity index 88%
rename from src/components/ChannelList.vue
rename to src/components/Channels/ChannelList.vue
index 74f1824..d8ca07c 100644
--- a/src/components/ChannelList.vue
+++ b/src/components/Channels/ChannelList.vue
@@ -1,6 +1,6 @@
 <template>
   <transition-group name="flip-list" tag="div">
-    <template v-for="item in items" :key="item.title">
+    <template v-for="item in items" :key="item.name">
       <ChannelListItem :item="item" />
     </template>
   </transition-group>
diff --git a/src/components/ChannelListItem.vue b/src/components/Channels/ChannelListItem.vue
similarity index 82%
rename from src/components/ChannelListItem.vue
rename to src/components/Channels/ChannelListItem.vue
index ef6cbcf..770342f 100644
--- a/src/components/ChannelListItem.vue
+++ b/src/components/Channels/ChannelListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link :to="channelLink" :class="getChannelClass(item)">
-    <div class="col-span-8 text-lg">{{ item.title }}</div>
+    <div class="col-span-8 text-lg">{{ item.name }}</div>
     <div class="col-span-2 font-semibold justify-self-end">
       {{ item.thread_count }} threads
     </div>
@@ -29,13 +29,13 @@ export default {
     getChannelClass(item) {
       var className =
         "grid grid-cols-12 gap-6 p-2 text-gray-700 hover:text-red-500 hover:bg-gray-100 cursor-pointer";
-      if (item.title == this.$route.params.channel) className += " bg-gray-100";
+      if (item.name == this.$route.params.channel) className += " bg-gray-100";
       return className;
     },
   },
   computed: {
     channelLink() {
-      return "/channels/" + this.item.title;
+      return "/channels/" + this.item.name;
     },
     channel() {
       return this.$route.params.channel;
diff --git a/src/components/CreateChannel.vue b/src/components/Channels/CreateChannel.vue
similarity index 81%
rename from src/components/CreateChannel.vue
rename to src/components/Channels/CreateChannel.vue
index 7de1a96..6231dda 100644
--- a/src/components/CreateChannel.vue
+++ b/src/components/Channels/CreateChannel.vue
@@ -1,5 +1,5 @@
 <template>
-  <select class="border-2 border-gray-400 p-1" v-if="getLoggedInStatus">
+  <select class="border-2 border-gray-400 p-1" v-if="getLoggedInStatus()">
     <option disabled selected>Create new channel</option>
     <option value="public">Public</option>
     <option value="private">Private</option>
@@ -7,6 +7,6 @@
 </template>
 
 <script setup>
-import useStore from "../composables/global/useStore";
+import useStore from "../../composables/global/useStore";
 const { getLoggedInStatus } = useStore;
 </script>
diff --git a/src/components/FeaturedChannelList.vue b/src/components/Channels/FeaturedChannelList.vue
similarity index 80%
rename from src/components/FeaturedChannelList.vue
rename to src/components/Channels/FeaturedChannelList.vue
index b264027..5d07cd8 100644
--- a/src/components/FeaturedChannelList.vue
+++ b/src/components/Channels/FeaturedChannelList.vue
@@ -23,27 +23,27 @@
 
 <script setup>
 import ChannelList from "./ChannelList.vue";
-import useChannels from "../composables/useChannels";
-import userSorting from "../composables/userSorting";
+import useChannels from "../../composables/useChannels";
+import userSorting from "../../composables/userSorting";
 
 const sortByItems = [
   {
     name: "Default",
-    value: "default",
+    value: "defaultSortAverage",
   },
   {
     name: "Recent",
-    value: "recent",
+    value: "latestMessageCreatedAt",
   },
   {
     name: "Activity",
-    value: "activity",
+    value: "messageCount",
   },
   {
     name: "Starred",
-    value: "starred",
+    value: "follows",
   },
 ];
-const { channels } = useChannels();
+const { channels } = await useChannels();
 const { sortedItems, sortBy } = userSorting(channels);
 </script>
diff --git a/src/components/FooterSection.vue b/src/components/Shared/FooterSection.vue
similarity index 100%
rename from src/components/FooterSection.vue
rename to src/components/Shared/FooterSection.vue
diff --git a/src/components/HeaderSection.vue b/src/components/Shared/HeaderSection.vue
similarity index 89%
rename from src/components/HeaderSection.vue
rename to src/components/Shared/HeaderSection.vue
index 86ecedd..2c5e274 100644
--- a/src/components/HeaderSection.vue
+++ b/src/components/Shared/HeaderSection.vue
@@ -12,6 +12,6 @@
   </div>
 </template>
 <script setup>
-import store from "../composables/global/useStore";
+import store from "../../composables/global/useStore";
 const { getMajorError } = store;
 </script>
diff --git a/src/components/ThreadList.vue b/src/components/Threads/ThreadList.vue
similarity index 100%
rename from src/components/ThreadList.vue
rename to src/components/Threads/ThreadList.vue
diff --git a/src/components/ThreadListItem.vue b/src/components/Threads/ThreadListItem.vue
similarity index 84%
rename from src/components/ThreadListItem.vue
rename to src/components/Threads/ThreadListItem.vue
index a24238d..fecb706 100644
--- a/src/components/ThreadListItem.vue
+++ b/src/components/Threads/ThreadListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link :to="threadLink" :class="getThreadClass(item)">
-    <div class="col-span-8 text-lg">{{ item.title }}</div>
+    <div class="col-span-8 text-lg">{{ item.name }}</div>
     <div class="col-span-2 font-semibold justify-self-end"></div>
     <div class="col-span-2 font-semibold justify-self-end">
       {{ item.comment_count }}
@@ -27,14 +27,14 @@ export default {
     getThreadClass(item) {
       var className =
         "grid grid-cols-12 gap-6 p-2 text-gray-700 hover:text-red-500 hover:bg-gray-100 cursor-pointer";
-      if (item.title == this.$route.params.thread) className += " bg-gray-100";
+      if (item.name == this.$route.params.thread) className += " bg-gray-100";
       return className;
     },
   },
 
   computed: {
     threadLink() {
-      return "/threads/" + this.$route.params.channel + "/" + this.item.title;
+      return "/threads/" + this.$route.params.channel + "/" + this.item.name;
     },
   },
 };
diff --git a/src/components/ThreadView.vue b/src/components/Threads/ThreadView.vue
similarity index 100%
rename from src/components/ThreadView.vue
rename to src/components/Threads/ThreadView.vue
diff --git a/src/components/ThreadViewItem.vue b/src/components/Threads/ThreadViewItem.vue
similarity index 97%
rename from src/components/ThreadViewItem.vue
rename to src/components/Threads/ThreadViewItem.vue
index 168ee58..e5162e2 100644
--- a/src/components/ThreadViewItem.vue
+++ b/src/components/Threads/ThreadViewItem.vue
@@ -29,7 +29,7 @@ export default {
 
   computed: {
     threadLink() {
-      return "/threads/" + this.$route.params.channel + "/" + this.item.title;
+      return "/threads/" + this.$route.params.channel + "/" + this.item.name;
     },
   },
 };
diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index ccba677..138076b 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -11,29 +11,11 @@ const state = reactive({
       active: true,
     },
   ],
-  userThreads: [],
-  threads: [],
   isLoggedIn: true,
-  channels: [
-    {
-      title: "Welcome to class of 2020",
-      thread_count: 30,
-      comment_count: 200,
-      default: 2779817052,
-      recent: 2582008951,
-      activity: 387093808,
-      starred: 124871588,
-    },
-    {
-      title: "Welcome to class of 2021",
-      thread_count: 31,
-      comment_count: 201,
-      default: 128551075,
-      recent: 1697155068,
-      activity: 2025152521,
-      starred: 3801509991,
-    },
-  ],
+  channels: [],
+  userChannels: [],
+  threads: [],
+  userThreads: [],
   majorError: "",
 });
 
@@ -50,7 +32,16 @@ function setAuth(response) {
   state.auth = [{ ...response }];
 }
 
+function setChannels(channels) {
+  state.channels = [...channels];
+}
+
 // Actions
+async function loadChannels() {
+  const channels = await ThreadService.getChannels();
+  setChannels(channels);
+}
+
 async function loadThreads() {
   const threads = await ThreadService.getThreads();
   setThreads(threads);
@@ -113,9 +104,8 @@ const getUserThreads = computed(() => state.userThreads);
 
 const getThreads = computed(() => state.threads);
 
-const getUserToken = computed(() =>
-  VueCookieNext.getCookie("access_user_token")
-);
+const getUserToken = computed(() => VueCookieNext.getCookie("access_token"));
+
 const getChannels = computed(() => state.channels);
 
 const getLoggedInStatus = () =>
@@ -140,12 +130,13 @@ export default {
   loadNewPseudonym,
   registerUser,
   logout,
+  loadChannels,
+  getLoggedInStatus,
 
   getUserThreads,
   getThreads,
   getUserToken,
   getChannels,
-  getLoggedInStatus,
   getPseudonym,
   getMajorError,
 };
diff --git a/src/composables/useChannels.js b/src/composables/useChannels.js
index 9451cb1..afd2b3b 100644
--- a/src/composables/useChannels.js
+++ b/src/composables/useChannels.js
@@ -1,9 +1,9 @@
 import store from "./global/useStore";
 import { reactive } from "vue";
-export default function () {
-  const storeChannels = store.getChannels.value;
-  const channels = reactive(storeChannels);
+export default async function () {
+  const { loadChannels, getChannels } = store;
+  await loadChannels();
   return {
-    channels,
+    channels: getChannels.value,
   };
 }
diff --git a/src/composables/userSorting.js b/src/composables/userSorting.js
index 8ccbde1..6c734a3 100644
--- a/src/composables/userSorting.js
+++ b/src/composables/userSorting.js
@@ -1,5 +1,5 @@
 import { computed, ref } from "vue";
-export default function (items = [], by = "default", order = "asc") {
+export default function (items = [], by = "defaultSortAverage", order = "asc") {
   const sortBy = ref(by);
 
   const sortedItems = computed(() => {
@@ -13,7 +13,6 @@ export default function (items = [], by = "default", order = "asc") {
         return -1 * multiplier;
       }
     });
-
     return items;
   });
 
diff --git a/src/layout/HomePageLayout.vue b/src/layout/HomePageLayout.vue
index 6060b1f..7093f70 100644
--- a/src/layout/HomePageLayout.vue
+++ b/src/layout/HomePageLayout.vue
@@ -5,6 +5,6 @@
 </template>
 
 <script setup>
-import HeaderSection from "../components/HeaderSection.vue";
-import FooterSection from "../components/FooterSection.vue";
+import HeaderSection from "../components/Shared/HeaderSection.vue";
+import FooterSection from "../components/Shared/FooterSection.vue";
 </script>
diff --git a/src/plugins/axios.js b/src/plugins/axios.js
index 6184cbc..b2e32fb 100644
--- a/src/plugins/axios.js
+++ b/src/plugins/axios.js
@@ -3,7 +3,7 @@ import { VueCookieNext } from "vue-cookie-next";
 
 axios.defaults.headers.common[
   "Authorization"
-] = `Bearer ${VueCookieNext.getCookie("user_access_token")}`;
+] = `Bearer ${VueCookieNext.getCookie("access_token")}`;
 
 axios.interceptors.response.use(
   (response) => response,
@@ -13,11 +13,11 @@ axios.interceptors.response.use(
     function refreshToken() {
       const refreshingCall = axios
         .post(`${import.meta.env.VITE_API_SERVER_URL}/v1/auth/refresh-tokens`, {
-          refreshToken: VueCookieNext.getCookie("user_refresh_token"),
+          refreshToken: VueCookieNext.getCookie("refresh_token"),
         })
         .then((res) => {
-          VueCookieNext.setCookie("user_access_token", res.data.access.token);
-          VueCookieNext.setCookie("user_refresh_token", res.data.refresh.token);
+          VueCookieNext.setCookie("access_token", res.data.access.token);
+          VueCookieNext.setCookie("refresh_token", res.data.refresh.token);
 
           axios.defaults.headers.common[
             "Authorization"
@@ -44,7 +44,7 @@ axios.interceptors.response.use(
       return refreshToken().then(() => {
         error.config.headers[
           "Authorization"
-        ] = `Bearer ${VueCookieNext.getCookie("user_access_token")}`;
+        ] = `Bearer ${VueCookieNext.getCookie("access_token")}`;
         error.config.baseURL = undefined;
         error.config.repeating = true;
         return axios.request(error.config);
diff --git a/src/service/index.js b/src/service/index.js
index 2e80707..781b196 100644
--- a/src/service/index.js
+++ b/src/service/index.js
@@ -15,6 +15,10 @@ axios.defaults.headers.common[
 ] = `Bearer ${VueCookieNext.getCookie("access_token")}`;
 
 export default {
+  getChannels: async function () {
+    return await axios.get("/topics").then((x) => x.data);
+  },
+
   getThreads: async function () {
     return await axios.get("/threads").then((x) => x.data);
   },
diff --git a/src/views/ChannelsPage.vue b/src/views/ChannelsPage.vue
index 385c577..3bb5ba6 100644
--- a/src/views/ChannelsPage.vue
+++ b/src/views/ChannelsPage.vue
@@ -19,7 +19,7 @@
 
 <script>
 import SearchBox from "../components/SearchBox.vue";
-import ThreadList from "../components/ThreadList.vue";
+import ThreadList from "../components/Threads/ThreadList.vue";
 import { defineComponent } from "@vue/runtime-core";
 import ThreadService from "../service";
 export default defineComponent({
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
index f2ecfaa..26aaade 100644
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="mx-auto container-width">
     <SearchBox class="my-5" />
-    <FeaturedChannelList />
+    <Suspense>
+      <template #default> <FeaturedChannelList /> </template>
+      <template #fallback>Loading channels...</template>
+    </Suspense>
     <div class="flex justify-end my-4">
       <CreateChannel />
     </div>
@@ -9,8 +12,8 @@
 </template>
 <script>
 import SearchBox from "../components/SearchBox.vue";
-import FeaturedChannelList from "../components/FeaturedChannelList.vue";
-import CreateChannel from "../components/CreateChannel.vue";
+import FeaturedChannelList from "../components/Channels/FeaturedChannelList.vue";
+import CreateChannel from "../components/Channels/CreateChannel.vue";
 export default {
   components: { SearchBox, FeaturedChannelList, CreateChannel },
 };
diff --git a/src/views/ThreadsPage.vue b/src/views/ThreadsPage.vue
index 6cd6147..e6cfeef 100644
--- a/src/views/ThreadsPage.vue
+++ b/src/views/ThreadsPage.vue
@@ -26,8 +26,8 @@
 
 <script>
 import SearchBox from "../components/SearchBox.vue";
-import ThreadList from "../components/ThreadList.vue";
-import ThreadView from "../components/ThreadView.vue";
+import ThreadList from "../components/Threads/ThreadList.vue";
+import ThreadView from "../components/Threads/ThreadView.vue";
 import { defineComponent } from "@vue/runtime-core";
 import ThreadService from "../service";
 export default defineComponent({

From 471d7d4dfcd1b34dc52cd8b49f6c04eb358fe9ee Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Wed, 8 Dec 2021 19:52:43 +0545
Subject: [PATCH 02/10] WIP changes for using one time login

---
 src/components/Banner/BannerSection.vue | 11 +++++++++--
 src/components/Banner/GuestBanner.vue   |  9 +--------
 src/composables/global/useStore.js      | 11 +++++++++++
 src/service/index.js                    |  7 +++++++
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/Banner/BannerSection.vue b/src/components/Banner/BannerSection.vue
index 0bc562f..0aad687 100644
--- a/src/components/Banner/BannerSection.vue
+++ b/src/components/Banner/BannerSection.vue
@@ -14,15 +14,22 @@
           ? defineAsyncComponent(() => import('./LoggedInBanner.vue'))
           : defineAsyncComponent(() => import('./GuestBanner.vue'))
       "
-      :user-token="getUserToken"
+      @login="registerOneTime"
     ></component>
   </div>
 </template>
 
 <script setup>
+import { useRouter } from "vue-router";
 import useStore from "../../composables/global/useStore";
 import { computed } from "@vue/reactivity";
 import { defineAsyncComponent } from "@vue/runtime-core";
 
-const { getLoggedInStatus, getUserToken, getPseudonym } = useStore;
+const router = useRouter();
+const { getLoggedInStatus, getUserToken, getPseudonym, registerOnce } =
+  useStore;
+
+function registerOneTime() {
+  registerOnce();
+}
 </script>
diff --git a/src/components/Banner/GuestBanner.vue b/src/components/Banner/GuestBanner.vue
index 942230b..5abe6e2 100644
--- a/src/components/Banner/GuestBanner.vue
+++ b/src/components/Banner/GuestBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mx-auto w-11/12 lg:w-3/5">
     <div class="lg:w-1/2 lg:inline-block p-3 text-lg">
-      <button class="btn" @click="login">
+      <button class="btn" @click="$emit('login')">
         Use this pseudonym for one session
       </button>
     </div>
@@ -19,13 +19,6 @@
 </template>
 
 <script setup>
-const props = defineProps({
-  userToken: {
-    type: String,
-    required: true,
-  },
-});
-
 const emit = defineEmits(["login"]);
 </script>
 
diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index 138076b..dfeae7f 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -93,6 +93,16 @@ async function registerUser(username, password) {
   });
 }
 
+async function registerOnce() {
+  return await ThreadService.registerOnce({
+    pseudonym: getPseudonym.value.pseudonym,
+    token: getPseudonym.value.token,
+  }).then((x) => {
+    updateUserToken(x.tokens);
+    updateAuth(x.user.pseudonyms);
+  });
+}
+
 async function logout() {
   VueCookieNext.keys().forEach((cookie) => VueCookieNext.removeCookie(cookie));
   state.auth = [...[]];
@@ -132,6 +142,7 @@ export default {
   logout,
   loadChannels,
   getLoggedInStatus,
+  registerOnce,
 
   getUserThreads,
   getThreads,
diff --git a/src/service/index.js b/src/service/index.js
index 781b196..8445231 100644
--- a/src/service/index.js
+++ b/src/service/index.js
@@ -59,4 +59,11 @@ export default {
       })
       .then((x) => x.data);
   },
+  registerOnce: async function (auth) {
+    return await axios
+      .post(`/auth/register`, {
+        ...auth,
+      })
+      .then((x) => x.data);
+  },
 };

From 20fe03aa0788567486eb6e52314922b16cb39097 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Wed, 8 Dec 2021 22:19:00 +0545
Subject: [PATCH 03/10] Added reusable modal

* Added changes to create new channel
* Added changes to open private/public creation modal
---
 src/components/Banner/LoggedInBanner.vue  |  6 --
 src/components/Channels/CreateChannel.vue | 78 ++++++++++++++++++++++-
 src/components/Shared/Modal.vue           | 42 ++++++++++++
 src/composables/global/useStore.js        |  7 ++
 src/composables/useChannels.js            |  2 +-
 src/composables/userSorting.js            |  4 +-
 src/service/index.js                      |  8 +++
 7 files changed, 135 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Shared/Modal.vue

diff --git a/src/components/Banner/LoggedInBanner.vue b/src/components/Banner/LoggedInBanner.vue
index 7225d02..d1cf03a 100644
--- a/src/components/Banner/LoggedInBanner.vue
+++ b/src/components/Banner/LoggedInBanner.vue
@@ -32,12 +32,6 @@
 import { useRouter } from "vue-router";
 import store from "../../composables/global/useStore";
 import { RefreshIcon } from "@heroicons/vue/outline";
-const props = defineProps({
-  userToken: {
-    type: String,
-    required: true,
-  },
-});
 const router = useRouter();
 const { logout } = store;
 async function signout() {
diff --git a/src/components/Channels/CreateChannel.vue b/src/components/Channels/CreateChannel.vue
index 6231dda..4bfbb67 100644
--- a/src/components/Channels/CreateChannel.vue
+++ b/src/components/Channels/CreateChannel.vue
@@ -1,12 +1,84 @@
 <template>
-  <select class="border-2 border-gray-400 p-1" v-if="getLoggedInStatus()">
-    <option disabled selected>Create new channel</option>
+  <select
+    v-model="channelType"
+    @change="openModal"
+    class="border-2 border-gray-400 p-1"
+    v-if="getLoggedInStatus()"
+  >
+    <option disabled selected value="">Create new channel</option>
     <option value="public">Public</option>
     <option value="private">Private</option>
   </select>
+  <Modal :is-open="isModalOpen">
+    <template v-slot:title>Create {{ channelTypeName }} Channel</template>
+    Channel name:
+    <div>
+      <input
+        v-model="channelName"
+        class="rounded border-2 border-gray-500 w-full h-12 px-3 text-xl my-1"
+        type="text"
+      />
+    </div>
+    <div class="text-red-500">{{ message }}</div>
+    <template v-slot:actions>
+      <button class="btn success" @click="processCreate">Create</button>
+      <button class="btn error" @click="closeModal">Cancel</button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>
+import { computed, ref } from "@vue/reactivity";
 import useStore from "../../composables/global/useStore";
-const { getLoggedInStatus } = useStore;
+import Modal from "../Shared/Modal.vue";
+const { getLoggedInStatus, createChannel } = useStore;
+
+const isModalOpen = ref(false);
+const channelType = ref("");
+const channelName = ref("");
+const message = ref("");
+
+const channelTypeName = computed(
+  () => channelType.value[0].toUpperCase() + channelType.value.slice(1)
+);
+
+function closeModal() {
+  document.querySelector("body").classList.remove("modal-open");
+  isModalOpen.value = false;
+}
+
+function openModal() {
+  channelName.value = "";
+  window.scrollTo({ top: 0, left: 0 });
+  isModalOpen.value = true;
+  document.querySelector("body").classList.add("modal-open");
+}
+
+function processCreate() {
+  if (isFormValid()) {
+    createChannel({ name: channelName.value })
+      .then((x) => closeModal())
+      .catch((err) => (message.value = err.response.data.message));
+  } else {
+    message.value = "Name is required";
+  }
+}
+
+function isFormValid() {
+  return channelName.value.trim().length > 0;
+}
 </script>
+
+<style scoped>
+.btn {
+  @apply w-20 my-2 bg-white border-2 border-gray-500 text-lg h-10 leading-3 hover:text-white cursor-pointer;
+}
+
+.btn.success {
+  @apply hover:bg-green-500;
+}
+
+.btn.error {
+  @apply hover:bg-red-500;
+}
+</style>
diff --git a/src/components/Shared/Modal.vue b/src/components/Shared/Modal.vue
new file mode 100644
index 0000000..f1dcbd7
--- /dev/null
+++ b/src/components/Shared/Modal.vue
@@ -0,0 +1,42 @@
+<template>
+  <teleport to="body">
+    <div v-if="isOpen" class="modal">
+      <div class="modal-content">
+        <div class="my-3 text-xl"><slot name="title">Modal Title</slot></div>
+        <div class="flex-grow py-3"><slot>Modal Body</slot></div>
+        <div class="flex justify-end my-3 gap-4">
+          <slot name="actions"><button @click="closeModal"></button></slot>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["close-modal"]);
+
+function closeModal() {
+  emit("close-modal");
+}
+</script>
+
+<style>
+body.modal-open {
+  @apply overflow-y-hidden;
+}
+
+.modal {
+  @apply absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50;
+}
+
+.modal-content {
+  @apply px-6 py-2 bg-white divide-y divide-gray-500 h-72 max-h-80 w-2/5 flex flex-col justify-evenly;
+}
+</style>
diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index dfeae7f..0027030 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -37,6 +37,12 @@ function setChannels(channels) {
 }
 
 // Actions
+
+async function createChannel(payload) {
+  const channels = await ThreadService.createChannel(payload);
+  loadChannels();
+}
+
 async function loadChannels() {
   const channels = await ThreadService.getChannels();
   setChannels(channels);
@@ -143,6 +149,7 @@ export default {
   loadChannels,
   getLoggedInStatus,
   registerOnce,
+  createChannel,
 
   getUserThreads,
   getThreads,
diff --git a/src/composables/useChannels.js b/src/composables/useChannels.js
index afd2b3b..faccbd1 100644
--- a/src/composables/useChannels.js
+++ b/src/composables/useChannels.js
@@ -4,6 +4,6 @@ export default async function () {
   const { loadChannels, getChannels } = store;
   await loadChannels();
   return {
-    channels: getChannels.value,
+    channels: getChannels,
   };
 }
diff --git a/src/composables/userSorting.js b/src/composables/userSorting.js
index 6c734a3..478f838 100644
--- a/src/composables/userSorting.js
+++ b/src/composables/userSorting.js
@@ -3,7 +3,7 @@ export default function (items = [], by = "defaultSortAverage", order = "asc") {
   const sortBy = ref(by);
 
   const sortedItems = computed(() => {
-    items.sort((a, b) => {
+    items.value.sort((a, b) => {
       const multiplier = order === "asc" ? 1 : -1;
       if (a[sortBy.value] == b[sortBy.value]) {
         return 0;
@@ -13,7 +13,7 @@ export default function (items = [], by = "defaultSortAverage", order = "asc") {
         return -1 * multiplier;
       }
     });
-    return items;
+    return items.value;
   });
 
   return {
diff --git a/src/service/index.js b/src/service/index.js
index 8445231..3da50dc 100644
--- a/src/service/index.js
+++ b/src/service/index.js
@@ -15,6 +15,14 @@ axios.defaults.headers.common[
 ] = `Bearer ${VueCookieNext.getCookie("access_token")}`;
 
 export default {
+  createChannel: async function (payload) {
+    return await axios
+      .post("/topics", {
+        ...payload,
+      })
+      .then((x) => x.data);
+  },
+
   getChannels: async function () {
     return await axios.get("/topics").then((x) => x.data);
   },

From 389f569d6fe7ba6fa6cc94447fa41223a9a9ba97 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Wed, 8 Dec 2021 22:37:00 +0545
Subject: [PATCH 04/10] Handling edge cases and reactivity

---
 src/components/Banner/BannerSection.vue   |  2 +-
 src/components/Channels/CreateChannel.vue |  2 +-
 src/composables/global/useStore.js        | 12 +++++++++---
 src/composables/useChannels.js            |  6 ++++--
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Banner/BannerSection.vue b/src/components/Banner/BannerSection.vue
index 0aad687..cfb40bd 100644
--- a/src/components/Banner/BannerSection.vue
+++ b/src/components/Banner/BannerSection.vue
@@ -10,7 +10,7 @@
     </div>
     <component
       :is="
-        getLoggedInStatus()
+        getLoggedInStatus
           ? defineAsyncComponent(() => import('./LoggedInBanner.vue'))
           : defineAsyncComponent(() => import('./GuestBanner.vue'))
       "
diff --git a/src/components/Channels/CreateChannel.vue b/src/components/Channels/CreateChannel.vue
index 4bfbb67..49e2206 100644
--- a/src/components/Channels/CreateChannel.vue
+++ b/src/components/Channels/CreateChannel.vue
@@ -3,7 +3,7 @@
     v-model="channelType"
     @change="openModal"
     class="border-2 border-gray-400 p-1"
-    v-if="getLoggedInStatus()"
+    v-if="getLoggedInStatus"
   >
     <option disabled selected value="">Create new channel</option>
     <option value="public">Public</option>
diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index 0027030..cc4ba99 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -11,7 +11,7 @@ const state = reactive({
       active: true,
     },
   ],
-  isLoggedIn: true,
+  isLoggedIn: VueCookieNext.getCookie("access_token") !== null,
   channels: [],
   userChannels: [],
   threads: [],
@@ -86,6 +86,7 @@ async function loginUser(username, password) {
   return await ThreadService.loginUser(username, password).then((x) => {
     updateUserToken(x.tokens);
     updateAuth(x.user.pseudonyms);
+    state.isLoggedIn = true;
   });
 }
 
@@ -96,6 +97,7 @@ async function registerUser(username, password) {
   }).then((x) => {
     updateUserToken(x.tokens);
     updateAuth(x.user.pseudonyms);
+    state.isLoggedIn = true;
   });
 }
 
@@ -112,6 +114,8 @@ async function registerOnce() {
 async function logout() {
   VueCookieNext.keys().forEach((cookie) => VueCookieNext.removeCookie(cookie));
   state.auth = [...[]];
+  state.isLoggedIn = false;
+
   return await loadNewPseudonym();
 }
 
@@ -124,8 +128,10 @@ const getUserToken = computed(() => VueCookieNext.getCookie("access_token"));
 
 const getChannels = computed(() => state.channels);
 
-const getLoggedInStatus = () =>
-  VueCookieNext.getCookie("pseudonym") && VueCookieNext.getCookie("token");
+const getLoggedInStatus = computed(() => {
+  console.log(state);
+  return state.isLoggedIn;
+});
 
 const getPseudonym = computed(() =>
   state.auth.filter((x) => x.active === true).pop()
diff --git a/src/composables/useChannels.js b/src/composables/useChannels.js
index faccbd1..8885edd 100644
--- a/src/composables/useChannels.js
+++ b/src/composables/useChannels.js
@@ -1,8 +1,10 @@
 import store from "./global/useStore";
 import { reactive } from "vue";
 export default async function () {
-  const { loadChannels, getChannels } = store;
-  await loadChannels();
+  const { loadChannels, getChannels, getLoggedInStatus } = store;
+  if (getLoggedInStatus.value) {
+    await loadChannels();
+  }
   return {
     channels: getChannels,
   };

From 90ffa4b9d50a0ee90508e0c1d82ff1f75b8fdb06 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Wed, 8 Dec 2021 23:47:17 +0545
Subject: [PATCH 05/10] Changed message and thread count key

* Updated store to use authentication status
---
 src/components/Channels/ChannelListItem.vue | 4 ++--
 src/composables/global/useStore.js          | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Channels/ChannelListItem.vue b/src/components/Channels/ChannelListItem.vue
index 770342f..519a964 100644
--- a/src/components/Channels/ChannelListItem.vue
+++ b/src/components/Channels/ChannelListItem.vue
@@ -2,10 +2,10 @@
   <router-link :to="channelLink" :class="getChannelClass(item)">
     <div class="col-span-8 text-lg">{{ item.name }}</div>
     <div class="col-span-2 font-semibold justify-self-end">
-      {{ item.thread_count }} threads
+      {{ item.threadCount }} threads
     </div>
     <div class="col-span-2 font-semibold justify-self-end">
-      {{ item.comment_count }}
+      {{ item.messageCount }}
       <ChatAltIcon class="h-5 w-5 inline-block" />
     </div>
   </router-link>
diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index cc4ba99..ecdcac5 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -108,6 +108,7 @@ async function registerOnce() {
   }).then((x) => {
     updateUserToken(x.tokens);
     updateAuth(x.user.pseudonyms);
+    state.isLoggedIn = true;
   });
 }
 

From 0f7fdd4ea0ce6da88b9528b9cf0a07bdb569c3d6 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Wed, 8 Dec 2021 23:50:33 +0545
Subject: [PATCH 06/10] typo fix

---
 src/components/Channels/FeaturedChannelList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Channels/FeaturedChannelList.vue b/src/components/Channels/FeaturedChannelList.vue
index 5d07cd8..808903b 100644
--- a/src/components/Channels/FeaturedChannelList.vue
+++ b/src/components/Channels/FeaturedChannelList.vue
@@ -16,7 +16,7 @@
     </div>
     <ChannelList v-show="sortedItems.length > 0" :items="sortedItems" />
     <div class="text-red-600" v-show="sortedItems.length === 0">
-      No channles available
+      No channels available
     </div>
   </div>
 </template>

From ade4c39ffe79377374231c731a7e5ec24c52f202 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Sat, 11 Dec 2021 03:40:07 +0545
Subject: [PATCH 07/10] Changes for creating thread #28

- Added create thread component for creating thread
- Added service and store methods for saving new thread
- Updated Thread component to use correct thread keys from backend
- Updated router to load the threads
- Updated router to add threads page as children
- Added methods to load messages and send message
- Updated message sending component to send message and display messages
---
 src/components/Channels/ChannelListItem.vue |  5 +-
 src/components/Threads/CreateThread.vue     | 78 ++++++++++++++++++
 src/components/Threads/ThreadListItem.vue   |  4 +-
 src/components/Threads/ThreadViewItem.vue   |  4 +-
 src/composables/global/useStore.js          | 61 ++++++++++++--
 src/routes/index.js                         | 14 ++--
 src/service/index.js                        | 31 ++++++-
 src/views/ChannelsPage.vue                  | 61 +++++++-------
 src/views/ThreadsPage.vue                   | 89 +++++++--------------
 9 files changed, 232 insertions(+), 115 deletions(-)
 create mode 100644 src/components/Threads/CreateThread.vue

diff --git a/src/components/Channels/ChannelListItem.vue b/src/components/Channels/ChannelListItem.vue
index 519a964..9a34f1c 100644
--- a/src/components/Channels/ChannelListItem.vue
+++ b/src/components/Channels/ChannelListItem.vue
@@ -29,13 +29,14 @@ export default {
     getChannelClass(item) {
       var className =
         "grid grid-cols-12 gap-6 p-2 text-gray-700 hover:text-red-500 hover:bg-gray-100 cursor-pointer";
-      if (item.name == this.$route.params.channel) className += " bg-gray-100";
+      if (item.name == this.$route.params.channelId)
+        className += " bg-gray-100";
       return className;
     },
   },
   computed: {
     channelLink() {
-      return "/channels/" + this.item.name;
+      return `/channels/${this.item.id}/`;
     },
     channel() {
       return this.$route.params.channel;
diff --git a/src/components/Threads/CreateThread.vue b/src/components/Threads/CreateThread.vue
new file mode 100644
index 0000000..da00347
--- /dev/null
+++ b/src/components/Threads/CreateThread.vue
@@ -0,0 +1,78 @@
+<template>
+  <button
+    @click="openModal"
+    class="w-full text-center float-left inline-block border-2 border-gray-500 text-lg px-10 h-10 mt-4 leading-9 hover:bg-gray-100"
+  >
+    Create new thread
+  </button>
+  <Modal :is-open="isModalOpen">
+    <template v-slot:title>Create new thread</template>
+    Thread name:
+    <div>
+      <input
+        v-model="threadName"
+        class="rounded border-2 border-gray-500 w-full h-12 px-3 text-xl my-1"
+        type="text"
+      />
+    </div>
+    <div class="text-red-500">{{ message }}</div>
+    <template v-slot:actions>
+      <button class="btn success" @click="processCreate">Create</button>
+      <button class="btn error" @click="closeModal">Cancel</button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from "@vue/reactivity";
+import useStore from "../../composables/global/useStore";
+import Modal from "../Shared/Modal.vue";
+import { useRoute } from "vue-router";
+const { createThread } = useStore;
+const isModalOpen = ref(false);
+const threadName = ref("");
+const message = ref("");
+const route = useRoute();
+function closeModal() {
+  document.querySelector("body").classList.remove("modal-open");
+  isModalOpen.value = false;
+}
+
+function openModal() {
+  threadName.value = "";
+  window.scrollTo({ top: 0, left: 0 });
+  isModalOpen.value = true;
+  document.querySelector("body").classList.add("modal-open");
+}
+
+function processCreate() {
+  if (isFormValid()) {
+    createThread({
+      name: threadName.value,
+      topicId: route.params.channelId,
+    })
+      .then((x) => closeModal())
+      .catch((err) => (message.value = err.response.data.message));
+  } else {
+    message.value = "Name is required";
+  }
+}
+
+function isFormValid() {
+  return threadName.value.trim().length > 0;
+}
+</script>
+
+<style scoped>
+.btn {
+  @apply w-20 my-2 bg-white border-2 border-gray-500 text-lg h-10 leading-3 hover:text-white cursor-pointer;
+}
+
+.btn.success {
+  @apply hover:bg-green-500;
+}
+
+.btn.error {
+  @apply hover:bg-red-500;
+}
+</style>
diff --git a/src/components/Threads/ThreadListItem.vue b/src/components/Threads/ThreadListItem.vue
index fecb706..3858c97 100644
--- a/src/components/Threads/ThreadListItem.vue
+++ b/src/components/Threads/ThreadListItem.vue
@@ -27,14 +27,14 @@ export default {
     getThreadClass(item) {
       var className =
         "grid grid-cols-12 gap-6 p-2 text-gray-700 hover:text-red-500 hover:bg-gray-100 cursor-pointer";
-      if (item.name == this.$route.params.thread) className += " bg-gray-100";
+      if (item.name == this.$route.params.threadId) className += " bg-gray-100";
       return className;
     },
   },
 
   computed: {
     threadLink() {
-      return "/threads/" + this.$route.params.channel + "/" + this.item.name;
+      return `/channels/${this.$route.params.channelId}/threads/${this.item.id}`;
     },
   },
 };
diff --git a/src/components/Threads/ThreadViewItem.vue b/src/components/Threads/ThreadViewItem.vue
index e5162e2..5a04e22 100644
--- a/src/components/Threads/ThreadViewItem.vue
+++ b/src/components/Threads/ThreadViewItem.vue
@@ -1,7 +1,7 @@
 <template>
   <p :class="getMessageClass(item)">
-    <b>{{ item.username }}</b
-    >: {{ item.message }}
+    <b :title="item.createdAt">{{ item.owner }}</b
+    >: {{ item.body }}
   </p>
   <br />
 </template>
diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index ecdcac5..07275d4 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -21,11 +21,11 @@ const state = reactive({
 
 // Mutations
 function setUserThreads(userThreads) {
-  state.value.userThreads = userThreads;
+  state.userThreads = userThreads;
 }
 
 function setThreads(threads) {
-  state.value.threads = threads;
+  state.threads = [...threads];
 }
 
 function setAuth(response) {
@@ -36,6 +36,23 @@ function setChannels(channels) {
   state.channels = [...channels];
 }
 
+function setMessages(messages) {
+  state.messages = [...messages];
+}
+
+function setMessage(message) {
+  state.messages.push(message);
+}
+
+function addChannel(channel) {
+  const channelId = state.channels.indexOf((x) => x.id === channel.id);
+  if (channelId > -1) {
+    state.channels.splice(channelId, 1, channel);
+  } else {
+    state.channels.push(channel);
+  }
+}
+
 // Actions
 
 async function createChannel(payload) {
@@ -43,13 +60,22 @@ async function createChannel(payload) {
   loadChannels();
 }
 
+async function createThread(payload) {
+  const threads = await ThreadService.createThread(payload);
+  loadThreads(payload.topicId);
+}
+
+async function loadChannel(id) {
+  return await ThreadService.getChannel(id);
+}
+
 async function loadChannels() {
   const channels = await ThreadService.getChannels();
   setChannels(channels);
 }
 
-async function loadThreads() {
-  const threads = await ThreadService.getThreads();
+async function loadThreads(channelId) {
+  const threads = await ThreadService.getThreads(channelId);
   setThreads(threads);
 }
 
@@ -58,6 +84,22 @@ async function loadUserThreads() {
   setUserThreads(userThreads);
 }
 
+async function loadMessages(threadId) {
+  const messages = await ThreadService.getMessages(threadId);
+  setMessages(messages);
+}
+
+async function postMessage(payload) {
+  const message = await ThreadService.postMessage(payload);
+  setMessage(message);
+}
+
+const getThread = (id) => state.threads[id];
+const getChannel = (id) => {
+  const channelId = state.channels.indexOf((x) => x.id === id);
+  return channelId > -1 ? state.channels[channelId] : {};
+};
+
 function updateUserToken(tokens) {
   VueCookieNext.setCookie("access_token", tokens.access.token);
   VueCookieNext.setCookie("access_token_expiry", tokens.access.expires);
@@ -128,9 +170,9 @@ const getThreads = computed(() => state.threads);
 const getUserToken = computed(() => VueCookieNext.getCookie("access_token"));
 
 const getChannels = computed(() => state.channels);
+const getMessages = computed(() => state.messages);
 
 const getLoggedInStatus = computed(() => {
-  console.log(state);
   return state.isLoggedIn;
 });
 
@@ -154,12 +196,19 @@ export default {
   registerUser,
   logout,
   loadChannels,
-  getLoggedInStatus,
+  loadChannel,
+  loadMessages,
+
   registerOnce,
   createChannel,
+  createThread,
+  postMessage,
 
   getUserThreads,
   getThreads,
+  getLoggedInStatus,
+  getThread,
+  getChannel,
   getUserToken,
   getChannels,
   getPseudonym,
diff --git a/src/routes/index.js b/src/routes/index.js
index e00376e..4f37f8b 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -23,14 +23,16 @@ export default [
             component: LandingPage,
           },
           {
-            path: "channels/:channel?",
+            path: "channels/:channelId?",
             name: "home.channels",
             component: ChannelsPage,
-          },
-          {
-            path: "threads/:channel?/:thread?",
-            name: "home.threads",
-            component: ThreadsPage,
+            children: [
+              {
+                path: "threads/:threadId?",
+                name: "home.threads",
+                component: ThreadsPage,
+              },
+            ],
           },
         ],
       },
diff --git a/src/service/index.js b/src/service/index.js
index 3da50dc..5ac40dc 100644
--- a/src/service/index.js
+++ b/src/service/index.js
@@ -23,12 +23,36 @@ export default {
       .then((x) => x.data);
   },
 
+  createThread: async function (payload) {
+    return await axios
+      .post("/threads", {
+        ...payload,
+      })
+      .then((x) => x.data);
+  },
+
+  createMessage: async function (payload) {
+    return await axios
+      .post("/messages/", {
+        ...payload,
+      })
+      .then((x) => x.data);
+  },
+
+  getChannel: async function (id) {
+    return await axios.get(`/topics/${id}`).then((x) => x.data);
+  },
+
   getChannels: async function () {
     return await axios.get("/topics").then((x) => x.data);
   },
 
-  getThreads: async function () {
-    return await axios.get("/threads").then((x) => x.data);
+  getThreads: async function (channelId) {
+    return await axios.get(`/threads/topic/${channelId}`).then((x) => x.data);
+  },
+
+  getMessages: async function (threadId) {
+    return await axios.get(`/messages/${threadId}`).then((x) => x.data);
   },
 
   getUserThreads: async function () {
@@ -50,6 +74,7 @@ export default {
       })
       .then((x) => x.data);
   },
+
   loginUser: async function (username, password) {
     return await axios
       .post(`/auth/login`, {
@@ -58,6 +83,7 @@ export default {
       })
       .then((x) => x.data);
   },
+
   registerUser: async function (username, password, auth) {
     return await axios
       .post(`/auth/register`, {
@@ -67,6 +93,7 @@ export default {
       })
       .then((x) => x.data);
   },
+
   registerOnce: async function (auth) {
     return await axios
       .post(`/auth/register`, {
diff --git a/src/views/ChannelsPage.vue b/src/views/ChannelsPage.vue
index 3bb5ba6..f39af77 100644
--- a/src/views/ChannelsPage.vue
+++ b/src/views/ChannelsPage.vue
@@ -2,52 +2,45 @@
   <div class="mx-auto w-11/12 lg:w-3/5">
     <div class="w-1/2 float-left">
       <div class="mr-2">
-        <h2 class="text-red-500 text-2xl my-4">{{ channel }}</h2>
+        <h2 class="text-red-500 text-2xl my-4">{{ channel.name }}</h2>
         <ThreadList :items="items" />
-        <a
-          class="w-full text-center float-left inline-block border-2 border-gray-500 text-lg px-10 h-10 mt-4 leading-9 hover:bg-gray-100;"
-          >Create new thread</a
-        >
+        <CreateThread />
       </div>
     </div>
     <div class="w-1/2 float-right">
-      <div class="ml-2"></div>
+      <div class="ml-2">
+        <router-view></router-view>
+      </div>
     </div>
     <div class="clear-both"></div>
   </div>
 </template>
 
-<script>
-import SearchBox from "../components/SearchBox.vue";
+<script setup>
 import ThreadList from "../components/Threads/ThreadList.vue";
-import { defineComponent } from "@vue/runtime-core";
-import ThreadService from "../service";
-export default defineComponent({
-  components: { SearchBox, ThreadList },
+import CreateThread from "../components/Threads/CreateThread.vue";
+import useStore from "../composables/global/useStore";
+import { onErrorCaptured, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
+
+onErrorCaptured((e) => {
+  console.error(e);
+});
 
-  computed: {
-    channel() {
-      return this.$route.params.channel;
-    },
-  },
+const { getThreads, loadThreads, getChannel, loadChannel } = useStore;
 
-  async created() {
-    this.items = await ThreadService.getThreads();
-  },
+const items = getThreads;
 
-  data() {
-    return {
-      items: [
-        {
-          title: "Orientation",
-          comment_count: 20,
-        },
-        {
-          title: "Cyber Citizenship",
-          comment_count: 21,
-        },
-      ],
-    };
-  },
+const channel = ref({});
+
+onMounted(async () => {
+  if (Object.keys(channel.value).length == 0) {
+    channel.value = { ...(await loadChannel(route.params.channelId)) };
+  } else {
+    channel.value = getChannel(route.params.channelId);
+  }
 });
+
+loadThreads(route.params.channelId);
 </script>
diff --git a/src/views/ThreadsPage.vue b/src/views/ThreadsPage.vue
index e6cfeef..64d9311 100644
--- a/src/views/ThreadsPage.vue
+++ b/src/views/ThreadsPage.vue
@@ -1,27 +1,12 @@
 <template>
-  <div class="mx-auto w-11/12 lg:w-3/5">
-    <div class="w-1/2 float-left">
-      <div class="mr-2">
-        <h2 class="text-red-500 text-2xl my-4">{{ channel }}</h2>
-        <ThreadList :items="items" />
-        <a
-          class="w-full text-center block border-2 border-gray-500 text-lg px-10 h-10 mt-4 leading-9 hover:bg-gray-100;"
-          >Create new thread</a
-        >
-      </div>
-    </div>
-    <div class="w-1/2 float-right">
-      <div class="ml-2">
-        <h2 class="text-red-500 text-2xl my-4">{{ thread }}</h2>
-        <ThreadView :items="threadItems" />
-        <textarea
-          class="w-full block border-2 border-gray-500 text-lg p-2 h-40 mt-4"
-          placeholder="Message (hit enter to end)"
-        ></textarea>
-      </div>
-    </div>
-    <div class="clear-both"></div>
-  </div>
+  <h2 class="text-red-500 text-2xl my-4">{{ threadId }}</h2>
+  <ThreadView :items="threadItems" />
+  <textarea
+    v-model="message"
+    @keydown.enter.prevent="sendMessage"
+    class="w-full block border-2 border-gray-500 text-lg p-2 h-40 mt-4"
+    placeholder="Message (hit enter to end)"
+  ></textarea>
 </template>
 
 <script>
@@ -30,58 +15,40 @@ import ThreadList from "../components/Threads/ThreadList.vue";
 import ThreadView from "../components/Threads/ThreadView.vue";
 import { defineComponent } from "@vue/runtime-core";
 import ThreadService from "../service";
+import CreateThread from "../components/Threads/CreateThread.vue";
 export default defineComponent({
-  components: { SearchBox, ThreadList, ThreadView },
+  components: { SearchBox, ThreadList, ThreadView, CreateThread },
 
   computed: {
     channel() {
-      return this.$route.params.channel;
+      return this.$route.params.channelId;
     },
-    thread() {
-      return this.$route.params.thread;
+    threadId() {
+      return this.$route.params.threadId;
     },
   },
 
   async created() {
-    this.items = await ThreadService.getThreads();
+    this.threadItems = await ThreadService.getMessages(this.threadId);
   },
 
   data() {
     return {
-      items: [
-        {
-          title: "Orientation",
-          comment_count: 20,
-        },
-        {
-          title: "Cyber Citizenship",
-          comment_count: 21,
-        },
-      ],
-      threadItems: [
-        {
-          id: 1,
-          username: "Poseidon",
-          votes: 1,
-          message:
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus laoreet maximus.",
-        },
-        {
-          id: 2,
-          username: "Luna",
-          votes: -2,
-          message:
-            "Duis volutpat nunc eu lorem tempor pulvinar. Nulla iaculis sem sed nisl ultricies efficitur.",
-        },
-        {
-          id: 3,
-          username: "Poseidon",
-          votes: 2,
-          message:
-            "Pellentesque volutpat, lacus eget laoreet imperdiet, nisl eros tincidunt magna, at maximus enim diam a mauris. Aliquam egestas, risus eu euismod condimentum, sem mi tempor mi, id dignissim lectus ex sit amet magna.",
-        },
-      ],
+      threadItems: [],
+      message: "",
     };
   },
+
+  methods: {
+    sendMessage: function () {
+      if (this.message.trim().length > 0) {
+        const msg = {
+          body: this.message,
+          thread: this.threadId,
+        };
+        ThreadService.createMessage(msg);
+      }
+    },
+  },
 });
 </script>

From 7ec00c038dce4cc743014e9bad8338e7e9714f07 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Sat, 11 Dec 2021 05:26:12 +0545
Subject: [PATCH 08/10] Renamed component to match feature

- Updated active thread text color
- Added fixed height to messages div
- Added scroll to bottom to messages div on load
- Changed definecomponent to script setup
---
 src/components/Threads/ThreadListItem.vue |  3 +-
 src/components/Threads/ThreadView.vue     |  2 +-
 src/components/Threads/ThreadViewItem.vue |  4 +-
 src/routes/index.js                       |  4 +-
 src/views/ChannelsPage.vue                | 46 ------------
 src/views/MessagesPage.vue                | 52 ++++++++++++++
 src/views/ThreadsPage.vue                 | 88 +++++++++++------------
 7 files changed, 100 insertions(+), 99 deletions(-)
 delete mode 100644 src/views/ChannelsPage.vue
 create mode 100644 src/views/MessagesPage.vue

diff --git a/src/components/Threads/ThreadListItem.vue b/src/components/Threads/ThreadListItem.vue
index 3858c97..8d52495 100644
--- a/src/components/Threads/ThreadListItem.vue
+++ b/src/components/Threads/ThreadListItem.vue
@@ -27,7 +27,8 @@ export default {
     getThreadClass(item) {
       var className =
         "grid grid-cols-12 gap-6 p-2 text-gray-700 hover:text-red-500 hover:bg-gray-100 cursor-pointer";
-      if (item.name == this.$route.params.threadId) className += " bg-gray-100";
+      if (item.id == this.$route.params.threadId)
+        className += " bg-gray-100 text-red-500";
       return className;
     },
   },
diff --git a/src/components/Threads/ThreadView.vue b/src/components/Threads/ThreadView.vue
index 7fae348..5f29fa0 100644
--- a/src/components/Threads/ThreadView.vue
+++ b/src/components/Threads/ThreadView.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="rounded p-3 items-center border-2 border-gray-500"
+    class="rounded p-3 items-center border-2 border-gray-500 max-h-96 overflow-y-auto"
     style="min-height: 400px"
   >
     <div class="grid">
diff --git a/src/components/Threads/ThreadViewItem.vue b/src/components/Threads/ThreadViewItem.vue
index 5a04e22..ce52a88 100644
--- a/src/components/Threads/ThreadViewItem.vue
+++ b/src/components/Threads/ThreadViewItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <p :class="getMessageClass(item)">
-    <b :title="item.createdAt">{{ item.owner }}</b
+  <p :class="getMessageClass(item)" :title="item.createdAt">
+    <b>{{ item.owner }}</b
     >: {{ item.body }}
   </p>
   <br />
diff --git a/src/routes/index.js b/src/routes/index.js
index 4f37f8b..51f71a8 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -2,8 +2,8 @@ import HomePageLayout from "../layout/HomePageLayout.vue";
 import LoginPage from "../views/LoginPage.vue";
 import CreateAccountPage from "../views/CreateAccountPage.vue";
 import LandingPageLayout from "../layout/LandingPageLayout.vue";
-import ChannelsPage from "../views/ChannelsPage.vue";
-import ThreadsPage from "../views/ThreadsPage.vue";
+import ChannelsPage from "../views/ThreadsPage.vue";
+import ThreadsPage from "../views/MessagesPage.vue";
 import LandingPage from "../views/LandingPage.vue";
 
 export default [
diff --git a/src/views/ChannelsPage.vue b/src/views/ChannelsPage.vue
deleted file mode 100644
index f39af77..0000000
--- a/src/views/ChannelsPage.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div class="mx-auto w-11/12 lg:w-3/5">
-    <div class="w-1/2 float-left">
-      <div class="mr-2">
-        <h2 class="text-red-500 text-2xl my-4">{{ channel.name }}</h2>
-        <ThreadList :items="items" />
-        <CreateThread />
-      </div>
-    </div>
-    <div class="w-1/2 float-right">
-      <div class="ml-2">
-        <router-view></router-view>
-      </div>
-    </div>
-    <div class="clear-both"></div>
-  </div>
-</template>
-
-<script setup>
-import ThreadList from "../components/Threads/ThreadList.vue";
-import CreateThread from "../components/Threads/CreateThread.vue";
-import useStore from "../composables/global/useStore";
-import { onErrorCaptured, onMounted, reactive, ref } from "vue";
-import { useRoute } from "vue-router";
-const route = useRoute();
-
-onErrorCaptured((e) => {
-  console.error(e);
-});
-
-const { getThreads, loadThreads, getChannel, loadChannel } = useStore;
-
-const items = getThreads;
-
-const channel = ref({});
-
-onMounted(async () => {
-  if (Object.keys(channel.value).length == 0) {
-    channel.value = { ...(await loadChannel(route.params.channelId)) };
-  } else {
-    channel.value = getChannel(route.params.channelId);
-  }
-});
-
-loadThreads(route.params.channelId);
-</script>
diff --git a/src/views/MessagesPage.vue b/src/views/MessagesPage.vue
new file mode 100644
index 0000000..9596714
--- /dev/null
+++ b/src/views/MessagesPage.vue
@@ -0,0 +1,52 @@
+<template>
+  <h2 class="text-white text-2xl my-4">{{ threadId }}</h2>
+  <ThreadView
+    :ref="
+      (el) => {
+        if (el) messageViewRef = el;
+      }
+    "
+    :items="messages"
+  />
+  <textarea
+    v-model="message"
+    @keydown.enter.prevent="sendMessage"
+    class="w-full block border-2 border-gray-500 text-lg p-2 h-40 mt-4"
+    placeholder="Message (hit enter to send)"
+  ></textarea>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { onMounted, reactive, ref, nextTick } from "vue";
+import ThreadView from "../components/Threads/ThreadView.vue";
+import ThreadService from "../service";
+
+const route = useRoute();
+
+const { threadId } = route.params;
+const messages = ref([]);
+const message = ref("");
+const messageViewRef = ref(null);
+
+function sendMessage() {
+  if (message.trim().length > 0) {
+    const msg = {
+      body: message,
+      thread: threadId,
+    };
+    ThreadService.createMessage(msg);
+  }
+}
+
+onMounted(() => {
+  ThreadService.getMessages(threadId).then(async (data) => {
+    messages.value = data;
+    await nextTick();
+    messageViewRef.value.$el.scrollTo({
+      top: messageViewRef.value.$el.scrollHeight,
+      left: 0,
+    });
+  });
+});
+</script>
diff --git a/src/views/ThreadsPage.vue b/src/views/ThreadsPage.vue
index 64d9311..b566b4b 100644
--- a/src/views/ThreadsPage.vue
+++ b/src/views/ThreadsPage.vue
@@ -1,54 +1,48 @@
 <template>
-  <h2 class="text-red-500 text-2xl my-4">{{ threadId }}</h2>
-  <ThreadView :items="threadItems" />
-  <textarea
-    v-model="message"
-    @keydown.enter.prevent="sendMessage"
-    class="w-full block border-2 border-gray-500 text-lg p-2 h-40 mt-4"
-    placeholder="Message (hit enter to end)"
-  ></textarea>
+  <div class="mx-auto w-11/12 lg:w-3/5">
+    <div class="w-1/2 float-left">
+      <div class="mr-2">
+        <h2 class="text-red-500 text-2xl my-4">{{ channel.name }}</h2>
+        <ThreadList :items="items" />
+        <CreateThread />
+      </div>
+    </div>
+    <div class="w-1/2 float-right">
+      <div class="ml-2">
+        <router-view></router-view>
+      </div>
+    </div>
+    <div class="clear-both"></div>
+  </div>
 </template>
 
-<script>
-import SearchBox from "../components/SearchBox.vue";
+<script setup>
 import ThreadList from "../components/Threads/ThreadList.vue";
-import ThreadView from "../components/Threads/ThreadView.vue";
-import { defineComponent } from "@vue/runtime-core";
-import ThreadService from "../service";
 import CreateThread from "../components/Threads/CreateThread.vue";
-export default defineComponent({
-  components: { SearchBox, ThreadList, ThreadView, CreateThread },
-
-  computed: {
-    channel() {
-      return this.$route.params.channelId;
-    },
-    threadId() {
-      return this.$route.params.threadId;
-    },
-  },
-
-  async created() {
-    this.threadItems = await ThreadService.getMessages(this.threadId);
-  },
-
-  data() {
-    return {
-      threadItems: [],
-      message: "",
-    };
-  },
-
-  methods: {
-    sendMessage: function () {
-      if (this.message.trim().length > 0) {
-        const msg = {
-          body: this.message,
-          thread: this.threadId,
-        };
-        ThreadService.createMessage(msg);
-      }
-    },
-  },
+import useStore from "../composables/global/useStore";
+import { onErrorCaptured, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
+
+const messagesRef = ref(null);
+
+onErrorCaptured((e) => {
+  console.error(e);
+});
+
+const { getThreads, loadThreads, getChannel, loadChannel } = useStore;
+
+const items = getThreads;
+
+const channel = ref([]);
+
+onMounted(async () => {
+  if (Object.keys(channel.value).length == 0) {
+    channel.value = { ...(await loadChannel(route.params.channelId)) };
+  } else {
+    channel.value = getChannel(route.params.channelId);
+  }
 });
+
+loadThreads(route.params.channelId);
 </script>

From f4ed05ee5e0904c587fbe9e66abc6aa946a116ad Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Sat, 11 Dec 2021 06:28:52 +0545
Subject: [PATCH 09/10] Added appending of message

* Appending message to the end of message box on send
* Dynamic loading of messages on thread click
* Styling changes and adding titles to match mockup
* Added no message placeholder
---
 src/components/Threads/ThreadList.vue     |  1 +
 src/components/Threads/ThreadListItem.vue |  3 +-
 src/components/Threads/ThreadView.vue     |  3 ++
 src/composables/global/useStore.js        | 10 ++++-
 src/index.css                             |  2 +-
 src/views/MessagesPage.vue                | 47 +++++++++++++++--------
 src/views/ThreadsPage.vue                 |  4 +-
 7 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/components/Threads/ThreadList.vue b/src/components/Threads/ThreadList.vue
index c2bcebe..a4fa6fa 100644
--- a/src/components/Threads/ThreadList.vue
+++ b/src/components/Threads/ThreadList.vue
@@ -4,6 +4,7 @@
     style="min-height: 400px"
   >
     <div class="grid">
+      <span class="px-2 py-1 text-xl font-bold">All Threads:</span>
       <template v-for="item in items" :key="item.id">
         <ThreadListItem :item="item" />
       </template>
diff --git a/src/components/Threads/ThreadListItem.vue b/src/components/Threads/ThreadListItem.vue
index 8d52495..a140439 100644
--- a/src/components/Threads/ThreadListItem.vue
+++ b/src/components/Threads/ThreadListItem.vue
@@ -27,8 +27,7 @@ export default {
     getThreadClass(item) {
       var className =
         "grid grid-cols-12 gap-6 p-2 text-gray-700 hover:text-red-500 hover:bg-gray-100 cursor-pointer";
-      if (item.id == this.$route.params.threadId)
-        className += " bg-gray-100 text-red-500";
+      if (item.id == this.$route.params.threadId) className += "  text-red-500";
       return className;
     },
   },
diff --git a/src/components/Threads/ThreadView.vue b/src/components/Threads/ThreadView.vue
index 5f29fa0..e44dc71 100644
--- a/src/components/Threads/ThreadView.vue
+++ b/src/components/Threads/ThreadView.vue
@@ -4,6 +4,9 @@
     style="min-height: 400px"
   >
     <div class="grid">
+      <span class="text-red-500" v-if="items.length === 0"
+        >No messages. Start a conversation.</span
+      >
       <template v-for="item in items" :key="item.id">
         <ThreadViewItem :item="item" />
       </template>
diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index 07275d4..db6b6e5 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -41,7 +41,12 @@ function setMessages(messages) {
 }
 
 function setMessage(message) {
-  state.messages.push(message);
+  state.messages.push({
+    body: message.body,
+    created: message.createdAt,
+    id: message.id,
+    owner: message.owner.id,
+  });
 }
 
 function addChannel(channel) {
@@ -90,7 +95,7 @@ async function loadMessages(threadId) {
 }
 
 async function postMessage(payload) {
-  const message = await ThreadService.postMessage(payload);
+  const message = await ThreadService.createMessage(payload);
   setMessage(message);
 }
 
@@ -212,5 +217,6 @@ export default {
   getUserToken,
   getChannels,
   getPseudonym,
+  getMessages,
   getMajorError,
 };
diff --git a/src/index.css b/src/index.css
index afff346..16ef965 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,7 +20,7 @@
 
 /* width */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 8px;
 }
 
 /* Track */
diff --git a/src/views/MessagesPage.vue b/src/views/MessagesPage.vue
index 9596714..e52d172 100644
--- a/src/views/MessagesPage.vue
+++ b/src/views/MessagesPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 class="text-white text-2xl my-4">{{ threadId }}</h2>
+  <h2 class="text-white text-2xl mt-4 mb-2">{{ route.params.threadId }}</h2>
   <ThreadView
     :ref="
       (el) => {
@@ -11,42 +11,59 @@
   <textarea
     v-model="message"
     @keydown.enter.prevent="sendMessage"
-    class="w-full block border-2 border-gray-500 text-lg p-2 h-40 mt-4"
+    class="w-full block border-2 border-gray-500 text-lg p-2 h-30 mt-4"
     placeholder="Message (hit enter to send)"
   ></textarea>
 </template>
 
 <script setup>
 import { useRoute } from "vue-router";
-import { onMounted, reactive, ref, nextTick } from "vue";
+import { onMounted, ref, nextTick, watch } from "vue";
 import ThreadView from "../components/Threads/ThreadView.vue";
-import ThreadService from "../service";
-
+import useStore from "../composables/global/useStore";
 const route = useRoute();
+const { loadMessages, postMessage, getMessages } = useStore;
 
-const { threadId } = route.params;
-const messages = ref([]);
+const messages = getMessages;
 const message = ref("");
 const messageViewRef = ref(null);
 
-function sendMessage() {
-  if (message.trim().length > 0) {
+async function sendMessage() {
+  if (message.value.trim().length > 0) {
     const msg = {
-      body: message,
-      thread: threadId,
+      body: message.value,
+      thread: route.params.threadId,
     };
-    ThreadService.createMessage(msg);
+    await postMessage(msg);
+    message.value = "";
+    messageViewRef.value.$el.scrollTo({
+      top: messageViewRef.value.$el.scrollHeight,
+      left: 0,
+    });
   }
 }
 
-onMounted(() => {
-  ThreadService.getMessages(threadId).then(async (data) => {
-    messages.value = data;
+async function fetchMessages(threadId) {
+  loadMessages(threadId).then(async (data) => {
     await nextTick();
     messageViewRef.value.$el.scrollTo({
       top: messageViewRef.value.$el.scrollHeight,
       left: 0,
     });
   });
+}
+
+watch(
+  () => route.params.threadId,
+  async (threadId, prevThreadId) => {
+    if (threadId !== prevThreadId) {
+      messages.value = [];
+      await fetchMessages(threadId);
+    }
+  }
+);
+
+onMounted(async () => {
+  await fetchMessages(route.params.threadId);
 });
 </script>
diff --git a/src/views/ThreadsPage.vue b/src/views/ThreadsPage.vue
index b566b4b..b9ea568 100644
--- a/src/views/ThreadsPage.vue
+++ b/src/views/ThreadsPage.vue
@@ -2,7 +2,9 @@
   <div class="mx-auto w-11/12 lg:w-3/5">
     <div class="w-1/2 float-left">
       <div class="mr-2">
-        <h2 class="text-red-500 text-2xl my-4">{{ channel.name }}</h2>
+        <h2 class="text-red-500 text-2xl mt-4 mb-2 font-bold">
+          {{ channel.name }}
+        </h2>
         <ThreadList :items="items" />
         <CreateThread />
       </div>

From 47c60f095a6ec465d712f0d5d4af4a823469b464 Mon Sep 17 00:00:00 2001
From: Bimal Gharti Magar <bimal@endpointdev.com>
Date: Sat, 11 Dec 2021 06:44:49 +0545
Subject: [PATCH 10/10] fixed minor issue with default state

---
 src/composables/global/useStore.js | 7 +++++++
 src/views/MessagesPage.vue         | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/composables/global/useStore.js b/src/composables/global/useStore.js
index db6b6e5..7f91529 100644
--- a/src/composables/global/useStore.js
+++ b/src/composables/global/useStore.js
@@ -17,6 +17,7 @@ const state = reactive({
   threads: [],
   userThreads: [],
   majorError: "",
+  messages: [],
 });
 
 // Mutations
@@ -60,6 +61,10 @@ function addChannel(channel) {
 
 // Actions
 
+function clearMessages() {
+  setMessages([]);
+}
+
 async function createChannel(payload) {
   const channels = await ThreadService.createChannel(payload);
   loadChannels();
@@ -204,6 +209,8 @@ export default {
   loadChannel,
   loadMessages,
 
+  clearMessages,
+
   registerOnce,
   createChannel,
   createThread,
diff --git a/src/views/MessagesPage.vue b/src/views/MessagesPage.vue
index e52d172..dfcc912 100644
--- a/src/views/MessagesPage.vue
+++ b/src/views/MessagesPage.vue
@@ -22,7 +22,7 @@ import { onMounted, ref, nextTick, watch } from "vue";
 import ThreadView from "../components/Threads/ThreadView.vue";
 import useStore from "../composables/global/useStore";
 const route = useRoute();
-const { loadMessages, postMessage, getMessages } = useStore;
+const { loadMessages, postMessage, getMessages, clearMessages } = useStore;
 
 const messages = getMessages;
 const message = ref("");
@@ -57,7 +57,7 @@ watch(
   () => route.params.threadId,
   async (threadId, prevThreadId) => {
     if (threadId !== prevThreadId) {
-      messages.value = [];
+      clearMessages();
       await fetchMessages(threadId);
     }
   }