Merge pull request #12 from firstcontributions/post-editor

add editor component for story

Author: firstcontributions-bot

package-lock.json

@@ -13,7 +13,15 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@editorjs/code": "^2.7.0",
+    "@editorjs/editorjs": "^2.24.3",
+    "@editorjs/header": "^2.6.2",
+    "@editorjs/image": "^2.6.2",
+    "@editorjs/list": "^1.7.0",
+    "@editorjs/paragraph": "^2.8.0",
+    "@editorjs/table": "^2.0.2",
     "@react-icons/all-files": "^4.1.0",
+    "md5": "^2.3.0",
     "next": "12.0.10",
     "node-fetch": "^3.2.0",
     "react": "17.0.2",
@@ -24,6 +32,7 @@
     "simple-oauth2": "^4.3.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.2",
     "@types/node": "17.0.15",
     "@types/react": "17.0.39",
     "@types/react-relay": "^13.0.1",

package.json

@@ -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!
 }

schema/schema.graphql

@@ -1,20 +1,20 @@
-import { ReactNode } from "react"
+import { ReactNode } from 'react'
 
 type ButtonProps = {
-    children: ReactNode
-    handleClick?: () => void
+  children: ReactNode
+  onClick?: () => void
 }
 
-const Button = ({children, handleClick}: ButtonProps) => {
-    return(
-        <button
-            type="button"
-            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            onClick={handleClick}
-        >
-            {children}
-        </button>
-    )
+const Button = ({ children, onClick: onClick }: ButtonProps) => {
+  return (
+    <button
+      type="button"
+      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
 }
 
-export default Button
+export default Button

src/components/Button.tsx

@@ -1,19 +1,22 @@
 import React, { ReactNode } from "react";
+import Navbar from "./navbar/Navbar";
 
 type LayoutProps = {
-sidebarContentLeft: ReactNode
+sidebarContentLeft?: ReactNode
  children: ReactNode
   sidebarContentRight: ReactNode
 }
 
 export default function Layout ({sidebarContentLeft, children, sidebarContentRight}: LayoutProps) {
     return (
-        <div className="mx-auto bg-gray-100 p-4 px-20">
-        <div className="grid grid-cols-9 gap-10">
+        <div className="mx-auto bg-gray-100 min-h-screen">
+            <Navbar />
+        <div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
+            {sidebarContentLeft && (
             <aside className="col-span-2">
                 {sidebarContentLeft}
-            </aside>
-            <main className="col-span-5">
+            </aside>)}
+            <main className={ sidebarContentLeft ? "col-span-5": "col-span-7"}>
                 {children}
             </main>
             <aside className="col-span-2">

src/components/Layout.tsx

@@ -0,0 +1,6 @@
+export default function Navbar () {
+    return( <div className="flex fixed p-4 w-full bg-blue-400 top-0 z-10">
+        Logo
+        <div>bu</div>
+    </div>)
+}

src/components/navbar/Navbar.tsx

@@ -0,0 +1,116 @@
+import EditorJS, { LogLevels, OutputData } from '@editorjs/editorjs'
+import { Http2ServerRequest } from 'http2'
+import React, { useEffect, useRef, useState } from 'react'
+import { graphql, useMutation } from 'react-relay'
+import Button from '../Button'
+import Card from '../Card'
+import { EDITOR_JS_TOOLS } from './editorTools'
+
+const DEFAULT_INITIAL_DATA = (): OutputData => {
+  return {
+    time: new Date().getTime(),
+    blocks: [
+      {
+        type: 'header',
+        data: {
+          text: 'This is my awesome editor!',
+          level: 1,
+        },
+      },
+    ],
+  }
+}
+
+const getAbstract = (content: OutputData) => {
+  let abstract = ''
+  for (let i = 0; i < content.blocks.length; i++) {
+    if (
+      content.blocks[i].type == 'header' ||
+      content.blocks[i].type == 'paragraph'
+    ) {
+      abstract += content.blocks[i].data.text
+    }
+    if (abstract.length >= 200) break
+  }
+  return abstract
+}
+
+const EDITTOR_HOLDER_ID = 'editorjs'
+
+type EditorProps = {
+  title?: string
+  body?: string
+}
+
+export default function Editor({ title, body }: EditorProps) {
+  const [postTitle, setPostTitle] = useState(title || 'Your Title Goes Here')
+  const ejInstance = useRef<EditorJS | null>()
+
+  const [editorData, setEditorData] = React.useState(
+    (body && JSON.parse(decodeURI(body))) || DEFAULT_INITIAL_DATA
+  )
+  useEffect(() => {
+    if (!ejInstance.current) {
+      initEditor()
+    }
+    return () => {
+      ejInstance?.current?.destroy()
+      ejInstance.current = null
+    }
+  }, [])
+
+  const initEditor = () => {
+    const editor = new EditorJS({
+      holder: EDITTOR_HOLDER_ID,
+      data: editorData,
+      onReady: () => {
+        ejInstance.current = editor
+      },
+      onChange: async () => {
+        const content = await editor.saver.save()
+        setEditorData(content)
+      },
+      autofocus: true,
+      tools: EDITOR_JS_TOOLS,
+      inlineToolbar: true,
+    })
+  }
+  const [commitMutation, isMutationInFlight] = useMutation(
+    graphql`
+      mutation StoryEditorCreateMutation($input: StoryInput!) {
+        createStory(story: $input) {
+          id
+        }
+      }
+    `
+  )
+  const handleStorySubmit = () => {
+    commitMutation({
+      variables: {
+        input: {
+          title: postTitle,
+          contentJson: JSON.stringify(editorData),
+          abstractContent: getAbstract(editorData),
+          urlSuffix: postTitle.toLowerCase().replace(' ', '-').substring(0, 32),
+          thumbnail: '',
+        },
+      },
+    })
+  }
+  return (
+    <Card classes="prose max-w-none">
+      <div>
+        <div id={EDITTOR_HOLDER_ID}> </div>
+      </div>
+      <style jsx>
+        {`
+          [contenteditable]:focus {
+            outline: 0px solid transparent;
+            border-bottom: 1px dashed #aaa;
+          }
+        `}
+      </style>
+      <Button onClick={() => handleStorySubmit()}>Submit </Button>
+    </Card>
+  )
+}

src/components/story/StoryEditor.tsx

@@ -0,0 +1,13 @@
+import Table from '@editorjs/table'
+import List from '@editorjs/list'
+import Code from '@editorjs/code'
+import Image from '@editorjs/image'
+import Header from '@editorjs/header'
+
+export const EDITOR_JS_TOOLS = {
+  table: Table,
+  list: List,
+  code: Code,
+  image: Image,
+  header: Header,
+}

src/components/story/editorTools.ts

@@ -0,0 +1,5 @@
+declare module '@editorjs/table'
+declare module '@editorjs/list'
+declare module '@editorjs/code'
+declare module '@editorjs/image'
+declare module '@editorjs/header'