Merge remote-tracking branch 'origin/main' into feat/add-badges-common-component

* origin/main:
  handle login failures correctly
  wrap login call in try/catch for error handling
  Remove extra div in post sidebar
  Add a class to the more button on a comment node
  Switch navbar classes to ids
  Adding a few more 0.18.0 API changes. (#1324)
  Use aside semantic HTML tag for sidebars
  Use article semantic HTML tag for posts/comments
  Use footer semantic HTML tag
  Adding codeowners.
  Add lemmy-site class for easier detection
  Add ID's and classes to sidebars
  Add clases and ID's to post form/listing
  Add classes to post and comment repy textareas
  Rename markdown-textarea ID's
  Add nav and footer ID's

.github/CODEOWNERS

@@ -1 +1 @@
-* @dessalines @SleeplessOne1917
+* @dessalines @SleeplessOne1917 @alectrocute

package.json

@@ -54,7 +54,7 @@
     "inferno-server": "^8.1.1",
     "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.17.2-rc.24",
+    "lemmy-js-client": "0.18.0-rc.1",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",

src/shared/components/app/app.tsx

@@ -25,7 +25,7 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={i18n}>
-          <div id="app">
+          <div id="app" className="lemmy-site">
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}

src/shared/components/app/footer.tsx

@@ -16,7 +16,7 @@ export class Footer extends Component<FooterProps, any> {
 
   render() {
     return (
-      <nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
+      <footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
         <div className="navbar-collapse">
           <ul className="navbar-nav ml-auto">
             {this.props.site?.version !== VERSION && (
@@ -63,7 +63,7 @@ export class Footer extends Component<FooterProps, any> {
             </li>
           </ul>
         </div>
-      </nav>
+      </footer>
     );
   }
 }

src/shared/components/app/navbar.tsx

@@ -86,8 +86,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
-      <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
+      <nav
+        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
+        id="navbar"
+      >
         <NavLink
+          id="navTitle"
           to="/"
           title={siteView?.site.description ?? siteView?.site.name}
           className="d-flex align-items-center navbar-brand mr-md-3"
@@ -100,10 +104,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
         </NavLink>
         {person && (
           <ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
-            <li className="nav-item">
+            <li id="navMessages" className="nav-item nav-item-icon">
               <NavLink
                 to="/inbox"
-                className="p-1 nav-link border-0"
+                className="p-1 nav-link border-0 nav-messages"
                 title={i18n.t("unread_messages", {
                   count: Number(this.state.unreadApplicationCountRes.state),
                   formattedCount: numToSI(this.unreadInboxCount),
@@ -119,7 +123,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </NavLink>
             </li>
             {this.moderatesSomething && (
-              <li className="nav-item">
+              <li className="nav-item nav-item-icon">
                 <NavLink
                   to="/reports"
                   className="p-1 nav-link border-0"
@@ -139,7 +143,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </li>
             )}
             {amAdmin() && (
-              <li className="nav-item">
+              <li className="nav-item nav-item-icon">
                 <NavLink
                   to="/registration_applications"
                   className="p-1 nav-link border-0"
@@ -178,7 +182,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           id="navbarDropdown"
           ref={this.mobileMenuRef}
         >
-          <ul className="mr-auto navbar-nav">
+          <ul id="navbarLinks" className="mr-auto navbar-nav">
             <li className="nav-item">
               <NavLink
                 to="/communities"
@@ -228,8 +232,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </a>
             </li>
           </ul>
-          <ul className="navbar-nav">
+          <ul id="navbarIcons" className="navbar-nav">
-            <li className="nav-item">
+            <li id="navSearch" className="nav-item">
               <NavLink
                 to="/search"
                 className="nav-link"
@@ -240,7 +244,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </NavLink>
             </li>
             {amAdmin() && (
-              <li className="nav-item">
+              <li id="navAdmin" className="nav-item">
                 <NavLink
                   to="/admin"
                   className="nav-link"
@@ -253,7 +257,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             )}
             {person ? (
               <>
-                <li className="nav-item">
+                <li id="navMessages" className="nav-item">
                   <NavLink
                     className="nav-link"
                     to="/inbox"
@@ -272,7 +276,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </NavLink>
                 </li>
                 {this.moderatesSomething && (
-                  <li className="nav-item">
+                  <li id="navModeration" className="nav-item">
                     <NavLink
                       className="nav-link"
                       to="/reports"
@@ -292,7 +296,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {amAdmin() && (
-                  <li className="nav-item">
+                  <li id="navApplications" className="nav-item">
                     <NavLink
                       to="/registration_applications"
                       className="nav-link"
@@ -312,7 +316,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {person && (
-                  <div className="dropdown">
+                  <div id="dropdownUser" className="dropdown">
                     <button
                       className="btn dropdown-toggle"
                       role="button"

src/shared/components/comment/comment-form.tsx

@@ -21,6 +21,7 @@ interface CommentFormProps {
   onReplyCancel?(): void;
   allLanguages: Language[];
   siteLanguages: number[];
+  containerClass?: string;
   onUpsertComment(form: EditComment | CreateComment): void;
 }
 
@@ -40,7 +41,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
         : undefined;
 
     return (
-      <div className="mb-3">
+      <div className={["mb-3", this.props.containerClass].join(" ")}>
         {UserService.Instance.myUserInfo ? (
           <MarkdownTextArea
             initialContent={initialContent}

src/shared/components/comment/comment-node.tsx

@@ -282,7 +282,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     return (
       <li className="comment" role="comment">
-        <div
+        <article
           id={`comment-${cv.comment.id}`}
           className={classNames(`details comment-node py-2`, {
             "border-top border-light": !this.props.noBorder,
@@ -400,6 +400,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 focus
                 allLanguages={this.props.allLanguages}
                 siteLanguages={this.props.siteLanguages}
+                containerClass="comment-comment-container"
                 onUpsertComment={this.props.onEditComment}
               />
             )}
@@ -512,7 +513,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </button>
                       {!this.state.showAdvanced ? (
                         <button
-                          className="btn btn-link btn-animate text-muted"
+                          className="btn btn-link btn-animate text-muted btn-more"
                           onClick={linkEvent(this, this.handleShowAdvanced)}
                           data-tippy-content={i18n.t("more")}
                           aria-label={i18n.t("more")}
@@ -944,7 +945,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </div>
             )}
           </div>
-        </div>
+        </article>
         {showMoreChildren && (
           <div
             className={classNames("details ml-1 comment-node py-2", {
@@ -1143,6 +1144,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             focus
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
+            containerClass="comment-comment-container"
             onUpsertComment={this.props.onCreateComment}
           />
         )}

src/shared/components/common/badges.tsx

@@ -9,7 +9,6 @@ import { numToSI } from "../../utils";
 
 interface BadgesProps {
   counts: CommunityAggregates | SiteAggregates;
-  online: number;
   community_view?: CommunityView;
 }
 
@@ -19,15 +18,9 @@ const isCommunityAggregates = (
   return "subscribers" in counts;
 };
 
-export const Badges = ({ counts, community_view, online }: BadgesProps) => {
+export const Badges = ({ counts, community_view }: BadgesProps) => {
   return (
     <ul className="my-1 list-inline">
-      <li className="list-inline-item badge badge-secondary">
-        {i18n.t("number_online", {
-          count: online,
-          formattedCount: numToSI(online),
-        })}
-      </li>
       <li
         className="list-inline-item badge badge-secondary pointer"
         data-tippy-content={i18n.t("active_users_in_the_last_day", {
@@ -103,7 +96,7 @@ export const Badges = ({ counts, community_view, online }: BadgesProps) => {
       <li className="list-inline-item">
         <Link
           className="badge badge-primary"
-          to={`/modlog/${community_view ?? community_view?.community.id}`}
+          to={`/modlog/${!!community_view ?? community_view?.community.id}`}
         >
           {i18n.t("modlog")}
         </Link>

src/shared/components/common/markdown-textarea.tsx

@@ -63,8 +63,9 @@ export class MarkdownTextArea extends Component<
   MarkdownTextAreaProps,
   MarkdownTextAreaState
 > {
-  private id = `comment-textarea-${randomStr()}`;
+  private id = `markdown-textarea-${randomStr()}`;
-  private formId = `comment-form-${randomStr()}`;
+  private formId = `markdown-form-${randomStr()}`;
+
   private tribute: any;
 
   state: MarkdownTextAreaState = {

src/shared/components/community/community.tsx

@@ -360,7 +360,6 @@ export class Community extends Component<
           community_view={res.community_view}
           moderators={res.moderators}
           admins={site_res.admins}
-          online={res.online}
           enableNsfw={enableNsfw(site_res)}
           editable
           allLanguages={site_res.all_languages}

src/shared/components/community/sidebar.tsx

@@ -39,7 +39,6 @@ interface SidebarProps {
   allLanguages: Language[];
   siteLanguages: number[];
   communityLanguages?: number[];
-  online: number;
   enableNsfw?: boolean;
   showIcon?: boolean;
   editable?: boolean;
@@ -132,8 +131,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const myUSerInfo = UserService.Instance.myUserInfo;
     const { name, actor_id } = this.props.community_view.community;
     return (
-      <div>
+      <aside className="mb-3">
-        <div className="card border-secondary mb-3">
+        <div id="sidebarContainer">
+          <section id="sidebarMain" className="card border-secondary mb-3">
             <div className="card-body">
               {this.communityTitle()}
               {this.props.editable && this.adminButtons()}
@@ -154,19 +154,19 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 </div>
               )}
             </div>
-        </div>
+          </section>
-        <div className="card border-secondary mb-3">
+          <section id="sidebarInfo" className="card border-secondary mb-3">
             <div className="card-body">
               {this.description()}
               <Badges
-              online={this.props.online}
                 community_view={this.props.community_view}
                 counts={this.props.community_view.counts}
               />
               {this.mods()}
             </div>
+          </section>
         </div>
-      </div>
+      </aside>
     );
   }
 

src/shared/components/home/home.tsx

@@ -361,7 +361,6 @@ export class Home extends Component<any, HomeState> {
       siteRes: {
         site_view: { counts, site },
         admins,
-        online,
       },
       showSubscribedMobile,
       showTrendingMobile,
@@ -393,7 +392,6 @@ export class Home extends Component<any, HomeState> {
               site={site}
               admins={admins}
               counts={counts}
-              online={online}
               showLocal={showLocal(this.isoData)}
             />
           )}
@@ -417,14 +415,12 @@ export class Home extends Component<any, HomeState> {
       siteRes: {
         site_view: { counts, site },
         admins,
-        online,
       },
     } = this.state;
 
     return (
-      <div>
+      <div id="sidebarContainer">
-        <div>
+        <section id="sidebarMain" className="card border-secondary mb-3">
-          <div className="card border-secondary mb-3">
           <div className="card-body">
             {this.trendingCommunities()}
             {canCreateCommunity(this.state.siteRes) && (
@@ -438,21 +434,22 @@ export class Home extends Component<any, HomeState> {
               translationKey="explore_communities"
             />
           </div>
-          </div>
+        </section>
         <SiteSidebar
           site={site}
           admins={admins}
           counts={counts}
-            online={online}
           showLocal={showLocal(this.isoData)}
         />
         {this.hasFollows && (
-            <div className="card border-secondary mb-3">
+          <section
+            id="sidebarSubscribed"
+            className="card border-secondary mb-3"
+          >
             <div className="card-body">{this.subscribedCommunities}</div>
-            </div>
+          </section>
         )}
       </div>
-      </div>
     );
   }
 

src/shared/components/home/login.tsx

@@ -172,7 +172,7 @@ export class Login extends Component<any, State> {
             toast(i18n.t("enter_two_factor_code"), "info");
           }
 
-          i.setState({ loginRes: { state: "empty" } });
+          i.setState({ loginRes: { state: "failed", msg: loginRes.msg } });
           break;
         }
 

src/shared/components/home/site-form.tsx

@@ -81,7 +81,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
       slur_filter_regex: ls.slur_filter_regex,
       actor_name_max_length: ls.actor_name_max_length,
       federation_enabled: ls.federation_enabled,
-      federation_debug: ls.federation_debug,
       federation_worker_count: ls.federation_worker_count,
       captcha_enabled: ls.captcha_enabled,
       captcha_difficulty: ls.captcha_difficulty,

src/shared/components/home/site-sidebar.tsx

@@ -12,7 +12,6 @@ interface SiteSidebarProps {
   showLocal: boolean;
   counts?: SiteAggregates;
   admins?: PersonView[];
-  online?: number;
 }
 
 interface SiteSidebarState {
@@ -30,7 +29,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <div className="card border-secondary mb-3">
+      <section id="sidebarInfo" className="card border-secondary mb-3">
         <div className="card-body">
           <div>
             <div className="mb-2">{this.siteName()}</div>
@@ -42,7 +41,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             )}
           </div>
         </div>
-      </div>
+      </section>
     );
   }
 
@@ -72,9 +71,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
       <div>
         {site.description && <h6>{site.description}</h6>}
         {site.sidebar && this.siteSidebar(site.sidebar)}
-        {this.props.counts && (
+        {this.props.counts && <Badges counts={this.props.counts} />}
-          <Badges online={this.props.online ?? 1} counts={this.props.counts} />
-        )}
         {this.props.admins && this.admins(this.props.admins)}
       </div>
     );

src/shared/components/post/create-post.tsx

@@ -166,7 +166,10 @@ export class CreatePost extends Component<
           </h5>
         ) : (
           <div className="row">
-            <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+            <div
+              id="createPostForm"
+              className="col-12 col-lg-6 offset-lg-3 mb-4"
+            >
               <h5>{i18n.t("create_post")}</h5>
               <PostForm
                 onCreate={this.handlePostCreate}

src/shared/components/post/post-listing.tsx

@@ -230,13 +230,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   body() {
     const body = this.postView.post.body;
     return body ? (
-      <div className="col-12 card my-2 p-2">
+      <article id="postContent" className="col-12 card my-2 p-2">
         {this.state.viewSource ? (
           <pre>{body}</pre>
         ) : (
           <div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
         )}
-      </div>
+      </article>
     ) : (
       <></>
     );
@@ -464,7 +464,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </button>
         {showScores() ? (
           <div
-            className={`unselectable pointer font-weight-bold text-muted px-1`}
+            className={`unselectable pointer font-weight-bold text-muted px-1 post-score`}
             data-tippy-content={this.pointsTippy}
           >
             {numToSI(this.postView.counts.score)}
@@ -1398,7 +1398,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <>
         {/* The mobile view*/}
         <div className="d-block d-sm-none">
-          <div className="row">
+          <article className="row post-container">
             <div className="col-12">
               {this.createdLine()}
 
@@ -1413,14 +1413,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.duplicatesLine()}
               {this.removeAndBanDialogs()}
             </div>
-          </div>
+          </article>
         </div>
 
         {/* The larger view*/}
         <div className="d-none d-sm-block">
-          <div className="row">
+          <article className="row post-container">
             {!this.props.viewOnly && this.voteBar()}
-            <div className="col-sm-2 pr-0">
+            <div className="col-sm-2 pr-0 post-media">
               <div className="">{this.thumbnail()}</div>
             </div>
             <div className="col-12 col-sm-9">
@@ -1435,7 +1435,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 </div>
               </div>
             </div>
-          </div>
+          </article>
         </div>
       </>
     );

src/shared/components/post/post.tsx

@@ -384,6 +384,7 @@ export class Post extends Component<any, PostState> {
                 disabled={res.post_view.post.locked}
                 allLanguages={this.state.siteRes.all_languages}
                 siteLanguages={this.state.siteRes.discussion_languages}
+                containerClass="post-comment-container"
                 onUpsertComment={this.handleCreateComment}
                 finished={this.state.finished.get(0)}
               />
@@ -547,12 +548,10 @@ export class Post extends Component<any, PostState> {
     const res = this.state.postRes;
     if (res.state === "success") {
       return (
-        <div className="mb-3">
         <Sidebar
           community_view={res.data.community_view}
           moderators={res.data.moderators}
           admins={this.state.siteRes.admins}
-            online={res.data.online}
           enableNsfw={enableNsfw(this.state.siteRes)}
           showIcon
           allLanguages={this.state.siteRes.all_languages}
@@ -565,7 +564,6 @@ export class Post extends Component<any, PostState> {
           onBlockCommunity={this.handleBlockCommunity}
           onEditCommunity={this.handleEditCommunity}
         />
-        </div>
       );
     }
   }

yarn.lock

@@ -5615,10 +5615,10 @@ leac@^0.6.0:
   resolved "https://registry.yarnpkg.com/leac/-/leac-0.6.0.tgz#dcf136e382e666bd2475f44a1096061b70dc0912"
   integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==
 
-lemmy-js-client@0.17.2-rc.24:
+lemmy-js-client@0.18.0-rc.1:
-  version "0.17.2-rc.24"
+  version "0.18.0-rc.1"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.2-rc.24.tgz#3b09233a6d89286e559be2e840d81c0c549562ad"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.18.0-rc.1.tgz#fd0c88810572d90413696011ebaed19e3b8162d8"
-  integrity sha512-aSHz7UTcwnwnNd9poY8tEXP7RA9ieZm9MAfSljcbCNU5ds9CASXYNodmraUVJiqCmT4HWnj7IeVmBC9r7nTHnw==
+  integrity sha512-lQe443Nr5UCSoY+IxmT7mBe0IRF6EAZ/4PJSRoPSL+U8A+egMMBPbuxnisHzLsC+eDOWRUIgOqZlwlaRnbmuig==
   dependencies:
     cross-fetch "^3.1.5"
     form-data "^4.0.0"