Server migration

public/index.html

@@ -16,7 +16,7 @@
     <!-- built files will be auto injected -->
     <script id="config-remote" async>
       window.configScript = document.createElement('script')
-      window.configScript.src = '<%= process.env.VUE_APP_BACKEND_URL || "$VUE_APP_BACKEND_URL"%>/config.js'
+      window.configScript.src = '<%= process.env.VUE_APP_BACKEND_URL%>/config.js'
       window.configScript.type = 'text/javascript'
 
       // Try to append config from backend

src/api/index.js

@@ -11,7 +11,7 @@ export const $axios = axios.create({
 })
 export const $axios2 = axios.create({
   baseURL: process.env.VUE_APP_BACKEND_URL || config.VUE_APP_BACKEND_URL,
-  timeout: 15000,
+  timeout: 3000,
   crossDomain: true
 })
 
@@ -208,7 +208,7 @@ export const usersApi = {
   memberSearch: params => $http('/api/search/users', { params }),
   lookup: (username, params) => $http(`/api/users/lookup/${username}`, { params }),
   update: (userId, data) => $http(`/api/users/${userId}`, { method: 'PUT', data }),
-  find: id => $http2(`/api/users/byid?id=${id}`),
+  find: username => $http2(`/api/users/${username}`),
   delete: userId => $http(`/api/users/${userId}`, { method: 'DELETE' }),
   deactivate: userId => $http(`/api/users/${userId}/deactivate`, { method: 'POST' }),
   reactivate: userId => $http(`/api/users/${userId}/reactivate`, { method: 'POST' }),

src/components/layout/HeaderComponent.vue

@@ -84,15 +84,10 @@
           <!-- Login Section -->
           <ul class="signed-out" v-if="!loggedIn">
             <li>
-              <!-- <a href="" @click.prevent="showRegister = true" disabled="true">REGISTER</a> -->
-              <span>REGISTER</span>
+              <a href="" @click.prevent="showRegister = true">REGISTER</a>
             </li>
             <li>
-              <!-- <a href="" id="login-link" @click.prevent="showLogin = true" disabled="true">LOGIN</a> -->
-              <span>LOGIN</span>
-            </li>
-            <li>
-              <a href="https://forms.clickup.com/57751/f/1rcq-791/HNWSBPWCDSRMDMS9TF" target="_blank">REPORT A BUG</a>
+              <a href="" id="login-link" @click.prevent="showLogin = true">LOGIN</a>
             </li>
           </ul>
 
@@ -664,16 +659,11 @@ header {
           cursor: pointer;
         }
         &.signed-out li { padding-left: 1.25rem; }
-        &.signed-out li a, &.signed-out li span {
+        &.signed-out li a {
           display: table-cell;
           height: inherit;
           vertical-align: middle;
         }
-        li span {
-          cursor: not-allowed;
-          color: $secondary-font-color;
-          font-size: $header-login-font-size;
-        }
         li a {
           color: $header-login-font-color;
           font-size: $header-login-font-size;
@@ -1113,6 +1103,6 @@ header {
 }
 
 @include break-mobile-sm {
-  #header-spacer { margin-bottom: 1.5rem; }
+  #header-spacer { margin-bottom: 3.5rem; }
 }
 </style>

src/components/layout/Pagination.vue

@@ -10,7 +10,7 @@
          </div>
         </div>
       </li>
-      <span v-for="pageKey in paginationKeys" :key="pageKey.val">
+      <span v-for="pageKey in paginationKeys" :key="pageKey.key">
         <li :class="pageKey.class">
           <a href="#" @click.stop.prevent="changePage(pageKey.page)" v-html="pageKey.val"></a>
         </li>
@@ -69,23 +69,23 @@ export default {
 
       // Case 2: Truncate Tail
       // 1 2 3 4 5 [6] 7 8 ... 14 15 16
-      if (truncate && v.currentPage <= 6)
+      if (truncate && (v.mobile ? v.currentPage <= 3 : v.currentPage <= 6))
         if (v.mobile) 
           ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
         else
           ellipsis = [{ index: 9, nextIndex: v.pageCount - 2 }]
 
       // Case 3: Truncate Head
       // 1 2 3 ... 9 10 [11] 12 13 14 15 16
-      else if (truncate && v.currentPage >= v.pageCount - 5)
+      else if (truncate && (v.mobile ? v.currentPage >= v.pageCount - 2 : v.currentPage >= v.pageCount - 5))
         if (v.mobile) 
           ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
         else
           ellipsis = [{ index: 4, nextIndex: v.pageCount - 8 }]
 
       // Case 4: Truncate Head and Tail
       // 1 2 3 ... 7 8 [9] 10 11 ... 14 15 16
-      else if (truncate && v.currentPage > 6 && v.currentPage < v.pageCount - 5) 
+      else if (truncate && (v.mobile ? v.currentPage > 3 : v.currentPage > 6) && (v.mobile ? v.currentPage < v.pageCount - 2 : v.currentPage < v.pageCount - 5)) 
         if (v.mobile) 
           ellipsis = [
             { index: 2, nextIndex: v.currentPage - 1 },
@@ -102,7 +102,7 @@ export default {
 
     const generatePageKeys = (ellipsis) => {
       // Add Previous Button
-      let prevBtnKey = { val: '&#10094;' }
+      let prevBtnKey = { key: 'prev', val: '&#10094;' }
       if (v.currentPage > 1) {
         prevBtnKey.class = 'arrow'
         prevBtnKey.page = v.currentPage - 1
@@ -122,6 +122,7 @@ export default {
         // Insert ellipsis if index matches
         if (ellipsis && ellipsis[ellipsisIndex] && ellipsis[ellipsisIndex].index === index) {
           pageKey = {
+            key: index,
             val: '&hellip;',
             page: null,
             class: 'unavailable'
@@ -132,6 +133,7 @@ export default {
         // Otherwise generate page key
         else {
           pageKey = {
+            key: index,
             val: index,
             page: index,
             class: index === v.currentPage ? 'current' : null
@@ -142,7 +144,7 @@ export default {
       }
 
       // Add Next Button
-      let nextBtnKey = { val: '&#10095;' }
+      let nextBtnKey = { key: 'next', val: '&#10095;' }
       if (v.currentPage < v.pageCount) {
         nextBtnKey.class = 'arrow'
         nextBtnKey.page = v.currentPage + 1

src/components/threads/RecentThreads.vue

@@ -52,7 +52,7 @@
             <router-link v-if="thread?.board" class="thread-board" :title="decode(thread.board.name)" :to="{ name: 'Threads', params: { boardSlug: thread.board.slug } }" onclick="event.stopPropagation()"><span v-html="decode(thread.board.name)"></span></router-link>
             by
             <span v-if="thread.deleted">deleted</span>
-            <router-link onclick="event.stopPropagation()" v-if="!thread.deleted" :to="{ path: '/profile/' + thread?.user?.username.toLowerCase(), query: { id: thread?.user?.id } }">{{thread?.user?.username}}</router-link>
+            <router-link onclick="event.stopPropagation()" v-if="!thread.deleted" :to="{ path: '/profile/' + thread?.user?.username.toLowerCase() }">{{thread?.user?.username}}</router-link>
           </div>
           <div class="last-reply">
             <div>{{humanDate(thread?.post?.created_at)}}</div>

src/components/users/RankDisplay.vue

@@ -16,8 +16,7 @@ export default {
     const init = u => {
       const rankMap = u.metadata.ranks
       const metricToRankMaps = u.metadata.rank_metric_maps
-      if (metricToRankMaps) {
-        let ranks = Object.keys(metricToRankMaps).reduce((mappedRanks, metricName) => {
+      let ranks = Object.keys(metricToRankMaps).reduce((mappedRanks, metricName) => {
         let rank = -1
         for (let i = 0; i < metricToRankMaps[metricName].length; i++) {
           if (u[metricName] >= metricToRankMaps[metricName][i]) rank = i
@@ -32,7 +31,6 @@ export default {
 
       if (lowestRankNumber >= 0) v.userRank = rankMap[lowestRankNumber].name
       else v.userRank = ''
-      } else v.userRank = ''
     }
 
     init(v.user)

src/components/users/UserPosts.vue

@@ -115,7 +115,6 @@ export default {
     next(vm => {
       const params = {
         username: to.params.username,
-        id: to.query.id,
         limit: localStoragePrefs().data.posts_per_page,
         page: to.query.page || 1,
         field: to.query.field,
@@ -132,7 +131,6 @@ export default {
   beforeRouteUpdate(to, from, next) {
     const params = {
       username: to.params.username,
-      id: to.query.id,
       limit: localStoragePrefs().data.posts_per_page,
       page: to.query.page || 1,
       field: to.query.field,
@@ -160,7 +158,6 @@ export default {
     const refresh = () => {
       const params = {
         username: $route.params.username,
-        id: $route.query.id,
         limit: v.prefs.posts_per_page,
         page: $route.query.page || 1,
         field: $route.query.field,
@@ -172,8 +169,8 @@ export default {
 
     const toggleThreads = threads => {
       const params = { ...$route.params, saveScrollPos: true }
-      if (threads) $router.replace({ name: $route.name, params: params, query: { threads: threads, id: $route.query.id }})
-      else $router.replace({ name: $route.name, params: params, query: { id: $route.query.id }})
+      if (threads) $router.replace({ name: $route.name, params: params, query: { threads }})
+      else $router.replace({ name: $route.name, params: params })
       v.threads = threads
     }
 

src/composables/stores/prefs.js

@@ -8,8 +8,8 @@ const AUTH_KEY = 'auth'
 
 const appCache = localStorageCache(0, 'app')
 const emtpyPrefs = {
-  posts_per_page: 10,
-  threads_per_page: 10,
+  posts_per_page: 25,
+  threads_per_page: 25,
   timezone_offset: {
     sign: '',
     hours: '',

src/composables/utils/boardUtils.js

@@ -6,7 +6,6 @@ const buildLastPostData = data => {
     last_post_created_at: data.last_post_created_at,
     last_post_position: data.last_post_position,
     last_post_username: data.last_post_username,
-    last_post_user_id: data.last_post_user_id,
     last_post_avatar: data.last_post_avatar,
     last_thread_id: data.last_thread_id,
     last_thread_slug: data.last_thread_slug,

src/views/Boards.vue

@@ -3,10 +3,8 @@
     <recent-threads v-if="boardData && boardData.data && boardData.data.threads" :threads="boardData.data.threads"></recent-threads>
 
     <div v-if="!loggedIn" class="dashboard-actions">
-      <!-- <a href="" class="button" @click.prevent="showRegister = true">Create an Account</a> -->
-      <a href="" class="button disabled" @click.stop.prevent="">Create an Account</a>
-      <!-- <a href="" class="button" @click.prevent="showLogin = true">Log In</a> -->
-      <a href="" class="button disabled" @click.stop.prevent="">Log In</a>
+      <a href="" class="button" @click.prevent="showRegister = true">Create an Account</a>
+      <a href="" class="button" @click.prevent="showLogin = true">Log In</a>
     </div>
     <div v-if="loggedIn" class="dashboard-actions">
       <router-link :to="{ name: 'Watchlist' }" class="button">Watchlist</router-link>
@@ -56,7 +54,7 @@
                 <div class="view-count">
                   <p class="view-count-posts">
                     <span class="view-count-number">{{board.total_post_count}}</span>
-                     <span class="label"> posts,</span>
+                     <span class="label"> posts, </span>
                   </p>
                   <p class="view-count-threads">
                     <span class="view-count-number">{{board.total_thread_count}}</span>
@@ -69,7 +67,7 @@
                   <div v-if="board.last_post_username">
                     <span v-if="board.user_deleted || board.post_deleted">deleted</span>
                     <img v-if="!board.user_deleted && !board.post_deleted" class="avatar-small" :class="defaultAvatarShape" :src="board.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
-                    <router-link v-if="!board.user_deleted && !board.post_deleted" :to="{ path: '/profile/' + board.last_post_username.toLowerCase(), query: { id: board.last_post_user_id }}">{{board.last_post_username}}</router-link> posted in
+                    <router-link v-if="!board.user_deleted && !board.post_deleted" :to="{ path: '/profile/' + board.last_post_username.toLowerCase() }">{{board.last_post_username}}</router-link> posted in
                     <span v-if="board.last_thread_title">
                       <router-link :to="{ name: 'Posts', params: { threadSlug: board.last_thread_slug }, query: { start: board.last_post_position} }">
                         <span v-html="board.last_thread_title"></span>
@@ -172,7 +170,7 @@ img.avatar-small {
   border-radius: 100px;
   border: 1px solid #444;
   opacity: 1;
-  margin: 0 0.1rem;
+  margin: 0 0.2rem 0 0;
   height: 1rem;
   width: 1rem;
   object-fit: cover;
@@ -352,7 +350,6 @@ img.avatar-small {
     margin: 0 1rem;
     min-width: 160px;
     &:last-child { margin-left: 0; }
-    &.disabled { cursor: not-allowed; }
   }
 
   @include break-mobile-sm {