Add user profile to user page

This commit is contained in:
3nprob 2021-10-08 16:38:43 +09:00
parent bb846def85
commit 2678450ecf
5 changed files with 98 additions and 7 deletions

View File

@ -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;

View File

@ -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,
});

13
src/types/index.d.ts vendored
View File

@ -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;
}

View File

@ -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;

View File

@ -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