Add Taglines support (#854)

* Add Taglines support

* Fix issue with deletion not rendering properly.

* Address PR comments

* Missed alllanguages

* Cleanup tagline match

* Update js client

* Move taglines to siteres

* Only show taglines editor after site setup

* Update js client

package.json

@@ -47,7 +47,7 @@
     "inferno-server": "^8.0.3",
     "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.17.0-rc.51",
+    "lemmy-js-client": "0.17.0-rc.53",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "markdown-it-footnote": "^3.0.3",

src/assets/css/main.css

@@ -385,4 +385,4 @@ br.big {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
-}
+}

src/shared/components/home/home.tsx

@@ -50,9 +50,11 @@ import {
   getDataTypeFromProps,
   getListingTypeFromProps,
   getPageFromProps,
+  getRandomFromList,
   getSortTypeFromProps,
   isBrowser,
   isPostBlocked,
+  mdToHtml,
   notifyPost,
   nsfwCheck,
   postToCommentSortType,
@@ -94,6 +96,7 @@ interface HomeState {
   showSidebarMobile: boolean;
   subscribedCollapsed: boolean;
   loading: boolean;
+  tagline: Option<string>;
 }
 
 interface HomeProps {
@@ -137,6 +140,7 @@ export class Home extends Component<any, HomeState> {
     dataType: getDataTypeFromProps(this.props),
     sort: getSortTypeFromProps(this.props),
     page: getPageFromProps(this.props),
+    tagline: None
   };
 
   constructor(props: any, context: any) {
@@ -170,10 +174,12 @@ export class Home extends Component<any, HomeState> {
           wsClient.communityJoin({ community_id: 0 })
         );
       }
+      const taglines = this.state.siteRes.taglines;
       this.state = {
         ...this.state,
         trendingCommunities: trendingRes.communities,
         loading: false,
+        tagline: taglines.map(tls => getRandomFromList(tls).content)
       };
     } else {
       this.fetchTrendingCommunities();
@@ -329,6 +335,10 @@ export class Home extends Component<any, HomeState> {
         {this.state.siteRes.site_view.local_site.site_setup && (
           <div className="row">
             <main role="main" className="col-12 col-md-8">
+              {this.state.tagline.match({
+                some: tagline => <div id="tagline" dangerouslySetInnerHTML={mdToHtml(tagline)}></div>,
+                none: <></>,
+              })}
               <div className="d-block d-md-none">{this.mobileView()}</div>
               {this.posts()}
             </main>

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

@@ -1,5 +1,5 @@
 import { None, Option, Some } from "@sniptt/monads";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoMouseEvent, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
   CreateSite,
@@ -16,7 +16,7 @@ import {
   fetchThemeList,
   wsClient,
 } from "../../utils";
-import { Spinner } from "../common/icon";
+import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { ListingTypeSelect } from "../common/listing-type-select";
@@ -78,6 +78,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
       captcha_difficulty: None,
       allowed_instances: None,
       blocked_instances: None,
+      taglines: None,
       auth: undefined,
     }),
     loading: false,
@@ -159,6 +160,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         blocked_instances: this.props.siteRes.federated_instances.andThen(
           f => f.blocked
         ),
+        taglines: this.props.siteRes.taglines.map(x => x.map(y => y.content)),
         auth: undefined,
       }),
     };
@@ -1032,6 +1034,57 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               />
             </div>
           </div>
+          {siteSetup && <div className="form-group row">
+            <h5 className="col-12">{i18n.t("taglines")}</h5>
+            <div className="table-responsive col-12">
+              <table id="taglines_table" className="table table-sm table-hover">
+                <thead className="pointer"></thead>
+                <tbody>
+                  {this.state.siteForm.taglines
+                    .unwrapOr([])
+                    .map((cv, index) => (
+                      <tr key={index}>
+                        <td>
+                          <MarkdownTextArea
+                            initialContent={Some(cv)}
+                            initialLanguageId={None}
+                            placeholder={None}
+                            buttonTitle={None}
+                            maxLength={None}
+                            onContentChange={s =>
+                              this.handleTaglineChange(this, index, s)
+                            }
+                            hideNavigationWarnings
+                            allLanguages={this.props.siteRes.all_languages}
+                          />
+                        </td>
+                        <td className="text-right">
+                          <button
+                            className="btn btn-link btn-animate text-muted"
+                            onClick={e =>
+                              this.handleDeleteTaglineClick(this, index, e)
+                            }
+                            data-tippy-content={i18n.t("delete")}
+                            aria-label={i18n.t("delete")}
+                          >
+                            <Icon
+                              icon="trash"
+                              classes={`icon-inline text-danger`}
+                            />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+              <button
+                className="btn btn-sm btn-secondary mr-2"
+                onClick={e => this.handleAddTaglineClick(this, e)}
+              >
+                {i18n.t("add_tagline")}
+              </button>
+            </div>
+          </div>}
           <div className="form-group row">
             <div className="col-12">
               <button
@@ -1058,7 +1111,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     event.preventDefault();
     i.setState({ loading: true });
     i.setState(s => ((s.siteForm.auth = auth().unwrap()), s));
-
     if (i.props.siteRes.site_view.local_site.site_setup) {
       WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
     } else {
@@ -1141,6 +1193,42 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     this.setState(s => ((s.siteForm.legal_information = Some(val)), s));
   }
 
+  handleTaglineChange(i: SiteForm, index: number, val: string) {
+    i.state.siteForm.taglines.match({
+      some: tls => { tls[index] = val; },
+      none: void 0
+    });
+    i.setState(i.state);
+  }
+
+  handleDeleteTaglineClick(
+    i: SiteForm,
+    index: number,
+    event: InfernoMouseEvent<HTMLButtonElement>
+  ) {
+    event.preventDefault();
+    if (i.state.siteForm.taglines.isSome()){
+      let taglines = i.state.siteForm.taglines.unwrap();
+      taglines.splice(index, 1);
+      i.state.siteForm.taglines = None; // force rerender of table rows
+      i.setState(i.state);
+      i.state.siteForm.taglines = Some(taglines);
+      i.setState(i.state);
+    }
+  }
+
+  handleAddTaglineClick(
+    i: SiteForm,
+    event: InfernoMouseEvent<HTMLButtonElement>
+  ) {
+    event.preventDefault();
+    if (i.state.siteForm.taglines.isNone()){
+      i.state.siteForm.taglines = Some([]);
+    }
+    i.state.siteForm.taglines.unwrap().push("");
+    i.setState(i.state);
+  }
+
   handleSiteApplicationQuestionChange(val: string) {
     this.setState(s => ((s.siteForm.application_question = Some(val)), s));
   }

src/shared/utils.ts

@@ -1525,3 +1525,7 @@ export function nsfwCheck(
         .unwrapOr(false))
   );
 }
+
+export function getRandomFromList<T>(list : T[]) : T{
+  return list[Math.floor(Math.random() * list.length)];
+}