Create post with tags from the UI

app/pkg/web/renderer.go

@@ -213,6 +213,7 @@ func (r *Renderer) Render(w io.Writer, statusCode int, props Props, ctx *Context
 		"baseURL":          ctx.BaseURL(),
 		"assetsURL":        AssetsURL(ctx, ""),
 		"oauth":            oauthProviders.Result,
+		"postWithTags":     env.Config.PostCreationWithTagsEnabled,
 	}
 
 	if ctx.IsAuthenticated() {

public/models/settings.ts

@@ -20,6 +20,7 @@ export interface SystemSettings {
   baseURL: string
   assetsURL: string
   oauth: OAuthProviderOption[]
+  postWithTags: boolean
 }
 
 export interface UserSettings {

public/pages/Home/Home.page.tsx

@@ -78,7 +78,7 @@ What can we do better? This is the place for you to vote, discuss and share idea
         <div className="p-home__welcome-col">
           <VStack spacing={2} className="p-4">
             <Markdown text={fider.session.tenant.welcomeMessage || defaultWelcomeMessage} style="full" />
-            <PostInput placeholder={fider.session.tenant.invitation || defaultInvitation} onTitleChanged={setTitle} />
+            <PostInput tags={props.tags} placeholder={fider.session.tenant.invitation || defaultInvitation} onTitleChanged={setTitle} />
           </VStack>
           <PoweredByFider slot="home-input" className="sm:hidden md:hidden lg:block mt-3" />
         </div>

public/pages/Home/components/PostInput.tsx

@@ -1,15 +1,17 @@
 import React, { useState, useEffect, useRef } from "react"
 import { Button, ButtonClickEvent, Input, Form, TextArea, MultiImageUploader } from "@fider/components"
 import { SignInModal } from "@fider/components"
-import { cache, actions, Failure } from "@fider/services"
-import { ImageUpload } from "@fider/models"
+import { cache, actions, classSet, Failure, navigator, querystring } from "@fider/services"
+import { ImageUpload, Tag } from "@fider/models"
 import { useFider } from "@fider/hooks"
+import { TagsFilter } from "./TagsFilter"
 import { i18n } from "@lingui/core"
 import { Trans } from "@lingui/react/macro"
 
 interface PostInputProps {
   placeholder: string
   onTitleChanged: (title: string) => void
+  tags: Tag[]
 }
 
 const CACHE_TITLE_KEY = "PostInput-Title"
@@ -27,6 +29,7 @@
   const titleRef = useRef<HTMLInputElement>()
   const [title, setTitle] = useState(getCachedValue(CACHE_TITLE_KEY))
   const [description, setDescription] = useState(getCachedValue(CACHE_DESCRIPTION_KEY))
+  const [tags, setTags] = useState<string[]>(querystring.getArray("tags"))
   const [isSignInModalOpen, setIsSignInModalOpen] = useState(false)
   const [attachments, setAttachments] = useState<ImageUpload[]>([])
   const [error, setError] = useState<Failure | undefined>(undefined)
@@ -58,7 +61,7 @@
 
   const submit = async (event: ButtonClickEvent) => {
     if (title) {
-      const result = await actions.createPost(title, description, attachments)
+      const result = await actions.createPost(title, description, attachments, tags)
       if (result.ok) {
         clearError()
         cache.session.remove(CACHE_TITLE_KEY, CACHE_DESCRIPTION_KEY)
@@ -70,6 +73,19 @@
     }
   }
 
+  const handleTagsChanged = (newTags: string[]) => {
+    setTags(newTags)
+
+    navigator.replaceState(
+      querystring.stringify({
+        view: querystring.get("view"),
+        query: querystring.get("query"),
+        tags: newTags,
+        limit: querystring.getNumber("limit"),
+      })
+    )
+  }
+
   const details = () => (
     <>
       <TextArea
@@ -79,6 +95,7 @@
         minRows={5}
         placeholder={i18n._("home.postinput.description.placeholder", { message: "Describe your suggestion (optional)" })}
       />
+      {fider.settings.postWithTags && <div className={classSet({"c-form-field": true})}><TagsFilter tags={props.tags} selectionChanged={handleTagsChanged} selected={tags} /></div>}
       <MultiImageUploader field="attachments" maxUploads={3} onChange={setAttachments} />
       <Button type="submit" variant="primary" onClick={submit}>
         <Trans id="action.submit">Submit</Trans>

public/pages/Home/components/TagsFilter.tsx

@@ -19,7 +19,7 @@ export const TagsFilter = (props: TagsFilterProps) => {
 
   const toggle = (item: Tag) => () => {
     const idx = selected.indexOf(item.slug)
-    const next = idx >= 0 ? selected.splice(idx, 1) && selected : selected.concat(item.slug)
+    const next = idx >= 0 ? selected.filter((x) => x != item.slug) : selected.concat(item.slug)
     setSelected(next)
     props.selectionChanged(next)
   }

public/services/actions/post.ts

@@ -106,8 +106,8 @@ interface CreatePostResponse {
   slug: string
 }
 
-export const createPost = async (title: string, description: string, attachments: ImageUpload[]): Promise<Result<CreatePostResponse>> => {
-  return http.post<CreatePostResponse>(`/api/v1/posts`, { title, description, attachments }).then(http.event("post", "create"))
+export const createPost = async (title: string, description: string, attachments: ImageUpload[], tags: string[]): Promise<Result<CreatePostResponse>> => {
+  return http.post<CreatePostResponse>(`/api/v1/posts`, { title, description, attachments, tags }).then(http.event("post", "create"))
 }
 
 export const updatePost = async (postNumber: number, title: string, description: string, attachments: ImageUpload[]): Promise<Result> => {