shout create

src/components/Views/Create.tsx

@@ -47,8 +47,21 @@ export const CreateView = () => {
     setTopics(allTopics)
   })
 
-  const handleFormSubmit = (e) => {
+  const handleFormSubmit = async (e) => {
     e.preventDefault()
+
+    const newShout = await apiClient.createArticle({
+      article: {
+        slug: form.slug,
+        title: form.title,
+        subtitle: form.subtitle,
+        body: form.body,
+        topics: form.selectedTopics.map((topic) => topic.slug),
+        mainTopic: form.selectedTopics[0].slug
+      }
+    })
+
+    router.open(getPagePath(router, 'article', { slug: newShout.slug }))
   }
 
   const handleTitleInputChange = (e) => {

src/graphql/mutation/article-create.ts

@@ -5,13 +5,13 @@ export default gql`
     createShout(inp: $shout) {
       error
       shout {
-        _id: slug
+        id
         slug
         title
         subtitle
         body
         topics {
-          # id
+          id
           title
           slug
         }

src/stores/router.ts

@@ -67,7 +67,7 @@ const handleClientRouteLinkClick = (event) => {
         }
 
         const anchor = document.querySelector(selector)
-        const headerOffset = 80 // 100px for header
+        const headerOffset = 80 // 80px for header
         const elementPosition = anchor ? anchor.getBoundingClientRect().top : 0
         const newScrollTop = elementPosition + window.scrollY - headerOffset
 

src/utils/apiClient.ts

@@ -14,7 +14,8 @@ import type {
   ProfileInput,
   ReactionInput,
   Chat,
-  ReactionBy
+  ReactionBy,
+  Shout
 } from '../graphql/types.gen'
 import { publicGraphQLClient } from '../graphql/publicGraphQLClient'
 import { getToken, privateGraphQLClient } from '../graphql/privateGraphQLClient'
@@ -234,10 +235,10 @@ export const apiClient = {
     const response = await publicGraphQLClient.query(topicBySlug, { slug }).toPromise()
     return response.data.getTopic
   },
-  createArticle: async ({ article }: { article: ShoutInput }) => {
+  createArticle: async ({ article }: { article: ShoutInput }): Promise<Shout> => {
     const response = await privateGraphQLClient.mutation(createArticle, { shout: article }).toPromise()
     console.debug('[createArticle]:', response.data)
-    return response.data.createShout
+    return response.data.createShout.shout
   },
   createReaction: async (input: ReactionInput) => {
     const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise()