Create post with tags from the UI

public/pages/Home/Home.page.tsx

@@ -79,7 +79,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,14 +1,16 @@
 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, Failure, navigator, querystring } from "@fider/services"
+import { ImageUpload, Tag } from "@fider/models"
 import { useFider } from "@fider/hooks"
 import { t, Trans } from "@lingui/macro"
+import { TagsFilter } from "./TagsFilter"
 
 interface PostInputProps {
   placeholder: string
   onTitleChanged: (title: string) => void
+  tags: Tag[]
 }
 
 const CACHE_TITLE_KEY = "PostInput-Title"
@@ -26,6 +28,7 @@ export const PostInput = (props: PostInputProps) => {
   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)
@@ -57,7 +60,7 @@ export const PostInput = (props: PostInputProps) => {
 
   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)
@@ -69,6 +72,19 @@ export const PostInput = (props: PostInputProps) => {
     }
   }
 
+  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
@@ -78,6 +94,7 @@ export const PostInput = (props: PostInputProps) => {
         minRows={5}
         placeholder={t({ id: "home.postinput.description.placeholder", message: "Describe your suggestion (optional)" })}
       />
+      <TagsFilter tags={props.tags} selectionChanged={handleTagsChanged} selected={tags} />
       <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

@@ -16,7 +16,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

@@ -93,8 +93,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> => {