From 6ae9f639e649a81bde38bcfe2da66c26056948e8 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Thu, 4 Apr 2019 17:01:10 -0700 Subject: [PATCH] Adding Iframe expand - Adding Iframe Expand. Fixes #32 - Fix issue with table sorting. Fixes #33 - Changing all to h4s. Fixes #30 --- ui/src/components/communities.tsx | 9 +- ui/src/components/create-community.tsx | 2 +- ui/src/components/create-post.tsx | 2 +- ui/src/components/login.tsx | 4 +- ui/src/components/post-listing.tsx | 25 ++- ui/src/components/post.tsx | 2 +- ui/src/components/search.tsx | 205 ------------------------- ui/src/components/sidebar.tsx | 2 +- 8 files changed, 35 insertions(+), 216 deletions(-) delete mode 100644 ui/src/components/search.tsx diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index 921ef157f..80953aaa3 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -6,6 +6,8 @@ import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, import { WebSocketService, UserService } from '../services'; import { msgOp, hotRank,mdToHtml } from '../utils'; +declare const Sortable: any; + interface CommunitiesState { communities: Array; } @@ -29,12 +31,17 @@ export class Communities extends Component { WebSocketService.Instance.listCommunities(); } + componentDidMount() { + let table = document.querySelector('#community_table'); + Sortable.initTable(table); + } + render() { return (

Communities

- +
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx index cd43c8faa..e98352a22 100644 --- a/ui/src/components/create-community.tsx +++ b/ui/src/components/create-community.tsx @@ -13,7 +13,7 @@ export class CreateCommunity extends Component {
-

Create Forum

+

Create Forum

diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx index 51e992111..784465a0d 100644 --- a/ui/src/components/create-post.tsx +++ b/ui/src/components/create-post.tsx @@ -13,7 +13,7 @@ export class CreatePost extends Component {
-

Create a Post

+

Create a Post

diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx index cad4593ea..30b0aabcd 100644 --- a/ui/src/components/login.tsx +++ b/ui/src/components/login.tsx @@ -62,7 +62,7 @@ export class Login extends Component { return (
-

Login

+

Login

@@ -88,7 +88,7 @@ export class Login extends Component { registerForm() { return ( -

Sign Up

+

Sign Up

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index cdb2fed39..348190feb 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -10,6 +10,7 @@ import { mdToHtml } from '../utils'; interface PostListingState { showEdit: boolean; + iframeExpanded: boolean; } interface PostListingProps { @@ -22,7 +23,8 @@ interface PostListingProps { export class PostListing extends Component { private emptyState: PostListingState = { - showEdit: false + showEdit: false, + iframeExpanded: false } constructor(props, context) { @@ -56,11 +58,21 @@ export class PostListing extends Component {
{post.url - ?
+ ?

{post.name} {(new URL(post.url)).hostname} -

- :
{post.name}
+ { !this.state.iframeExpanded + ? + + : + + - +
+ +
+
+ } + + :

{post.name}

}
@@ -149,5 +161,10 @@ export class PostListing extends Component { }; WebSocketService.Instance.editPost(deleteForm); } + + handleIframeExpandClick(i: PostListing, event) { + i.state.iframeExpanded = !i.state.iframeExpanded; + i.setState(i.state); + } } diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index 0efa254a0..0075e9dff 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -109,7 +109,7 @@ export class Post extends Component { newComments() { return (
-
New Comments
+

New Comments

{this.state.comments.map(comment => )} diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx deleted file mode 100644 index 080761f9f..000000000 --- a/ui/src/components/search.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import { Component, linkEvent } from 'inferno'; -import * as moment from 'moment'; - -import { endpoint } from '../env'; -import { SearchParams, Results, Torrent } from '../interfaces'; -import { humanFileSize, magnetLink, getFileName } from '../utils'; - -interface State { - results: Results; - searchParams: SearchParams; - searching: Boolean; -} - -export class Search extends Component { - - state: State = { - results: { - torrents: [] - }, - searchParams: { - q: "", - page: 1, - type_: 'torrent' - }, - searching: false - }; - - constructor(props, context) { - super(props, context); - } - - componentDidMount() { - this.state.searchParams = { - page: Number(this.props.match.params.page), - q: this.props.match.params.q, - type_: this.props.match.params.type_ - } - this.search(); - } - - // Re-do search if the props have changed - componentDidUpdate(lastProps, lastState, snapshot) { - if (lastProps.match && lastProps.match.params !== this.props.match.params) { - this.state.searchParams = { - page: Number(this.props.match.params.page), - q: this.props.match.params.q, - type_: this.props.match.params.type_ - } - this.search(); - } - - } - - search() { - if (!!this.state.searchParams.q) { - this.setState({ searching: true, results: { torrents: [] } }); - this.fetchData(this.state.searchParams) - .then(torrents => { - if (!!torrents) { - this.setState({ - results: { - torrents: torrents - } - }); - } - }).catch(error => { - console.error('request failed', error); - }).then(() => this.setState({ searching: false })); - } else { - this.setState({ results: { torrents: [] } }); - } - } - - fetchData(searchParams: SearchParams): Promise> { - let q = encodeURI(searchParams.q); - return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}&type_=${searchParams.type_}`) - .then(data => data.json()); - } - - render() { - return ( -
- { - this.state.searching ? - this.spinner() : this.state.results.torrents[0] ? - this.torrentsTable() - : this.noResults() - } -
- ); - } - - spinner() { - return ( -
- -
- ); - } - - noResults() { - return ( -
-

No Results

-
- ) - } - - torrentsTable() { - return ( -
-
Name
- - - - - - - - - - - - {this.state.results.torrents.map(torrent => ( - - { !torrent.name ? ( - - ) : ( - - )} - - - - - - - ))} - -
NameSizeSeedsLeechesCreated
- - {getFileName(torrent.path)} - - - - {torrent.name} - - {humanFileSize(torrent.size_bytes, true)} - - {torrent.seeders} - - - {torrent.leechers} - - {moment(torrent.created_unix * 1000).fromNow()} - - - - - - - -
- {this.paginator()} -
- ); - } - - paginator() { - return ( - - ); - } - - switchPage(a: { i: Search, nextPage: boolean }, event) { - let newSearch = a.i.state.searchParams; - newSearch.page += (a.nextPage) ? 1 : -1; - a.i.props.history.push(`/search/${newSearch.type_}/${newSearch.q}/${newSearch.page}`); - } -} diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index 90c35924e..ec64e518b 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -68,7 +68,7 @@ export class Sidebar extends Component {
}
-
Moderators
+

Moderators

{this.props.moderators.map(mod => {mod.user_name} )}