refactor(profile locations): automatically grab users location to dis…

…play in profile (#535)
Satellite-im · Dec 7, 2021 · 6b00cab · 6b00cab
1 parent 5dbbdbb
commit 6b00cab
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 58 deletions.
diff --git a/components/tailored/settings/profile/card/Card.html b/components/tailored/settings/profile/card/Card.html
@@ -1,56 +1,56 @@
-<div class="profile-card">
-  <TailoredSettingsProfilePicture :image="info.imageUrl" />
-  <div class="profile-card-body">
-    <div class="profile-badges">
-      <TypographyTitle :size="6" :text="$t('pages.settings.profile.info.badges')" />
-      <span class="profile-badge" v-for="(badge, i) in info.badges" :key="i">
-        <UiDynamicIcon size="1x" icon="badge.badge.icon"/>
-      </span>
-    </div>
-    <div class="profile-preferences">
-      <TypographyTitle :size="6" :text="$t('pages.settings.profile.info.preferences')" />
-      <div class="profile-preferences-location">
-        <TypographySubtitle :size="6" :text="$t('pages.settings.profile.info.location')" />
-        <multiselect
-          :options="recommendLocations"
-          :multiple="true"
-          :close-on-select="false"
-          :clear-on-select="false"
-          :preserve-search="true"
-          :placeholder="$t('pages.settings.profile.info.selectLocation')"
-          label="location"
-          track-by="location"
-          v-model="locations"
-          selectLabel=""
-          deselectLabel=""
-          selectedLabel=""
-        >
-        </multiselect>
-        <div class="mg-half">
-          <InteractablesChip v-for="(loc, i) in info.locations" :key="i" :text="loc" />
-        </div>
-      </div>
-      <div class="profile-preferences-language">
-        <TypographySubtitle :size="6" :text="$t('pages.settings.profile.info.language')" />
-        <multiselect
-          :options="[]"
-          :multiple="true"
-          :close-on-select="false"
-          :clear-on-select="false"
-          :preserve-search="true"
-          :placeholder="$t('pages.settings.profile.info.selectLanguage')"
-          label="name"
-          track-by="name"
-          v-model="languages"
-          selectLabel=""
-          deselectLabel=""
-          selectedLabel=""
-        >
-        </multiselect>
-        <div class="mg-half">
-          <InteractablesChip v-for="(lng, i) in info.languages" :key="i" :text="lng" />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<div class="profile-card">
+  <TailoredSettingsProfilePicture :image="info.imageUrl" />
+  <div class="profile-card-body">
+    <div class="profile-badges">
+      <TypographyTitle :size="6" :text="$t('pages.settings.profile.info.badges')" />
+      <span class="profile-badge" v-for="(badge, i) in info.badges" :key="i">
+        <UiDynamicIcon size="1x" icon="badge.badge.icon"/>
+      </span>
+    </div>
+    <div class="profile-preferences">
+      <TypographyTitle :size="6" :text="$t('pages.settings.profile.info.preferences')" />
+      <div class="profile-preferences-location">
+        <TypographySubtitle :size="6" :text="$t('pages.settings.profile.info.location')" />
+        <multiselect
+          :options="recommendLocations"
+          :multiple="true"
+          :close-on-select="false"
+          :clear-on-select="false"
+          :preserve-search="true"
+          :placeholder="$t('pages.settings.profile.info.selectLocation')"
+          label="location"
+          track-by="location"
+          v-model="locations"
+          selectLabel=""
+          deselectLabel=""
+          selectedLabel=""
+        >
+        </multiselect>
+        <div class="mg-half">
+          <InteractablesChip v-for="(loc, i) in info.locations" :key="i" :text="loc" />
+        </div>
+      </div>
+      <div class="profile-preferences-language">
+        <TypographySubtitle :size="6" :text="$t('pages.settings.profile.info.language')" />
+        <multiselect
+          :options="[]"
+          :multiple="true"
+          :close-on-select="false"
+          :clear-on-select="false"
+          :preserve-search="true"
+          :placeholder="$t('pages.settings.profile.info.selectLanguage')"
+          label="name"
+          track-by="name"
+          v-model="languages"
+          selectLabel=""
+          deselectLabel=""
+          selectedLabel=""
+        >
+        </multiselect>
+        <div class="mg-half">
+          <InteractablesChip v-for="(lng, i) in info.languages" :key="i" :text="lng" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/tailored/settings/profile/card/Card.vue b/components/tailored/settings/profile/card/Card.vue
@@ -20,6 +20,21 @@ export default Vue.extend({
       recommendLocations,
     }
   },
+  mounted() {
+    this.getUserTimeZone()
+  },
+  methods: {
+    /**
+     * @method getUserTimeZone
+     * @description Auto grabs users location/timezone, we check the locations array to ensure location hasn't already been added which fixes a multiple input bug
+     * @example Intl.DateTimeFormat().resolvedOptions().timeZone
+     */
+    getUserTimeZone() {
+      if (this.info.locations.indexOf(Intl.DateTimeFormat().resolvedOptions().timeZone) === -1) {
+      this.info.locations.push(Intl.DateTimeFormat().resolvedOptions().timeZone)
+      }
+      },
+  },
 })
 </script>
 

diff --git a/mock/profile.ts b/mock/profile.ts
@@ -34,8 +34,6 @@ export const sampleProfileInfo = {
   imageUrl: url,
   badges: profileBadges,
   locations: [
-    'New York, United States',
-    'California, United States',
   ] as string[],
   languages: ['English', 'Spanish', 'German'] as string[],
   username: 'username01234#0001',