Add site editing.

- Fixes #96

ui/src/components/community-form.tsx

@@ -168,7 +168,10 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
       let res: CommunityResponse = msg;
       this.state.loading = false;
       this.props.onCreate(res.community.id);
-    } else if (op == UserOperation.EditCommunity) {
+    } 
+
+    // TODO is this necessary?
+    else if (op == UserOperation.EditCommunity) {
       let res: CommunityResponse = msg;
       this.state.loading = false;
       this.props.onEdit(res.community);

ui/src/components/main.tsx

@@ -1,10 +1,11 @@
-import { Component } from 'inferno';
+import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, ListingType } from '../interfaces';
+import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, ListingType, SiteResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
+import { SiteForm } from './site-form';
 import { msgOp, repoUrl, mdToHtml } from '../utils';
 
 
@@ -16,6 +17,7 @@ interface MainState {
   subscribedCommunities: Array<CommunityUser>;
   trendingCommunities: Array<Community>;
   site: GetSiteResponse;
+  showEditSite: boolean;
   loading: boolean;
 }
 
@@ -40,6 +42,7 @@ export class Main extends Component<MainProps, MainState> {
       admins: [],
       banned: [],
     },
+    showEditSite: false,
     loading: true
   }
 
@@ -68,6 +71,8 @@ export class Main extends Component<MainProps, MainState> {
     }
 
     WebSocketService.Instance.listCommunities(listCommunitiesForm);
+
+    this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
   componentWillUnmount() {
@@ -87,16 +92,16 @@ export class Main extends Component<MainProps, MainState> {
             <div>
               {this.trendingCommunities()}
               {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && 
-              <div>
-                <h5>Subscribed forums</h5>
-                <ul class="list-inline"> 
-                  {this.state.subscribedCommunities.map(community =>
-                    <li class="list-inline-item"><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
-                  )}
-                </ul>
-              </div>
+                <div>
+                  <h5>Subscribed forums</h5>
+                  <ul class="list-inline"> 
+                    {this.state.subscribedCommunities.map(community =>
+                      <li class="list-inline-item"><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
+                    )}
+                  </ul>
+                </div>
               }
-              {this.landing()}
+              {this.sidebar()}
             </div>
             }
           </div>
@@ -118,17 +123,39 @@ export class Main extends Component<MainProps, MainState> {
     )
   }
 
-  landing() {
+  sidebar() {
     return (
       <div>
-        <h5>{`${this.state.site.site.name}`}</h5>
-        <ul class="my-1 list-inline">
+        {!this.state.showEditSite ?
+          this.siteInfo() :
+          <SiteForm
+            site={this.state.site.site} 
+            onCancel={this.handleEditCancel} 
+          />
+        }
+        {this.landing()}
+      </div>
+    )
+  }
+
+  siteInfo() {
+    return (
+      <div>
+        <h5 class="mb-0">{`${this.state.site.site.name}`}</h5>
+        {this.canAdmin && 
+          <ul class="list-inline mb-1 text-muted small font-weight-bold"> 
+            <li className="list-inline-item">
+              <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
+            </li>
+          </ul>
+        }
+        <ul class="my-2 list-inline">
           <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_users} Users</li>
           <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_posts} Posts</li>
           <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_comments} Comments</li>
           <li className="list-inline-item"><Link className="badge badge-light" to="/modlog">Modlog</Link></li>
         </ul>
-        <ul class="list-inline small"> 
+        <ul class="my-1 list-inline small"> 
           <li class="list-inline-item">admins: </li>
           {this.state.site.admins.map(admin =>
             <li class="list-inline-item"><Link class="text-info" to={`/user/${admin.id}`}>{admin.name}</Link></li>
@@ -141,6 +168,13 @@ export class Main extends Component<MainProps, MainState> {
             <hr />
           </div>
         }
+      </div>
+    )
+  }
+
+  landing() {
+    return (
+      <div>
         <h5>Welcome to 
           <svg class="icon mx-2"><use xlinkHref="#icon-mouse"></use></svg>
           <a href={repoUrl}>Lemmy<sup>Beta</sup></a>
@@ -154,6 +188,20 @@ export class Main extends Component<MainProps, MainState> {
     )
   }
 
+  get canAdmin(): boolean {
+    return UserService.Instance.user && this.state.site.admins.map(a => a.id).includes(UserService.Instance.user.id);
+  }
+
+  handleEditClick(i: Main) {
+    i.state.showEditSite = true;
+    i.setState(i.state);
+  }
+
+  handleEditCancel() {
+    this.state.showEditSite = false;
+    this.setState(this.state);
+  }
+
   parseMessage(msg: any) {
     console.log(msg);
     let op: UserOperation = msgOp(msg);
@@ -181,7 +229,12 @@ export class Main extends Component<MainProps, MainState> {
       this.state.site.site = res.site;
       this.state.site.banned = res.banned;
       this.setState(this.state);
-    } 
+    } else if (op == UserOperation.EditSite) {
+      let res: SiteResponse = msg;
+      this.state.site.site = res.site;
+      this.state.showEditSite = false;
+      this.setState(this.state);
+    }
   }
 }
 

ui/src/components/sidebar.tsx

@@ -39,7 +39,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
       <div>
         {!this.state.showEdit 
           ? this.sidebar()
-          : <CommunityForm community={this.props.community} onEdit={this.handleEditCommunity} onCancel={this.handleEditCancel}/>
+          : <CommunityForm 
+          community={this.props.community} 
+          onEdit={this.handleEditCommunity} 
+          onCancel={this.handleEditCancel} />
         }
       </div>
     )
@@ -206,7 +209,4 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.state.showRemoveDialog = false;
     i.setState(i.state);
   }
-
-
-
 }

ui/src/components/site-form.tsx

@@ -24,6 +24,12 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   constructor(props: any, context: any) {
     super(props, context);
     this.state = this.emptyState;
+    if (this.props.site) {
+      this.state.siteForm = {
+        name: this.props.site.name,
+        description: this.props.site.description,
+      }
+    }
   }
 
   componentDidMount() {

ui/src/interfaces.ts

@@ -341,7 +341,7 @@ export interface CommunityForm {
   description?: string,
   category_id: number,
   edit_id?: number;
-  removed: boolean;
+  removed?: boolean;
   reason?: string;
   expires?: number;
   auth?: string;

ui/src/version.ts

@@ -1 +1 @@
-export let version: string = "v0.0.3-3-gfe52d59";
+export let version: string = "v0.0.3-11-g9278104";