User profile box

Related to Issue #39
oengusio · Oct 25, 2021 · 9d86bdb · 9d86bdb
1 parent 168ac99
commit 9d86bdb
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 5 deletions.
diff --git a/components/user/Profile.vue b/components/user/Profile.vue
@@ -1,13 +1,44 @@
 <template>
-  <div class="box is-centered">
-    <p>
-      Info about the user '{{ userId }}'
-    </p>
+  <div class="box user-profile-container">
+    <div>
+      <img :src="userProfileURL" alt="Profile image">
+    </div>
+
+    <template v-if="user && !user._fetching">
+      <div class="user-address">
+        <h3 class="title is-3 username">
+          <User :user="user" />
+        </h3>
+        <span class="tags">
+          <span v-for="pronoun of user.pronouns" :key="pronoun" class="tag is-info">
+            {{ pronoun }}
+          </span>
+        </span>
+      </div>
+
+      <div v-if="user.country" class="user-location">
+        <span class="icon flag-icon" :class="`flag-icon-${user.country.toLowerCase()}`" />
+        <span>
+          {{ $t(`country.${user.country}`) }}
+        </span>
+      </div>
+
+      <div v-if="user.languagesSpoken.length">
+        <span>
+          {{ $t('user.profile.speak') }}
+        </span>
+        <span v-for="language of user.languagesSpoken" :key="language" class="language-spoken">{{ $t(`language.${language}`) }}</span>
+      </div>
+    </template>
+    <WidgetLoading :while="[ user ]" />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { mapActions } from 'vuex';
+import { OengusAPI } from '~/plugins/oengus';
+import { User, UserState } from '~/types/api/user';
 
 export default Vue.extend({
   props: {
@@ -16,5 +47,62 @@ export default Vue.extend({
       default: '',
     },
   },
+
+  data() {
+    return {
+      userProfileURL: OengusAPI.getRoute({ basePath: 'users', id: this.userId, path: 'avatar', fullURL: true }),
+    };
+  },
+
+  async fetch(): Promise<void> {
+    await Promise.allSettled([
+      this.getUser(this.userId),
+    ]);
+  },
+
+  computed: {
+    user(): User|undefined {
+      return (this.$store.state.api.user as UserState).users[this.userId];
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getUser: 'api/user/get',
+    }),
+  },
 });
 </script>
+
+<style lang="scss" scoped>
+.user-profile-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.user-address {
+  display: flex;
+  gap: var(--spacing);
+  align-items: center;
+  margin-block-end: var(--spacing);
+
+  > .username {
+    margin: 0;
+  }
+}
+
+.user-location {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) / 2);
+}
+
+.language-spoken:not(:last-of-type) {
+  margin-inline-end: 0.25em;
+
+  &::after {
+    content: ',';
+  }
+}
+</style>
diff --git a/plugins/oengus.ts b/plugins/oengus.ts
@@ -62,6 +62,17 @@ export interface ExtendedFetch {
  */
 export type GetterFunc<T, V> = (context: ActionContext<T, T>, id?: number|string|ExtendedFetch) => Promise<V|undefined>;
 
+export interface RouteSpecification {
+  // Base portion of the path, typically indicates what type of thing is being requested
+  basePath: string;
+  // Unique identifier for the thing being fetched
+  id?: string|number;
+  // A specific path with the thing being indicated
+  path?: string;
+  // Returns the full url including protocol and domain if provided and true
+  fullURL?: boolean;
+}
+
 export class OengusAPI<T extends OengusState> {
   static http: NuxtHTTPInstance;
 
@@ -110,7 +121,7 @@ export class OengusAPI<T extends OengusState> {
       }
 
       // Fetch and store into cache
-      const route = `${this.basePath}${id ? `/${id}` : ''}${path ? `/${path}` : ''}`;
+      const route = OengusAPI.getRoute({ basePath: this.basePath, id, path });
       let apiResponse: U;
       try {
         apiResponse = await OengusAPI.http.$get(route);
@@ -134,6 +145,10 @@ export class OengusAPI<T extends OengusState> {
       return response as V;
     };
   }
+
+  public static getRoute({ basePath, id, path, fullURL }: RouteSpecification): string {
+    return `${fullURL ? OengusAPI.http.getBaseURL() : ''}${basePath}${id ? `/${id}` : ''}${path ? `/${path}` : ''}`;
+  }
 }
 
 /**

diff --git a/types/api/user.d.ts b/types/api/user.d.ts
@@ -2,9 +2,15 @@ import { OengusState } from '~/plugins/oengus';
 
 export interface User {
   banned: boolean;
+  connections: Array<Connection>;
+  country: string|null;
   discordName: string;
   enabled: boolean;
   history: Array<any>; // Array<Horribly Nested User History... Thing>
+  id: number;
+  languagesSpoken: Array<string>;
+  moderatedMarathons: Array<any>; // What are these?
+  pronouns: Array<string>;
   speedruncomName: string;
   twitchName: string;
   twitterName: string;
@@ -26,3 +32,11 @@ export interface UserState extends OengusState {
   exists: { [username: string]: UserExists; };
   searches: { [query: string]: Array<User>; };
 }
+
+export type ConnectionPlatform = 'DISCORD'|'TWITCH'|'TWITTER'|''
+
+export interface Connection {
+  id: number;
+  platform: ConnectionPlatform;
+  username: string;
+}