Add user profile to user page
This commit is contained in:
		
							parent
							
								
									bb846def85
								
							
						
					
					
						commit
						2678450ecf
					
				| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,7 +1,9 @@
 | 
			
		|||
import Hapi = require('@hapi/hapi');
 | 
			
		||||
import '@hapi/vision';
 | 
			
		||||
import { fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia, fetchTagPosts, fetchUserPosts }
 | 
			
		||||
  from './fetchers';
 | 
			
		||||
import
 | 
			
		||||
{
 | 
			
		||||
  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,
 | 
			
		||||
  });
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue