Community visibility setting (#2376)

* Update deps

* Add community visibility to community form for editing and creating

* Add translations

* Make visibility display

* Add translations

---------

Co-authored-by: SleeplessOne1917 <insomnia-void@protonmail.com>
Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

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

@@ -3,6 +3,7 @@ import { Component, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
   CommunityView,
+  CommunityVisibility,
   CreateCommunity,
   EditCommunity,
   Language,
@@ -34,6 +35,7 @@ interface CommunityFormState {
     nsfw?: boolean;
     posting_restricted_to_mods?: boolean;
     discussion_languages?: number[];
+    visibilty?: CommunityVisibility;
   };
   submitted: boolean;
 }
@@ -78,6 +80,7 @@ export class CommunityForm extends Component<
           banner: cv.community.banner,
           posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
           discussion_languages: this.props.communityLanguages,
+          visibilty: cv.community.visibility,
         },
       };
     }
@@ -217,6 +220,24 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
+        <div className="mb-3 row">
+          <legend className="col-form-label col-6 pt-0">
+            {I18NextService.i18n.t("community_visibility")}
+          </legend>
+          <div className="col-6">
+            <select
+              className="form-select position-static"
+              id="community-visibility"
+              onChange={linkEvent(this, this.handleCommunityVisibilityChange)}
+              value={this.state.form.visibilty ?? "Public"}
+            >
+              <option value="Public">{I18NextService.i18n.t("public")}</option>
+              <option value="LocalOnly">
+                {I18NextService.i18n.t("local_only")}
+              </option>
+            </select>
+          </div>
+        </div>
         <div className="mb-3 row">
           <legend className="col-form-label col-6 pt-0">
             {I18NextService.i18n.t("only_mods_can_post_in_community")}
@@ -291,6 +312,7 @@ export class CommunityForm extends Component<
         nsfw: cForm.nsfw,
         posting_restricted_to_mods: cForm.posting_restricted_to_mods,
         discussion_languages: cForm.discussion_languages,
+        visibility: cForm.visibilty,
       });
     } else {
       if (cForm.title && cForm.name) {
@@ -303,6 +325,7 @@ export class CommunityForm extends Component<
           nsfw: cForm.nsfw,
           posting_restricted_to_mods: cForm.posting_restricted_to_mods,
           discussion_languages: cForm.discussion_languages,
+          visibility: cForm.visibilty,
         });
       }
     }
@@ -330,6 +353,10 @@ export class CommunityForm extends Component<
     );
   }
 
+  handleCommunityVisibilityChange(i: CommunityForm, event: any) {
+    i.setState(s => ((s.form.visibilty = event.target.value), s));
+  }
+
   handleCancel(i: CommunityForm) {
     i.props.onCancel?.();
   }

src/shared/components/community/sidebar.tsx

@@ -124,7 +124,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   sidebar() {
     const myUserInfo = UserService.Instance.myUserInfo;
     const {
-      community: { name, actor_id, id, posting_restricted_to_mods },
+      community: { name, actor_id, id, posting_restricted_to_mods, visibility },
       counts,
     } = this.props.community_view;
     return (
@@ -175,6 +175,30 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 </div>
               )}
               {this.description()}
+              <div>
+                <div className="fw-semibold mb-1">
+                  <span className="align-middle">
+                    {I18NextService.i18n.t("community_visibility")}:&nbsp;
+                  </span>
+                  <span className="fs-5 fw-medium align-middle">
+                    {I18NextService.i18n.t(
+                      visibility === "Public" ? "public" : "local_only",
+                    )}
+                    <Icon
+                      icon={visibility === "Public" ? "globe" : "house"}
+                      inline
+                      classes="ms-1 text-secondary"
+                    />
+                  </span>
+                </div>
+                <p>
+                  {I18NextService.i18n.t(
+                    visibility === "Public"
+                      ? "public_blurb"
+                      : "local_only_blurb",
+                  )}
+                </p>
+              </div>
               <Badges communityId={id} counts={counts} />
               {this.mods()}
             </div>