Client - minor refactoring

fittrackee_client/src/components/User/UserPicture.vue

@@ -2,7 +2,7 @@
   <div class="user-picture">
     <img
       v-if="authUserPictureUrl !== ''"
-      class="nav-profile-user-img"
+      class="profile-user-img"
       :alt="$t('user.USER_PICTURE')"
       :src="authUserPictureUrl"
     />
@@ -30,7 +30,7 @@
       return {
         authUserPictureUrl: computed(() =>
           props.user.picture
-            ? `${getApiUrl()}users/${props.user.username}/picture?${Date.now()}`
+            ? `${getApiUrl()}users/${props.user.username}/picture`
             : ''
         ),
       }

fittrackee_client/src/components/Workout/WorkoutCard.vue

@@ -3,15 +3,7 @@
     <div class="box">
       <div class="workout-user-date">
         <div class="workout-user">
-          <img
-            class="profile-img"
-            v-if="userPictureUrl !== ''"
-            :alt="$t('user.USER_PICTURE')"
-            :src="userPictureUrl"
-          />
-          <div v-else class="no-picture">
-            <i class="fa fa-user-circle-o" aria-hidden="true" />
-          </div>
+          <UserPicture :user="user" />
           <router-link
             v-if="user.username"
             class="workout-user-name"
@@ -97,18 +89,19 @@
   import { PropType, defineComponent, ComputedRef, computed } from 'vue'
 
   import StaticMap from '@/components/Common/StaticMap.vue'
+  import UserPicture from '@/components/User/UserPicture.vue'
   import { ROOT_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IUserProfile } from '@/types/user'
   import { IWorkout } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
-  import { getApiUrl } from '@/utils'
   import { getDateWithTZ } from '@/utils/dates'
 
   export default defineComponent({
     name: 'WorkoutCard',
     components: {
       StaticMap,
+      UserPicture,
     },
     props: {
       workout: {
@@ -124,24 +117,16 @@
         required: false,
       },
     },
-    setup(props) {
+    setup() {
       const store = useStore()
-
-      const userPictureUrl: ComputedRef<string> = computed(() =>
-        props.user.picture
-          ? `${getApiUrl()}/users/${props.user.username}/picture?${Date.now()}`
-          : ''
-      )
       const locale: ComputedRef<Locale> = computed(
         () => store.getters[ROOT_STORE.GETTERS.LOCALE]
       )
-
       return {
         format,
         formatDistance,
         getDateWithTZ,
         locale,
-        userPictureUrl,
       }
     },
   })
@@ -162,13 +147,14 @@
         padding: $default-padding * 0.5 $default-padding;
         .workout-user {
           display: flex;
-          .profile-img {
-            border-radius: 50%;
-            height: 25px;
-            width: 25px;
-          }
-          .fa-user-circle-o {
-            font-size: 1.5em;
+          ::v-deep(.user-picture) {
+            img {
+              height: 25px;
+              width: 25px;
+            }
+            .no-picture {
+              font-size: 1.5em;
+            }
           }
           .workout-user-name {
             padding-left: 5px;

fittrackee_client/src/router/index.ts

@@ -25,55 +25,63 @@ const routes: Array<RouteRecordRaw> = [
     path: '/',
     name: 'Dashboard',
     component: () =>
-      import(/* webpackChunkName: 'main' */ '@/views/DashBoard.vue'),
+      import(/* webpackChunkName: 'main' */ '@/views/Dashboard.vue'),
   },
   {
     path: '/login',
     name: 'Login',
     component: () =>
-      import(/* webpackChunkName: 'main' */ '@/views/LoginOrRegister.vue'),
+      import(/* webpackChunkName: 'main' */ '@/views/user/LoginOrRegister.vue'),
     props: { action: 'login' },
   },
   {
     path: '/register',
     name: 'Register',
     component: () =>
-      import(/* webpackChunkName: 'main' */ '@/views/LoginOrRegister.vue'),
+      import(/* webpackChunkName: 'main' */ '@/views/user/LoginOrRegister.vue'),
     props: { action: 'register' },
   },
   {
     path: '/password-reset/sent',
     name: 'PasswordEmailSent',
     component: () =>
-      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
+      import(
+        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
+      ),
     props: { action: 'request-sent' },
   },
   {
     path: '/password-reset/request',
     name: 'PasswordResetRequest',
     component: () =>
-      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
+      import(
+        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
+      ),
     props: { action: 'reset-request' },
   },
   {
     path: '/password-reset/password-updated',
     name: 'PasswordUpdated',
     component: () =>
-      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
+      import(
+        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
+      ),
     props: { action: 'password-updated' },
   },
   {
     path: '/password-reset',
     name: 'PasswordReset',
     component: () =>
-      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
+      import(
+        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
+      ),
     props: { action: 'reset' },
   },
   {
     path: '/profile',
     name: 'Profile',
     component: () =>
-      import(/* webpackChunkName: 'profile' */ '@/views/ProfileView.vue'),
+      import(/* webpackChunkName: 'profile' */ '@/views/user/ProfileView.vue'),
     children: [
       {
         path: '',
@@ -132,7 +140,7 @@ const routes: Array<RouteRecordRaw> = [
     path: '/users/:username',
     name: 'User',
     component: () =>
-      import(/* webpackChunkName: 'profile' */ '@/views/UserView.vue'),
+      import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'),
   },
   {
     path: '/workouts',

fittrackee_client/src/views/Dashboard.vue

@@ -69,21 +69,14 @@
 </template>
 
 <script lang="ts">
-  import {
-    ComputedRef,
-    Ref,
-    computed,
-    defineComponent,
-    ref,
-    onUnmounted,
-  } from 'vue'
+  import { ComputedRef, Ref, computed, defineComponent, ref } from 'vue'
 
   import Timeline from '@/components/Dashboard/Timeline.vue'
   import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
   import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
   import UserRecords from '@/components/Dashboard/UserRecords/index.vue'
   import UserStatsCards from '@/components/Dashboard/UserStatsCards/index.vue'
-  import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { SPORTS_STORE, USER_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
@@ -106,9 +99,6 @@
         () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
       )
       const isSelected: Ref<string> = ref('chart')
-      onUnmounted(() => {
-        store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS)
-      })
 
       function updateDisplayColumn(target: string) {
         isSelected.value = target