Add user profile to user page

src/fetchers.ts

@@ -62,11 +62,20 @@ export const fetchComments = async (galleryID: string): Promise<Comment[]> => {
   /* eslint-enable max-len */
 }
 
+export const fetchUserInfo = async (userID: string): Promise<UserResult> => {
+  // https://api.imgur.com/account/v1/accounts/hughjaniss?client_id=${CLIENT_ID}
+  const response = await got(
+    `https://api.imgur.com/account/v1/accounts/${userID.toLowerCase()}?client_id=${CONFIG.imgur_client_id}&include=`,
+    { agent }
+  );
+  return JSON.parse(response.body);
+}
+
 export const fetchUserPosts = async (userID: string, sort: Sorting = 'newest'): Promise<Post[]> => {
   /* eslint-disable max-len */
   // https://api.imgur.com/3/account/mombotnumber5/submissions/0/newest?album_previews=1&client_id=${CLIENT_ID}
   const response = await got(
-    `https://api.imgur.com/3/gallery/${userID.toLowerCase()}/submissions/0/${sort}?album_previews=1&client_id=${CONFIG.imgur_client_id}`,
+    `https://api.imgur.com/3/account/${userID.toLowerCase()}/submissions/0/${sort}?album_previews=1&client_id=${CONFIG.imgur_client_id}`,
     { agent }
   );
   return JSON.parse(response.body).data;

src/handlers.ts

@@ -1,7 +1,9 @@
 import Hapi = require('@hapi/hapi');
 import '@hapi/vision';
-import { fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia, fetchTagPosts, fetchUserPosts }
+import
-  from './fetchers';
+{
+  fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia, fetchTagPosts, fetchUserInfo, fetchUserPosts
+} from './fetchers';
 import * as util from './util';
 
 import CONFIG from './config';
@@ -42,9 +44,11 @@ export const handleUser = async (request: Hapi.Request, h: Hapi.ResponseToolkit)
     return 'User page disabled. Rimgu administrator needs to enable API for this to work.';
   }
   const userID = request.params.userID;
+  const user = await fetchUserInfo(userID);
   const posts = await fetchUserPosts(userID);
   return h.view('user-posts', {
     posts,
+    user,
     pageTitle: CONFIG.page_title,
     util,
   });

src/types/index.d.ts

@@ -128,3 +128,16 @@ interface TagResult extends PostTag {
   success: boolean;
   status: number;
 }
+
+interface UserResult {
+  id: number;
+  username: string;
+  bio: string;
+  reputation_count: number;
+  reputation_name: string;
+  avatar_id: string;
+  avatar_url: string;
+  cover_id: string;
+  cover_url: string;
+  created_at: string;
+}

static/css/styles.css

@@ -390,8 +390,66 @@ Post-item-title {
   max-height: 500px;
 }
 
+/* USER HEADER */
 
-/* TAG PAGE */
+.ProfileMeta-stats {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-top: 8px;
+    cursor: default;
+}
+
+.ProfileCover-header {
+    height: 258px;
+    /* padding: 52px 0 0; */
+    padding: 52px 16px 0;
+    width: 100%;
+    margin: 0 auto;
+    min-width: 450px;
+    z-index: 1;
+}
+
+.ProfileMeta {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.ProfileMeta .UserAvatar {
+    position: relative;
+    height: 128px;
+    width: 128px;
+    overflow: hidden;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.UserAvatar {
+    border-radius: 50%;
+    background: grey;
+    background-image: none;
+    background-size: cover;
+}
+
+.ProfileMeta-data {
+    margin: auto 24px;
+    color: #f2f2f2;
+    overflow: hidden;
+}
+
+.ProfileMeta-user {
+    font-size: 44px;
+    font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.ProfileMeta-divider {
+    margin: auto 15px;
+}
+
+
+/* TAG HEADER */
 
 .Cover-item-count {
     text-transform: uppercase;

templates/user-posts.pug

@@ -11,7 +11,16 @@ html
             .Cover-stats
               .Cover-item-count #{tag.total_items} posts
       else if user
-        .App-cover.NewCover.ProfileCover
+        .App-cover.NewCover.ProfilesCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("' + util.proxyURL(user.cover_url) + '");')
+          .ProfileCover-header
+            .ProfileMeta
+              span.UserAvatar.ProfileMeta-avatar(style='background-image: url("' + util.proxyURL(user.avatar_url) + '");' title=user.username)
+              .ProfileMeta-data
+                .ProfileMeta-user= user.username
+                .ProfileMeta-stats
+                  | #{user.reputation_count} pts
+                  span.ProfileMeta-divider •
+                  | #{user.reputation_name}
       .ProfilePosts-posts
         .ProfilePosts-top
           each post in posts
@@ -54,5 +63,3 @@ html
                           title Post views
                           | <path d="M8 2.5C4.74998 2.5 2.30142 5.50267 1.27514 6.77517C0.925337 7.20917 0.908553 7.76483 1.2278 8.16583C2.22527 9.41833 4.6991 12.5 8 12.5C11.3686 12.5 13.8396 9.31133 14.796 8.0905C15.0769 7.732 15.0674 7.2535 14.7692 6.8755C13.7938 5.6395 11.3376 2.5 8 2.5ZM7.98224 9.33333C6.90897 9.33333 6.03887 8.51233 6.03887 7.5C6.03887 6.4875 6.90897 5.66667 7.98224 5.66667C9.05551 5.66667 9.92561 6.4875 9.92561 7.5C9.92561 8.51233 9.05551 9.33333 7.98224 9.33333Z" fill="currentColor"></path>
                         .MediaBody= post.views
-
-