WIP: add user posts page
This commit is contained in:
		
							parent
							
								
									e93a7a32e9
								
							
						
					
					
						commit
						341e6e1d55
					
				| 
						 | 
				
			
			@ -62,6 +62,17 @@ export const fetchComments = async (galleryID: string): Promise<Comment[]> => {
 | 
			
		|||
  /* eslint-enable max-len */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const fetchUserPosts = async (userID: string, sort: Sorting = 'newest'): Promise<Comment[]> => {
 | 
			
		||||
  /* 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/account/${userID.toLowerCase()}/submissions/0/newest?album_previews=1&client_id=${CONFIG.imgur_client_id}`,
 | 
			
		||||
    { agent }
 | 
			
		||||
  );
 | 
			
		||||
  return JSON.parse(response.body).data;
 | 
			
		||||
  /* eslint-enable max-len */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const fetchGallery = async (galleryID: string): Promise<Gallery> => {
 | 
			
		||||
  // https://imgur.com/gallery/g1bk7CB
 | 
			
		||||
  const response = await got(`https://imgur.com/gallery/${galleryID}`, { agent });
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,6 +1,6 @@
 | 
			
		|||
import Hapi = require('@hapi/hapi');
 | 
			
		||||
import '@hapi/vision';
 | 
			
		||||
import { fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia } from './fetchers';
 | 
			
		||||
import { fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia, fetchUserPosts } from './fetchers';
 | 
			
		||||
import * as util from './util';
 | 
			
		||||
 | 
			
		||||
import CONFIG from './config';
 | 
			
		||||
| 
						 | 
				
			
			@ -35,9 +35,18 @@ export const handleAlbum = async (request: Hapi.Request, h: Hapi.ResponseToolkit
 | 
			
		|||
  });
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const handleUser = (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
 | 
			
		||||
export const handleUser = async (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
 | 
			
		||||
  // https://imgur.com/user/MomBotNumber5
 | 
			
		||||
  throw new Error('not implemented');
 | 
			
		||||
  if (!CONFIG.use_api) {
 | 
			
		||||
    return 'User page disabled. Rimgu administrator needs to enable API for this to work.';
 | 
			
		||||
  }
 | 
			
		||||
  const userID = request.params.userID;
 | 
			
		||||
  const userPosts = await fetchUserPosts(userID);
 | 
			
		||||
  return h.view('user-posts', {
 | 
			
		||||
    userPosts,
 | 
			
		||||
    pageTitle: CONFIG.page_title,
 | 
			
		||||
    util,
 | 
			
		||||
  });
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const handleTag = (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -8,6 +8,7 @@ interface Account {
 | 
			
		|||
type MediaMimeType = 'image/jpeg' | 'image/png' | 'image/gif';
 | 
			
		||||
type MediaType = 'image';
 | 
			
		||||
type MediaExt = 'jpeg' | 'png' | 'gif';
 | 
			
		||||
type Sorting = 'newest' | 'oldest' | 'best';
 | 
			
		||||
 | 
			
		||||
interface Tag {
 | 
			
		||||
  tag: string;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -290,4 +290,102 @@ a {
 | 
			
		|||
  text-transform: uppercase;
 | 
			
		||||
  color: #dadce2;
 | 
			
		||||
  flex-grow: 1;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
/* USER POSTS */
 | 
			
		||||
.ProfilePost {
 | 
			
		||||
  width: 320px;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  margin: 0 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item {
 | 
			
		||||
  /* height: 100%; */
 | 
			
		||||
  display: block;
 | 
			
		||||
  margin-bottom: 30px;
 | 
			
		||||
  background-repeat: no-repeat;
 | 
			
		||||
  cursor: pointer;
 | 
			
		||||
  background-size: 145px;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
 | 
			
		||||
  background-color: #2e3035;
 | 
			
		||||
  transition: box-shadow .25s;
 | 
			
		||||
  -webkit-transition: box-shadow .25s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-container {
 | 
			
		||||
  /* height: 100%; */
 | 
			
		||||
  position: relative;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  border-radius: 3px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-media {
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-meta {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: 15px;
 | 
			
		||||
  right: 15px;
 | 
			
		||||
  left: 15px;
 | 
			
		||||
  font-size: 12px;
 | 
			
		||||
  line-height: 16px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-media img {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-info, .PostInfo {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  font-size: 12px;
 | 
			
		||||
  line-height: 1.5;
 | 
			
		||||
  letter-spacing: .3px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-info {
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
  color: hsla(0,0%,100%,.6);
 | 
			
		||||
  min-height: 8px;
 | 
			
		||||
  padding: .5rem 1rem;
 | 
			
		||||
  color: #b4b9c2;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
Post-item-title {
 | 
			
		||||
  font-weight: 600;
 | 
			
		||||
  line-height: 1.14;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  text-align: left;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  max-height: 45px;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  padding: 0 15px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Media {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: row;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-stat {
 | 
			
		||||
  z-index: 1;
 | 
			
		||||
  opacity: .65;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.MediaBody {
 | 
			
		||||
  margin: 0 .25rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-media .imageContainer {
 | 
			
		||||
  max-height: 500px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Post-item-media .PostVideo {
 | 
			
		||||
  max-height: 500px;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,50 @@
 | 
			
		|||
html
 | 
			
		||||
  head
 | 
			
		||||
    include includes/head.pug
 | 
			
		||||
  body
 | 
			
		||||
    .Profile
 | 
			
		||||
      .App-cover.NewCover.ProfileCover
 | 
			
		||||
      .ProfilePosts-posts
 | 
			
		||||
        .ProfilePosts-top
 | 
			
		||||
          each post in userPosts
 | 
			
		||||
            div.ProfilePost
 | 
			
		||||
              a.Post-item.novote(href="/gallery/"+post.id)
 | 
			
		||||
                .Post-item-container
 | 
			
		||||
                  .Post-item-media
 | 
			
		||||
                      if post.images && post.images[0].animated
 | 
			
		||||
                        .PostVideo
 | 
			
		||||
                          .PostVideo-video-wrapper
 | 
			
		||||
                            video(playsinline autoplay loop mute)
 | 
			
		||||
                              source(type="video/mp4" src=util.proxyURL(post.images[0].mp4))
 | 
			
		||||
                      else
 | 
			
		||||
                        .imageContainer
 | 
			
		||||
                          img(src=util.proxyURL(post.images ? post.images[0].link : post.link) loading="lazy")
 | 
			
		||||
                  .Post-item-meta
 | 
			
		||||
                  .Post-item-title-wrap
 | 
			
		||||
                    .Post-item-title
 | 
			
		||||
                      span= post.title
 | 
			
		||||
                    .Post-item-info
 | 
			
		||||
                      .Media
 | 
			
		||||
                        div(class='Post-item-stat Post-item-vote' title='Upvotes')
 | 
			
		||||
                          div(class='Vote Vote-up')
 | 
			
		||||
                            svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg')
 | 
			
		||||
                              title Upvotes
 | 
			
		||||
                              | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M7.197 2.524a1.2 1.2 0 011.606 0c.521.46 1.302 1.182 2.363 2.243a29.617 29.617 0 012.423 2.722c.339.435.025 1.028-.526 1.028h-2.397v4.147c0 .524-.306.982-.823 1.064-.417.066-1.014.122-1.843.122s-1.427-.056-1.843-.122c-.517-.082-.824-.54-.824-1.064V8.517H2.937c-.552 0-.865-.593-.527-1.028.52-.669 1.32-1.62 2.423-2.722a52.996 52.996 0 012.364-2.243z"></path>
 | 
			
		||||
                        .points= post.points
 | 
			
		||||
                        div(class='Post-item-stat Post-item-vote' title='Downvotes')
 | 
			
		||||
                          div(class='Vote Vote-down')
 | 
			
		||||
                            svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg')
 | 
			
		||||
                              title Downvotes
 | 
			
		||||
                              | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M8.803 13.476a1.2 1.2 0 01-1.606 0 53.03 53.03 0 01-2.364-2.243 29.613 29.613 0 01-2.422-2.722c-.339-.435-.025-1.028.526-1.028h2.397V3.336c0-.524.306-.982.823-1.064A11.874 11.874 0 018 2.15c.829 0 1.427.056 1.843.122.517.082.824.54.824 1.064v4.147h2.396c.552 0 .865.593.527 1.028-.52.669-1.32 1.62-2.423 2.722a53.038 53.038 0 01-2.364 2.243z"></path>
 | 
			
		||||
                      .Media.Post-item-stat
 | 
			
		||||
                        svg(width="16" height="16" viewBox="0 0 16 16" class="PostCommentsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
 | 
			
		||||
                          title Comments
 | 
			
		||||
                          | <path fill="currentColor" stroke="#ffffff" stroke-width="0" d="M4.455 12.195l.367 1.105 1.037-.53c.266-.135.637-.412 1.039-.74.39-.319.872-.737 1.422-1.245h2.291a3.306 3.306 0 003.306-3.306V5.306A3.306 3.306 0 0010.611 2H5.306A3.306 3.306 0 002 5.306v2.656c0 1.34.933 2.461 2.185 2.75.008.172.025.335.046.479a6.622 6.622 0 00.168.803c.016.07.035.137.056.2z"></path>
 | 
			
		||||
                        .MediaBody= post.comment_count
 | 
			
		||||
                      .Media.Post-item-stat
 | 
			
		||||
                        svg(width="16" height="16" viewBox="0 0 16 16" class="PostViewsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
 | 
			
		||||
                          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