save story with createStory mutation

Author: Roshan Jossy

schema/schema.graphql

@@ -12,6 +12,7 @@ type Query {
 	  # The ID of an object
 	  id: ID!
 	): Node
+	feeds(first: Int, last: Int, after: String, before: String): StoriesConnection!
 }
 
 interface Node {
@@ -45,6 +46,35 @@ type BadgeEdge {
 	cursor: String!
 }
 
+type Comment implements Node {
+	abstractContent: String!
+	contentJson: String!
+	createdBy: User!
+	id: ID!
+	reactions(first: Int, last: Int, after: String, before: String): ReactionsConnection!
+	timeCreated: Time!
+	timeUpdated: Time!
+}
+
+input CommentInput {
+	abstractContent: String!
+	contentJson: String!
+	storyID: ID!
+}
+input UpdateCommentInput {
+	id: ID!
+} 
+
+type CommentsConnection {
+	edges: [CommentEdge]!
+	pageInfo: PageInfo!
+} 
+
+type CommentEdge {
+	node: Comment!
+	cursor: String!
+}
+
 type GitContributionStats {
 	issues: Int!
 	pullRequests: Int!
@@ -78,6 +108,31 @@ type IssueEdge {
 	cursor: String!
 }
 
+type Reaction implements Node {
+	createdBy: User!
+	id: ID!
+	timeCreated: Time!
+	timeUpdated: Time!
+}
+
+input ReactionInput {
+	commentID: ID!
+	storyID: ID!
+}
+input UpdateReactionInput {
+	id: ID!
+} 
+
+type ReactionsConnection {
+	edges: [ReactionEdge]!
+	pageInfo: PageInfo!
+} 
+
+type ReactionEdge {
+	node: Reaction!
+	cursor: String!
+}
+
 type Reputation {
 	value: Float!
 }
@@ -86,6 +141,41 @@ input ReputationInput {
 	value: Float!
 }
 
+type Story implements Node {
+	abstractContent: String!
+	comments(first: Int, last: Int, after: String, before: String): CommentsConnection!
+	contentJson: String!
+	createdBy: User!
+	id: ID!
+	reactions(first: Int, last: Int, after: String, before: String): ReactionsConnection!
+	thumbnail: String!
+	timeCreated: Time!
+	timeUpdated: Time!
+	title: String!
+	urlSuffix: String!
+}
+
+input StoryInput {
+	abstractContent: String!
+	contentJson: String!
+	thumbnail: String!
+	title: String!
+	urlSuffix: String!
+}
+input UpdateStoryInput {
+	id: ID!
+} 
+
+type StoriesConnection {
+	edges: [StoryEdge]!
+	pageInfo: PageInfo!
+} 
+
+type StoryEdge {
+	node: Story!
+	cursor: String!
+}
+
 type User implements Node {
 	avatar: String!
 	badges(first: Int, last: Int, after: String, before: String): BadgesConnection!
@@ -98,6 +188,7 @@ type User implements Node {
 	name: String!
 	relevantIssues(first: Int, last: Int, after: String, before: String): IssuesConnection!
 	reputation: Reputation!
+	stories(first: Int, last: Int, after: String, before: String): StoriesConnection!
 	timeCreated: Time!
 	timeUpdated: Time!
 }
@@ -112,13 +203,20 @@ input UserInput {
 }
 input UpdateUserInput {
 	id: ID!
+	avatar: String
 	bio: String 
 	gitContributionStats: GitContributionStatsInput
 	name: String 
 	reputation: ReputationInput
 }
 
 type Mutation { 
+	createComment(comment:CommentInput!): Comment! 
+	updateComment(comment: UpdateCommentInput!): Comment! 
+	createReaction(reaction:ReactionInput!): Reaction! 
+	updateReaction(reaction: UpdateReactionInput!): Reaction! 
+	createStory(story:StoryInput!): Story! 
+	updateStory(story: UpdateStoryInput!): Story! 
 	createUser(user:UserInput!): User! 
 	updateUser(user: UpdateUserInput!): User!
 }

src/components/editor/Editor.tsx renamed to src/components/editor/StoryEditor.tsx

@@ -1,8 +1,8 @@
 import EditorJS from '@editorjs/editorjs'; 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import Header from '@editorjs/header'
+import React, { useEffect, useRef, useState } from 'react';
+import { graphql, useMutation } from 'react-relay';
 import Card from '../Card';
-
+import { EDITOR_JS_TOOLS } from './editorTools';
 
 const DEFAULT_INITIAL_DATA = () => {
   return {
@@ -45,22 +45,37 @@ export default function Editor () {
           ejInstance.current = editor;
         },
         onChange: async () => {
-          let content = await this.editorjs.saver.save();
+          let content = await editor.saver.save();
           // Put your logic here to save this data to your DB
           setEditorData(content);
         },
         autofocus: true,
-        tools: { 
-          header: Header, 
-        }, 
+        tools: EDITOR_JS_TOOLS, 
+        inlineToolbar: true,
+        placehodler: 'water'
       });
     }; 
+    const [commitMutation, isMutationInFlight] = useMutation(
+        graphql`
+          mutation StoryEditorCreateMutation($input: StoryInput!) {
+            createStory(story:$input) {
+              id
+            }
+          }
+        `
+    );
     const handleStorySubmit = () => {
         console.log(postTitle)
+        console.log(editorData)
+        commitMutation({
+            variables: {
+              input: {title: postTitle, contentJson: JSON.stringify(editorData), abstractContent: '', urlSuffix: '', thumbnail: ''},
+            },
+        })
     }
     return (
         <Card classes="prose">
-        <h2 contentEditable  onInput={(e) => setPostTitle(e.target.textContent)}>{postTitle}</h2>
+        <h1 contentEditable  onInput={(e) => setPostTitle(e.target.textContent)}>{postTitle}</h1>
         <div> 
           <div id={EDITTOR_HOLDER_ID}> </div>
         </div>

src/pages/story.tsx

@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic'
 import Layout from '../components/Layout'
 
-const Editor = dynamic(() => import('../components/editor/Editor'))
+const Editor = dynamic(() => import('../components/editor/StoryEditor'))
 export default function Story () {
     return (
         <div>